☌
Home / Blogging / Media Sosial

Kode Social Share Posting Blog di Bawah Artikel

Post a Comment

Kode Social Share Posting Blog di Bawah Artikel

Kode Social Share Posting Blog di Bawah Artikel. Memudahkan pengunjung membagikan artikel ke Facebook, Twitter, WhatsApp, dll. Simple dan elegan. Keren dan bagus banget!

Kode Social Share Posting Blog di Bawah Artikel


 CSS


<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

.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:&quot;\f09a&quot;}.social .twitter a:before{content:&quot;\f099&quot;}.social .gplus a:before{content:&quot;\f0d5&quot;}.social .linkedin a:before{content:&quot;\f0e1&quot;}.social .pinterest a:before{content:&quot;\f0d2&quot;}.social .whatsapp a:before{content:&quot;\f232&quot;}.social .external-link a:before{content:&quot;\f35d&quot;}.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:&quot;Facebook&quot;}.social-text .twitter a:after{content:&quot;Twitter&quot;}.social-text .gplus a:after{content:&quot;Google Plus&quot;}.social-text .linkedin a:after{content:&quot;LinkedIn&quot;}.social-text .pinterest a:after{content:&quot;Pinterest&quot;}.social-text .whatsapp a:after{content:&quot;Whatsapp&quot;}.social-text .external-link a:after{content:&quot;WebSite&quot;}@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}

}

</style>

</b:if>


HTML


    <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='&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='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>

</b:includable>


di atas kode     <b:includable id='status-message'>



HTML


<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:include data='post' name='sharethis'/>

</b:if>


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


Post a Comment for "Kode Social Share Posting Blog di Bawah Artikel"