Advertisements
Advertisements
Tombol social share merupakan salah satu bagian terpenting yang harus anda terapkan di blog. Dimana tujuan utama bagi pemilik blog adalah untuk mendatangkan refferal traffic. Agar kiriman atau artikel profesional anda lebih sering di share ke facebook, di tweet ke twitter maupun diberi g+1 maka salah satu hal yang dapat mempengaruhinya adalah desain dari tombol social share itu sendiri yang harus terlihat menarik.
Berikut ini saya telah membuat tombol social share twitter tweet, facebook share dan tombol g+1 yang telah di desain dengan tampilan yang berbeda dari milik anda atau kompetitor anda yakni dengan menggunakan efek css3 dan tanpa menggunakan gambar dimana cara kerja dari tombol ini dia akan memunculkan tombol share twitter, tombol bagikan ke facebook dan google plus one pada saat pembaca melakukan hover yang bisa anda pasang dibawah postingan blog.
2) Klik Template lalu lakukan Back up
3) Klik Edit Template lalu cari tags pembuka
4) Salin semua kode dibawah ini lalu tempatkan tepat dibawah tags tersebut
Satu hal yang perlu anda rubah adalah
Berikut ini saya telah membuat tombol social share twitter tweet, facebook share dan tombol g+1 yang telah di desain dengan tampilan yang berbeda dari milik anda atau kompetitor anda yakni dengan menggunakan efek css3 dan tanpa menggunakan gambar dimana cara kerja dari tombol ini dia akan memunculkan tombol share twitter, tombol bagikan ke facebook dan google plus one pada saat pembaca melakukan hover yang bisa anda pasang dibawah postingan blog.
Langkah-langkah memasang tombol share dibawah posting blog
1) Masuk ke dashboard akun blogger anda2) Klik Template lalu lakukan Back up
3) Klik Edit Template lalu cari tags pembuka
<div class='post-footer-line post-footer-line-1'>
4) Salin semua kode dibawah ini lalu tempatkan tepat dibawah tags tersebut
Klik ganda untuk menyalin
5) Klik Simpan
<style type="text/css">
@import "//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css";
#kotak{position:relative;margin:auto;text-align:center}
#kotak .bagikeun{border-radius:10%;width:100px;height:80px;background:#eee6dd;display:inline-block;margin:0 10px;overflow:hidden;font-family:'Roboto',sans-serif;text-align:center;color:#f0f0f0;cursor:default}
#kotak .bagikeun:before{width:100px;background:#eee6dd;display:block;font-family:'FontAwesome',sans-serif;font-size:30px;line-height:90px;text-align:center;color:#777;transition:font-size .5s,line-height .5s;margin-bottom:5px}
#kotak .bagikeun:hover:before{font-size:200%;line-height:50px;text-align:center}
#kotak .twitter:before{content: '\f099'; color:#fbfbfb;background: #00cdff;}
#kotak .facebook:before{content: '\f09a'; color:#fbfbfb;background: #3c5f96;}
#kotak .google:before{content: '\f0d5';color:#fbfbfb;background: #d24228;}
</style>
<div id="kotak">
<div class="bagikeun twitter"><a class='twitter-share-button' data-count='horizontal' data-via='User Name' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>
<div class="bagikeun facebook"><div class="fb-share-button" expr:data-href='data:post.url' data-type="button_count"></div>
<div id="fb-root"></div>
<script>//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&appId=568581339861351";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script></div>
<div class="bagikeun google"> <div class="g-plusone" data-size="medium">
</div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
}
)();
</script></div>
Satu hal yang perlu anda rubah adalah
appId=568581339861351
ganti dengan appId Facebook milik anda. Semoga anda menyukainya. Enjoy & Happy Coding!
Komentar