Hi friends now add super fading effect bookmarking buttons below all blog post easily.
PREVIEW:-
Follow simple and easy step to adding this fading style widget in your blogger ---->>>>
* First go to your blogger Dashboard.
* Now click in design tab and edit HTML.
* Click in small box to expand your blogger Template.
* Now find this code ]]</b:skin> by CTRL+F key.
* Copy below code and paste before ]]</b:skin>
PREVIEW:-
Follow simple and easy step to adding this fading style widget in your blogger ---->>>>
* First go to your blogger Dashboard.
* Now click in design tab and edit HTML.
* Click in small box to expand your blogger Template.
* Now find this code ]]</b:skin> by CTRL+F key.
* Copy below code and paste before ]]</b:skin>
/* SOCIAL ICONS - by www.bloger9.com */
.social { list-style:none; margin:20px auto; }
.social li { display:inline; float:left; background-repeat:no-repeat; }
.social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999;
text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
-moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
li.delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5p-isByZPSkF3cAkjdOp_TXXIPQVndIF9bbr1UMLS26Vdk3sJ9CZIk6h3SEB_YvsRoHqOa3MET1GjlX4AkxjHLctJUNzkDoYI75QQvB8Q7PzCH8wmqqeUZ018MJEVcjqIrFhyphenhyphenqMgC5QeI/s1600/delicious.png")
; }
li.digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh74MGSaBqnQpovBkVP767Unl1aArBPB3HcVDLUXFo0zySmnMUBovK3yH_7e8pBb3-MWXZxK2ftp1OQajNxsK5a_wME4H_0U4pGu7aAPDy2h3jQc-VQqr9piru3R_UNjkTaGxzDUkHW-vsQ/s1600/digg.png"); }
li.facebook {background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-TgrZoUTbpYsLdPygyvTvEWejY4hptZVj1yIdJnTsnIFxdMipevQZYf-ez4oX6-7eyaVUNA9Zv4b_smGxXbMlnmBSu9GjWewM0wULBGxh9pHWTNUQGIonv6iwmv5ApBmiKAIufUCfiLvB/s1600/facebook.png"); }
li.flickr {background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW0CVvrlGvj0_m1qJDTgOpSLkiXgw19LL3fgxIq9ZC8EFbXpoyKrTmOIwNBXFT0meike8HylFLXefXaQb3ZIXX4FFB_PV0FRonsbf46s3hvH_K0iyL8VVcqjU8UYNaD5tnrd_pPC4nux-a/s1600/flickr.png"); }
li.linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuSn6k9ypGF7-9VcpMu40pniFV6bUQsOJWX38qDJIgMyu9JvCLUtNYBUqmsNXIXhom8DUtge6vVURP2sj874bJBF7CoOl6X60aCn2hAuhA8aoikoIR49ZWE8CUT-V9Wm45s-fpp6q-Tyz6/s1600/linkedin.png"); }
li.reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrwlL1f0cFWM08w-G-YOAfoTVzki40PC3uuAUeT2t0n2LXOHS0RwSOB0oXwlUF-8g5nnitaxU80E7FdlIt_F-N9JtoWRmdTHNDU0O6vRICORxJIw0DNzyOyftj5HepO_5r3ibCXdXTESta/s1600/reddit.png"); }
li.rss { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5B-Cncs1lzVLH8Y8m3pdGRdL4vbjBCtya9IpatMxjdra9poTCAwAV8rg-wR58L_v5mx2g1IQazRonn2sszB700-U4qmuHsVCF6fAP0WXzsgcF10a6pP8KJKvN8iCRS4-fxURAfiBO6Ma3/s1600/rss.png"); }
li.twitter {background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRky2-jHryDSGTXMWVNnrhDPMjNECXkPoDiapOtDcvo4RYxnAhxi2DxFiVbCG8aCYPDxubwuz7_IahJ2Of4DwMzGkeWyK_D4pum9dmTc9ugXPCaIWbxhxf4YwAu1K9f7lXkzcAScRcOC8u/s1600/twitter.png");}
.social {margin: 10px auto 10px; display:block; padding: 3px 0 1px 0px; overflow: hidden; }
.social .social_button {float: left; display: inline; overflow: hidden; height:22px; margin: 0 5px 0 5px;}
.social .social_button a img { border: 0; padding: 0; }
.social strong { font-size: 11px; float: left; margin:2px 0 0 0; color:#555;}
.clear{clear:both;}
.bulletnumber{border:none !important;padding:0;}
.post_social_bookmark
{
background:url("http://www.wpmods.com/wp-content/themes/wpmods.com/images/share.gif") no-repeat scroll left top #F9FAEB;
border-bottom:1px solid #CBD66D;
border-top:1px solid #AAAAAA;
float:left;
padding:40px 10px 10px !important;
width:570px;
margin-top:5px;
}* Again find </head> by CTRL+F key now.
* And copy below code and paste before </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/JavaScript'>
$(document).ready(function()
{
// Hide all the tooltips
$("#jquery li").each(function() {
$("a strong", this).css("opacity", "0");
});
$("#jquery li").hover(function() { // Mouse over
$(this)
.stop().fadeTo(500, 1)
.siblings().stop().fadeTo(500, 0.2);
$("a strong", this)
.stop()
.animate({
opacity: 1,
top: "-10px"
}, 300);
}, function() { // Mouse out
$(this)
.stop().fadeTo(500, 1)
.siblings().stop().fadeTo(500, 1);
$("a strong", this)
.stop()
.animate({
opacity: 0,
top: "-1px"
}, 300);
});
});
</script>
* Now again find this code <data:post.body/> by CTRL+F key easily.
* Copy below code and paste after <data:post.body/>
<div class='post_social_bookmark'> <ul class='social' id='jquery'> <li class='delicious' style='opacity: 1;'><a href='http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow'' target='_blank'><strong style='opacity:0; top: -1px;'>Delicious</strong></a></li> <li class='digg' style='opacity: 1;'><a href=' http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><strong style='opacity:0;'>Digg</strong></a></li> <li class='facebook' style='opacity: 1;'><a href=' http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><strong style='opacity:0;'>Facebook</strong></a></li> <li class='flickr' style='opacity: 1;'><a href='http://www.flickr.com/'><strong style='opacity:0;'>Flickr</strong></a></li> <li class='linkedin' style='opacity: 1;'><a href='http://www.linkedin.com/'><strong style='opacity:0;'>LinkedIn</strong></a> </li> <li class='reddit' style='opacity: 1;'><a href=' http://www.reddit.com/submit?&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><strong style='opacity:0;'>Reddit</strong></a></li> <li class='rss' style='opacity: 1;'><a href='YOUR FEEDBURNER URL HERE'><strong style='opacity:0;'>RSS</strong></a></li> <li class='twitter' style='opacity: 1;'><a href=' http://twitthis.com/twit?url=" + data:post.url' rel='external nofollow' target='_blank'><strong style='opacity:0;'>Twitter</strong></a></li> </ul> </div>
Note:- Remove highlighted Text in above code with your own Feedburner URL ok.
* Now click to save your blogger Template. and now you are done.
|
0 Responses So Far: