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, November 4, 2013

widget Social Media Round Style

Widget social media round style dengan tampilan menarik, cara membuat widget social media round style ini hampir sama dengan widget social media pada umumnya, hanya saja sistem style CSSnya merubah tampilan widget social media round style lebih menarik dan unik dari widget social pada umumnya. Buat para blogger mania yang ingin memasang widget social media round style ini pada halaman blognya silahkan simak penjelasan dibawah ini, jangan lupa untuk melihat demonya dengan judul tulisan " widget social media round style " silahkan klik demo dibawah ini 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 round style
By : Rivai Silaban | Blog Design
Update : Senin, 04 November 2013
******************************************/
.social-ballbdrs {
padding: 5;
margin-left:-30px;
}
.social-ballbdrs li, .social-ballbdrs li, .social-ballbdrs li {
float: left;
margin-right: 10px;
background-color: #CCCCCC;
display: inline;
border-radius:50%;
border:solid #999999 1px;
box-shadow:0 0 5px 2px #999 inset;
}
.social-ballbdrs li a {
-moz-transition: all 0.3s ease 0s;
display: block;
float: left;
height: 100%;
width: 40px;
height: 40px;
text-indent: -9999px;
}
.social-ballbdrs li.facebookball a {
background: url('http://1.bp.blogspot.com/-ZXAdQPhrGPI/UnY1jy86NFI/AAAAAAAAB_E/w9k1NSlv7qY/s1600/FACEBOOK.png') no-repeat 0 0;
}
.social-ballbdrs li.facebookball a:hover {
background-color: #3b5998;
}
.social-ballbdrs li.googleplusball a {
background: url('http://1.bp.blogspot.com/-6kXAR8gUIJI/UnY1juBh0PI/AAAAAAAAB_A/k2VxWHM0Lco/s1600/googleplus.png') no-repeat 0 0;
}
.social-ballbdrs li.googleplusball a:hover {
background-color: #d94a39;
}
.social-ballbdrs li.rssball a {
background: url('http://4.bp.blogspot.com/-2OHUHeGD494/UnY1l485tVI/AAAAAAAAB_U/l9JGli_YD7c/s1600/rssbd.png') no-repeat 0 0;
}
.social-ballbdrs li.rssball a:hover {
background-color: #fe9900;
}
.social-ballbdrs li.twitterball a {
background: url('http://1.bp.blogspot.com/-Tdm-eNud6rU/UnY1jYdKh9I/AAAAAAAAB-8/cS-j5ZdWPf8/s1600/TWITTER.png') no-repeat 0 0;
}
.social-ballbdrs li.twitterball a:hover {
background-color: #48c4d2;
}
.social-ballbdrs li.youtubeball a {
background: url('http://3.bp.blogspot.com/-ZU4mfmIGylA/UnY1uNPlQyI/AAAAAAAAB_c/H7vh2EablVQ/s1600/youtube.png') no-repeat 0 0;
}
.social-ballbdrs li.youtubeball a:hover {
background-color: #f45750;
}
.social-ballbdrs li a:hover {
background-position: 0 -40px;
box-shadow:3px 3px 10px 2px #333 INSET;
border-radius:50%;
}
.social-ballbdrs li a:visited,.social-ballbdrs li a:active{
background-position: 0 -40px;
box-shadow:3px 3px 10px 2px #333 INSET;
border-radius:50%;
}/*code CSS end */


Install Program Tag HTML

Untuk memanggil widget social media round style 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 round style code start -->
<div class="social-ballbdrs">
<ul><li class="twitterball"><a target="_blank" href="LINK TWITTER ANDA" rel="nofollow" title="twitter">twitter</a></li>
<li class="googleplusball"><a target="_blank" href="LINK GPLUS ANDA" rel="nofollow" title="gplus">googleplus</a></li>
<li class="facebookball"><a target="_blank" href="LINK FACEBOOK ANDA" rel="nofollow" title="facebook">facebook</a></li>
<li class="rssball"><a target="_blank" href="LINK RSS FEED ANDA" rel="nofollow" title="rss">rss</a></li>
<li class="youtubeball"><a target="_blank" href="LINK YOUTUBE ANDA" rel="nofollow" title="youtube">youtube</a></li></ul>
</div>
<!-- BDRS widget social media round style code end -->

Keterangan Gambar
  • Code warna MERAH ganti dengan link social media anda.
  • Silahkan anda edit CSS widget social media round style ini agar sesuai dengan tampilan halaman anda.

Kesimpulan

Widget social media round style ini memiliki tampilan yang menarik dengan sistem hover yang unik.

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

Widget Sosial Media Round Style
Senin, 04 Nvember 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 : Rivai Silaban Update pada : 9:39 AM

6 comments :

  1. Salam Bang Rivai. Apa kabar Bang semoga baik-baik saja yah Bang
    Ijin baca artikel dan nyimak lagi nih saya Bang di artikel terbaru
    yang jelas lebih fresh dan menarik, ijin simpan script nya Bang
    Terima kasih atas artikel nya.

    ReplyDelete
    Replies
    1. salam kembali bang..
      sehat bang itu juga atas doa aang dan teman teman yang lain :) silahkan bang...

      Delete
  2. kalau ditambahin efek tooltip makin keren mas

    ReplyDelete
    Replies
    1. oh bisa juga mas, silahkan ditambahin mas...

      Delete
  3. makasi ats widget Mas..!, keren abis..:)

    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