Cara Membuat Tombol Share di Bawah Postingan Blogger

Cara Membuat Tombol Share di Bawah Postingan Blogger - Tombol Bagikan Posting ke Media Sosial Terbaik, CSS, Tanpa Javascrip, Fast Loading.

CB baru saja memasang Tombol Berbagi Posting ke Media Sosial (Social Share Button) di beberapa blog klien.

Posisi Social Share Button ada yang hanya di bawah postingan blog, ada juga yang di bawah judul dan di bawah postingan. Ini penampakannya:

Social Share Button ini CB sebut terbaik dengan alasan:

Murni CSS tanpa Javascript sehingga ringan (fast loading)
Lengkap untuk membagikan ke media sosial terpopuler -- Facebook, Twitter, Google Plus, Pinterest, LinkedIn, dan WhatsApp (WA).Saat diklik, muncul tab baru yang masih ada di halaman postingan.
Tidak ada tracking code.
Desain simple dan user friendly.

Cara Membuat Tombol Share di Bawah Postingan Blogger

Berikut ini cara memasangnya di template blog dengan posisi di bawah postingan:

1. Klik Tema > Edit HTML
2. Copas kode CSS Tombol Berbagi Posting ke Media Sosial berikut ini di atas kode ]]></b:skin>

.share{display:block;padding:0;margin:10px 0;}
.post-share,ul.share-links{position:relative;margin:0;padding:0}
.post-share{overflow:hidden;line-height:0;margin:0}.share-links li a,.share-links li a:before{float:left;text-align:center;line-height:32px}.share-links li{width:32px;float:left;box-sizing:border-box;margin:0 5px 0 0;list-style:none}.share-links li.facebook,.share-links li.gplus,.share-links li.twitter{width:20%}.share-links li a{display:inline-block;cursor:pointer;width:100%;height:32px;color:#fff;font-weight:400;font-size:13px;box-sizing:border-box;opacity:1;margin:0;padding:0;transition:all .17s ease}.is-mobile li.whatsapp-desktop,.share-links li.whatsapp-mobile{display:none}.is-mobile li.whatsapp-mobile{display:inline-block}.share-links li a:before{display:block;width:32px;background-color:rgba(255,255,255,.07);font-size:15px}.share-links li a:hover{opacity:.8}.social a:before{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:400}.social .facebook a:before{content:"\f09a"}.social .twitter a:before{content:"\f099"}.social .gplus a:before{content:"\f0d5"}.social .linkedin a:before{content:"\f0e1"}.social .pinterest a:before{content:"\f0d2"}.social .whatsapp a:before{content:"\f232"}.social .external-link a:before{content:"\f35d"}.social-color .facebook a{background-color:#3b5999}.social-color .twitter a{background-color:#00acee}.social-color .gplus a{background-color:#db4a39}.social-color .pinterest a{background-color:#ca2127}.social-color .linkedin a{background-color:#0077b5}.social-color .whatsapp a{background-color:#3fbb50}.social-color .external-link a{background-color:#111}.social-text .facebook a:after{content:"Facebook"}.social-text .twitter a:after{content:"Twitter"}.social-text .gplus a:after{content:"Google Plus"}.social-text .linkedin a:after{content:"LinkedIn"}.social-text .pinterest a:after{content:"Pinterest"}.social-text .whatsapp a:after{content:"Whatsapp"}.social-text .external-link a:after{content:"WebSite"}@media screen and (max-width:540px){.share-links li a span{display:none}.share-links li.facebook,.share-links li.gplus,.share-links li.twitter{width:30px}}

3. Copas HTML Tombol Berbagi Posting ke Media Sosial berikut ini di bawah kode <data:post.body/> yang kedua atau ketiga.

<div class='share'>
<div class='post-share'>
<ul class='share-links social social-color'>
<b:class cond='data:blog.isMobileRequest' name='is-mobile'/>
<li class='facebook'><a class='facebook' 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'><span>Facebook</span></a></li>
<li class='twitter'><a class='twitter' 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'><span>Twitter</span></a></li>
<li class='pinterest'><a class='pinterest' 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'/></li>
<li class='linkedin'><a class='linkedin' 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'/></li>
<li class='whatsapp whatsapp-desktop'><a class='whatsapp' 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'/></li>
<li class='whatsapp whatsapp-mobile'><a class='whatsapp' expr:href='"https://api.whatsapp.com/send?text=" + data:post.title + " | " + data:post.url' rel='nofollow' target='_blank'/></li>
</ul>
</div>
<div class='clear'/>
</div>

4. Save!

Simpan template!

Jika ingin memasang Social Share Button tersebut di bawah judul dan di bawah postingan, ini panduannya:

- Simpan kode CSS di atas kode ]]></b:skin>
- Simpan kode berikut ini di atas kode <b:includable id='status-message'>

