Widgets are the important part of any blog without widgets blog is useless and not attractive so if you compare two blogs one with widget installed and one without any widget you will see huge difference in both blogs. Difference of performance, appearance and user friendly these are the main difference which you can find in both blogs. Today i am going to show you new widget for bloggers its user friendly, Design is beautiful and it has almost 3 features. User can share your post, user can subscribe to your blog, user can like you Facebook fan page. Try this in your blog i know you will like it.
You can see Live Demo on this Blog
How to Put this Widget in Blogger
- 1)- Go to Blogger Dashboard > Design > Edit HTML
- 2)- Tick the Expand Widget check box
- 3)- Now Press Ctrl + F and find
]]></b:skin>
- 4)- Now past this code above ]]></b:skin>
#Bluekut_Box{
width:585px;
height:126px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtuVhn5E56czPL1BI8NtpdkpuCbo5K5_M0MQz29YdF8ezDves4w3CaAvOizndPh5ENOXdYI3VFo4VoTPpLCc2BqehgDVNMat116NkoH7BDvyIPGHXdiifBFPOL5P16rn37J4o5O8OOesGk/s1600/share-bgnew.png) no-repeat;
margin: 10px 0 0 0;
padding:0;
}
#share-with-friends{
width:195px;
height:126px;
padding-top:19px;
float:left;
text-align:center;
}
#respond-to-writer{
width:195px;
height:126px;
padding-top:10px;
float:left;
text-align:center;
}
#like-us{
width:195px;
height:126px;
padding-top:19px;
float:left;
text-align:center;
}
.share-icons{
width: 175px;
height:25px;
margin:auto;
margin-top:17px;
}
.share-icon{
margin-left:3px;
margin-right:3px;
}
.respond-author{
margin-top:11px;
}
.more-author{
margin:0;
font-family:Arial;
font-size:12px;
padding-top:10px;
}
.more-author a{
text-decoration:none;
color:#e1281e;
}
.more-author a:hover{
text-decoration:underline;
}
.facebook-like{
position:relative;
left:35px;
top:-15px;
}
.button {
-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
box-shadow:inset 0px 1px 0px 0px #f29c93;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fc1900), color-stop(1, #302222) );
background:-moz-linear-gradient( center top, #fc1900 5%, #302222 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fc1900', endColorstr='#302222');
background-color:#fc1900;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
display:inline-block;
color:#ffffff;
font-family:Arial Black;
font-size:14px;
font-weight:bold;
padding:5px 19px;
text-decoration:none;
text-shadow:-14px -2px 9px #b23e35;
}.button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #302222), color-stop(1, #fc1900) );
background:-moz-linear-gradient( center top, #302222 5%, #fc1900 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#302222', endColorstr='#fc1900');
background-color:#302222;
}.button:active {
position:relative;
top:1px;
}
#b_link {
width:585px;
text-decoration:none;
color:#FFF;
}
#b_link a {
text-decoration:none;
color:#FFF;
}
//*Ultra post footer widget End*//
- 5)- Click on Save Template
- 6)- Now find </head> tag
- 7)- Past this code above </head> tag
<script type='text/javascript'>var switchTo5x=false;</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: "ur-c5221477-ace0-9052-a858-cafca172e7b"});</script>
- 8)- Now Find <div class='post-footer'>
- 9)- Past this code below <div class='post-footer'>
<div id='Bluekut_Box'><div id='b_link' align="right"><a href="http://d4zone.blogspot.com/2012/11/ultra-blogger-post-footer-widget.html"><small>Get This widget</small></a></div>
<div id='share-with-friends'>
<img alt='Share This Article with Friends' border='0' class='share-header' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi__940OX2DL56lhovrjf2sLKDM1SgiYEgz8RqxZrylnSRNyLgJXazrXIOo1KPn1wbPK2IE76qUTWZmT2T3CzN05vH2bLIRckKkR17jwYRtarB8Wn2M40gWYDVZMb-LS5OoWhxtRE8NON4/s320/share-this-article-with-friends.png'/>
<div class='share-icons'>
<span class='st_facebook_large' displayText='Facebook'/>
<span class='st_twitter_large' displayText='Tweet'/>
<span class='st_email_large' displayText='Email'/>
<span class='st_sharethis_large' displayText='ShareThis'/>
</div>
</div>
<div id='respond-to-writer'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=d4zone', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<img alt='Share This Article with Friends' border='0' class='share-header' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVisF93dQsHwUE0tUdO-oR09TEaES1TBRydD-m1xCkvCcTMe0WUdT95-lH3Txgjo7kcQ07OIY_afh7db5fC-b23fwu-Rgbib_GR8XuL8e5yW_kXxmlbqOADIXGrxZuYIfpP8CJNlhUPiEt/s320/subscribe+Now.png'/><p><input name='email' style='width:140px' type='text'/></p><input name='uri' type='hidden' value='d4zone'/><input name='loc' type='hidden' value='en_US'/><input class='button' type='submit' value='Subscribe'/></form>
</div>
<div id='like-us'>
<img alt='Like us on Facebook' border='0' class='share-header' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-fF-zVybnazl_PMdayGPgn-NhWvu2NbY20vY4AYwwNKc1CwBOScHPDP51HqLH0NRZj99n0o45BV-GnrskqyT_vB_sgjyeOk0DZpQvDTZQ102PwBw3GmSdoQsZ-fJuIHR3FIKGf3y6rvi8/s320/like-us-on-facebook.png'/>
<iframe allowTransparency='true' class='facebook-like' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fd4zone&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=light&font&height=21&appId=136202409811394' style='border:none; overflow:hidden; width:100px; height:21px;'/>
</div>
</div>
- 10)- Now Change Red Bold letters with your data
- 11)- Save Template
No comments:
Post a Comment