Membuat Tombol Sharing Sosial Media Keren di Blog

Ilmu Informatika : Membuat Tombol Sharing Sosial Media Keren di Blog. Bertemu kembali dengan sobat isrul. hehehe
Kali ini saya membagikan tutorial membuat tombol share sosial media keren di blog. Seperti pada postingan sebelumnya mengenai tombol share yang dibuat melayang atau pop up, tombol share kali ini tidak kalah keren, bahkan menurut saya ini lebih keren sob.
Pada tutorial kali ini ada 2 jenis yang akan saya bagikan.
  1. Yang pertama adalah seperti gambar berikut.(Berbagi Gratis)

    • Buka blogger -> Template -> Edit HTML.
    • Cari kode berikut ]]></b:skin>
    • Copy kode berikut diatas ]]></b:skin>
      
      /* social share buttons isrul berbagi*/
      .social-buttons-box {
       height: 67px;
       background: url(http://4.bp.blogspot.com/-sF5286zpLKs/VQ7LSNWbbjI/AAAAAAAABGA/olJhBRF08og/s1600/share%2B2.png) no-repeat 200px 0px;
       margin:20px 0 15px;
       overflow:hidden;
      }
      .social-buttons {
       margin:0 0;
       height:67px;
       float:left;
      }
      .social-buttons .share {
       float:left;
       margin-right:10px;
       display:inline-block;
      }
      
    • Kemudian sobat cari kode <data:post.body/>. Sobat akan menemukan 2 atau 3 kode tersebut. Bisa dicoba satu-satu (Blog saya menaruh di bagian paling bawah)
    • Copy kode berikut dibawah <data:post.body/>
      
      <div class='share-btn'>
       <div class='fb-like' data-action='like' data-layout='button_count' data-share='true' data-show-faces='false' expr:data-href='data:post.url'/>
       <div style='margin-left:25px;display:inline;'>
        <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
       </div>
       <a class='twitter-share-button' data-via='blogmassugeng' href='https://twitter.com/share'>Tweet</a>
      </div>
      <div class='clear'/>
      
    • Kemudian save atau simpan perubahan.

  2. Yang kedua seperti berikut.(Please Share)
    • Buka blogger -> Template -> Edit HTML.
    • Cari kode berikut ]]></b:skin>
    • Copy kode berikut diatas ]]></b:skin>
      
      /* share buttons isrul share */
      .share-buttons-box {
      height: 67px;
      background: url(http://3.bp.blogspot.com/-gRk7g98POUg/VQ7LSfDCgAI/AAAAAAAABGE/WCn8UKJwqC4/s1600/share%2B1.png) no-repeat 330px 10px;
      margin:20px 0 15px;
      overflow:hidden;
      }
      .share-buttons {
      margin:0 0;
      height:67px;
      float:left;
      }
      .share-buttons .share {
      float:left;
      margin-right:10px;
      display:inline-block;
      }
      
    • Kemudian sobat cari kode <data:post.body/>. Sobat akan menemukan 2 atau 3 kode tersebut. Bisa dicoba satu-satu
    • Copy kode berikut dibawah <data:post.body/>
      
      <div class='share-buttons-box'>
       <div class='share-buttons'>
        <div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
        <div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>
        <div class='share fbshare'><div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/></div>
        <div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
       </div>
      </div>
      
    • Kemudian save atau simpan perubahan.
Oke, lihatlah hasilnya. Keren kan?
Tutorial ini saya adopsi dari template buatan mas-sugeng.
Demikian artikel mengenai Membuat Tombol Sharing Sosial Media Keren di Blog. Semoga bermanfaat untuk sobat semua.
Nikmati Jasa & Layanan yang ada di www.isrul.com, diantaranya:
1. Jasa Pembuatan dan Verifikasi Akun Paypal dengan VCC (Valid 2 atau 3 Tahun)
2. Jual Akun Adsense Non Hosted Indonesia (0899-5832-699)
3. Penulis Tamu di Isrul.com

4 Responses to "Membuat Tombol Sharing Sosial Media Keren di Blog"

Jika anda bertanya, jangan lupa mencentang "Notify Me" di bagian kanan bawah, agar mendapat pemberitahuan jika pertanyaan anda telah kami jawab.
Terimakasih telah menyempatkan waktu berkomentar...