You Tube : Football Comedy Video

Biar tidak stress mending pada nonton dulu yang lucu-lucu dari dunia olahraga, silahkan di play saja atuh biar seru :

 

 

 

Membuat Read more Sejajar Dengan Paragrap

Gara-gara kang rohman sibuk utak-atik template, akhirnya lupa
untuk posting artikel
tapi sebenarnya ada alasan lain kenapa kang rohman untuk beberapa hari
tidak posting, alasannya adalah untuk memberi kesempatan kepada yang
beriklan lewat posting agar lebih banyak kesempatan untuk di baca oleh para
pengunjung sekalian. Postingan iklan tersebut yaitu postingan yang di sini dengan yang di sini.
Jadi bagi yang website atau blognya yang ingin cepat terkenal, sok lah
beriklan di blognya kang rohman.

Trus buat para pengunjung di minta
keiklasannya untuk sesekali mengunjungi iklan-iklan yang ada di sini bukan apa-apa biar para pengiklan tidak kapok untuk beriklan di sini ya..hihihi...



Eh udah ah, intermezo nya jadi kepanjangan. Pada kesempatan kali ini
kang rohman mau membahas pertanyaan dari sobat kang rohman yang masih
penasaran tentang membuat menu read more atau menu baca selengkapnya.
Katanya beliau ini ingin membuat menu read more yang sejajar dengan paragrap
yang ada, tidak seperti yang kang rohman bahas di sini,
di sini, atau
di sini, yang
katanya kurang menarik karena tulisan Read more atau Baca Selengkapnya
tidak sejajar dengan paragrap postingan. Mungkin yang di maksud seperti ini kalii yee :

Ada kabar gembira buat anda para pebisnis, baik itu bisnis
online ataupun offline. Mulai saat ini ada program baru di blog nya
kang rohman yaitu " Iklan Dalam Bentuk Posting ",
benar-benar dalam bentuk posting. Pada umumnya sebuah iklan adalah berupa
banner link atau berupa text link, maka di blog kang rohman anda boleh
beriklan dalam bentuk " Posting ".



Selengkapnya

Mungkin tulisan Selengkapnya ingin sejajar seperti ini kalii yee :

Ada kabar gembira buat anda para pebisnis, baik itu bisnis
online ataupun offline. Mulai saat ini ada program baru di blog nya
kang rohman yaitu " Iklan Dalam Bentuk Posting ",
benar-benar dalam bentuk posting. Pada umumnya sebuah iklan adalah berupa
banner link atau berupa text link, maka di blog kang rohman anda boleh
beriklan dalam bentuk " Posting ". Selengkapnya

Bisa engga ya jadi seperti itu? bisa atuh, dan anda tidak perlu meluangkan banyak waktu serta cucuran keringat untuk
membuatnya. caranya seperti ini :



Pada postingan yang lalu tentang membuat menu
Selengkapnya, kang rohman menuliskan kode seperti ini :





<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'><b>Selengkapnya.....</b></a>

</b:if>






Agar kode read more atau selengkapnya menjadi sejajar dengan postingan, anda tinggal memindahkan
kode </p> yang saya cetak merah, sehingga menjadi seperti ini :





<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

<p><data:post.body/>

<a expr:href='data:post.url'><b>Selengkapnya.....</b></a></p>

</b:if>






Pada saat posting, jangan memakai kode seperti ini :







<div class="fullpost">




</div>






Tapi pakailah kode seperti ini :







<span class="fullpost">




</span>






Jika anda melakukan langkah di atas, maka tulisan Read more atau
selengkapnya akan sejajar dengan postingan anda.



Selamat mencoba !

Web directory dan peranannya

Seperti kita ketahui bahwa web directory adalah kumpulan dari situs-situs internet yang disusun berdasarkan kategori dan bukan dengan keywords seperti yang terjadi pada mesin pencari (search engines). Web direktori bukanlah search engine. Jadi sebuah web direktori akan berisikan link-link ke situs-situs internet yang lain dan link-link tersebut tersusun berdasarkan kategori dan subkategori. Sebuah web direktori biasanya akan memberikan kesempatan kepada para pemilik website untuk secara langsung mendaftarkan situs internet mereka di direktori ini.

Dalam perkembangan dunia internet, web directory memegang peranan penting juga, disamping memudahkan bagi para penguna internet untuk menemukan situs-situsinternet yang bermutu, juga sangat bagus untuk meningkatkan link popularity situs internet kita di search engines.



Ada begitu banyak web directory di internet, beberapa di antaranya mempunyai lingkup yang sangat luas dan terdiri dari banyak kategori dan sub kategori. Dan ada juga directory yang mengkhusus pada lingkup yang lebih kecil, biasanya berdasarkan salah satu kategori. Seperti contohnya direktori untuk bisnis, keluarga, kesehatan, olah raga, belanja, komputer, pariwisata (hotel dan travel agent), agama, pemerintahan, seni dan budaya, pendidikan, berita dan media. Ataupun direktori yang mengkhusus pada salah satu wilayah atau bahasa saja, seperti misalnya salvida directory.



Salvida direktori adalah sebuah direktori yang mengkhususkan pada situs-situs internet yang berbasis di Indonesia. Disini kita bisa mendaftarkan situs-situs internet kita pada kategori yang sesuai dgn isi dari website kita itu sendiri. Umpamanya kita menjalankan situs belanja online, hendaknya website kita didaftarkan pada kategori belanja, begitu juga dengan situs komputer, agama, blog, pariwisata, bisnis, kesehatan, keluarga, hobby dan sebagainya.



Salvida Direktori yang dijalankan dengan bahasa Indonesia sebagai bahasa pengantar ini adalah search engines friendly directory. Jadi tidak ada ruginya anda menaruh link di situs ini. Ini juga mampu meningkatkan popularitas situs anda di search engines.



Temukan situs-situs internet bermutu seputar Indonesia di directory ini. Situs-situs yag didaftarkan di web directory ini akan dipilih-pilih lagi sehingga memastikan anda mendapatkan link-link website terbaik dan dapat menemukan situs yang anda cari dengan mudah.



Submit urls - daftarkan website anda



Anda yang memiliki situs internet, silahkan anda daftarkan website anda di Salvida web direktori Indonesia. Pilihlah kategori yang sesuai dengan website anda. Kami tidak menerima situs yang melanggar hukum atau yang tidak sesuai dgn hukum yang berlaku di Indonesia. kelayakan semua website yang anda daftarkan akan ditinjau ulang lagi.

Membuat Gambar Horizontal Thumbnail Dengan CSS

Sambil menunggu blog Kang Rohman Dot Com siap untuk di tayangkan, kita iseng-iseng
bermain dengan CSS dulu deh. Kali ini kang Rohman akan coba mengulas tentang cara membuat gambar horizontal thumbnail dengan CSS. Apa
itu horizontal Thumbnail? untuk pengertian kang rohman rasa tidak penting karena memang tidak tahu, ini juga bikin judul asal-asalan
biar sedikit terdengar keren . Biar
tambah keren lagi sok atuh di sorot gambar-gambar di bawah ini :

 

 

 

 

 

 

 

Bagaimana bagus tidak? kalau anda ingin tahu cara membuatnya ya musti di baca sampai akhir biar
tambah seru. Begini nih caranya :

Pertamax. Buatlah terlebih dahulu gambar-gambar yang sekiranya mau di pajang di blog atau website
milik anda. Misalkan gambar yang mau di pajang seperti ini :

 

 

 

 

 

Keduax. Uploadlah gambar-gambar tersebut ke hosting untuk menyinpan gambar, mau di blogger atau
pada hosting lainnya seperti google pages,
photobucket, geocities, dll. Misalkan
saya telah menguploag gambar-gambar diatas, dan masing-masing mempunyai mempunyai alamat gambar sebagai berikut :

 

http://photos.friendster.com/photos/25/77/27287752/2553499759340l.jpg



http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg



http://photos.friendster.com/photos/25/77/27287752/26659203510677l.jpg

 

Ketigax. simpanlah kode CSS berikut diantara style sheet css yang ada :

 

 


#latar {

padding:20px;

margin:25px;

float:left;

background:#ebe9dc;

border-right: 3px solid #ccc;

border-bottom: 3px solid #ccc;

}



.tabel {

padding:5px;

margin:0;

float:left;

}



.thumbnail {

position:relative;

z-index:100;

}



.thumbnail a.gambar-kecil, .thumbnail a.gambar-kecil1:visited {

display:block;

text-decoration:none;

background:transparent;

top:0;

left:0;

border:3px solid #000;

}


.thumbnail a img {

border:0;

}



.thumbnail a.gambar-kecil:hover {

text-decoration:none;

background-color:#8c97a3;

color:#000;

border:3px solid #43b843;

}



.thumbnail a .gambar-besar1 {

display:block;

position:absolute;

width:0;

height:0;

border:0;

top:0;

left:0;

}



.thumbnail a.gambar-kecil:hover .gambar-besar1 {

display:block;

position:absolute;

top:100px;

left:0px;

width:400px;

height:300px;

border:5px solid #000;

}



.thumbnail a .gambar-besar2 {

display:block;

position:absolute;

width:0;

height:0;

border:0;

top:0;

left:0;

}



.thumbnail a.gambar-kecil:hover .gambar-besar2 {

display:block;

position:absolute;

top:100px;

left:0px;

width:400px;

height:300px;

border:5px solid #000;

}



.thumbnail a .gambar-besar3 {

display:block;

position:absolute;

width:0;

height:0;

border:0;

top:0; left:0;

}



.thumbnail a.gambar-kecil:hover .gambar-besar3 {

display:block;

position:absolute;

top:100px;

left:0px;

width:400px;

height:300px;

border:5px solid #000;

}



 

Keempax. Silahkan simpan kode di bawah ini di dalam body template ( mau lewat elemen halaman juga boleh ).

 



<div id="latar">

<span class="tabel">

<span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="Gambar Thumbnail"><img src="http://photos.friendster.com/photos/25/77/27287752/2553499759340l.jpg" width="90" height="75" title="Gambar Thumbnail" alt="Thumbnail image" /><img class="gambar-besar1" src="http://photos.friendster.com/photos/25/77/27287752/2553499759340l.jpg" title="gambar besar" alt="gambar besar" /></a></span></span>

<span class="tabel">



<span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="Gambar Thumbnail"><img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" width="90" height="75" title="Gambar Thumbnail" alt="Thumbnail image" /><img class="gambar-besar2" src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" title="Enlarged view of image" alt="Enlarged view of image" /></a></span>

</span>




<span class="tabel">

<span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="Gambar Thumbnail"><img src="http://photos.friendster.com/photos/25/77/27287752/26659203510677l.jpg" width="90" height="75" title="Gambar Thumbnail" alt="Thumbnail image" /><img class="gambar-besar2" src="http://photos.friendster.com/photos/25/77/27287752/26659203510677l.jpg" title="gambar besar" alt="gambar besar" /></a></span>

</span>

</div>



Kelimax. Di saving aja biar datanya tersimpan. Trus ya udah, kan sudah klimaks, tinggal lemesnya aja deh .

 

Masih bingung dengan cara di atas? begini deh kalau memang masih bingung, cara yang lebih detail adalah seperti ini :



Langkah pertama :

1. Sign in di blogger dengan ID anda tentunya dong.





2. Klik menu Layout.





3. Klik menu Edit HTML.





4. Klik link Download full template, silahkan save untuk backup data (penting).





5. Copy kemudian paste kode CSS berikut di atas kode ]]></b:skin>














<br /> <br />#latar {<br />padding:20px;<br />margin:25px;<br />float:left;<br />background:#ebe9dc;<br />border-right: 3px solid #ccc;<br />border-bottom: 3px solid #ccc;<br />}<br /><br />.tabel {<br />padding:5px;<br />margin:0;<br />float:left;<br />}<br /><br />.thumbnail {<br />position:relative; <br />z-index:100;}<br />.thumbnail a.gambar-kecil, .thumbnail a.gambar-kecil1:visited {<br />display:block; <br />width:90px; <br />height:75px; <br />text-decoration:none; <br />background:#fff; <br />top:0; left:0; <br />border:3px solid #000;<br />}<br /><br />.thumbnail a img {<br />border:0;<br />}<br /><br />.thumbnail a.gambar-kecil:hover {<br />text-decoration:none; <br />background-color:#8c97a3; <br />color:#000;border:3px solid #43b843; <br />}<br /><br />.thumbnail a .gambar-besar1 {<br />display:block; <br />position:absolute; <br />width:0; height:0; <br />border:0; top:0; left:0;<br />}<br />.thumbnail a.gambar-kecil:hover .gambar-besar1 {<br />display:block; position:absolute; <br />top:100px; <br />left:0px; <br />width:400px; <br />height:300px; <br />border:5px solid #000;<br />}<br /><br />.thumbnail a .gambar-besar2 {<br />display:block; <br />position:absolute; <br />width:0; <br />height:0; <br />border:0; <br />top:0; <br />left:0;<br />}<br /><br />.thumbnail a.gambar-kecil:hover .gambar-besar2 {<br />display:block; <br />position:absolute; <br />top:100px; <br />left:0px; <br />width:400px; <br />height:300px; <br />border:5px solid #000;<br />}<br /><br />.thumbnail a .gambar-besar3 {<br />display:block; <br />position:absolute; <br />width:0; <br />height:0; <br />border:0; <br />top:0; left:0;<br />}<br /><br />.thumbnail a.gambar-kecil:hover .gambar-besar3 {<br />display:block; <br />position:absolute; <br />top:100px; <br />left:0px; <br />width:400px; <br />height:300px; <br />border:5px solid #000; <br />}<br /><br />







