cara membuat social media di blogspot

Cara membuat social media di blogspot - tutorial cara membuat social media di blogspot ini simpel dan memiliki code yang ringan dan sangat mudah dipahami, bila anda tertarik untuk melihat tampilan cara membuat social media di blogspot ini silahkan kunjungi link downloadnya dibawah ini, bila anda tertarik untuk memasangnya silahkan simak tutorial dibawah ini, langsung saja menuju TKP.

Demo

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : cara membuat social media di blogspot
By : Rivai Silaban | Ide Blogspot | Blog Design
Update : Senin 27 January 2014
******************************************/
ul.ideblogspot li {float:left;list-style: none outside none;border:none;}
ul.ideblogspot li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj585eWfThuiRQlk3p_nCUZOgE4oeXIaPEM6LwX4cGl4eWbmmi8t-2cgXjS-wHF-KC4h4x138cmmWs2bDM41vwnwDaVKPMvGlq2DYvI2aa3jc-IWmknO3fSXIZcaqyRKyYgwMXoTHH4b8/s1600/ideblogspotsm.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
.ie7 ul.ideblogspot li a, .ie8 ul.ideblogspot li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj585eWfThuiRQlk3p_nCUZOgE4oeXIaPEM6LwX4cGl4eWbmmi8t-2cgXjS-wHF-KC4h4x138cmmWs2bDM41vwnwDaVKPMvGlq2DYvI2aa3jc-IWmknO3fSXIZcaqyRKyYgwMXoTHH4b8/s1600/ideblogspotsm.png' )}
ul.ideblogspot li.facebook a{ background-position:0 0}
ul.ideblogspot li.flickr a{ background-position:-32px 0}
ul.ideblogspot li.dribbble a{ background-position:-64px 0}
ul.ideblogspot li.googleplus a{ background-position:-96px 0}
ul.ideblogspot li.linkedin a{ background-position:-128px 0}
ul.ideblogspot li.pinterest a{ background-position:-160px 0}
ul.ideblogspot li.rss a{ background-position:-192px 0}
ul.ideblogspot li.skype a{ background-position:-224px 0}
ul.ideblogspot li.twitter a{ background-position:-256px 0}
ul.ideblogspot li.vimeo a{ background-position:-288px 0}
ul.ideblogspot li.youtube a{ background-position:-320px 0}
ul.ideblogspot li.facebook a:hover, #sidebar ul.ideblogspot li.facebook a:hover{ background-position:0 -32px}
ul.ideblogspot li.flickr a:hover, #sidebar ul.ideblogspot li.flickr a:hover{ background-position:-32px -32px}
ul.ideblogspot li.dribbble a:hover, #sidebar ul.ideblogspot li.dribbble a:hover{ background-position:-64px -32px}
ul.ideblogspot li.googleplus a:hover, #sidebar ul.ideblogspot li.googleplus a:hover{ background-position:-96px -32px}
ul.ideblogspot li.linkedin a:hover, #sidebar ul.ideblogspot li.linkedin a:hover{ background-position:-128px -32px}
ul.ideblogspot li.pinterest a:hover, #sidebar ul.ideblogspot li.pinterest a:hover{ background-position:-160px -32px}
ul.ideblogspot li.rss a:hover, #sidebar ul.ideblogspot li.rss a:hover{ background-position:-192px -32px}
ul.ideblogspot li.skype a:hover, #sidebar ul.ideblogspot li.skype a:hover{ background-position:-224px -32px}
ul.ideblogspot li.twitter a:hover, #sidebar ul.ideblogspot li.twitter a:hover{ background-position:-256px -32px}
ul.ideblogspot li.vimeo a:hover, #sidebar ul.ideblogspot li.vimeo a:hover{ background-position:-288px -32px}
ul.ideblogspot li.youtube a:hover, #sidebar ul.ideblogspot li.youtube a:hover{ background-position:-320px -32px}
/* cara membuat social media di blogspot */

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Copy code dibawah ini dan pastekan di widget anda silahkan anda ganti linknya menjadi link anda. Terimakasih salam Blogspot semoga bermanfaat.
  

<!-- cara membuat social media di blogspot code start-->
<ul class='ideblogspot'>
<li class='facebook'>
<a href='http://www.ideblogspot.com/' target='_blank' title='facebook'/>
</a></li>
<li class='googleplus'>
<a href='http://www.ideblogspot.com/' target='_blank' title='googleplus'/>
</a></li>
<li class='pinterest'>
<a href='http://www.ideblogspot.com/' target='_blank' title='pinterest'/>
</a></li>
<li class='twitter'>
<a href='http://www.ideblogspot.com/' target='_blank' title='twitter'/>
</a></li>
<li class='rss'>
<a href='http://www.ideblogspot.com/' target='_blank' title='rss'/>
</a></li>
<li class='skype'>
<a href='http://www.ideblogspot.com/' target='_blank' title='Skype'/>
</a></li>
<li class='vimeo'>
<a href='http://www.ideblogspot.com/' target='_blank' title='vimeo'/>
</a></li>
<li class='dribbble'>
<a href='http://www.ideblogspot.com/' target='_blank' title='dribble'/>
</a></li>
<li class='flickr'>
<a href='http://www.ideblogspot.com/' target='_blank' title='flickr'/>
</a></li>
<li class='linkedin'>
<a href='http://www.ideblogspot.com/' target='_blank' title='linkedin'/>
</a></li>
<li class='youtube'>
<a href='http://www.ideblogspot.com/' target='_blank' title='youtube'/>
</a></li>
</ul>
<!-- cara membuat social media di blogspot code end-->

Kesimpulan

tutorial cara membuat social media di blogspot ini terinspirasi dari social media plugins platform wordpress, dimana tampilan cara membuat social media di blogspot sederhana tapi menarik, nah bila sobat ingin memasangnya di halaman blog kesayangan anda silahkan simak tutorial dibawah ini, jangan lupa dilihat dulu demonya manatau tidak suka kan repot heheheh...

Buat anda yang belum memahami betul code CSS dan HTML silahkan kunjungi link dibawah ini untuk lebih detailnya...

http://www.ideblogspot.com/2014/01/cara-membuat-social-media-di-blogspot.html

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 9:39 PM