Cara Membuat Tombol Share Media Sosial di Blog - Erend Elektronik

Cara Membuat Tombol Share Media Sosial di Pinggir Blog - Ada berbagai gaya tampilan Tombol Share Media Sosial pada web/blog kita. Seperti Blog Rapi Serui menyimpan tombol share medsos ini tepat dibawah postingan setelah kolom Tag Blog. Memasang tombol Sharing sosmed ini berguna sebagai promosi blog kita. Semakin banyak yang share, semakin terkenal blog kita.

1. Cara Membuat Tombol Share Media Sosial di Blog seperti Blog Rapi Serui :

Pastekan kode berikut diatas kode penutup style </style> atau dibawah kode pembuka skin.

.share-buttons .svg-icon-24, .centered-bottom .share-buttons .svg-icon-24 {color: #fff;}<br /> .sharing-open.touch-icon-button:focus .touch-icon, .sharing-open.touch-icon-button:active .touch-icon {background-color: transparent;}<br /> .share-buttons {background: #444; color: #fff; border-radius: 2px; box-shadow: 0 2px 2px 0 rgba(0,0,0,.14) , 0 3px 1px -2px rgba(0,0,0,.2) , 0 1px 5px 0 rgba(0,0,0,.12); color: #fff; margin: 0; position: absolute; top: -11px; min-width: 160px; z-index: 101;}<br /> .share-buttons.hidden {display: none;}<br /> .sharing-button {background: transparent; border: none; margin:14px 0; outline: none; padding: 0; cursor: pointer;}<br /> .share-buttons li {margin: 0; height: 38px;}<br /> .share-buttons li:last-child {margin-bottom: 0;}<br /> .share-buttons li .sharing-platform-button {box-sizing: border-box; cursor: pointer; display: block; height: 100%; margin-bottom: 0; padding: 0 14px; position: relative; width: 100%;}<br /> .share-buttons li .sharing-platform-button:focus, .share-buttons li .sharing-platform-button:hover {background-color:#7FFF00; outline: none;}<br /> .share-buttons li svg[class^="sharing-"], .share-buttons li svg[class*=" sharing-"] { position: absolute; top: 7px;}<br /> .share-buttons li span.sharing-platform-button, .share-buttons li span.sharing-platform-button {position: relative; top: 0;}<br /> .share-buttons li .platform-sharing-text {display: block; font-size: 16px; line-height: 38px; white-space: nowrap;}<br /> .share-buttons li .platform-sharing-text {margin-left: 40px;}

Dan untuk Kode CSS-nya silahkan pastekan kode ini diatas kode penutup body <//body>  atau cari kode <b:includable id='postShareButtons' var='post'> </b:includable>

Masukan kode CSS dibawah ini diantara <b:includable id='postShareButtons' var='post'> 
dan </b:includable> hingga kodenya akan berbentuk seperti ini :

<b:includable id='postShareButtons' var='post'>Kode CSS </b:includable>

<div class='feet-icons'> <a class='face-ico' expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.url' onclick='window.open(this.href, 'windowName', 'width=550, height=650, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'><i class='fa fa-facebook'/> Share</a><br /> <a class='twi-ico' expr:href='"https://twitter.com/share?url=" + data:post.url + "&text=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=450, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'><i class='fa fa-twitter'/> Tweet</a><br /> <a class='pint-ico' expr:href='"https://www.pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.featuredImage + "&description=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=735, height=750, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'><i class='fa fa-pinterest'/> Share</a><br /> <a class='link-ico' expr:href='"https://www.linkedin.com/shareArticle?url=" + data:post.url' onclick='window.open(this.href, 'windowName', 'width=950, height=650, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'><i class='fa fa-linkedin'/> Share</a><br /> <b:if cond='data:blog.isMobileRequest'> <br /> <a class='bitz-ico' expr:href='"https://api.whatsapp.com/send?text=" + data:post.title + " | " + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-whatsapp'/> Share</a><br /> <b:else/><br /> <a class='bitz-ico' expr:href='"https://web.whatsapp.com/send?text=" + data:post.title + " | " + data:post.url' onclick='window.open(this.href, 'windowName', 'width=900, height=550, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'><i class='fa fa-whatsapp'/> Share</a><br /> </b:if><br /> </div>

2. Untuk Membuat Tombol Share Media Sosial di Blog yang terletak disamping dan melayang, silahkan buka Tata Letak dan tambahkan kolom Javascrift. Lalu pastekan kode berikut dibawah ini :

<style> #pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style><br /> <div id='pageshare' title="Share This With Your Friends"> <div class='sbutton' id='gb'> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div> <div class='sbutton' id='rt'> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div> <div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div> <div class='sbutton' id='fb'> <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div> <br />

Artikel Terkait