Kamis, 28 Januari 2016

Widget Blog Medial Sosial Keren

   Media Sosial merupakan Tempat dimana kita memudahkan Pengunjung untuk berkomunikasi dengan Kita.
Nah Kali ini saya akan membagikan Widget Blog Media Sosial Keren yag saya dapatkan dari Situs Blog Tutorial.
Dan untuk cara penerapanya sangat mudah Karena hanya menggunakan HTML.
Jadi Kita bisa langsung menerapkannya didalam Widget HTML/Javascript yang sudah tersedia didalam Blogger.




Next :
  • diDalam Blogger
  • Pilih Tata Letak
  • Add Gadget
  • Pilih Html/Java Script
  • Terapkan Kode berikut ini :
<style>

  #abt{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}

  #abt a{text-decoration:none; font-family:trebuchet ms,sans-serif;}

  #abt li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}

  #abt .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://lh6.googleusercontent.com/-O_eNfqyGbXY/Ua7QecE1aiI/AAAAAAAAA_M/CyeEAD56u1M/w35-h158-no/facebook+and+google%252B+.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}

  #abt li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}

  #abt .icon{overflow:hidden; color:#fafafa;}

  #abt .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}

  #abt .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}

  #abt .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}

  #abt .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}

  #abt .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}

  #abt li:hover .icon,

  .touch #abt li .icon{width:210px;}

  .touch #abt li .facebook, #abt li:hover .facebook{background-color:rgba(59,89,152,1);}

  .touch #abt li .twitter, #abt li:hover .twitter{background-color:rgba(64,153,255,1);}

  .touch #abt li .googleplus, #abt li:hover .googleplus{background-color:rgba(228,69,36,1);}

  .touch #abt li .pinterest, #abt li:hover .pinterest{background-color:rgba(174,45,39,1);}

  .touch #abt li .rss, #abt li:hover .rss{background-color:rgba(255,102,0,1);}

</style><a href="http://erdinmaulana.blogspot.com" style="font-size:0pt">Erdin Maulana</a>

<ul id="abt">

  <li data-alt="Follow us on Facebook"><a class="icon facebook" href="https://www.facebook.com/erdinmaulana99" target="blank">Follow us on Facebook</a></li>

  <li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/102457111541169552733" target="blank">Follow us on Google+</a></li>

  <li data-alt="Follow us on twitter"><a class="icon twitter" href="https://twitter.com/erdin_maulana99/" target="blank">Follow us on Twitter</a></li>

  <li data-alt="Subscribe via RSS"><a class="icon rss" href="http://feeds.feedburner.com/ErdinMaulanah" target="blank">Subscribe via RSS</a></li>

</ul>

Sumber : contohblog.com

Lorem ipsum dolor sit amet, mea prompta intellegam in, mutat doming apeirian pro an. Solum explicari vix te. Et dicant aperiri consequat usu, utamur diceret postulant sit cu.

Silahkan berikan komentar anda sesuai dengan postingan diatas.
EmoticonEmoticon