Friday, 4 July 2014

Membuat tombol share ringan dan valid html 5

Halo semuanya , puasa paling enak sambil blogging ya apalagi utak atik tampilan blog juga enak ,he he he. dan ternyata telah memasuki bulan ramadhan nih , semoga amal dan perbuatan maupun puasa,ibadah kita diterima oleh Allah SWT ,Aamin.

Kali ini saya akan share tentang cara membuat tombol share valid html 5 dan tentunya tidak membebani loading blog alias tombol share ringan dan tentunya tombol ini juga SEO-Friendly.
Oke lihat dulu tampilan jadinya (klik pada gambar)

Tombol share blog ringan dan valid html 5

Mulai Instalasi 


1.(Backup template dulu) dan cari Template > Edit HTML.

2. Tambahkan font Oswald di bawah <style>
@font-face{font-family:Oswald;font-style:normal;font-weight:400;src:local(&#39;Oswald Regular&#39;),local(&#39;Oswald-Regular&#39;),url(http://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format(&#39;woff&#39;)}

3. Letakkan kode CSS berikut di atas kode ]]></b:skin>  atau </sytle>
/*--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. Dan Letakan juga kode berikut di bawah <data:post.body/>. atau dibagian akhir dari artikel.
<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. Klik Save template ,lihat hasilnya.

1 Komentar:

Terima kasih banyak gan, ini sangat bermanfaat buat saya. Tombol share yang ringan tanpa java script, namun font Oswald tidak saya tambahkan karena tadi sempat error. Btw, sekarang sudah berhasil saya pasangkan di blog saya pujanggamaya.com. Salam kenal dan terima kasih :)

Terima kasih atas komentar sobat