Memasang Widget Share Button Di Blog

Memasang Widget Share Button Di Blog - Hallo sahabat firmware, Pada Artikel yang anda baca kali ini dengan judul Memasang Widget Share Button Di Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Memasang Widget Share Button Di Blog
link : Memasang Widget Share Button Di Blog

Memasang Widget Share Button Di Blog

Di banyak sekali postingan blog, telah banyak yang memakai widget share button. Tapi apakah kau tahu cara memasang widget share button ?

Pada postingan kali ini kita akan berguru memasang tombol share di blogspot dengan mudah. Silahkan kau ikuti langkah-langkah di bawah ini !

Jika template anda belum ada fontawesome maka silahkan salin isyarat di bawah dan tempatkan di atas isyarat </head>

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

Langkah-langkah :
1. Seperti biasanya kita login dulu ke akun blogger. Setelah itu pilih Template dan Edit HTML.

2. Cari isyarat ]]></b:skin> atau </style> selanjutnya tambahkan isyarat dibawah ini sempurna 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%}} 

3. Selanjutnya cari isyarat </article> dan tambahkan isyarat dibawah ini sempurna diatasnya.

<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> 

4. Simpan template dan silahkan lihat hasilnya.

Referensi dari : www.arlinadzgn.com
Sumber https://ramadaniad.blogspot.com/

Demikianlah Artikel Memasang Widget Share Button Di Blog

Sekianlah artikel Memasang Widget Share Button Di Blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Memasang Widget Share Button Di Blog dengan alamat link https://filefirmware.blogspot.com/2018/12/memasang-widget-share-button-di-blog.html

Share this post