Memasang Widget Share Button di Postingan - Arlina Design
Memasang Widget Share Button di Postingan - Kembali Arlina Design berbagi tutorial ke tiga di hari ini.

Memasang Widget Share Button di Postingan

Tutor kali ini saya bagikan atas permintaan sobat blogger di blog Arlina Design yang ingin memasang widget share button pada blognya.

Silakan ikuti langkah berikut :

Catatan : Sebelum menerapkan widget ini ada baiknya di template yang sobat gunakan sudah terdapat link fontawesome, jika belum ada silakan terapkan link di bawah ini sebelum tag penutup </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

1. Buka blogger > Klik Template buka Edit HTML > Cari kode  ]]></b:skin> atau </style> kemudian tambahkan kode di bawah ini tepat diatasnya

/* CSS Tooltip */
.arlina-tooltip {position:relative;display:inline-block;}
.arlina-tooltip:before, .arlina-tooltip:after {position:absolute;opacity:0;z-index:1000;pointer-events:none;} 
.arlina-tooltip:hover:before, .arlina-tooltip:hover:after {opacity:1;}
.arlina-tooltip:before {content:'';position:absolute;background:transparent;border:4px solid transparent;position:absolute;}  
.arlina-tooltip:after {content:attr(data-arlina-tooltip)!important;background:#494158;color:#fff;padding:6px 8px;
font-size:11px!important;font-family:'Open Sans'!important;white-space:nowrap;border-radius:2px;-webkit-backface-visibility:hidden;margin-left:initial;}
.arlina-tooltip-top:before {bottom:140%;left:10%;margin:0 0 -9px 0;border-top-color:#494158;}
.arlina-tooltip-top:after {bottom:125%;left:10%;margin:0 0 3px -10px!important;}

/* CSS Share Button */
.share-post{text-align:center;margin-bottom:20px;margin-top:20px;padding:10px 0;}
.widget .post-body > .share-post ul {padding:0;}
.share-post li{float:left;margin:0 1%;width:18%;padding:0;list-style:none;position:relative;}
.share-post li a{padding:6px 7px 6px 38px;color:#fff;display:block;border-radius:2px;font-size:13px;transition:all 0.6s ease-out;}
.share-post li a:hover{color:#fff;}
.share-post li .twitter{background-color:#19bfe5;}
.share-post li .facebook{background-color:#3b5998;}
.share-post li .gplus{background-color:#d64136;}
.share-post li .pinterest{background-color:#cb2027;}
.share-post li .tumblr{background-color:#304e6c;}
.share-post li .twitter:hover,.share-post li .facebook:hover,.share-post li .gplus:hover,
.share-post li .pinterest:hover,.share-post li .tumblr:hover{color:#fff;}
.share-post li:last-child{margin-right:0}
.share-post li .fa:before{position:absolute;top:0;left:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;color:#fff;line-height:20px;text-shadow:2px 2px rgba(0,0,0,0.1);font-size:14px;transition:all 0.6s ease-out;}
.share-post li:hover .fa:before{text-shadow:-2px 2px rgba(0,0,0,0.1);}
.share-post li .fa {display:initial;}

@media only screen and (max-width:640px){
.share-post li a{padding:6px 0 6px 0;}
.share-post li .fa:before{display:none;}}

@media screen and (max-width:480px) {
.share-post li{width:100%}}

2. Selanjutnya tambahkan kode ini tepat di atas </article>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-post'>
              <ul>
                <li><a class='twitter arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/>Twitter</a></li>
                <li><a class='facebook arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/>Facebook</a></li>
                <li><a class='gplus arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Google Plus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/>Google</a></li>
                <li><a class='tumblr arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Tumblr' href='http://www.tumblr.com/share' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/>Tumblr</a></li>
                <li><a class='pinterest arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Pinterest</a></li>
              </ul>
         </div>
<div style='clear:both'/>
</b:if>

3. Simpan template dan lihat hasilnya.

Memasang Widget Share Button di Postingan

Memasang Widget Share Button di Postingan - Kembali Arlina Design berbagi tutorial ke tiga di hari ini.

Memasang Widget Share Button di Postingan

Tutor kali ini saya bagikan atas permintaan sobat blogger di blog Arlina Design yang ingin memasang widget share button pada blognya.

Silakan ikuti langkah berikut :

Catatan : Sebelum menerapkan widget ini ada baiknya di template yang sobat gunakan sudah terdapat link fontawesome, jika belum ada silakan terapkan link di bawah ini sebelum tag penutup </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

1. Buka blogger > Klik Template buka Edit HTML > Cari kode  ]]></b:skin> atau </style> kemudian tambahkan kode di bawah ini tepat diatasnya

/* CSS Tooltip */
.arlina-tooltip {position:relative;display:inline-block;}
.arlina-tooltip:before, .arlina-tooltip:after {position:absolute;opacity:0;z-index:1000;pointer-events:none;} 
.arlina-tooltip:hover:before, .arlina-tooltip:hover:after {opacity:1;}
.arlina-tooltip:before {content:'';position:absolute;background:transparent;border:4px solid transparent;position:absolute;}  
.arlina-tooltip:after {content:attr(data-arlina-tooltip)!important;background:#494158;color:#fff;padding:6px 8px;
font-size:11px!important;font-family:'Open Sans'!important;white-space:nowrap;border-radius:2px;-webkit-backface-visibility:hidden;margin-left:initial;}
.arlina-tooltip-top:before {bottom:140%;left:10%;margin:0 0 -9px 0;border-top-color:#494158;}
.arlina-tooltip-top:after {bottom:125%;left:10%;margin:0 0 3px -10px!important;}

/* CSS Share Button */
.share-post{text-align:center;margin-bottom:20px;margin-top:20px;padding:10px 0;}
.widget .post-body > .share-post ul {padding:0;}
.share-post li{float:left;margin:0 1%;width:18%;padding:0;list-style:none;position:relative;}
.share-post li a{padding:6px 7px 6px 38px;color:#fff;display:block;border-radius:2px;font-size:13px;transition:all 0.6s ease-out;}
.share-post li a:hover{color:#fff;}
.share-post li .twitter{background-color:#19bfe5;}
.share-post li .facebook{background-color:#3b5998;}
.share-post li .gplus{background-color:#d64136;}
.share-post li .pinterest{background-color:#cb2027;}
.share-post li .tumblr{background-color:#304e6c;}
.share-post li .twitter:hover,.share-post li .facebook:hover,.share-post li .gplus:hover,
.share-post li .pinterest:hover,.share-post li .tumblr:hover{color:#fff;}
.share-post li:last-child{margin-right:0}
.share-post li .fa:before{position:absolute;top:0;left:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;color:#fff;line-height:20px;text-shadow:2px 2px rgba(0,0,0,0.1);font-size:14px;transition:all 0.6s ease-out;}
.share-post li:hover .fa:before{text-shadow:-2px 2px rgba(0,0,0,0.1);}
.share-post li .fa {display:initial;}

@media only screen and (max-width:640px){
.share-post li a{padding:6px 0 6px 0;}
.share-post li .fa:before{display:none;}}

@media screen and (max-width:480px) {
.share-post li{width:100%}}

2. Selanjutnya tambahkan kode ini tepat di atas </article>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-post'>
              <ul>
                <li><a class='twitter arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/>Twitter</a></li>
                <li><a class='facebook arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/>Facebook</a></li>
                <li><a class='gplus arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Google Plus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/>Google</a></li>
                <li><a class='tumblr arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Tumblr' href='http://www.tumblr.com/share' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/>Tumblr</a></li>
                <li><a class='pinterest arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Pinterest</a></li>
              </ul>
         </div>
<div style='clear:both'/>
</b:if>

3. Simpan template dan lihat hasilnya.

Related Post

Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter

Notifications

Disqus Logo