Senin, 24 Maret 2014

Floating Facebook like box untuk Blogger

15.58    No comments
Floating Facebook like box untuk Blogger

Langkah 1
  • Masuk ke Blogger anda
  • Tata Letak
  • Tambahkan Gadget
  • pilih HTML/JavaScript
  • Masukan Kode di bawah ini

ganti http://www.facebook.com/PasangWidget dengan alamat facebook fanspage anda.

Langkah 2
Jika widget "Floating Facebook like box untuk Blogger" tidak berjalan sempurna, anda harus menambahkah Jquery.
  • Pergi ke : Template => Edit HTML
  • cari kode <head> , letakan kode di bawah ini setelah kode <head>

  • lalu simpan template.
Read More

Cara Pasang Widget Jam di Blog

11.08    No comments
Pada kesempatan kali ini pasangwidget.blogspot.com akan memberikan trik dan panduan tentang cara pasang gadget/widget jam pada blogspot.

  • Sebelumnya kunjungi blog ini www.clocklink.com
  • Masuk menu Gallery . ( Disini kita bisa memilih kategori-kategori yang sesuai dengan yang kita inginkan ). sebagai contoh kategori digital seperti ini :
  • Pilih jam yang anda suka, kemudian klik View HTML Tag
  • Akan muncul halaman baru. Disitu ada ketentuan-ketentuan yang memakai bahasa Inggris, pilih Accept.
  • Selanjutnya kita diminta memilih warna ( color ), time zone, serta ukuran jam agar sesuai dengan sidebar blog
  • Kemudian copy kode yang diberikan
  • Selanjutnya, Masuk pada Blogger, masuk mode Rancangan, pada Elemen Laman klikTambah Gadget
  • Pilih HTML/Javascript, kemudian Paste kode yang tadi di copy, lalu Simpan
  • Demikian blogger tutorial mengenai Cara Pasang Widget Jam pada Blogspot.
Menggunakan widget gratis ini menurut saya ada kekurangannya . yaitu ada logo "pembuat" pada saat kursor mengarah di widget. jika hal ini tidak jadi masalah untuk anda, silahkan pasang widget jam ini di blog anda....! 
Semoga bermanfaat dan semoga berhasil.
Read More

Minggu, 07 Juli 2013

Mengganti Bullet List Blogger Menjadi Keren

15.18  ,  No comments

Mengganti Bullet List Blogger Menjadi Keren :

  • Seperti biasa mas bro, masuk ke akun blogger anda.
  • Lalu masuk ke template dan edit HTML.
  • Anda cari kode ]]></b:skin> , gunakan fungsi CTRL+F untuk pencarian.
  • Lalu masukan kode dibawah ini tepat diatas kode ]]></b:skin> dan save jika sudah selesai.
