example of widget |
Step 1:
1. Click Design and then Edit HTML from blogger Dashboard
2. Click in the left side box to Expand Widget Templates
3. Find this - ]]></b:skin> and past the bellow code just before
#subscribe { background:#f3f3f3; width:308px; padding:8px 5px; border:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6; font-size:8px; }4. Save it
.subscribe_icons { width:286px; margin:0px auto; }
.subscribe_icons li { display:inline; float:left; margin:0px 2px 5px 2px; width:52px; text-align:center; font-size:11px; }
.subscribe_icons a { display:block; padding:40px 0px 2px; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; color:#444 !important; }
.subscribe_icons a:hover { color:#26b !important; text-decoration:none; -moz-box-shadow:0px 2px 4px hsla(0,0%,0%,.35); -webkit-box-shadow:0px 2px 4px hsla(0,0%,0%,.35); }
.subscribe_icons .subscribe_buzz a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRg5Wi5qg5be9LOimG4LwZ62e6kNDIzbbBHgNeuOfH-oZTgv36EGaTelQGZdfhAIwpXAC6rZ0JftXbKR2-NEWciHugXZJRESw8GokktwjDdTez-bG9qoadrnFsZK7u4HvYErBy_AbqaWs/s1600/buzz.png) center top no-repeat; }
.subscribe_icons .subscribe_twitter a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVC7uCmEv0ZVxyE9_gWkjgfoWZ4MIhBRCIsg9LbEcE0q-cxIrGelwh5L8YZom9_ae6mVqoddAwBIV8q6rVv9o-yKOdsrywgb2A04Z9V76pfbBdvcvTF3qXgKFXppFnpvLbXz8HvDZaJ00/s1600/twitter1.png) center top no-repeat; }
.subscribe_icons .subscribe_facebook a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkulCqr7HXur6WyA62EjZ3UjnfbaVdJV5GTP4W677tywSyIbwSRQyx_5Aa6lsZZmr8_dEEJ1gfJn5PDHw8v_bd3mmKUwLgHEi7q0D-dWghqXrjZmIvgSv-QeUnsHWe5d-5GTQ-ILs4Ohs/s1600/facebook1.png) center top no-repeat; }
.subscribe_icons .subscribe_rss a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKYhpM5XBprj_b3foKRURdkrjyjn7jaiY1KBwD5mAtJMsHu3apm5pZyBHVnMNUBnP0MfNgs5nCCvilyVCaXjUVIxC5qHzWChHiK4ufdBxeTMIg401AFRGU-C8eKhn6pP1_ZXV2BIrH7sk/s1600/rss1.png) center top no-repeat; }
.subscribe_icons .subscribe_email a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7wua7mtb2Cb_40u0Sqyvv_6ey76jyGjFYaFUR-VXb0eNYohjOrX70f3QWw-_jG0nHx2YWzzG_c1bz7RRVkHr6g3GzZMwmF5GomywXsvwscmRzBOo1GWJVWm0ykqPtxamvn8qJpgUAlgU/s1600/email.png) center top no-repeat; }
Step 2:
1. Now go to the Page Element which you will find in left side of Edit HTML
2. From the right side click Add a Gadget to add a HTML/Javascript box .
3. In the HTML/Javascript box paste the code given bellow :
<div id="subscribe">4. Save it and see how it look like. If anything need about this post pls comment. I will try to help you.
<ul class="subscribe_icons">
<li class="subscribe_buzz"><a href="http://google.com/profiles/techwev" rel="nofollow" target="_blank">Buzz</a></li>
<li class="subscribe_twitter"><a href="http://twitter.com/techwev" rel="nofollow" target="_blank">Twitter</a></li>
<li class="subscribe_facebook"><a href="http://www.facebook.com/techwev" rel="nofollow" target="_blank">Facebook</a></li>
<li class="subscribe_rss"><a href="http://feeds.feedburner.com/techwev" rel="nofollow" target="_blank">RSS</a></li>
<li class="subscribe_email"><a href="http://feedburner.google.com/fb/a/mailverify?uri=techwev&loc=en_US" rel="nofollow" target="_blank">Email</a></li>
</ul>
<div class="clear">
</div>
</div>
0 comments:
Post a Comment