Cara Membuat Tombol Share Melayang

Untuk mengisi posting kali ini penulis akan memberikan tutorial mengenai widget share social button di blog yang dapat mempercantik tampilan blog sobat, namun untuk kali ini bentuk share social buttonya letaknya berada di side bar blog, dengan efek loop ketika kursor mouse di arahkan ke social buttonnya, penasaran berikut penampakanya

Baiklah bagi yang berminat untuk mengaplikasikannya di blog sobat, berikut cara membuat tombol share melayang.

1. Masuk ke Blogger 
2. Masuk ke pilihan Template lalu pilih edit HTML jangn lupa untuk memback up template sobat terlebih dahulu
3. Centang Expand Template Widget
4. Cari kode berikut  
   ]]></b:skin>
5. Kemudian Copy - paste kode CSS berikut, tepat diatas kode yang sudah sobat cari tadi  

   .flt-wdt {
   position: fixed;
   right: 5px;
   top: 40%;
   }
   .flt-wdt img {
   float: right;
   clear: right;
   margin: 5px;
   -moz-transform: scale(.8) ;
   -webkit-transform: scale(.8) ;
   -o-transform: scale(.8) ;
   -ms-transform: scale(.8) ;
   transform: scale(.8) ;
   -webkit-transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   -o-transition: all .2s ease-in-out;
   transition: all .2s ease-in-out;
   }
   .flt-wdt img:hover {
   -moz-transform: scale(1.1) rotate(6deg);
   -webkit-transform: scale(1.1) rotate(6deg);
   -o-transform: scale(1.1) rotate(6deg);
   -ms-transform: scale(1.1) rotate(6deg);
   transform: scale(1.1) rotate(6deg);
   }

6. Kemudian buat widget baru >> masuk ke Tata Letak 
7. Kemudian pilih Buat widget baru >> HTML/ Java script
8. Copy - paste kode di bawah ini  

   
   <div class='flt-wdt'>
     <!-- Twitter -->
     <a href='http://twitter.com/blogger_raju' target='blank'><img alt='Twitter' height='48' src='https://lh3.googleusercontent.com/-HiZe1pm_Rok/ToE0l_3Wl4I/AAAAAAAACvY/ztE85o-w3Lg/s800/Fa_Twitter_creatures.png' width='48'/></a>
     <!-- Facebook --> 
     <a href='http://www.facebook.com/Blogger.Tutorials' target='blank'><img alt='Facebook' height='48' src='https://lh3.googleusercontent.com/-QaLRred01jw/ToE0l2ruGBI/AAAAAAAACvc/ydfvF-xOi_4/s800/Facebook_creatures.png' width='48'/></a>
     <!-- RSS --> 
     <a href='http://feeds.feedburner.com/om-simplebloggertutorials' target='blank'><img alt='Feed' height='48' src='https://lh5.googleusercontent.com/-16rpSgs_Rdk/ToE0l6-gnjI/AAAAAAAACvg/pbKahocVGVg/s800/Feed_creatures.png' width='48'/></a>
   </div>
   
   

9. Keterangan :

• Untuk Tulisan berwarna merah dan di coret pada kotak di atas, silakan ganti dengan url ID facebook, twitter dan feedburner sobat 

Demikian, yang bisa penulis bagikan, semoga dapat bermanfaat..

cara pasang rekomendasi bar facebook di blog

Masih membahas tentang plug-in facebook di blog, kali ini admin mau berbagi cara mengenai cara pasang rekomendasi bar facebook di blog, apa itu rekomendasi bar facebook?, rekomendasi bar facebook adalah plug-in yang disediakan oleh vendor facebook untuk memudahkan pembaca yang menyukai artikel/ Halaman blog tersebut di facebook dan merekomendasikan/ memberikan sebuah referensi/ saran untuk teman di facebook ataupun ketika pembaca blog membuka salah satu artikel dalam blog itu. Bagaimana pusing kan,? hehe… okelah, kita lihat saja seperi apa tampilan plugin yang satu ini :










Sudah jelas sekarang mengenai apa itu rekomendasi bar facebook pada blog!, bagi yang kurang jelas silakan angkat tangan di tugu monas (haha,,. kejauhann)
Baiklah bagi yang berminat untuk pasang rekomedasi bar di blog seperti gambar di atas, silakan ikutin step-step di bawah ini.
1. Masuk ke akun facebook sobat, lalu masuk ke facebook apps
2. Buat salah satu aplikasi dengan meng-klik tombol letaknya ada di pojok kanan atas, halaman facebook apps tersebut
3. Lalu akan muncul tampilan seperti ini
5. Isi kolom app name dengan nama sesuai selera sobat, sebagai contoh My Recommendation Bar,  lalu yang lainnya kosongkan saja. kemudian akan ada tampilan seperti gambar di bawah
  Kemudian isi yang kolom Site URL  dengan alamat Blog sobat, kemudian klik save changes.



6. Oke aplikasi plug-in di facebook sudah selesai, sobat tinggal mengingat (copas) kode yang ada seperti ini, yang ditanda oleh tanda panah


7. Sekarang saatnya untuk utak-atik HTML template sobat, caranya masuk blogger.com, kemudian pilih template, >> edit HTML. Jangan lupa untuk membackup template sobat dahulu ya.!
8. Cari kode berikut

<html

hapus kode tadi dan tempatkan kode berikut

<html xmlns:fb='http://ogp.me/ns/fb#'

9. Cari kode berikut

<body>

kemudian paste kode berikut tepat di bawah kode yang sobat cari tadi

<div id='fb-root'/> <script> //Facebook Recommendation bar by www.mybloggertricks.com //<![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/en_US/all.js#xfbml=1&appId=***************";   fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); //]]> </script> <b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div style='z-index:999999; position:absolute;'> <fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://www.baca31.blogspot.com' trigger='40%'/></div> </b:if></b:if>

--- ketarangan --
- ganti tanda ***************  dengan app ID facebook sobat yang pada step pertama kita buat
- ganti http://www.baca31.blogspot.com dengan alamat URL blog sobat
10. Simpan template sobat, dan lihat hasilnya.


Demikian semoga bermanfaat..!