6. Klik tombol SIMPAN TEMPLATE

Langkah kedua :

1. Klik menu Elemen Halaman





2. Klik tulisan Tambah sebuah Elemen Halaman





3. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML





4. Copy paste kode berikut ke dalam elemen yang muncul













<br /> <div id="latar"><br /><span class="tabel"><br /><span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="thumbnail image"><img src="http://photos.friendster.com/photos/25/77/27287752/2553499759340l.jpg" width="90" height="75" title="Gambar Thumbnail" alt="Gambar Thumbnail" /><img class="gambar-besar1" src="http://photos.friendster.com/photos/25/77/27287752/2553499759340l.jpg" title="gambar besar" alt="gambar besar" /></a></span></span><br /><span class="tabel"><br /><span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="thumbnail image"><img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" width="90" height="75" title="Gambar Thumbnail" alt="Gambar Thumbnail" /><img class="gambar-besar2" src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" title="Gambar besar" alt="gambar besar" /></a></span><br /></span><br /><br /><span class="tabel"><br /><span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="thumbnail image"><img src="http://photos.friendster.com/photos/25/77/27287752/26659203510677l.jpg" width="90" height="75" title="Gambar Thumbnail" alt="Gambar Thumbnail" /><img class="gambar-besar2" src="http://photos.friendster.com/photos/25/77/27287752/26659203510677l.jpg" title="Gambar Thumbnail" alt="Gambar Thumbnail" /></a></span><br /></span><br /> </div><br />






5. Klik tombol Simpan





6. Pindahkan elemen yang baru di buat ke tempat yang kira-kira tepat menurut anda.





7. Klik tombol Simpan yang berada di sebelah atas





8. Selesai.

Tambahan dhenk, pada kode di atas ada tertulis seperti ini :




<a class="gambar-kecil" href="#nogo" title="thumbnail image">




Tulisan #nogo tidak usah di ganti apabila gambar yang di pajang
tidak ingin nge link ke manapun, namun apabila photo yang di pajang ingin dalam bentuk link, silahkan
ganti tulisan #nogo dengan alamat URL, misal di ganti dengan
http://www.kangrohman.com atau apa saja dhenk terserah.



Basa basi



Kode-kode di atas saya buat dan boleh di pakai untuk umum secara gratis, namun apabila anda menginginkan
kang rohman lebih eksis lagi dalam membuat kode-kode yang lainnya, silahkan yang mau mengirimkan donasi
untuk sekedar uang jajan anak-anak kang rohman :







I'm wait and see.

Setor Muka Via gravatar

Sebuah pepatah mengatakan "lain ladang lain belalang" yang artinya
apabila berbeda ladang pasti berbeda pula belalangnya
salah dhenk
yang bener mungkin "lain orang, lain juga keinginannya" (bener engga ya? ).
Terkadang ada blogger yang ber tipe ingin menampakan diri serta ingin di kenal oleh orang banyak
(saya termasuk tipe ini lho), dan ada juga blogger yang tipe misterius alias identitasnya
tidak ingin di ketahui orang banyak. Tipe blogger yang suka terang-terangan,
blogger ini tak segan-segan memajang photo wajah ganteng dan cantiknya di profile. Tak cukup
hanya itu, fasilitas mybloglog pun menjadi
sarana yang efektip untuk mengenalkan diri kepada khalayak ramai. Jika anda termasuk
blogger yang berani terang-terangan, ada jalan lain untuk lebih mengenalkan diri anda
yaitu melalui site.gravatar.com.

Jika anda bergabung di site.gravatar.com, maka avatar anda yang lucu dan ngegemesin
bisa muncul di beberapa sistem komentar seperti haloscan serta beberapa
kotak komentar wordpress. Masih kurang yakin? coba perhatikan wajah
ganteng di bawah ini yang acap kali muncul di kotak komentar wordpress :











Jadi, bagi yang suka setor muka, sok atuh daftar saja di http://site.gravatar.com.



Hmmmm... yang mau nyoba alternatif mencari duit gratis via internet, silahkan
daftarkan blognya di sini!

CSS menu : tabs6

Setelah melihat perkembangan penghasilan kang rohman dari iklan yang ada di blog ini,
akhirnya kang rohman berubah fikiran. Apanya yang berubah? begini ade-ade, teteh-teteh,
bapak-bapak, ibu-ibu, dan sebangsanya .
Dulu, untuk download template atau nerangin cara pasang menu navigasi, para pengunjung blog ini sengaja saya
lempar alihkan ke blog saya yang berbahasa inggris dengan maksud agar
blog tersebut mendapatkan traffic yang cukup lumayan dan alih-alih berharap semoga saja
ada yang berbaik hati mengklik iklannya. Namun sekarang semuanya mungkin tidak akan terjadi lagi,
sekarang kang rohman akan tulis semuanya di sini, download di sini dan silahkan baca sepuasnya

Sudah ah ko kayanya jadi sombong begitu..hihihi.



Untuk tulisan pertama mengenai menu navigasi, yang saya bahas adalah
menu navigasi yang di beri nama Tabs6. Ini bukan buatan
kang rohman, namun buatan orang lain yang sudah di modifikasi agar bisa
di pake di blogspot. Namun untuk menghargai desainer nya, tolong jangan
di hilangkan credit pada kode css nya ya. Untuk demo
menu navigasi ini silahkan klik tombol berikut :

 

 

 

Kalau anda berminat, silahkan baca tutorialnya sampai selesai.Namun kalau tidak
berminat,mending cari artikel lainnya yang lebih menarik .



Jika anda merasa tertarik dengan menu navigasi di atas, silahkan baca sampai
dengan selesai. Namun perlu saya tegaskan di sini bahwa mungkin hasil yang di
dapat bisa berbeda dengan contoh diatas karena faktor desain template yang
berbeda-beda, oleh kerena itu ada kemungkinan anda harus sedikit merubah kode
yang saya berikan agar cocok dengan template anda.



Berikut adalah langkahnya :



Klik kanan pada kedua gambar di bawah ini, lalu Save Picture As...
lalu save dulu di komputer anda.

tableft6.gif	tabright6.gif

Kemudian simpan pada image hosting yang biasa anda gunakan, misalkan
di photobucket
atau google pages dan lain-lain.
Lalu anda catat alamat dari kedua gambar tersebut. Contoh, saya mempunyai alamat gambar
untuk kedua gambar di atas sebagai berikut :





http://ahom24.googlepages.com/tableft6.gif


http://ahom24.googlepages.com/tabright6.gif




 

Sebenarnya anda boleh saja menggunakan kedua alamat tersebut,
namun saya khawatir jika terlalu banyak yang memakai alamat
tersebut bisa terjadi limited band with sehingga gambar tidak
dapat tampil dan menu anda jadi tidak bagus, jadi sebaiknya
pake alamat sendiri ya.



Berikut adalah salah satu cara menginstall menu tabs6 :



Langkah #1

1. Silahkan Sign in di blogger dengan ID anda.





2. Klik Layout.





3. Kemudian klik tab Edit HTML.





4. Klik tulisan Download Template Lengkap, silahkan di save dulu untuk backup (penting).





5. lihat ke bagian kode template anda, kemudian cari kode ]]></b:skin>





6. Copy kode yang ada di bawah ini, lalu paste di atas kode ]]></b:skin>











