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

Saturday, November 2, 2013

widget social media blogspot

Widget social media blogspot ini lebih keren, cara membuat widget social media blogspot ini lebih simpel dan tampilan yang lebih menarik. Widget social media blogspot pada postingan kali ini memiliki style dengan tampilan tombol yang memakai CSS shadow dan in shadow sehingga lebih menarik . Widget social media blogspot ini terinspirasi dari plugsin blog wordpress social media tahun ini. buat teman teman blogger yang ingin memasang widget social media blogspot ini silahkan simak penjelasan di bawah ini, jangan lupa klik demo untuk melihat tampilan widget social media blogspot ini, lihat demo dengan judul widget social media blogspot. Langsung saja menuju TKP.

Demo


Install Program CSS

  • Login ke dashboard anda
  • Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  • Cari code ]]></b:skin> 
  • 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 : Widget social media
By : Rivai Silaban | Blog Design
Update : Sabtu, 02 November 2013
******************************************/
#bdrs-social {
margin:0px auto;
width: 300px;
}
#bdrs-social .bdbox-social a:link,.bdbox-social a:visited{
float:left;
width:32px;
height:32px;
margin:0 5px;
padding:0;
text-indent:-9999em;
box-shadow:3px 3px 3px rgba(0,0,0,0.3);
background-color:transparent;
background-size:100% auto;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJDLX3kYTKZFmC95ehV6DBttz_yxykFo6pNXXc-6RcJQCFlIenC1YbIoyWefwpXBVZ3aVemXRQW9eQk1CczGy8eJ7hByGa8MVnPTfsK8kTk1PkTZGpg2FlQ5ZdyjFjKTyeKa0cCGAzV0A/s1600/BRS01-sosial.png');
background-repeat:no-repeat;
}
#bdrs-social .bdbox-social a:hover,.bdbox-social a:active {
box-shadow:3px 3px 7px #333 INSET;
}
#bdrs-social .bdbox-social a:first-child{margin-left:3px}
#bdrs-social .bdbox-social a:last-child{margin-right:0}
#bdrs-social .bdrs-rss{background-position:0 0}
#bdrs-social .bdrs-goo{background-position:0 -32px}
#bdrs-social .bdrs-fac{background-position:0 -64px}
#bdrs-social .bdrs-lin{background-position:0 -96px}
#bdrs-social .bdrs-tum{background-position:0 -128px}
#bdrs-social .bdrs-twi{background-position:0 -160px}
#bdrs-social .bdrs-wor{background-position:0 -192px}
/*code CSS end */


Install Program Tag HTML

Untuk memanggil widget social media tersebut agar tampil pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini.

  • Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
  • Untuk memasang kode htmlnya anda dapat memasangnya dimana saja. Untuk tutorial kali ini saya memasangnya di widget sidebar halaman blog.
  • Silahkan pilih " Tata Letak " pada dasbor blog anda.
  • klik "Add gadget " ( Tambahkan gadget )
  • Setelah muncul halaman gadget silahkan pilih " HTML/JavaScript ".
  • Copy kode didalam spoiler dibawah ini kemudian pastekan di gadget anda.
  • Edit html , save dan lihat hasilnya, semoga bermanfaat...

<!-- BDRS widget social media code start -->
<div id="bdrs-social">
<div class="bdbox-social" >
<a class="bdrs-goo" href="LINK GOOGLE PLUS" rel="publisher" target="_blank" title="Google+">Google+</a>
<a class="bdrs-fac" href="LINK FB" rel="nofollow" target="_blank" title="Facebook">Facebook</a>
<a class="bdrs-twi" href="LINK TWITTER" rel="nofollow" target="_blank" title="Twitter">Twitter</a>
<a class="bdrs-lin" href="LINK LINKEDIN" rel="nofollow" target="_blank" title="LinkedIn">LinkedIn</a>
<a class="bdrs-tum" href="LINK TUMBLR" rel="nofollow" target="_blank" title="Tumblr">Tumblr</a>
<a class="bdrs-rss" href="LINK RSS" rel="external" target="_self" title="RSS Feed">RSS Feed</a>
</div></div>
<!-- BDRS widget social media code end -->

Keterangan Gambar
  • Code warna MERAH ganti dengan link social media anda.
  • Lebar dari widget social media ini 300px, silahkan anda edit CSSnya sesuai dengan halaman blog anda.

Kesimpulan

Widget social media blogspot dengan tampilan elegan dan menarik akan menambah kesan tampilan halaman blog anda semakin berkesan elegan tanpa harus memiliki kemahiran luarbiasa untuk mengedit kode kode htmlnya.

Bila teman teman mengalami kesulitan dalam memasang kode widget ini atau mendapatkan kode yang Error, silahkan hubungi saya atau share bersama saya pada form komentar dibawah. Pergunakan semua fasilitas di halaman blog ini untuk mempermudah anda. Semoga postingan ini bermanfaat buat teman teman.

Widget social media blogspot
Sabtu, 02 November 2013
Rivai Silaban | Blog Design

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 : Unknown Update pada : 12:05 AM

11 comments :

  1. Minta bantuannya widgeya berisi 6 icon dan menyusun ke samping, bagaimana caranya agar menyusun kebawah 3 icon diatas dan 3 icon dibawah, thanks

    ReplyDelete
    Replies
    1. oh itu mudah tambahkan saja <br/> pada baris social nya hitung icon 3 kesamping dan masukkan kode <br/> diantara icon sosial media twitter dan linkelin.

      Delete
  2. Petunjuknya bisa diterapkan di blog saya, thanks atas infonya.

    ReplyDelete
  3. keren sosial medianya, thanks banget gan..

    ReplyDelete
  4. caranya nambah jarak dibawah widget gimana? di saya widgetnya terlalu mepet

    ReplyDelete
    Replies
    1. coba ganti nilai 0 pada margin CSSnya

      margin:0px auto; sehingga menjadi margin:10px auto;
      ini berfungsi untuk membuat jarak keatas dan kebawah widget berjarak 10px

      Delete
  5. Wah wah waahh... cakep mazz, makasih yah ttorialnya. kyaknya gak lengkap klo gak Nge-like blog-nya maz... Jempol untuk Anda.

    ReplyDelete

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