Cara membuat tombol share keren di blog


Tombol share

Halo agan semua pada kesempatan kali ini saya ingin berbagi bagaimana cara membuat tombol share keren di blog agan-agan. langsung aja deh di cekibroth..... :

Cara membuat tombol share keren di blog

  1. Masuk Dash Board ke editor template html
  2. Pasang kode css berikut tepat di atas ]]</b:skin> atau </style>

  3. .share-buttons-box {height: 67px;background: url() 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}

  4. Kemudian cari lagi kode <data:post.body/> (biasanya kode tersebut lebih dari  , pilih <data:post.body/> pada bagian yang terakhir atau di coba satu persatu)
  5. Setelah ketemu kode diatas kemudian pasang script dibawah ini tepat dibawah kode  <data:post.body/>

  6. <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>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
    </script>

  7. Simpan template
Jika berhasil maka tombol share tadi akan seperti gambar diatas , atau pada tombol share yang saya gunakan, jika artikel ini berguna silahkan di share dan di komen ya..

    0 comments