<br /><br />/*<br />==================================================<br /><br />Tabs6<br /><br />Author : Christopher Ware<br />URL : http://www.exploding-boy.com<br /><br />Tutorial oleh Rohman<br />URL : http://kolom-tutorial.blogspot.com<br /><br />kunjungi blog saya untuk tutorial menu lainnya<br /><br />==================================================<br />*/<br /><br />#tabs6 {<br />float:left;width:100%;<br />background:#efefef;<br />font-size:13px;<br />line-height:normal;<br />border-bottom:1px solid #666;<br />}<br /><br />#tabs6 ul {<br />margin:0;padding:10px 10px 0 5px;<br />list-style:none;<br />}<br /><br />#tabs6 li {<br />display:inline;<br />margin:0;<br />padding:0;<br />}<br /><br />#tabs6 a {<br />float:left;<br />background:url("http://ahom24.googlepages.com/tableft6.gif") no-repeat left top;<br />margin:0;padding:0 0 0 4px;text-decoration:none;<br />}<br /><br />#tabs6 a span {<br />float:left;display:block;background:url("http://ahom24.googlepages.com/tabright6.gif") no-repeat right top;<br />padding:5px 15px 4px 6px;<br />color:#fff;<br />font-weight:bold;<br />}<br /><br />/* Commented backslah Hack hides rule from IE5-Mac \*/<br /><br />#tabs6 a span {<br />float:none;<br />}<br />/* End IE5-Mac hack */<br /><br />#tabs6 a:hover span {<br />color:#C2FB77;<br />}<br /><br />#tabs6 a:hover {<br />background-position:0% -42px;<br />}<br /><br />#tabs6 a:hover span {<br />background-position:100% -42px;<br />}<br /><br />#tabs6 #current a {<br />background-position:0% -42px;<br />}<br /><br />#tabs6 #current a span {<br />background-position:100% -42px;<br />} <br />






7. Silahkan lihat ke bagian bawah, lalu cari kode yang seperti 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>








8. Ubahlah kode yang berwarna hijau, sehingga kodenya 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>








9. Kemudian klik Simpan Template.Silahkan tunggu
   beberapa saat.

Langkah #2

1. Klik tab Elemen Halaman





2. Lalu klik Tambahkan sebuah Elemen Halaman yang ada di bagian header (elemen paling atas).





3. setelah munculwindow popup, klik TAMBAHKAN KE BLOG yang untuk HTML/JavaScript.





4. Copy lalu paste kod berikut pada kolom yang tesedia (jangan lupa untuk merubah alamat gambarnya) :







<br /> <br /> <br /> <div id='tabs6'> <br /> <ul><br /><br /><!-- Silahkan ganti tanda pagar (#) dengan link milik anda --><br /><br /><li id='current'><a href='#' title='your link title here'><span>Home</span></a></li><br /><li><a href='#' title='your link title here'><span>Products</span></a></li><br /><li><a href='#' title='your link title here'><span>Services</span></a></li><br /><li><a href='#' title='your link title here'><span>Support</span></a></li><br /><li><a href='#' title='your link title here'><span>Contuct Us</span></a></li><br /><li><a href='#' title='your link title here'><span>Obral Plus</span></a></li><br /><li><a href='http://kolom-tutorial.blogspot.com' title='tutorial lengkap membuat blog di blogspot'><span>Blogspot Tutorial</span></a></li><br /></ul><br /> </div><!-- #tabs6 end --><br />











5. Klik tombol Simpan Peribahan.





6. Selesai, silahkan lihat hasilnya.

 

 

Terkadang jika anda melakukan instalasi sesuai dengan langkah
diatas, untuk beberapa template hasilnya kurang bagus. Oleh karena
itu, saya akan mencoba menulis dengan cara lain. Namun cara ini
hanya untuk Template Minima (template asli dari blogger).



Langkahnya sebagai berikut :

1. Silahkan Sign in di blogger dengan ID anda.





2. Klik Layout.





3. Kemudian klik tab Edit HTML.





4. Klik tulisan Download Template Lengkap, silahkan di save dulu untuk backup (penting).





5. Beri tanda centang pada kotak di samping tulisan Expand Template Widget , lihat gambar di bawah :



 





 




6. Tunggu beberapa saat ketika proses sedang berlangsung





7. lihat ke bagian kode template anda, kemudian cari kode ]]></b:skin>





8. Copy kode yang ada di bawah ini, lalu paste di atas kode ]]></b:skin>











