Cara Membuat Tombol Sosial Share Dengan Efek Slider. Pada postingan saya kemarin tentang Cara Membuat Blog Dengan Flatform Blogger silahkan dibaca dan untuk memperindah tampilan tombol sosial share yang ada di blog kita, anda tinggal menambahkan tombol seperti yang ada di blog ini. Lihat di bawah postingan!
Keberadaan tombol sosial share di blog relative dibutuhkan karena fungsinya yang dapat mempermudah pengunjung untuk men share artikel langsung dari blog kita, dan pada kesempatan ini saya akan berbagi cara membuat tombol sosial share efek slider, prosesnya sangat sederhana dan hanya dibutuhkan ketelitian dalam meletakan kode-kode yang saya siapkan dibawah, efek slider yang ada pada tombol sosial ini sangat ringan dan responsive sehingga tidak akan mengganggu tampilan maupun loading blog anda di versi desktop dan versi mobile.
Bagaimana tertarik? yuk simak langkah-langkahnya.
Cara Membuat Tombol Sosial Share Dengan Efek Slider
![]() |
Tombol Sosial Share Dengan Efek Slider |
2. Klik Template » Edit HTML
3. Gunakan Ctrl+F untuk mencari kode berikut
]]></b:skin>
atau </style>
4. Setelah ketemu letakan
CSS
script dibawah ini tepat diatas kode ]]></b:skin>
atau </style>
#button-share{width:100%;overflow:hidden;background: rgba(0, 0, 0, 0.80);text-align:center;margin:15px
auto;padding:0;padding:15px 0 10px}
#button-share span{position:relative;font-size:11px;color:#fff;margin:12px}
#button-share .share{background:#fcfcfc;position:relative;display:inline-
block;float:none;height:40px;line-height:40px;overflow:hidden;width:140px;margin:0 auto;box-
shadow:inset 0 0 5px rgba(0,0,0,0.1)}
#button-share .slide-share{z-index:2;display:inline-block;height:40px;line-
height:40px;left:0;position:absolute;width:140px;margin:0 auto}
#button-share .slide-share p{text-transform:uppercase;font-family:'Racing Sans One';font-
weight:400;color:#fff;font-size:15px;left:0;position:absolute;text-align:center;width:100%;margin:0
auto}
#button-share .share .slide-share{transition:all 0.4s ease-in-out}
#button-share .facebook .fb_iframe_widget{display:block;position:absolute;right:15px;top:0;z-
index:1}
#button-share .twitter iframe{right:10px;top:10px;z-index:1;display:block;position:absolute}
#button-share .google #___plusone_0{width:90px!
important;top:10px;right:10px;position:absolute;display:block;z-index:1}
#button-share .facebook .slide-share,.twitter .slide-share,.google .slide-share{background:#2c3e50}
#button-share .facebook:hover .slide-share,#button-share .twitter:hover .slide-share,#button-share
.google:hover .slide-share{left:140px;opacity:0.6}
5. Letakan script dibawah ini di atas code
</head>
<script type='text/javascript'>
window.___gcfg = {lang: 'id'};
(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>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
6. Kemudian letakan kode berikut ini dibawah kode
<data:'post.body'/>
<b:if cond='data:blog.pageType == "item"'>
<div id='button-share'>
<div class='facebook share'>
<div class='slide-share'>
<p>FB Share</p>
</div>
<div class='fb-share-button' data-layout='button_count' expr:data-href='data:post.url'/>
</div>
<div class='facebook share'>
<div class='slide-share'>
<p>FB Like</p>
</div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-
faces='false' expr:data-href='data:post.url'/>
</div>
<div class='google share'>
<div class='slide-share'>
<p>G Plus</p>
</div>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
</div>
<div class='twitter share'>
<div class='slide-share'>
<p>Tweet Me</p>
</div>
<a class='twitter-share-button' data-count='horizontal' data-related='antoncabon' expr:data-
text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
</div>
</div>
</b:if>
7. Terakhir save template.
8. Selesai.
Demikianlah sedikit tentang cara memasang tombol sosial share dengan efek slider di blog, semoga bermanfaat dan selamat mencoba.
Salam His Tutor
HISTUTOR DEMO SAMPLE ×
Berikut adalah contoh Tombol sosial share yang dibuat dengan efek slider, hanya saya tampilkan tombol G Plus saja, untuk menampilkan semua silahkan ikuti Tutorial yang sudah saya buat. Enjoy!
SEMOGA BERMANFAAT
Nice info, thx..
ReplyDelete