Hi friends now add best animated style social bookmarking widget in blogger sidebar easily.
Follow simple and easy step to adding this social widget in your blogger blog---->>>>
* First go to your blogger Dashboard.
* 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 easily.
* Copy below code and paste before ]]</b:skin>
#social-box {
overflow:hidden;
}
#social-box ul li {
display:block;
background:#EBF4FB;
border:#b6daf6 1px solid;
padding:10px;
-moz-border-radius: 6px;
border-radius: 6px;
margin-bottom:10px;
}
#social-box ul li:hover {
border:#276dc1 1px solid;
background:#d3e6f5;
}
.soc-icons-bar {
list-style:none;
margin:0px 0 0px;
padding:0
}
.soc-icons-bar a {
font:18px Arial, Helvetica;
padding:4px 28px 16px 43px;
background:none;
text-decoration:none;
font-weight:bold;
text-shadow:1px 1px #fff;
}
.soc-icons-bar a:hover {
color:#276dc1;
}
.soc-icons-bar li{
display:block;
padding:5px 10px 5px 0;
height:25px;
background:none;
}
.soc-icons-bar li.tw a{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI8prMb1ZxxvnYVL1LlVqxiuqwFHnfD1FsBWvKXEF0xfdys9R68W0zUwhxArZ1aRwhg0HW35ItAqDrWH5uzM8x2Yd10yOElt_rTfUQHRpFVZtpyYoJ8LFaF0UTYkFVdTe-1P-ZRm5faq0/) no-repeat scroll 0 0}
.soc-icons-bar li.fb a{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9MLBBF7LWdUtt9Uegcd0Zb_jV8UjCcZ2a_D30Ez59_PgTTBV_cfMA__k_d3mI0CtuwBFwpNIvOEkfc2y3VR7XsT412RNz0OGJHOPkV3_vJ4xwdv__Xgm8sCPjibkOigNAwSvlxxPbrqQ/) no-repeat scroll 0 0}
.soc-icons-bar li.rss a{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSVXTPFl6VvHYul-7Jav-4jrmMWaJ-stTsHYOfmtECKya4MEE1ZpvKUFyqw5ksMUH0v33cQDbT1Mpj-0g99p6JzPnpTNUp6hjliVu3S0gQ7QBaegJ_9U0LpyqCIyfjDLbHm-yx-L3zYVc/) no-repeat scroll 0 0}
.soc-icons-bar li.email a{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiunFoD-mD9558e1avYwAmd4QjCU0u2pF3-2AEY6GwiJNv1xeNFTlI9NDKvgqRcQ11XwjRhdKNNoaqvK5MGgXvmACqZkrMegD52ydtWAi_pE4-oYpWwoKWadzXfLAOEzMq0srtdWqjvqhY/) no-repeat scroll 0 0}
#sidebar-banners img {
margin-bottom:5px;
}
* Now save your blogger template .
* Again go to your blogger dashboard.
* Click in design tab and you are here--->>> Page element.
* Click in add Gadget which is in sidebar and when open new window click in HTML/javascript from list.
* And when open new blank box copy below code and paste in blank box.
<!-- Subscribe Options --> <div id='social-box'> <ul class='soc-icons-bar clearfix'> <li class='rss'><a href='YOUR FEEDBURNER URL HERE'>Subscribe via RSS</a></li> <li class='tw'><a href='YOUR TWITTER URL HERE' title='Spread the word on Twitter!'>Follow us on Twitter</a></li> <li class='email'><a href='YOUR FEEDBURNER EMAIL URL HERE'>Subscribe via Email</a></li> </ul> </div> <!-- End of #social-box -->
NOTE:- Change Highlighted text in above code with your own ok.
* Now click to save your HTML/Javascript and now you are done.
|
0 Responses So Far: