Monday, August 29, 2016
Cara Membuat Tombol Share Blog Ringan dan Valid HTML 5
Cara Membuat Tombol Share Blog Ringan dan Valid HTML 5
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="https://www.facebook.com/sharer.php?u=" + data:blog.url expr:onclick="window.open(this.href,"_blank","height=430,width=640");return false;" rel=nofollow title=Bagikan ke Facebook>Facebook</a>
<a class=share_google expr:href="https://plus.google.com/share?url=" + data:blog.url expr:onclick="window.open(this.href,"_blank","height=600,width=530");return false;" rel=nofollow title=Bagikan ke Google+>Google+</a>
<a class=share_twitter expr:href="https://twitter.com/share?url=" + data:blog.url expr:onclick="window.open(this.href,"_blank","height=430,width=640");return false;" 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 ^_^
6. Selesai
Terima Kasih atas Kunjungannya
Semoga Bermanfaat ^_^
