Friday 17 January 2014

Cara Membuat Social Media Keren Diblog

Assalamualaikum Syedara..!!

Pada kesempatan ini saya akan mengajari cara menambah fitur social media diblog yang unik dan keren tentunya. Memang banyak sekali bentuk social media dengan berbagai bentuk, namun saya hanya posting yang menurut saya sudah keren. :D Bentuk seperti gambar dibawah ini, salah satu tombolnya akan keluar kesamping jika disentuh mouse, keren kan sobat ? :D


Oke langsung praktek ya sobat..Cekidoot...
  • Pertama login ke Blog, terus Edit HTMLnya ;
  • Kemudian cari kode ]]></b:skin> , dan letak kode dibawah ini pas diatas kode ]]></b:skin> tadi.
#BT_social {width: 60px;margin: 5px 20px; position:fixed;     top:50px;float:left;left:0px    width:45px;};padding:5px;bottom:0%}#BT_social li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#BT_social .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8qGA_64yz2rFouQDsYVsVH3eGxdA2lrcYWFSSPpG4ktWd8ch707ux6gByVQA6AsYfT93vwJH38VX2BUlWl0TxUCa3RoTjfKcKizfrMw27xp-41jCnteZcQKSrEb7dMAcVigFFLmZJXw0/s1600/Social_Button.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #0033CC;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 45px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-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;-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;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}#BT_social span:hover {visibility: hidden;}#BT_social span {display: block;top: 15px;position: absolute;left: 90px;}#BT_social .icon {color: #fafafa;overflow: hidden;}#BT_social .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -190px;}#BT_social .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -238px;}#BT_social .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -286px;}#BT_social .rss {background-color: rgba(204, 0, 0, .42);background-position: 0 -333px;}#BT_social li:hover .icon {width: 160px;}#BT_social li:hover .icon {background-color: #d91e76;}#BT_social li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}#BT_social li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}#BT_social li:hover .google {background-color: #A70000;background-position: 0 -94px;}#BT_social li:hover .rss {background-color: #EC5601;background-position: 0 -142px;}#BT_social .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
  • Setelah itu simpan templatenya,
  • Kemudian tambahkan gadget html/javascript dan masukkan kode dibawah ini :
<div id="BT_social">

<li><a class="icon fb" href="http://www.facebook.com/deddydegazaa">Like us on Facebook</a></li>

<li><a class="icon twit" href="https://twitter.com/deddydegazaa">Follow us on Twitter</a></li>
<li><a class="icon google" href="https://plus.google.com/107155135394175494665">Follow us on Google+</a></li>
<li><a class="icon rss" href="http://www.feedburner.com/ilmu-bermanfaat23">Subscribe via RSS</a></li>
</div>
Ganti tulisan yang berwarna Merah dengan id masing Social Network sobat. Kemudian :
  • untuk mengubah position nya menjadi disebelah kanan ubah pada float:left menjadi float:right.
  • Untuk mengubah letaknya supaya dibawah ubah pada top:50px menjadi bottom:0px
  • Kemudian simpan dan lihat hasilnya,,:D

BAGIKAN ARTIKEL : Facebook Twitter Google+ Linkedin

Unknown

Perhatian : Semua artikel blog ini sudah diprotect, Bagi yang ingin copy-paste artikel ini, mohon lampirkan sumber linknya. Terima Kasih!

6 komentar:

  1. mantap gan,,cuma kog ditengah posisinya,,dibwah sih dibawah,,gimana cara biar dipinggir posisi nya gan?? bantuannya gan !!! hehe
    http://triksederhanatradingbinary.blogspot.com/

    ReplyDelete
    Replies
    1. mantap gan,,cuma kog ditengah posisinya,,dibwah sih dibawah,,gimana cara biar dipinggir posisi nya gan?? bantuannya gan !!! hehe
      http://triksederhanatradingbinary.blogspot.com/

      Delete
    2. belum pernah cobak juga gan,,,mending pake sperti pnyak saia aja,,yang disebelah kanan

      Delete



  2. terma kasih mass 100% WORK

    http://caradanload.blogspot.com

    ReplyDelete
    Replies
    1. oke sama2,,mas broe,,,ane lagsung ke ke blog sobat..

      Delete

 

Copyright @ 2015 INFORMASI DAN TEKNOLOGI.

Designed by Deddy De Gazaa | Boh Jak