Gudang Tutorial : Cara Memasang Tombol Social Share Button Di Blogger

cara memasang tombol social share button di blogger dengan mudah 8

Social Media adalah salah satu tempat untuk mempromosikan blog kalian agar terkenal dan mendapatkan banyak pengunjung.

cara membuat tombol share addthis tutorial menggunakan addthis untuk membuat tombol share dibawah postingan blog membuat tombol share facebook di website cara membuat widget share di blog membuat tombol share keren di blog membuat tombol share di setiap postingan membuat tombol share facebook dengan php cara membuat tombol share melayang di blog tombol share responsive cara membuat tombol share melayang cara membuat tombol share melayang di samping atas bawah blog cara membuat memasang tombol share di bawah atas samping sidebar di samping kiri kanan tutorial cara memasang tombol share di blog wordpress blogger cara memasang tombol share sumome social share keren responsive ringan gratis mudah tutorial pemasangan ikon tombol social share tidak mau terload rusak tidak muncul kendala masalah cara memasang tombol social share diakhir postingan blog januari februari maret april mei juni juli agustus september november desember 2015 2016 2017 2018 2019

Jika kalian cukup pintar untuk memanfaatkan Social Media, seperti Facebook, Twitter, ataupun Google+, maka bukan hal yang tidak mungkin bahwa nanti blog kalian akan dikunjungi banyak pengunjung dan membuat blog kalian menjadi terkenal

cara memasang tombol social share button di blogger dengan mudah 11.jpg

cara memasang tombol social share button di blogger dengan mudah 10.jpg

Untuk dapat mengoptimalkan penggunaan Social Media, saya akan memberikan tutorial melakukan pemasangan tombol Social Share, pengunjung akan dapat membagikan artikel yang dimuat di situs Kalian ke Social Media hanya dengan mengklik 'suatu tombol tersebut'. Dan seperti yang saya tuliskan pada judul artikel ini "Cara Membuat Tombol Social Share di Blog", saya akan membagikan tidak hanya satu tapi 3 style tombol Social Share, jadi silahkan pilih tampilan style tombol yang kalian suka.

Untuk selengkapnya, silahkan ikuti langkah-langkah dibawah ini untuk memasang tombol social share di blog:

Cara Pertama = Style 1

Cara Pertama akan membuat hasil tombolnya menjadi seperti ini :

cara memasang tombol social share button di blogger dengan mudah 1

Pertama, Login Blogger kalian

Setelah itu, masuk ke menu Template--> Edit HTML

Tekan tombol CTRL+F (tombol yang berfungsi untuk mencari), kemudian cari kode <head>

Jika sudah ketemu, copy-paste script dibawah ini tepat dibawah kode <head>

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

Kemudian cari kode <data:post.body/>

Jika sudah, copy-paste script dibawah ini tepat diatas kode <data:post.body/> jika Anda ingin tombol social share muncul dibawah judul, dan pasang script dibawah ini tepat dibawah kode <data:post.body/> jika Anda ingin tombol share muncul di akhir artikel.

