judul gambar

Sabtu, 09 Mei 2015

Cara Membuat Tombol Share ala Evo Magz

Kali ini saya akan Membagikan tutorial Blog tentang Cara Membuat Tombol Share ala Evo Magz.
Tombol Share sering digunakan para pembaca yang suka akan konten yang terdapat dalam blog itu sendiri sehingga ia membagikannya untuk dinikmati banyak orang.

CONTOHNYA SEPERTI INI



Langsung aja kita Lanjut ke Kode HTML nya :

  1. Login ke ID Blogger kalian di sini.
  2. Pergi Ke Template dan Pilih Edit HTML 
  3. Kemudian Cari Kode ]]</b:skin>
  4. Atau Cari Kode </Style>
Pasang Kode CSS berikut tepat DIATASNYA


.share-buttons-box {height: 67px;background: 
url(http://3.bp.blogspot.com/
-moj4-jk-UB0/U1qCkCPaGQI/AAAAAAAADTY/
tixmak8NHV8/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}

Kemudian Sobat Rangers Cari Lagi Kode Seperti Ini 
<data:post.body/>

( biasanya kode tersebut lebih dari 2 , sobat pilih aja yang terakhir atau di coba satu persatu )

Setelah ketemu Pasang Kode 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>
 
 
 

Terakhir Pratinjau Dan Simpan Templatenya

Please Share This My Friend:

Tidak ada komentar:

Posting Komentar