Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Monday, January 27, 2014

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('http://2.bp.blogspot.com/-lU_g85vgbBk/UuZjFGKSSxI/AAAAAAAACMs/ozfnCR5LkHI/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('http://2.bp.blogspot.com/-lU_g85vgbBk/UuZjFGKSSxI/AAAAAAAACMs/ozfnCR5LkHI/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.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 9:39 PM

0 komentar :

Post a Comment

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog