2 Langkah Mudah Cara Menambahkan Tombol Share Di Blogspot!

Pada artikel kali ini saya ingin membagikan cara menambahkan tombol share di blogspot, mungkin ada beberapa template blog yang sudah menyediakan fitur ini namun ada sebagian yang belum ada dan kamu ingin menambahkan tombol share di template itu, oke sekarang kita lanjut ke inti pembahasannya supaya tidak terlalu panjang.

Daftar Isi sembunyikan

1 Cara Menambahkan Tombol Share Di Blogspot

1.1 Menambahkan Kode HTML dan JavaScript di Gadget Blogspot

1.2 Menambahkan kode CSS

Cara Menambahkan Tombol Share Di Blogspot

Untuk menambahkan tombol share di blogspot ini ada 2 langkah yang bisa kamu lakukan, yang pertama menambahkan potongan kode HTML dan JavaScript untuk dimasukkan ke dalam gadget blogspot dan yang kedua adalah menambahkan kode CSS-nya.

Menambahkan Kode HTML dan JavaScript di Gadget Blogspot

Login ke dalam dashboard blogger kalian masing-masing.
Pilih menu Edit Layout > Add Gadget > HTML/JavaScript dan copy paste kofe di bawah ini ke dalam gadget tadi.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <div id="sidesocial"> <div class="sidefb"> <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> <script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script> <fb:fan profile_id="YOUR-PAGE-ID" stream="0" connections="8" logobar="0" width="250" height="200" css="<?php bloginfo('stylesheet_url'); ?>?1" rel="stylesheet" type="text/css"></fb:fan> </div>   <div class="sideg"> <div class="g-plusone" data-size="medium" data-href="http://YOUR-URL.com"></div><span>Recommend on Google</span> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div>   <div class="sidetw"> Follow @YOU <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script> </div>   <div class="sidesub"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-ID-HERE', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input type="submit" value="Subscribe" /><span><input type="text" style="width: 115px; padding: 0px 0px 0px 0px; vertical-align: middle; font-size: 0.85em; margin-top: -1px; margin-left: 15px;" name="email" value="Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/><input type="hidden" value="ariff" name="uri"/><input type="hidden" name="loc" value="en_US"/></span></form> </div> </div>

3. Lalu setting kode tadi dengan mengganti:

connections=”8″ dengan jumlah gambar profil orang yang like, misalnya kalau mau 5 saja, ganti dengan connections=”5″
YOUR-PAGE-ID dengan ID page facebook anda
http://YOUR-URL.com dengan URL profil Google+
Recommend on Google dengan kata-kata yang mau anda ganti
YOUR-TWITTER dengan username Twitter
Follow @YOU dengan kata-kata yang mau diganti dan @username_twitter
YOUR-ID-HERE dengan ID Feedburner blogspot
Subscribe dengan teks di tombol yang mau diganti, misalnya Langganan

Lalu save gadget-nya dan atur posisi tampilannya.

Menambahkan kode CSS

Login ke dalam dashboard blogspot
Pilih menu Design > Edit HTML > Ceklis Expand Widget Templates
Copy paste kodingan berikut ini dan taruh di antara <style> dan </style>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 /*-----Facebook fanpage styling start-----*/ .fan_box a:hover{ text-decoration: none; } .fan_box .full_widget{ height: 200px; border: 0 !important; background: none !important; position: relative; }/** Change height here **/ .fan_box .connect_top{ background: none !important; padding: 0 !important; } .fan_box .profileimage, .fan_box .name_block{ display: none; } .fan_box .connect_action{ padding: 0 !important; } .fan_box .connections{ padding: 0 !important; border: 0 !important; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #666; }/** Change font-size here **/ span.total{ color: #4a6cc1; font-weight: bold; }/** Change color here **/ .fan_box .connections .connections_grid { padding-top: 10px !important; } .fan_box .connections_grid .grid_item{ padding: 0 10px 10px 0 !important; } .fan_box .connections_grid .grid_item .name{ font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-weight: normal; color: #666 !important; padding-top: 1px !important; } .fan_box .connect_widget{ position: absolute; bottom: 0; left: 0px; margin: 0 !important; } .fan_box .connect_widget .connect_widget_interactive_area { margin: 0 !important; } .fan_box .connect_widget td.connect_widget_vertical_center { padding: 0 !important; } /*-----Facebook fanpage styling end-----*/   #sidesocial{border: 1px solid #EBEBEB;} .sideg{background-color: #EBF9E8; font-size: .85em;color: black;padding: 9px 11px;line-height: 1px;border-top: 1px solid white;border-bottom: 1px solid #EBEBEB;} .sidetw {background-color: #EEF9FD;padding: 9px 11px;line-height: 1px;border-top: 1px solid white;border-bottom: 1px solid #EBEBEB;} .sidefb {font-size: .85em;color: black;padding: 9px 11px;line-height: 1px;border-top: 1px solid white;border-bottom: 1px solid #EBEBEB;} .sideg span {margin-left: 2px;display: inline-block;vertical-align: text-top;color: #333} .sidesub {padding: 9px 10px;line-height: 1px;background-color: #FFB86D;border-top: 1px solid white;} .sidesub span {width: 115px;}