Tombol Berbagi Posting ke Media Sosial di Bawah Postingan Blog Fast Loading

Tombol Berbagi Posting ke Media Sosial di Bawah Postingan Blog Fast Loading

Tombol Berbagi Posting ke Media Sosial
Cara Memasang Tombol Berbagi Posting ke Media Sosial (Social Share Button) di Bawah Postingan Blog Tanpa Javascrip Fast Loading.

CB baru saja memasang Tombol Berbagi Posting ke Media Sosial (Social Share Button) di Bawah Postingan Blog, Tanpa Javascrip, biar Fast Loading. Semula, CB menggunakan AddThis.

Biasanya, jika ada yang berubah atau hal baru di blog ini, suka ada yang tanya, bagaimana cara pasangnya, atau minta dikasi tau kode dan cara pasangnya.

Nah, berikut ini CB share kode dan Cara Memasang Tombol Berbagi Posting ke Media Sosial (Social Share Button) di Bawah Postingan Blog Tanpa Javascrip Fast Loading.

Demonya tentu saja ada di bawah tiap artikel di blog ini. Ini Penampakannya. Terdiri dari tombol share ke Facebook, Twitter, Google Plus, Pinterest, LinkedIn, dan WhatsApp (WA).

Cara Memasang Tombol Berbagi Posting ke Media Sosial

1. 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;}
.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='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=650, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'><span>Facebook</span></a></li>
                    <li class='twitter'><a class='twitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=450, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'><span>Twitter</span></a></li>
                    <li class='gplus'><a class='gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=400, height=500, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'><span>Google+</span></a></li>
                    <li class='pinterest'><a class='pinterest' expr:href='&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.featuredImage + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=735, height=750, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'/></li>
                    <li class='linkedin'><a class='linkedin' expr:href='&quot;https://www.linkedin.com/shareArticle?url=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=950, height=650, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'/></li>
                    <li class='whatsapp whatsapp-desktop'><a class='whatsapp' expr:href='&quot;https://web.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=900, height=550, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'/></li>
                    <li class='whatsapp whatsapp-mobile'><a class='whatsapp' expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url' rel='nofollow' target='_blank'/></li>
                  </ul>
                </div>
  <div class='clear'/>
</div>

4. Save! Simpan template!

Demikian Tombol Berbagi Posting ke Media Sosial di Bawah Postingan Blog Fast Loading.

Alternative: Style 2

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

social share button berbentuk bulat


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 == &quot;item&quot;'>
<div><p><strong>Share this:</strong></p>
<mobileshare class='mobileshare'>
 <a expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=650, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' title='Facebook Share'> <i class='fa fa-facebook'/></a></mobileshare>
<mobileshare1 class='mobileshare1'>
 <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=400, height=500, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' title='Google Share'><i class='fa fa-google-plus'/></a></mobileshare1>
<mobileshare2 class='mobileshare2'>
 <a expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=450, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' title='Tweet This'><i class='fa fa-twitter'/></a></mobileshare2>
<mobileshare3 class='mobileshare3'>
 <a expr:href='&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.featuredImage + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=735, height=750, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' title='Pin It'> <i class='fa fa-pinterest'/></a></mobileshare3>
<mobileshare5 class='mobileshare5'>
 <a class='whatsapp' expr:href='&quot;whatsapp://send?text=&quot;+ data:post.title + &quot; &quot; + 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 == &quot;item&quot;'>
<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>

Demikian cara memasang Tombol Berbagi Posting ke Media Sosial fast loading tanpa javascript. Good Luck & Happy Blogging! (www.contohblog.com).*

Thanks for reading Tombol Berbagi Posting ke Media Sosial di Bawah Postingan Blog Fast Loading | Labels: Desain Blog, Media Sosial
0 Komentar untuk "Tombol Berbagi Posting ke Media Sosial di Bawah Postingan Blog Fast Loading"

1. Komentar spam, link aktif, dan alamat blog tidak akan muncul.
2. Tidak semua pertanyaan sempat/bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *