Minggu, 07 Juli 2013

Mengganti Bullet List Blogger Menjadi Keren


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

Membuat Read More otomatis


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.