Bukan hanya Tombol share biasa, yg aku share ini yaitu Tombol Share media umum karya Mas Sugeng yg di pasang di template Evo Magz (template Blog terbaik buatan mas sugeng)
Tertarik menempatkan Tombol share media umum menyerupai diatas, Jangan khawatir kalau tidak sesuai dengan template yg anda gunakan, ditutorial ini akan aku jelaskan cara menyesuaikannya. Ok pribadi aja.
Cara Membuat Tombol Share media umum Seperti Evo Magz.
- Pertama silahkan masuk ke Akun Blogger anda serta plih Template - Edit HTML
- Setelah itu cari kode ]]</b:skin> atau </style> (Untuk mempercepat pencarian silahkan, CTRL+F pada keyboard)
- Jika sudah ketemu silahkan copy code CSS dibawah ini serta paste di atasnya
/* Social Share Buttons ala Evo Magz*/
.social-buttons-box {
height: 67px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL-jJhqnuurRq3HKbnQK31aEVYg7DrXtyKNZaUWGrPpljair-18qzpVVMidAsoB8kqHjKMRwjXD32FxKjTp0TQzT_dUS-4RIE0RGrBX9gqv0xE30KGVEhjK1tK4uhvnF6fr2LHFoVPzWFo/s1600/share.png) no-repeat 330px 0px;
margin:20px 0 15px;
overflow:hidden;
}
.social-buttons {
margin:0 0;
height:67px;
float:left;
}
.social-buttons .share {
float:left;
margin-right:10px;
display:inline-block;
}
.share-btn {
margin:15px 0 25px;
height:20px;
overflow:hidden;
}
- Kemudian cari Code <data:post.body/> (Biasannya arahan tersebut ada lebih dari satu, Silahkan anda pilih code yg terakhir atau sanggup anda sesuaikan sendiri nantinnya)
- Dan Copy code CSS di bawah ini, kemudian paste sempurna dibawah code <data:post.body/>
<div class='social-buttons-box'>
<div class='social-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)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'
://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>-->
- Terakhir Simpan Template
Keterangan : Silahkan ganti warna Biru diatas dengan URL Gambar lain, kalau gambar sharenya terlalu besar atau kalau anda tidak menyukainnya, serta Ganti warna Merah untuk menyesuaikan gambar pada postingan
- Bisa anda ganti gambar diatas dengan https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg480sdLu-wbXR-vO5Z6hl6J_0eoDEDWQBAk51CiIGtxWi3LP4ie5o-KEkBpSMWIAJrGzGBvVmMrVjS5C99pKCa2Ivm5My4ThUkpVugRo52U9tJPaVqzuspgMbeA9Da4X8EYx4rNmZzQrP6/s1600/rect3799.png
- Maka tampilannya menyerupai dibawah ini! atau pribadi Live demo di template ini!
Demikian artikel wacana cara menciptakan Tomboh share media umum ala Evo Magz, Jika anda kesulitan sanggup anda tannyakan di kommentar. Semoga berhasil serta Terima kasih!
