Add an amazing shadow featured posts widget with thumbnail in blogger
Now I am going to tell you that how can you add an amazing featured post widget in your blogger blog. This widget is really easy to install and all properties are adjustable. There are no need to preadjust your images width and height. Only add the link of images and title links and enjoy. You can add number for posts whatever you want. Now take a look what you are going to do...
Screenshot:
Steps:
Adding Style:
1. Go to Dashboard and click on the Template at the left side bar.
2. Backup your template for security.
3. Click on the Edit HTML and Tick on Expand widget templates.
4. Now press Ctrl+F to open search interface and find the code given below.
]]></b:skin>
5. Now add the code given below just before the above code.
<!--tecnocarebd featured post box style start-->
<style type='text/css'>
#outer-wrapper {width: 680px;margin: 0px;background:none;float: left;border: 0px solid;}
#tcbox {width:160px;margin:5px 5px 5px 5px;float: left;position: relative;}
.tcbox-wrapper{background:#fff;-moz-box-shadow:0 0 10px #000;border:8px solid #fff;text-align:left;font-family:Arial;margin:5px 5px 5px 5px;padding:8px;height:150px;box-shadow:0 0 7px #0A2A29;-moz-box-shadow:0 0 7px #0A2A29;-webkit-box-shadow:0 0 7px #0A2A29;border:0px solid #0A2A29;}
.tcbox-wrapper:hover{background:#99B2FF;}
.tcbox img {margin:5px auto; float: left;}
#tcbox h2 {font-size: 12px;color: #003366;font-family: Arial;text-align: center;}
#tcbox h2 a{color: #003366;text-decoration: none;}
#tcbox h2 a:hover{color: #ff9c01;}
#tc-credit a{font-size: 11px;font-style: italic; float: right;margin-right: 10px;text-decoration: none;}
#tc-credit a:hover{color:#ff9c01;}
</style>
<!--tecnocarebd featured post box style start-->
Note: Adjust the Red marked to adjust your template which proportionally decrease the each post box width which is mentioned in Orange color.
6. Now Save the template.
Adding gadget:
7. Go to Layout section.
8. Click on Add a gadget.
9. Now paste the code given below.
<!--technocarebd featured post code start-->
<div id='outer-wrapper'>
<div id='tcbox'>
<div class='tcbox-wrapper'><img width='135px' height='95px' src="YOUR IMAGE LINK1"><h2><a href="YOUR POST LINK1">YOUR POST TITLE1</a></h2></div>
</div>
<div id='tcbox'>
<div class='tcbox-wrapper'><img width='135px' height='95px' src="YOUR IMAGE LINK2"><h2><a href="YOUR POST LINK2">YOUR POST TITLE2</a></h2></div>
</div>
<div id='tcbox'>
<div class='tcbox-wrapper'><img width='135px' height='95px' src="YOUR IMAGE LINK3"><h2><a href="YOUR POST LINK3">YOUR POST TITLE3</a></h2></div>
</div>
<div id='tcbox'>
<div class='tcbox-wrapper'><img width='135px' height='95px' src="YOUR IMAGE LINK4"><h2><a href="YOUR POST LINK4">YOUR POST TITLE4</a></h2></div>
</div>
<!--you don't have permission to remove the code below-->
<div id='tc-credit'><a href="http://technocarebd.blogspot.com/2013/02/add-amazing-shadow-featured-posts.html">Get this gadget</a></div>
</div>
<!--technocarebd featured post code end-->
Note: Replace Red color with your image links, Green to your post link and Blue to your post title.
10. Now Save the gadget. Now check it out.
Categories:
blog,
Blogger,
computer,
tips and tricks,
tutorial
0 komentar:
Posting Komentar