<b:includable id='sharethis' var='post'>
<div class='share'>
<div class='post-share'>
<ul class='share-links social social-color'>
<b:class cond='data:blog.isMobileRequest' name='is-mobile'/>
<li class='facebook'><a class='facebook' 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'><span>Facebook</span></a></li>
<li class='twitter'><a class='twitter' 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'><span>Twitter</span></a></li>
<li class='pinterest'><a class='pinterest' 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'/></li>
<li class='linkedin'><a class='linkedin' 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'/></li>
<li class='whatsapp whatsapp-desktop'><a class='whatsapp' 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'/></li>
<li class='whatsapp whatsapp-mobile'><a class='whatsapp' expr:href='"https://api.whatsapp.com/send?text=" + data:post.title + " | " + data:post.url' rel='nofollow' target='_blank'/></li>
</ul>
</div>
<div class='clear'/>
</div>
</b:includable>

- Simpan kode berikut ini di atas dan di bawah kode <data:post.body/> yang kedua atau ketiga.

<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='sharethis'/>
</b:if>

Demikian Cara Memasang Best Social Share Button for Blogger - Tombol Bagikan Posting ke Media Sosial Terbaik.

Style 2: Tombol Share di Bawah Postingan

Jika tidak berkenan dengan bentuk tombol share yang kotak dan segi panjang seperti di atas, alternatifnya adalah social share button berbentuk bulat seperti ini:

Ini kode dan cara pasangnya.

1. Kode HTML:

Copas di bawah kode <data:post.body/> yang kedua atau ketiga.

