Memasang Widget Share Button Di Blog

Memasang Widget Share Button Di Blog - Kembali lagi di blog Cara2xMudah, Pada kesempatan kali ini admin akan membagikan artikel tentang Memasang Widget Share Button Di Blog, dan admin telah menyiaplkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan pada Artikel Blogger, yang kami tulis ini dapat dengan mudah anda pahami. baiklah, tidak usah berlama-lama 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/