<style>
.sharepost li{width:19%;padding:0;list-style:none;}
.sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.sharepost li a:hover{opacity:1;color:#444;border:double #fff;}
.sharepost li .twitter{background-color:#55acee;}
.sharepost li .facebook{background-color:#3b5998;}
.sharepost li .gplus{background-color:#dd4b39;}
.sharepost li .pinterest{background-color:#cc2127;}
.sharepost li .linkedin{background-color:#0976b4;}
.sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
.sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;}
.sharepost li{float:left;margin-right:1.2%}
.sharepost li:last-child{margin-right:0}
.sharepost li .fa:before{margin-right:5px}
</style>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div class='sharepost'>
                <ul>
                <li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>

                <li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>

                <li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>

    <li><a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>

                <li><a class='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'/>Share</a></li>

                </ul>
         </div> </b:if>

Jika sudah selesai kalian "Simpan Template"
Sekarang Lihat Blog kalian !!!

Cara Kedua = Style 2

Cara kedua akan membuat tampilannya menjadi seperti ini

tutorial memasang tombol social share button di blogger dengan mudah

Pertama Login Blogger kalian

Setelah itu, masuk ke menu Template--> Edit HTML

Tekan tombol CTRL+F (tombol yang berfungsi untuk mencari),kemudian cari kode <head>

Jika sudah, copy-paste script dibawah ini tepat dibawah kode <head>

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

Kemudian cari kode <data:post.body/>
Jika sudah, copy-paste script dibawah ini tepat diatas kode <data:post.body/> jika Anda ingin tombol social share muncul dibawah judul, dan pasang script dibawah ini tepat dibawah kode <data:post.body/> jika Anda ingin tombol share muncul di akhir artikel.

<div class="don-share" data-bubbles="top" data-limit="3">
<div class="don-share-total"></div>
<div class="don-share-facebook"></div>
<div class="don-share-twitter"></div>
<div class="don-share-google"></div>
<div class="don-share-pinterest"></div>
<div class="don-share-linkedin"></div>
<div class="don-share-tumblr"></div>
<div class="don-share-stumbleupon"></div>
<div class="don-share-reddit"></div>
<div class="don-share-hackernews"></div>
<div class="don-share-buffer"></div>
<div class="don-share-xing"></div>
<div class="don-share-pocket"></div>
<div class="don-share-fancy"></div>
<div class="don-share-yummly"></div>
<div class="don-share-scoopit"></div>
<div class="don-share-weibo"></div>
<div class="don-share-vk"></div>
<div class="don-share-mailru"></div>
<div class="don-share-odnoklassniki"></div>
<div class="don-share-hatena"></div>
</div>
<script type="text/javascript"> 
(function() {
var dr = document.createElement('script');
dr.type = 'text/javascript'; dr.async = true;
dr.src = '//share.donreach.com/buttons.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);
})();
</script>
<style>
.don-share .don-share-total {
    line-height: 18px;
    margin-right: 30px;
    display: none !important;
    position: static;
}
.don-share .don-share-expand {
    color: #333;
    display: none !important;
    background-color: #fff;
    border-color: #ccc;
}
</style>

Jika sudah selesai kalian "Simpan Template"
Sekarang Lihat Blog kalian !!!

Cara Ketiga = Style 3

tutorial memasang tombol social share button di blogger dengan mudah 1

Pertama Login Blogger kalian
masuk ke menu Tata Letak --> Tambahkan Widget
Pilih HTML/JavaScript
Kemudian, masukan script dibawah ini ke kolom Konten

<style>
#seocipssharebtn {position:fixed; bottom:20%; left:10px; float:left; background-color:#fff;padding:0 0 2px
0;z-index:10;box-shadow:0 2px 2px #666;-webkit-box-shadow:0 2px 2px #666;border-radius:4px;-webkit-border-radius:4px;border: 1px solid #ddd;moz-animation:bawah 7s;-webkit-animation:bawah 7s;animation:bawah 7s;}
#seocipssharebtn .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
@media screen and (max-width:480px){#seocipssharebtn{display:none;}}
@-webkit-keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
@keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
</style>
<div id='seocipssharebtn' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>

cara memasang tombol social share button di blogger dengan mudah 2

Jika sudah klik "Simpan"

Gimana ? Gampangkan caranya semuanya hampir sama kok tinggal copas script diatas aja, awalnya mungkin terlihat ribet, tapi kalo dipraktekan gaakan sulit untuk dilakukan, Semoga Bermanfaat !!

Gudang Tutorial

Halaman

Sabtu, 27 Januari 2018

Cara Memasang Tombol Social Share Button Di Blogger

Tidak ada komentar:

Posting Komentar

Laporkan Penyalahgunaan

Label