<b:if cond='data:blog.pageType == "item"'>
<div><p><strong>Share this:</strong></p>
<mobileshare class='mobileshare'>
<a 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' title='Facebook Share'> <i class='fa fa-facebook'/></a></mobileshare>
<mobileshare1 class='mobileshare1'>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' onclick='window.open(this.href, 'windowName', 'width=400, height=500, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' title='Google Share'><i class='fa fa-google-plus'/></a></mobileshare1>
<mobileshare2 class='mobileshare2'>
<a 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' title='Tweet This'><i class='fa fa-twitter'/></a></mobileshare2>
<mobileshare3 class='mobileshare3'>
<a 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' title='Pin It'> <i class='fa fa-pinterest'/></a></mobileshare3>
<mobileshare5 class='mobileshare5'>
<a class='whatsapp' expr:href='"whatsapp://send?text="+ data:post.title + " " + data:post.url' href='whatsapp://send?text=http://webdevelopmentscripts.com' onclick='window.parent.null' rel='nofollow' target='_top' title='Share to whatsapp'><i class='fa fa-whatsapp'/></a></mobileshare5>
</div>
</b:if>

2. Kode CSS:

Simpan di atas kode </head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.mobileshare{text-align:center}
.mobileshare a{background:#3a579a;color:#fff;display:inline-block;font-size:20px;width:35px;height:35px;line-height:35px;margin:0 2px 6px 0;border-radius:50%}
.mobileshare a:hover{background:#314a83}
.mobileshare1{text-align:center}
.mobileshare1 a{background:#df4a32;color:#fff;display:inline-block;font-size:20px;width:35px;height:35px;line-height:35px;margin:0 2px 6px;border-radius:50%}
.mobileshare1 a:hover{background:#be3f2b}
.mobileshare2{text-align:center}
.mobileshare2 a{background:#00abf0;color:#fff;display:inline-block;font-size:20px;width:35px;height:35px;line-height:35px;margin:0 2px 6px;border-radius:50%}
.mobileshare2 a:hover{background:#0092cc}
.mobileshare3{text-align:center}
.mobileshare3 a{background:#cd1c1f;color:#fff;display:inline-block;font-size:20px;width:35px;height:35px;line-height:35px;margin:0 2px 6px;border-radius:50%}
.mobileshare3 a:hover{background:#ae181a}
.mobileshare5{text-align:center}
.mobileshare5 a{background:#34af23;color:#fff;display:inline-block;font-size:20px;width:35px;height:35px;line-height:35px;margin:0 2px 6px;border-radius:50%}
.mobileshare5 a:hover{background:#222}
</style>
</b:if>

Style 3: Tombol Share di Bawah Postingan

1. Simpan di atas kode ]]></b:skin>

#cbshare {display:block} #fontshare {font-size:120%; margin-right:10px; font-weight:bold} #cbshare a {color:#fff; padding:10px 17px; margin:5px 0 5px 0; display:inline-block;} #cbshare a.fb {background:#3b5998} #cbshare a.tw {background:#01BBF6} #cbshare a.gp {background:#D54135} #cbshare a.wa {background:#43d854}

2. Simpan di bawa kode <data:post.body/> yang kedua atau ketiga.

<b:if cond='data:blog.pageType == "item"'> <div id='cbshare'> <span id='fontshare'>Share</span> <a class='fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank'>Facebook</a> <a class='tw' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank'>Twitter</a> <a class='gp' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'>Google+</a> <a data-action='share/whatsapp/share' expr:href='"whatsapp://send?text=" + data:post.title + "%20%2D%20" + data:post.url' style='background:#43d854'><i aria-hidden='true' class='fa fa-whatsapp'/>WhatsApp</a> </div>  <div class='clear'/> </b:if>

Save!

Style 4: Tombol Share di Bawah Postingan

1. Copas kode berikut ini tepat diatas kode ]]></b:skin>

.share-title {display: inline-block;margin: 0;color: #afafaf;text-transform: uppercase;
font-size: 16px;background: #fff;z-index: 1;position: relative;padding: 0 10px;font-weight: 500;}
#share-container {margin: 20px auto;overflow: hidden;}
#share {margin:0 0 8px;padding:0;overflow:hidden}
#share p {display: block;padding: 5px 8px !important;margin: 0 3px 3px 0;font-weight: 700;
text-align: center;text-transform: uppercase;}
#share a {width: 25%;height: 40px;display: block;font-size: 24px;color: #fff;
transition: opacity 0.15s linear;float: left;text-align: center;}
#share a:hover{top:1px;left:1px;box-shadow:0 0 3px rgba(1,1,1,.1)}
.wa-button{color:#fff;margin:0 auto;padding:0;font-size:14px;font-weight:700}
.wa-button a{color:#222;margin:0 auto;padding:10px 8px;background:#222}
.wa-button i{font-weight:400;margin:0 10px 0 0}
.label-line {text-align: center;margin-bottom: 6px;position:relative;}
.label-line:before {z-index: 1;content: "";width: 100%;height: 2px;background: #efefef;position: absolute;
top: 50%;left: 0;margin-top: -2px;}

2. Copas kode berikut ini tepat di bawah kode <data:post.body/> (yang kedua atau ketiga).

<div id='share-container'>
<div class='label-line'>
<p class='share-title'>Share This</p>
</div>
<div id='share'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'><i class='fa fa-facebook'></i></a><a expr:href='"https://plus.google.com/share?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' style='background:#c0361a;' target='_blank' title='Google+'><i class='fa fa-google-plus'></i></a><a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + "&lang=id"' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' style='background:#4099ff;' target='_blank' title='Twitter'><i class='fa fa-twitter'></i></a>
<a data-action='share/whatsapp/share' style='background:#43d854' expr:href='"whatsapp://send?text=" + data:post.title + "%20%2D%20" + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'></i></a>
</div>
</div>

3. Save!

Demikian cara memasang Best Social Share Button for Blogger - Tombol Bagikan Posting ke Media Sosial Terbaik. Good Luck & Happy Blogging! (www.contohblog.com).*

February 14, 2020

Cara Membuat Tombol Share di Bawah Postingan Blogger