Jumat, 21 Desember 2018

Memasang Tombol Share Inovatif Dibawah Posting Blog

Tombol social share ialah salah satu belahan paling penting yang mesti anda terapkan di blog. Dimana tujuan utama bagi pemilik blog adalah untuk menghadirkan refferal traffic. Agar kiriman atau postingan profesional anda lebih sering di share ke facebook, di tweet ke twitter maupun diberi g+1 maka salah satu hal yang sanggup mempengaruhinya adalah desain dari tombol social share itu sendiri yang mesti terlihat menarik.

Berikut ini saya sudah bikin tombol social share twitter tweet, facebook share dan tombol g+1 yang sudah di desain dengan performa yang berlawanan dari milik anda atau kompetitor anda yaitu dengan memakai pengaruh css3 dan tanpa memakai gambar dimana cara kerja dari tombol ini ia akan menimbulkan tombol share twitter, tombol bagikan ke facebook dan google plus one pada saat pembaca mengerjakan hover yang sanggup anda pasang dibawah postingan blog.

 Tombol social share ialah salah satu belahan paling penting yang mesti anda terapkan di blog Memasang Tombol Share Kreatif Dibawah Posting Blog

Langkah-langkah memasang tombol share dibawah posting blog

1) Masuk ke dashboard akun blogger anda
2) Klik Template lalu laksanakan Back up
3) Klik Edit Template lalu cari tags pembuka
<div class='post-footer-line post-footer-line-1'>
4) Salin semua arahan dibawah ini lalu tempatkan tepat dibawah tags tersebut

Klik ganda untuk menyalin
 <style type="text/css"> @import "//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"; #kotak{position:relative;margin:auto;text-align:center} #kotak .bagikeun{border-radius:10%;width:100px;height:80px;background:#eee6dd;display:inline-block;margin:0 10px;overflow:hidden;font-family:'Roboto',sans-serif;text-align:center;color:#f0f0f0;cursor:default} #kotak .bagikeun:before{width:100px;background:#eee6dd;display:block;font-family:'FontAwesome',sans-serif;font-size:30px;line-height:90px;text-align:center;color:#777;transition:font-size .5s,line-height .5s;margin-bottom:5px} #kotak .bagikeun:hover:before{font-size:200%;line-height:50px;text-align:center} #kotak .twitter:before{content: '\f099'; color:#fbfbfb;background: #00cdff;} #kotak .facebook:before{content: '\f09a'; color:#fbfbfb;background: #3c5f96;} #kotak .google:before{content: '\f0d5';color:#fbfbfb;background: #d24228;} </style> <div id="kotak">   <div class="bagikeun twitter"><a class='twitter-share-button' data-count='horizontal' data-via='User Name' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script> </div>   <div class="bagikeun facebook"><div class="fb-share-button" expr:data-href='data:post.url' data-type="button_count"></div> <div id="fb-root"></div> <script>//<![CDATA[ (function(d, s, id) {   var js, fjs = d.getElementsByTagName(s)[0];   if (d.getElementById(id)) return;   js = d.createElement(s); js.id = id;   js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&appId=568581339861351";   fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); //]]> </script></div>   <div class="bagikeun google"> <div class="g-plusone" data-size="medium">   </div>      <!-- Place this tag after the last +1 button tag. -->   <script type="text/javascript">     (function() {       var po = document.createElement('script');       po.type = 'text/javascript';       po.async = true;       po.src = 'https://apis.google.com/js/plusone.js';       var s = document.getElementsByTagName('script')[0];       s.parentNode.insertBefore(po, s);     }     )();     </script></div> 
5) Klik Simpan

Satu hal yang perlu anda rubah adalah appId=568581339861351 ganti dengan appId Facebook milik anda. Semoga anda menyukainya. Enjoy & Happy Coding!

Sumber https://henponterbaru.blogspot.com

Buat Dp Bbm Online Sendiri Disini Aja

dp bbm gesekan pena online dengan mengunakan cursor selaku alat pembuatnya. Jika sudah jawaban dan ingin disimpan, tekan tombol Simpan. A...