Cara Menciptakan Share Button Menyerupai Blog Instingseo

Cara Membuat Share Button Seperti Blog InstingSEO - Share Button atau tombol share selama ini kerap kali dipakai oleh para blogger untuk membagikan hasil postingannya ke beberapa sosial media baik ia lakukan sendiri maupun oleh visitor.


Banyak share button yang sering kali kita lihat pada sejumlah blog tapi tidak cocok dengan blog dan kurang menarik kepada pengunjung. Berikut akan saya berikan bagaimana cara menciptakan share button menyerupai pada blog ini.

Langsung saja, ikuti tutorial berikut!

1. Loggin ke blogger kalian, buka template, dan copy instruksi css berikut sempurna sebelum </style>

.share-buttons-box {height: 67px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVqV_nI1SGmL4LYh8kxq8kwlWGYcOnE0qDxuLB7egaZHv-nnA_8bFiWK9WFzh4wgbQRjRulCGLNS793Js28WvTq5zcYBMCrureDlMLzcD9fr1hPauyCyPQU5WxS6-LKJy1dw1xWIQsP80j/s1600/share.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}

2. Copy dan paste instruksi dibawah ini sempurna sebelum  <data:post.body/>, akan kalian temukan 2  <data:post.body/>, dan kalian copy instruksi dibawah ini setelah  <data:post.body/> yang kedua.

<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 class='share linkedin'><script src='//platform.linkedin.com/in.js' type='text/javascript'>
            lang: en_US </script><script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/></div>
        </div>
        </div>

3. Simpan dan lihat perubahan yang terjadi.

Demikian tutorial Cara Membuat Share Button Seperti Blog InstingSEO, biar bermanfaat.


Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel