Cara pasang tombol like FB di atas postingan blog

Halo sob.. pada postingan kali ini saya mencoba memposting tutorial blogspot yaitu cara memasang tombol like facebook di atas postingan blogspot, seperti contoh berikut ini :

postingan ini saya tulis sebagai arsip saya dan apabila sobat ada yang membutuhkan silahkan baca dengan detail tutorial berikut, cara ini saya dapat dari beberapa sumber dan saya rangkum kembali. berikut langkah-langkah cara memasang tombol like facebook di atas postingan blogspot.
1. Login ke akun Blogger dan buka menu Layout / Rancangan > Edit HTML
2. Kemudian klik / centang "Expand Widget Templates"

3. Cari kode <data:post.body/>
4. Kemudian copy kode di bawah ini dan paste di atas  <data:post.body/>

<b:if cond='data:blog.pageType == "item"'><br /> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&action=like&layout=standard&show_faces=false&width=450&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/><br /> </b:if>

4. Klik tombol simpan template

5. Selesai

Itulah langkah-langkah dalam membuat tombol like facebook di atas postingan blogspot. Untuk kritik dan saran pembaca silahkan isi pada kotak komentar di bawah.

terima kasih

Menggeser Kotak Komentar Terbaru Blogger

Kotak Komentar Terbaru Blogger

New Blogger Comment Form - Hari ini ada update dari Blogger, yaitu hadirnya desain baru untuk kotak komentar. Perbaikannya dari segi tampilan saja menurut saya, serta chekbox notify via email. Overall, secara tampilan terlihat lebih elegan daripada form sebelumnya.

Akan tetapi masih saja ada kekurangan, yaitu apabila blog menggunakan Bahasa Indonesia maka sobat akan melihat tombol Publikasikan yang tidak presisi, ada huruf yang terpotong. Kecuali menggunakan Bahasa Inggris, tombol akan terlihat presisi dengan kalimat Publish.

Jujur saja, ada yang tidak suka dengan tampilan baru ini, yaitu iframe form menggunakan kotak luar sehingga form komentar terlihat sempit. Ditambah lagi dengan blok abu-abu muda dibawah tombol.

Satu hal lagi, kotak komentar blogger terbaru ini agak bergeser ke kanan, sehingga ujung kotak isian (form) melibihi blok komentar, atau pada sebagian blog malah terpotong. Untuk hal ini masih ada solusi buat sobat.

Menggeser Kotak Komentar Terbaru Blogger

Pada tutorial sebelumnya (baca : Cara Menambah Ukuran Form Komentar Blogger) saya telah menjelaskan cara menambah lebar form komentar, sehingga sama rata dengan komentar di atasnya. Bagi sobat yang telah menerapkan tutorial tadi, untuk menggeser kotak komentar ke kiri tinggal tambah margin-left:-1% pada #comment-editor.

Bagi yang belum menerapkan, silahkan tambahkan kode ini di atas ]]></b:skin>

#comment-editor{width:103%!important;margin-left:-1%}
.comment-form{width:100%;max-width:100%}

NB : Bagi yang pintar Bahasa Inggris, silahkan sampaikan keluhan di atas ke fihak Blogger  

sumbr ; http://blog.kangismet.net/2013/09/kotak-komentar-terbaru-blogger.html

Membuat Navigasi Halaman dengan Javascript di Blog

Page Number atau Navigasi Halaman dengan menggunakan nomor atau angka adalah sebagai alat navigasi yang berfungsi selain dapat mempercantik tampilan halaman utama juga dapat memudahkan pengunjung dalam menjelajahi content sebuah website atau blog. Lihat contohnya pada halaman utama blog saya ini, kira-kira tampilan seperti pada gambar di samping.

Kode css dan javascript ini saya ambil dari blog mybloggerthemes dengan bentuk yang sama persis. Tapi jangan menelan mentah-mentah kode css yang ada karena sobat bisa kreasikan sesuai dengan warna background blog sobat. Jika kode script ini saya pasang langsung di template pasti akan membuat sobat pusing karena kode ini sangat panjang, oleh karenya saya simpan saja di google sites. Berikut cara pemasangannya.

1. Setelah login di blogger, silahkan anda klik Rancangan.
2. Kemudian klik tab Edit HTML.
3. Untuk radio button Expand Template Widget tidak usah di klik karena akan menambah pusing nantinya.
4. Letakkan kode css berikut ini sebelum kode ]]></b:skin>
   

   .showpageNum a {
   color:#FFF;padding:4px  10px;
   margin:0 2px;
   text-decoration:none;
   -webkit-border-radius:2px;-
   moz-border-radius:2px;
   background:#848484
   }          
   .showpageOf {
   color:#222;
   margin:0 6px 0 0
   }           
   .showpageNum a:hover {
   background:#222;
   color:#FFF
   }          
   .showpagePoint {
   color:#FFF;
   text-shadow:0 1px 2px #333;
   padding:4px  10px;
   margin:0 2px;
   -webkit-border-radius:2px;
   -moz-border-radius:2px;
   background:#222;
   text-decoration:none
   }

5. Dan letakkan kode berikut sebelum </body>
   

   <script  type='text/javascript'>        
   var  home_page=&quot;/&quot;;         
   var  urlactivepage=location.href;         
   var  postperpage=10;         
   var  numshowpage=7;         
   var upPageWord  =&#39;&#9668;&#39;;         
   var downPageWord  =&#39;&#9658;&#39;;         
   </script>         
   <script  src='http://miscah.googlecode.com/files/pagenav.js'  type='text/javascript'/>

6. Kemudian Simpan Template.

Keterangan :

• var postperpage=10; adalah jumlah postingan dalam satu halaman, sesuaikan dengan jumlah postingan sobat, jika jumlah postingannya 5 maka ganti angka tersebut dengan angka 5.
• var numshowpage=7; adalah jumlah tombol navigasi dalam satu halaman.

Jika temen-temen tertarik silahkan dicoba, tutorial ini saya dapat dari mas Doddy Farial. Terima kasih kepada Mas Doddy semoga blognya tambah ramai pengunjung.

Sumbr:http://www.maskolis.com/2011/01/membuat-navigasi-halaman-dengan.html