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

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

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 cara memasang Tombol Berbagi Posting ke Media Sosial fast loading tanpa javascript. Good Luck & Happy Blogging! (www.contohblog.com).*

Related Posts

0 Komentar untuk "Tombol Berbagi Posting ke Media Sosial di Bawah Postingan Blog Fast Loading"

1. Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *