Langsung ke konten utama

Cara Membuat Social Like Button Sticky Melayang disamping Blog

Cara Membuat Social Like Button Sticky Melayang disamping Blog
Cara Membuat Social Like Button Sticky Melayang, Sobat blogger, social Like button sticky ini adalah sebuah widget social yang terdapat di pinggir template, yang di maksud sticky ini adalah melekat dan widget ini juga melayang, widget social like ini juga muncul di semua halaman, untuk kelebihannya adalah untuk memudahkan supaya pengunjung mengklik tombol like social media yang terdapat di sebuah posting atau blog kita, meski widget ini muncul di semua halaman namun penempatannya pun memang tidak menggagu pembaca, karena anda bisa meletakannya di pinggir template atau di sisi kiri template, oke sobat blogger, jika anda ingin membuat sticky widget like social ini, silahkan ikuti tutorialnya.

Cara Membuat Social Like Button Sticky Melayang Disamping Blog

1. Buka akun blogger.
2. Pilih menu tata letak > Add widget >Pilih  HTML/Java script.
3. Lalu paste code di bawah ini tepat di kolom pop up yang muncul
 
<!-- floating share bar Start madamvia.web.id-->
<style type="text/css">
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;/*bs-fsmsb*/margin:5px 5px 0 5px;}
</style>
<div id='pageshare' title="Get this from madamvia.web.id">
<div class='sbutton' id='like' style='margin-left:8px;'>
<div id="fb-root"></div>
<script>(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/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</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 style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://www.madamvia.web.id/">widget</a></div><!-- Do not remove this link -->
</div>
<!-- floating share bar End --> 

 4. Klik save.

Catatan : Agar widget tersebut muncul di bagian kiri template, pastikal letakan widget tersebut penempatannya seperti contoh gambar dibawah ini.
Cara Membuat Social Like Button Sticky Melayang disamping Blog
 sumber:

Komentar

Postingan populer dari blog ini

Cara Membuat Logo TRANS TV dan TRANS7 Terbaru! dengan Coreldraw

negripelosok.blogspot.com – Tutorial CorelDraw kali ini saya mencoba membuat logo stasiun televisi yang cukup terkenal di Indonesia yaitu Trans 7 dan Trans Tv. Emang sih keliatan logo ini sangat rumit tapi mudah ko...Sebelum ke pokok permasalahannya saya ingin berbagi info sedikit tentang logo baru Transtv dan Trans7. Pada, 15 Desember 2013, TRANS CORP resmi meluncurkan logo baru on air dari TRANS TV dan TRANS 7. Bertepatan pada pesta “12 TRANS untuk Indonesia, sekitar pukul 21.00 WIB, logo TRANS TV dan TRANS 7 resmi di luncurkan  dari SICC-Sentul, Jakarta. Kini logo “TRANS” pada TRANS TV dan TRANS 7 sama dengan yang digunakan TRANS MEDIA. Masing-masing warana dalam logo ini memiliki makna dan filosofi. Warna kuning sebagai cerminan warna keemasan pasir pantai yang berbinar dan hasil alam nusantara sekaligus melambangkan optimisme masyarakat Indonesia. Warna hijau mengambarkan kekayaan alam Indonesia yang subur, serta memiliki ketangguhan sejarah bangsa. Warna biru melamba...

Cara Membuat Logo Google Terbaru dengan Coreldraw

negripelosok.blogspot.com- Pada tutorial kali ini kita akan belajar  Cara Membuat Logo Google Terbaru dengan Coreldraw, langsung aja ikuti beberapa langkah mudah Tutorial CorelDraw dibawah ini: Sebelum kita membuat objek yang diinginkan, pertama Anda harus membayangkan bentuk dari objek yang akan dibuat Cara Membuat Logo Google Terbaru dengan Coreldraw 1.    Buka aplikasi CorelDraw dan pilih new blank document 2.    Lihat di property bar, atur kertas menjadi A4 dan ubah unit menjadi centimeter 3.    Klik Ellipse Tool (F7), lalu buat 2 buah lingkaran dengan diameter masiing-masing 6x6 dan 10x10. 4.    Blok semua lingkaran Tekan huruf  P  pada keyboard agar semua lingkaran membentuk seperti gambar dibawah 5.    Klik Rectangle tool kemudia buat objek persegi panjang, kemudian klik dua kali pada objek tsb sehingga node node yang ada di sudut persegi panjang dan bisa diputar, putar seh...

Cara Membuat Logo Android dengan Coreldraw

negripelosok.blogspot.com - assalamualaikum…. Sobat blogger kali ini kita akan membahas tutorial bagaimana Cara membuat logo Android dengan Coreldraw. Seiring dengan perkembangan zaman saat ini hampir seluruh handphone keluaran baru pasti dilengkapi dengan system Android. Cara Membuat Logo Android dengan CorelDraw 1.    Pilih Ellipse tool pada toolbox, buat objek setengah  lingkaran dengan cara atur pada property bar seperti gambar dibawah 2.    Kemudian buat dua buah lingkaran ini digunakan untuk membuat matanya 3.    Untuk membuat tanduk si Android, pilih Rectangle tool pada toolbox kemudian buat objek seperti gambar dibawah 4.    Kemudian seleksi objek kemudian pilih weld di property bar 5.    Hasilnya akan seperti ini. 6.    Kepalanya selesai kita buat, selanjutnya kita akan membuat bagian badan dari si android dengan cara pilih Rectangle tool pada toolbox, buat objek pers...