Kang Damai - Entah ini posting yang keberapa yang jelas saya ingin tetap berbagi kepada saudara saudara saya ini. Kali ini saya akan membagikan Cara Membuat Sosial Media Share Button Ala Evo Magz yang banyak orang ingin menggunakannya. Sosial Media Share Button sangat bermanfaat untuk mempermudah bagi pembaca untuk membagikan artikel yang kita tulis oleh karena itu salah satu fitur ini hampir selalu ada pada setiap template tempalte primum. Langsung saja capcus ke TKP yaitu di blog anda masing masing.
Screenshoot :
- Pertama silahkan masuk ke Akun Blogger anda dan 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 dan paste di atasnya
/* share buttons */
.share-buttons-box {
height: 67px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79e3iNkYGcGQCkl0oalR-4Yr0ZXo2x-Eq1K7CbQb-LvbLwTgUHfNFxQFtN3kSMV3XrP1q8NY9WnSEnfAz7WreBMG7Q6kMWqK_vhXYQ8wkNmEr3D8TFlBhok0iGTkfy5_MAfo-LKbUOJ1O/s1600/share.png) no-repeat 330px 10px;
margin:20px 0 15px;
overflow:hidden;
}
.share-buttons {
margin:0 0;
height:67px;
float:left;
}
.share-buttons .share {
float:left;
margin-right:10px;
display:inline-block;
}
- Kemudian cari Code <data:post.body/> (Biasannya kode tersebut ada lebih dari satu, Silahkan anda pilih code yang terakhir atau bisa anda sesuaikan sendiri nantinnya)
- Dan Copy code CSS di bawah ini, kemudian paste tepat dibawah code <data:post.body/>
<div class='share-buttons-box'> <div class='share-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
nah semoga tampilannya bertambah keren ya gan. Semoga sukses.
Referensi :
- www.sugeng.id
- evo magz template
- masyadi.com
Tag : Template Evo Magz 4.7, Share button Responsive,
Dimohon berkomentar dengan bahasa yang sopan dan tidak menyinggung tentang hal SARA dan juga sesuai dengan topik yang di bahas
EmoticonEmoticon