Cara membuat widget chronicl social media responsive blogger

Cara membuat widget chronicl social media responsive blogger simple
Cara membuat widget chronicl social media responsive blogger simple

TutorialMixs- Sobat blogger, karena dari beberapa postingan aku, ternyata yang menjadi seringnnya di kunjungi adalah masalah penampilan layout blog. Jadi kali ini aku mo share beberapa widget blogger yang apik dan tentunya responsive. silahkan di pakek untuk mempercantik blog agan pada

berikut tutorialnya:

  1. Pergi ke Tata Letak >> Add A Gadget, kemudian pilih HTML / JavaScript
  2. Paste kode ini di dalamnya.
  3. Ganti kode yang diwarnai dengan url profil Anda.


Source Sumber  Demo >> Link Code

<div class="btnt-chronicl-social">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/tutorialmixs">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/pvid77">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/tutorialmixs">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/u/0/b/101110372634917065358/">Join me on Google+</a></li>
<li><a class="linkedin" href="http://in.linkedin.com/in/pvidarvandy">Connect with me on LinkedIn</a></li>
<li><a class="youtube" href="http://www.youtube.com/user/chandeep10">Watch me on YouTube</a></li>
</ul>
</div>
<style type='text/css'>
/*<![CDATA[*/ 
.btnt-chronicl-social {  width: 320px;  margin: -10px;  }
.btnt-chronicl-social ul {  margin: 0;  padding: 0;  }
.btnt-chronicl-social ul li {  list-style:none;   padding: 0; text-transform: none; }
.btnt-chronicl-social ul li a {   color: #fff;   display:block;  }
.btnt-chronicl-social ul li a:hover {  color: #c9c9c9;  background-color: #333;   }
.btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
.btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .youtube { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Youtube-1.png") no-repeat scroll 10px center #C6312B; background-size: 20px;  padding: 17.5px 45px; }
/*]]>*/
</style>
oke lalu simpan saja. semoga bermanfaat




Sebenarnya artikel ini aku buat hanya untuk referensi, catatan/archieve aku pribadi terkait hal2 yang paling penting dalam pembuatan, penyusunan, memperbaiki, mempercantik web/blog serta cara/Panduan Hal lain. Jika artikel ini secara tidak langsung mempunyai manfaat buat anda, kurasa mungkin itu, secara kebetulan saja..

Share this

Related Posts

Previous
Next Post »
Related Posts Plugin for WordPress, Blogger...