<br /><br />/*<br />==================================================<br /><br />Tabs6<br /><br />Author : Christopher Ware<br />URL : http://www.exploding-boy.com<br /><br />Tutorial oleh Rohman<br />URL : http://kolom-tutorial.blogspot.com<br /><br />kunjungi blog saya untuk tutorial menu lainnya<br /><br />==================================================<br />*/<br /><br />#tabs6 {<br />float:left;width:100%;<br />background:#efefef;<br />font-size:13px;<br />line-height:normal;<br />border-bottom:1px solid #666;<br />}<br /><br />#tabs6 ul {<br />margin:0;padding:10px 10px 0 5px;<br />list-style:none;<br />}<br /><br />#tabs6 li {<br />display:inline;<br />margin:0;<br />padding:0;<br />}<br /><br />#tabs6 a {<br />float:left;<br />background:url("http://ahom24.googlepages.com/tableft6.gif") no-repeat left top;<br />margin:0;padding:0 0 0 4px;text-decoration:none;<br />}<br /><br />#tabs6 a span {<br />float:left;display:block;background:url("http://ahom24.googlepages.com/tabright6.gif") no-repeat right top;<br />padding:5px 15px 4px 6px;<br />color:#fff;<br />font-weight:bold;<br />}<br /><br />/* Commented backslah Hack hides rule from IE5-Mac \*/<br /><br />#tabs6 a span {<br />float:none;<br />}<br />/* End IE5-Mac hack */<br /><br />#tabs6 a:hover span {<br />color:#C2FB77;<br />}<br /><br />#tabs6 a:hover {<br />background-position:0% -42px;<br />}<br /><br />#tabs6 a:hover span {<br />background-position:100% -42px;<br />}<br /><br />#tabs6 #current a {<br />background-position:0% -42px;<br />}<br /><br />#tabs6 #current a span {<br />background-position:100% -42px;<br />} <br />






9. Silahkan lihat ke bagian bawah, lalu cari kode yang seperti ini :








<div class='descriptionwrapper'>

<p class='description'><span><data:description/></span></p>

</div>

</b:if>

</b:includable>

</b:widget>

</b:section>










10. Hapus kode diatas, lalu ganti dengan kode berikut :










<br /> <br /><div class='descriptionwrapper'> <br /><p class='description'><span><data:description/></span></p><br /></div><br /></b:if><br /></b:includable><br /></b:widget><br /></b:section><br /><br /> <div id='tabs6'> <br /> <ul><br /><br /><!-- Silahkan ganti tanda pagar (#) dengan link milik anda --><br /><br /><li id='current'><a href='#' title='your link title here'><span>Home</span></a></li><br /><li><a href='#' title='your link title here'><span>Products</span></a></li><br /><li><a href='#' title='your link title here'><span>Services</span></a></li><br /><li><a href='#' title='your link title here'><span>Support</span></a></li><br /><li><a href='#' title='your link title here'><span>Contuct Us</span></a></li><br /><li><a href='#' title='your link title here'><span>Obral Plus</span></a></li><br /><li><a href='http://kolom-tutorial.blogspot.com' title='tutorial lengkap membuat blog di blogspot'><span>Blogspot Tutorial</span></a></li><br /></ul><br /> </div><!-- #tabs6 end --><br /><br />












11. Klik tombol Simpam Perubahan.





12. Selesai. silahkan lihat hasilnya.

Agar mendapat variasi yang berbeda, sedikit akan saya tambahkan.



jika anda melakukan langkah di atas, maka hasil yang di dapat adalah
tab-tab atau menu-menu akan mepet ke sebelah kiri, jika ingin sedikit
menjorok ketengah anda harus menambahkan sedikit kode. kodenya yang ini :


#tabs6 {

float:left;width:100%;

background:#efefef;

font-size:13px;

line-height:normal;

border-bottom:1px solid #666;

}



kode yang di tambahkan adalah seperti ini :


#tabs6 {

float:left;width:90%;

background:#efefef;

font-size:13px;

line-height:normal;

border-bottom:1px solid #666;

padding-left:10% ;

}



Angka 10% adalah besarnya nilai jarak sela dari sebelah kiri,
silahkan di ubah sesuai kebutuhan.



Untuk yang lainnya, silahkan anda otak-otik sendiri, keburu siang nih belum mandi




mandi dulu ahhhhh....