Proprietário do Blog

Rabu, 22 Februari 2012

Learning Algorithm | Learning Programming | Coding Tutorials | Tips Programming | Coding with C, Pascal, Delphi, java, PHP, html etc|


blog love
Kalau kita coba klik keyword di google, banyak sekali yang muncul dan di situ juga banyak sekali yang menerangkan tentang tips dan trik untuk mempercantik blog. Yah memang yang namanya cantik itu enak di pandang, enak dilihat, dan yang paling penting pula mudah untuk di load..iya g?..ya percuma khan cantik bagius tapi g bisa di buka heee…
Nah tapi untuk ynag satu ini..mempercantik ato mungkin ngutak-utik..itu kalo di wordpress/ yang pake wordpress yang gratisan kayak yang temen2 baca sekarang ini memang agak sulit yaw..tapi ngomong2 bagaimana pendapat temen2 tentang blog ini ..cantik g? hehe..yah intinya masing 2 ada kelebihan dan kekurangannya. Memang masalahnya klo pake yang gratisan kayak gini mw..ngutak-utik thema g bisa ,mw pasang javasript ( yang terkenal sebagai alat mempercantik ) juga g bisa …tapi sebenernya ada solusinya kita bisa gunakan hostingan gratis..blog saya yang menggunakan hostingan gratis bisa lihat disini
mempercantik blog mempercantik blog1 mempercantik blog2
Tapi beda induk beda anaknya..kalau yang pake blogspot/blogger..yah enak mw ngapain saja bisa..nah ni sy ada tips dan banyak sekali..ini adalah tips dari temen kita yang amat hebat di http://trik-tips.blogspot.com, namanya mas mas kendhin sy akui dia hebat banged..banyak sekali tutorial2 yang terpisah2 di blog2 lain, tapi ini yang paling komplit. jadi sy ambil saja tapi ini langsung ngelink ke halaman mas kendhin yah ini menurut saya lebih baik daripada saya copy paste punya mas kendhin trus mengatakan artikel saya..ngomong2 saya juga punya blog di blogspot mw buka disini atau disini :lol:
Nah ini buka saja satu persatu langsung ke halaman mas kendhin
  1. Cara Membuat Readmore (Baca Selengkapnya) Versi 1
  2. Membuat Read More (Baca Selengkapnya) Versi 2
  3. Membuat Tabs Menu Horizontal
  4. Membuat Menu Tab View
  5. Membuat Menu Vertikal
  6. Cara Membuat Menu Dtree
  7. Mengganti Tanggal Posting Menjadi Icon Kalender
  8. Membuat Kotak Komentar Blogger Berada di Bawah Postingan
  9. membuat Blog Lebih Expressive Dengan Smile Icon
  10. Membuat Gambar Melayang (Float Image)
  11. Cara Menampilkan Status Off/Online Yahoo Messenger
  12. Setting Custom Domain di Blogspot
  13. Membuat Email Dengan Domain Sendiri (nama@domainmu.com)
  14. Cara Membuat Template di Blogger
  15. Trik dan Tips Dalam Mengganti Template
  16. Cara Menambahkan Emoticon di Shoutbox
  17. Cara Menuliskan Script/Kode Dalam Postingan
  18. Cara Membackup Blog
  19. Cara Menampilkan Recent Post (Postingan Terbaru)
  20. Menampilkan Recent Comments (Komentar Terbaru)
  21. Highlight Author Comments
  22. Pasang Emoticon di Kotak Komentar
  23. Cara Membuat Related Post Post (Artikel yg Berhubungan)
  24. Membuat Form Email Subscriber (Berlangganan Email)
  25. Membuat Kotak Blogroll dan Marquee
  26. Mengganti Tulisan Older Post / Newer Post
  27. Mengganti Icon Addressbar (Favicon)
  28. Mengganti Title Blog Dengan Title Postingan
  29. Membuat Comments Box (Kotak Komentar)
  30. Menghilangkan Navbar (Navigation Bar)
  31. Membuat Search Engine di Blogger
  32. Membuat Kategori/Label
  33. Trik Memproteksi Blog Dari Penjiplakan
  34. Membuat Shoutbox
  35. Membuat Dropdown Menu
  36. Membuat Link Download
  37. Cara Membackup Template
  38. Membuat Kotak Link Exchange
  39. Membackup Template Blogger

Membuat Menu Horizontal

Ada yang pingin buat menu horizontal tapi nggak tahu caranya?
Gini nih caranya, eh tapi tunggu dulu, apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). Kayak gini ini lho:



Contohnya bisa kamu lihat disini .Nha pingin nggak? kalo pingin ikuti cara berikut ini:

pertama-tama kamu harus punya gambar kayak gini nih:

dan

kalo nggak punya gimana? kalo nggak punya pake gambar yang aku sediain ini aja deh.

blackleft.gifblackright.gif
greenleft.gifgreenright.gif
redleft.gifredright.gif
unguleft.gifunguright.gif
yellowleft.gifyellowright.gif
blueleft.gifblueright.gif


Ok, bahan-bahannya sudha ada, mari kita mulai maraciknya:
1. Login ke blogger terus pilih Layout --> Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates". jangan lupa template di backup dulu.
2. Cari script seperti ini ]]></b:skin>, kalo udah ketemu copy script dibawah ini dan taruh diatasnya
/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://superinhost.com/gambar/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://superinhost.com/gambar/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}

#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}


Tulisan yang dicetak tebal bisa kamu ganti dengan gambar-gambar (text dibawah gambar) diatas tadi. Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini;
background: url("http://superinhost.com/gambar/redleft.gif") no-repeat left top;

background: url("http://superinhost.com/gambar/redright.gif") no-repeat right top;


Mudeng nggak loe :D
Kalo sudah selesai mari kita lanjutkan, sampai angka berapa tadi? oh ya sampai angka ketiga ya.
3. Copy script berikut ini
<div id="tabshori">
<ul>
<li><a href="http://trik-tips.blogspot.com"><span>Home</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >


4. Ganti http://trik-tips.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).
Kemudian text yang dicetak tebal bisa kamu ganti dengan text yang kamu suka. Text tersebut adalah text yang muncul di tombol/menu.
5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini
cari kode berikut ini :
<div id="content-wrapper">

caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotak find, nha langsung ketemu kan. Kalo udah ketemu copy script yang tadi diatasnya

6. Simpan hasil pengeditan.
7. Lihat hasilnya.
8. kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah keatasnya yaitu diatas kode </div>. kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok.
9. Kalo masih belum berhasil juga coba cara ini:
- Cari kode berikut ini :

<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>


teru ganti text yang berwarna hijau sihingga menjadi seperti ini:

<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>


terus di Save

Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih HTML/JavaScript paste script link tadi di dalam kotak content terus simpan, nha itu kan tempatnya diatas, coba drag kebawah dikit, nha gitu, terus simpan dan lihat hasilnya.

hasilnya pasti akan berbeda-beda di setiap template.
kalo berhasil berarti kamu pinter, kalo gagal berarti kamu kurang pinter :r coba diteliti lagi langkah-langkahnya dan dipahami maksudnya, jangan cuma di plototin. OK BOZ, Good luck.....