0

CSS3 HTML5 Amazing Blogger widget

Saturday, February 2, 2013
Today i am going to share with you a different CSS3 and HTML5 blogger widgets. This widget is very unique and has not shared on any other blog or website so i am telling you the procedures of putting it, into your blog. Just follow the simple steps below and add the gadget into your blogger.

Below is the procedure of  how to add widget in your blogger.


  1. Sign-in to your blogger account.
  2. Then click on your blogger settings.
  3. Then click on Layout.
  4. Then click on Add a gadget button.
  5. Then click on add a html code.
  6. Then paste this below code into that box and just save.
  7. Yes, your are done now save your settings and view your blog.
  8. You just have to edit your social networks links with the below highlighted links.
  • Here is the code:
 <div class="widget HTML" id="HTML5">
<h2 class="title">Subscribe Us</h2>
<div class="widget-content">
<div id="mbl-social-hover">

<div id="links"><a href="http://twitter.com/meme_football" class="twitter" title="Twitter" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKX2JoBibufZyWtxry-8cJ03_2ktK83lLB_cgj7eCBUN7airZI9GYmE424H9htIdNVWM2E6MCRXW30MPzr8lCCC3ydNChO3F3ApirvF1BKcc61KzGSsTHVwXBkIfHFdmN7AyBadqmASkY/s1600/twitter.png" /></div></a>

<a href="http://www.facebook.com/letsfooty" class="facebook" title="Facebook" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSnXbprvZdEfiXtRQPtKSWQPFHd_ReCMxA91oLe4XVoIapM-pK0LFuHaBUdasJZLEJczzvX_nMwMXVzv0tkIiJ5n-0t2YN5NY-An3r7nT4df0z_hf5aS5jd7v05plFPOgnAeJP1eroaCk/s1600/FB.png" /></div></a>

<a href="https://plus.google.com/u/0/109559389436018660745/posts" class="google" title="Google Plus" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQV-RVN7aUqcKSOeSSqKOPOSYL3b5-2SxThuGQicv2X6uFovF-gmGmC4FCCkTG28QbRsCg8cnJtngp_JVCh0Xv9ZGYN22hnihZ4hQv_ovKtpnUnMbUopj5iVPdxmDF8tSf_NH8ZHCQOFQ/s1600/google.png" /></div></a>

<a href="http://pinterest.com/footballmemes/" class="pinterest" title="Pinterest" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkgGhyRRq2PiNEs3rawSDak-4kHiDh9GuBvK8W0rp242jqOvzOHVViWjbQo-P_9Jb8L1gs7DU_9yVF56dD1LebSjV1iXJc3q_q9Mq_Z49e63NTz68G68YCmweVfwwo88VFs8D4xglhUE4/s1600/pin.png" /></div></a>

<a href="http://feeds.feedburner.com/yourlink" class="rss" title="Feedburner" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj15ELZBV_BqYGo_2EjmPWgfRrfJBcbvBo3wTZ9b0l4oL3PbyAxv4hVwnIcQBBktZjTC7y_jfVaaep3atBzMg7MkV6h_DZjpiobP4V5CWp5trW4MwTSqiNp8RaRAAuyW0acWTMqStKfiZc/s1600/rss.png" /></div></a>
</div></div>

<style>.tota2 { margin-left:15px; margin-top:10px;}.tota { margin-top:7px; }#mbl-social-hover{position:relative;width:240px;height:215px;background:#554e4c url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5fTQ8_a8u5ykTJQTyIhJ_swFrEzOmRncyfi_6bKcA5sBY1ERTGU_Sn4DzV-bjDmj3yY10eKSpIdrbDcSvLe0QM0mAq1ks7Mgy02nQp0CijRE_brPNCzHmrWKvUANbj07N-ee8npi89ZY/s1600/vintage.png");}#mbl-social-hover #title{font-family:'Open sans';font-size:28px;color:#fff;font-weight:600;margin:30px 20px 0;text-align:center;line-height:1.1em;text-shadow:1px 1px 1px rgba(0,0,0,0.3);}#mbl-social-hover #title span{display:block;font-size:14px;line-height:1.5em;margin-top:10px;font-weight:400;}#mbl-social-hover #links{position:absolute;bottom:0;width:100%;}#mbl-social-hover a{display:block;padding:0 20px;height:42px;line-height:42px;color:#fff;font-size:12px;background:rgba(41,39,39,0.08);border-top:1px solid #292727;border-top:1px solid rgba(0,0,0,0.1);-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}#mbl-social-hover a:hover{background:rgba(0,0,0,0.15);text-decoration:none;}#mbl-social-hover a.twitter:hover{background:#79dbff;}#mbl-social-hover a.facebook:hover{background:#6e9bee;}#mbl-social-hover a.google:hover{background:#00be00;}#mbl-social-hover a.pinterest:hover{background:#cb2027;}#mbl-social-hover a.rss:hover{background:#ffae42;}#mbl-social-hover a span{height:15px;line-height:15px;width:15px;text-align:center;margin-right:20px;font-size:13px;padding:5px;border-radius:99px;background:rgba(0,0,0,0.1);}#home-tagline{text-align:center;font-size:32px;color:#000;font-weight:300;margin:60px 0 40px;}#home-tagline strong{color:#ff5421;font-weight:300;}#home-highlights{margin-bottom:40px;}.home-highlight{float:left;width:142px;padding:30px 0;margin-right:21px;text-align:center;font-size:13px;display:block;opacity:0.9;color:#4E4948;font-size:40px;background:#e2e0df;background:rgba(0,0,0,0.04);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight p{margin:0;}.home-highlight:hover{color:#3a3534;text-decoration:none;background:rgba(0,0,0,0.1);}.home-highlight-title{font-size:13px;margin:7px 0 0;text-align:center;color:#4C4A49;cursor:pointer;font-weight:900;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight:hover .home-highlight-title{color:#3a3534;}#home-featured{min-height:400px;margin-bottom:37px;}#home-featured .home-divider{margin-top:0;}#home-featured h2{text-align:center;font-size:32px;color:#161414;font-weight:300;margin:0 0 40px;}#home-featured h2:after{display:block;content:"";width:342px;margin:0 auto;height:1px;background:#161414;margin-top:5px;}.featured-theme-entry-content{font-size:16px;float:left;width:430px;font-weight:300;}.featured-theme-entry-content h3{font-size:21px;line-height:1.4em;margin:0;font-weight:400;}.featured-theme-entry-content .button{margin-top:15px;}.featured-theme-entry-content .button:hover{background:#f5634a;opacity:1;}.featured-theme-entry-img{display:block;float:right;margin-right:5px;}.featured-theme-entry-img a{display:block;padding:6px;background:#fff;border-radius:2px;}#featured-theme-slider .flex-control-nav{position:absolute;top:-20px;left:-54px;}#featured-theme-slider .flex-direction-nav{margin:0;}#featured-theme-slider .flex-direction-nav li a{background:#312d2c;cursor:pointer;display:block;height:70px;line-height:70px;width:30px;color:#fff;text-align:center;margin:-30px 0 0;position:absolute;top:50%;-moz-transition:background 0.3s ease-in-out 0s;opacity:0.15;border-radius:4px;}#featured-theme-slider .flex-direction-nav li .flex-prev{left:-90px;}#featured-theme-slider</style>
</div></div>

0 comments:

Post a Comment