Cara membuat tombol share keren di blog

Oleh Unknown

Tuesday, April 7, 2015

Bagikan :

Tweet

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>



.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}



3. 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)
4. Setelah ketemu kode diatas kemudian pasang script dibawah ini tepat dibawah kode  <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 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>



5. 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..

Tweet

Tag : Tips SEO