Cara Membuat Tombol Share Blog Ringan dan Valid HTML 5

Download Link Download Link 2

 

1. (Backup templatenya dulu ya gan) dan cari Template > Edit HTML.

2. Tambahkan font Oswald di bawah </style> dengan cara tekan CTRL+F dan masukkan </style> pada kolom pencaharian. Biasanya ditemukan tidak hanya satu, silahkan pilih yang paling atas ya gan.

 

@font-face{font-family:Oswald;font-style:normal;font-weight:400;src:local('Oswald Regular'),local('Oswald-Regular'),url(http://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff')}

 

3. Letakkan kode CSS berikut di atas kode ]]></b:skin>

/*--Tombol Share--*/
.share {
border-top: 1px solid #dedede;
font-family: Oswald, Arial, sans-serif;
font-size: 16px;
line-height: 1.8em;
position: relative;
text-transform: uppercase;
padding-top: 10px;
margin-top: 20px;
}
.share a:link {
color: #fff;
font-size: 14px;
margin-right: 10px;
text-align: center;
text-transform: none;
}
.share a:visited {
color: #fff;
font-size: 14px;
margin-right: 10px;
text-align: center;
text-transform: none;
}
.share a:hover {
color: #fff;
}
.share_facebook {
background: #0182c4;
padding: 3px 13px;
border-radius: 3px;
}
.share_facebook:hover {
background: #01689d;
}
.share_google {
background: #d44132;
padding: 3px 17px;
border-radius: 3px;
}
.share_google:hover {
background: #aa3428;
}
.share_twitter {
background: #20b8ff;
padding: 3px 19px;
border-radius: 3px;
}
.share_twitter:hover {
background: #1a93cc;
}
.ltsme { 
background: #fb8938;
padding: 3px 12px;
border-radius: 3px;
}
.ltsme:hover {
background: #E98945;
}

 4. Terakhir letakan juga kode berikut di bawah <data:post.body/>. atau dibagian akhir dari artikel. Biasanya terdapat 2 kode seperti di atas. silahkan pilih dibawah kode yang kedua.

<div class='share'>
<span style='float: left; margin-right: 15px; margin-top: 1px;'>Suka Artikel Ini? Bagikan: </span>
<a class='share_facebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url' expr:onclick='&quot;window.open(this.href,\&quot;_blank\&quot;,\&quot;height=430,width=640\&quot;);return false;&quot;' rel='nofollow' title='Bagikan ke Facebook'>Facebook</a>
<a class='share_google' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' expr:onclick='&quot;window.open(this.href,\&quot;_blank\&quot;,\&quot;height=600,width=530\&quot;);return false;&quot;' rel='nofollow' title='Bagikan ke Google+'>Google+</a>
<a class='share_twitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:blog.url' expr:onclick='&quot;window.open(this.href,\&quot;_blank\&quot;,\&quot;height=430,width=640\&quot;);return false;&quot;' rel='nofollow' title='Bagikan ke Twitter'>Twitter</a>
<script>/*<![CDATA[*/var uri=window.location.href;var title=document.title;document.write('<a class="ltsme" href="http://www.lintas.me/?c=bookmarklet&url='+uri+'&title='+title+'" rel="nofollow" target="_blank" title="Bagikan ke Lintas.me">Lintas.me</a>');/*]]>*/</script>
</div>

5. Silahkan simpan templatenya dan lihat hasilnya.
6. Selesai


Terima Kasih atas Kunjungannya
Semoga Bermanfaat ^_^

Download Apk or Download Rar