.post ul {
margin: 5px 0px 5px 10px;padding: 0 0 0 20px;list-style-image: url(http://1.bp.blogspot.com/-e6GJemvAOXc/UdnmTMtn5dI/AAAAAAAABZg/srb3nAVb6pk/s1600/251.gif);}
.post li {margin: 0 0 0 10px;padding: 3px;
}
.post li:hover {
list-style-image: url(http://1.bp.blogspot.com/-EJkzfrdughY/UdnmTMZbGvI/AAAAAAAABZc/_uBCsqH7iJE/s1600/255.gif);cursor: pointer;}

Costumalisasi :


  • .post li:hover { bla  bla bla } adalah effect hover atau efek mouse saat diarahkan , Jika tidak ingin effect hover anda bisa hapus kode nya.
  • http://1.bp.blogspot.com/-e6GJemvAOXc/UdnmTMtn5dI/AAAAAAAABZg/srb3nAVb6pk/s1600/251.gif dan http://1.bp.blogspot.com/-EJkzfrdughY/UdnmTMZbGvI/AAAAAAAABZc/_uBCsqH7iJE/s1600/255.gif adalah URL gambar


Pilihan Gambar :


http://3.bp.blogspot.com/-VgY5HIBADcE/T-Ae_38EuoI/AAAAAAAAEOk/Gs1nSHBGv7I/s1600/bullet_error.png

http://1.bp.blogspot.com/-ESf_DXPfOkA/T-AfAcFN-WI/AAAAAAAAEOs/8D735Aue-Lw/s1600/bullet_home.png
http://2.bp.blogspot.com/-UgEKqjyP6pM/T-AfBcHydVI/AAAAAAAAEO8/NNryZFgmP8U/s1600/bullet_tick.png
http://1.bp.blogspot.com/-e6GJemvAOXc/UdnmTMtn5dI/AAAAAAAABZg/srb3nAVb6pk/s1600/251.gif
http://1.bp.blogspot.com/-EJkzfrdughY/UdnmTMZbGvI/AAAAAAAABZc/_uBCsqH7iJE/s1600/255.gif

http://3.bp.blogspot.com/-iHyDInZidks/T-CQPj0yjcI/AAAAAAAAO5c/8tIQkJQtS98/s1600/star_bullet.png

http://1.bp.blogspot.com/-g3oZgkw7Nf4/T-CRdUryAoI/AAAAAAAAO5s/RWHTvnLzvhg/s1600/Love+icon.png

http://3.bp.blogspot.com/-NOERfdCP5aQ/T-CQ7ZZwLoI/AAAAAAAAO5k/MKiAn2f01iQ/s1600/Green+plus.png
http://3.bp.blogspot.com/-fWwI1sML0sQ/T-Ae-aNwdfI/AAAAAAAAEOU/_fvmTBy-MOY/s1600/11-dot-green.png

http://3.bp.blogspot.com/-o4lLQi8My4E/T-AfA1XL6eI/AAAAAAAAEO0/flMNtnRrbpQ/s1600/bullet_page_white.png

http://4.bp.blogspot.com/-vIaVFIRGpq8/T-AfDTS3hzI/AAAAAAAAEPU/ozdtdue1sVU/s1600/chrome_icon.gif

http://1.bp.blogspot.com/-J1aT05u-5pA/UReVRCHPbsI/AAAAAAAADKg/8J9IEvNVhpU/s1600/bullet-point-1.gif

http://4.bp.blogspot.com/-5xdi-XmzJ9M/UReVRh_w44I/AAAAAAAADKo/0F5adOWchXE/s1600/bullet-point-2.gif

http://3.bp.blogspot.com/-fk3C92N4fnc/UVHt8_rSJGI/AAAAAAAADi4/2qmyDcJUX9Y/s1600/shinemat-love-blue.gif

http://3.bp.blogspot.com/-P6BMwHSo1HA/UcxPJuzG7EI/AAAAAAAABog/OX-f6rrqWD4/s16/love-green.gif

http://4.bp.blogspot.com/-i3VEKmtpXUA/URvSb6VY6lI/AAAAAAAADQs/JEBlMgoix1Q/s1600/plus-blue-saimoom.png

http://3.bp.blogspot.com/-xD_eU6OP-NU/T0awJIr-w6I/AAAAAAAAAlU/WXppP7d6Ypk/s1600/plus-green-saimoom.png
http://3.bp.blogspot.com/-aw-UvZUCHLU/UQrTOUrpjZI/AAAAAAAADAo/qij7A07mNrQ/s1600/pp-icon-2.png
http://2.bp.blogspot.com/-FgOUOPZUeVc/UQrTMrdhJJI/AAAAAAAADAg/jDC4XAoNMZs/s1600/pp-icon-1.png
http://4.bp.blogspot.com/-cstWDyYNXmc/UQrTR0_tWZI/AAAAAAAADA4/i60OVVplMeY/s1600/rp-icon-2.png

http://4.bp.blogspot.com/-MNHtGz92wy4/UQrTP9Xw9bI/AAAAAAAADAw/m2Dj8CCqNHc/s1600/rp-icon-1.png
http://2.bp.blogspot.com/-ciNsbqbUJXI/UVNIKFERJdI/AAAAAAAADkA/0L76cMHJEf8/s1600/shinemat-bullet-green.png
http://2.bp.blogspot.com/-jl3Ixn_NCFw/UVNIJxiK0xI/AAAAAAAADj4/F5vcC2G2VUo/s1600/shinemat-bullet-brown.png

Semoga Blog nya Tambah keren
Read More

Membuat Read More otomatis

14.36    No comments

Membuat Read More otomatis - Maksud dari Membuat Read More otomatis adalah kita tidak perlu melakukan Insert Jump break / readmore manual. Kita hanya membuat artikel dan Bisa lansung di Publikasikan dan tampilan di home kita akan langsung ada readmore nya...

Cara Membuat Read more Otomatis Di Blogger :

  • Login ke Blog anda
  • Buka halaman design > Edit HTML
  • Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
  • Paste kode berikut tepat dibawah </head>
    <script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

  • Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p> ( seperti biasan gunakan CTRL + F untuk mempermudah pencarian). 
  • Jika ditemukan 2 kode yang sama, gunakan atau ganti yang pertama.

  • Jika sudah ketemu silahkan anda ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
  • Finish simpan template dan lihat hasilnya 
Kode yang dapat anda ubah :
  • summary_noimg = 430; apabila artikel anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430 huruf
  • summary_img = 340; apabila artikel anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf dan gambar
  • img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul di halaman depan
  • img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail di halaman depan.
  • Anda juga bisa mengubah Icon read more http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif silahkan diganti URL icon yang anda inginkan. Atau anda ingin mengubah Icon Read more tersebut menjadi tulisan saja misalnya " >> Read more ", maka anda tinggal menghapus / mengganti kode <img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img>menjadi tulisan >> Read More atau Baca selengkapnya dll.


Semoga artikel cara membuat read more otomatis di blog ini bermanfaat. Selamat mencoba dan semoga berhasil.
Read More