Tutorial Membuat Round Sidebar Social Media Untuk Blog



Pagi Menjelang Pagi,:DAdmin ingin membahasa tutorial membuat round sidebar social media untuk blog.Mungkin di blog/web lain sudah memberikan tutorialnya.Tetapi apakah mudah dimengerti??admin akan memberi tahukan tutorialnya dengan semudah-mudahnya.Seperti kita ketahui,banyak orang yang ingin terkenal bukan hanya dari Real-Life,tetapi juga di Social Media.Terutamanya mempunyai blog dan membuat widget "Round Sidebar" ini.Atau kalian juga bisa membuat widget social media dengan "Metro Style"

Widget ini flat,modern,dan yang pastinya keren serta memiliki tata letak yang menarik bagi pengunjung.Untuk membuat widget ini sempurna,harus diingatkan bahwa width sidebar harus 300px.Simak Tutorialnya berikut ini :

  • Login Akun/ID Blogger sobat
  • Baca basmallah :)
  • Dashboard >> Tata Letak >> Add Gadget
  • Lalu Pilih HTML/Javascript.
  • Setelah itu,copy-pastekan code dibawah ini di kolom Gadget HTML/Javascript tersebut.
<style>
/*---www.learnmore-seemore.com----*/
#social-stats {
border-left: 1px solid #DDDDDD;
border-top: 1px solid #DDDDDD;
display: block;
float: left;
position: relative;
}
#social-stats ul {
overflow: hidden;
}
#social-stats ul li {
border-bottom: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
display: block;
float: left;
width: 33%;
}
#social-stats ul li a {
-moz-transition: all 0.6s ease-out 0s;
display: block;
float: left;
padding: 10px 0 3px;
text-decoration: none;
width: 100%;
}
#social-stats ul li a span, #social-stats ul li a large, #social-stats ul li a small {
display: block;
float: left;
margin: 0 auto;
text-align: center;
width: 100%;
}
#social-stats ul li a span {
background: url("http://4.bp.blogspot.com/-jN645A-bYkI/U0rQVit-liI/AAAAAAAADM0/zM2fqWp79kY/s1600/social_icon.png") no-repeat;
float: none;
height: 46px;
margin-bottom: 5px;
text-indent: -9999px;
width: 47px;
}
#social-stats ul li.ss-rss a:hover h5 {
background: #F18421;
}
#social-stats ul li h5 {
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;
background: #999999;
border-radius: 50% 50% 50% 50%;
margin: 0 auto;
width: 47px;
}
#social-stats ul li a span:before {
}
#social-stats ul li.ss-twitter a:hover h5 {
background: #45B0E3;
}
#social-stats ul li.ss-facebook a:hover h5 {
background: #3C5B9B;
}
#social-stats ul li.ss-google-plus a:hover h5 {
background: #F83E29;
}
#social-stats ul li.ss-youtube a:hover h5 {
background: #CC181E;
}
#social-stats ul li.ss-linkedin a:hover h5 {
background: #1790CD;
}
#social-stats ul li.ss-rss a span {
background-position: 0 0;
}
#social-stats ul li.ss-twitter a span {
background-position: 0 -91px;
}
#social-stats ul li.ss-facebook a span {
background-position: 0 -47px;
}
#social-stats ul li.ss-google-plus a span {
background-position: 0 -135px;
}
#social-stats ul li.ss-youtube a span {
background-position: 0 -180px;
}
#social-stats ul li.ss-linkedin a span {
background-position: 0 -226px;
}
#social-stats ul li a large {
color: #333232;
font-size: 25px;
font-weight: 500;
}
#social-stats ul li a small {
color: #333232;
font-size: 10px;
}
</style>
<div id="social-stats">
<ul>
<li class="ss-rss"><a target="_blank" href="/feeds/posts/default" rel="nofollow external"><h5><span>Rss</span></h5><large>5000</large> <small>Subscribers</small></a></li>
<li class="ss-facebook"><a target="_blank" href="https://www.facebook.com/Your-FB-Username" rel="nofollow external"> <h5><span>Facebbok</span></h5><large>14,782</large> <small>Followers</small></a></li>
<li class="ss-twitter"> <a target="_blank" href="http://twitter.com/Your-Twitter-Username" rel="nofollow external"> <h5><span>Twitter</span></h5><large>63,207</large> <small>Followers</small> </a></li>
<li class="ss-google-plus"><a target="_blank" href="https://plus.google.com/Your-GPlus-Username" rel="nofollow external"> <h5><span>Google+</span></h5> <large>70,781</large> <small>Followers</small> </a></li>
<li class="ss-linkedin"><a target="_blank" href="http://bd.linkedin.com/Your-Linkdin-Username" rel="nofollow external"> <h5><span>Linkedin</span></h5> <large>2,453</large> <small>Followers</small></a></li>
<li class="ss-youtube"><a target="_blank" href="http://www.youtube.com/user/Your-YT-Username" rel="nofollow external"> <h5><span>Youtube</span></h5> <large>6,237</large> <small>Subscribers</small> </a></li>
</ul>
</div>
NOTE : UNTUK TULISAN BERWARNA BIRU ADALAH ALAMAT DARI SOCIAL MEDIA SOBAT-

Related Posts :

8 komentar-facebook

Lian mafutra delete August 2, 2014 at 10:45:00 AM GMT+7

wih pantas dicoba nih ,ijin coba ya mas

Unknown delete August 2, 2014 at 11:18:00 AM GMT+7

ternyata di css doank ya gan,,kirain butuh javascript juga,,makasih gan infonya..

Tips komputer delete August 2, 2014 at 7:00:00 PM GMT+7

keren bangett gann :-d

Anonymous delete August 2, 2014 at 7:02:00 PM GMT+7

wih keren nih widget nya gan
tahnks gan atas postnya

Mas Gojal delete August 2, 2014 at 7:03:00 PM GMT+7

Ane pasang di blog dulu gan :D

Unknown delete August 2, 2014 at 7:05:00 PM GMT+7

Tinggal klik nama saya aja kalau Mau BW gan

verdian delete August 2, 2014 at 8:15:00 PM GMT+7

nice post deh..tapi ap gak buat jadi blog berat..??

Hidup sehat delete August 3, 2014 at 7:29:00 AM GMT+7

keren gan, tapi apa tidak membuat lambat suatu blog?