Home » » widget sosial media versi 3

widget sosial media versi 3

Dalam posting kali ini taukahbahwa.blogspot.com akan menyajikan posting tentang widget sosial media versi 3. Semoga dengan berita widget sosial media versi 3 akan menambah pengetahuan bagi anda pembaca setia taukahbahwa.blogspot.com

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,langsung saja menuju TKP.

http://adf.ly/YvSj6


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 : Arieadie | Blog Design
my blog : lagudjawaasli.blogspot.com
Update : kamis, 08 oktober 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.

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com
Homepage|http://taukahbahwa.blogspot.com

Sobat baru saja membaca artikel yang berkategori Informasi dengan judul widget sosial media versi 3. Jika sobat rasa artikel ini menarik silakan di share dengan meninggalkan URL http://taukahbahwa.blogspot.com/2014/02/widget-sosial-media-versi-3.html. Terima kasih atas kunjungannya!

0 komentar:

Posting Komentar