Cara Menghilangkan Link "Melihat Profile Lengkap Saya"

Masih seputar cara menghilangkan, kali ini ada yang bertanya mengenai cara menghilangkan link "Melihat Profile Lengkap Saya". Mungkin yang seperti ini kali ya :



Kalau yang di maksud adalah yang seperti diatas tentu saja cara menghilangkannya sangat gampang. Caranya seperti ini kali yee :

1. Sign in ke blogger dengan ID anda.


2. Klik Layout.


3. Klik menu Elemen Halaman.


4. Klik tab Edit HTML.


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


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


7. Tunggu beberapa saat ketika proses sedang berlangsung.


8. Silahkan anda cari kode berikut pada kode template milik anda :



<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a> 



9. Jika anda sudah menemukan kode yang seperti di atas, silahkan di hapus/delete saja kode tersebut.


10. Klik tombol Simpan Template.


11. Selesai. Silahkan lihat hasilnya !

Kotak Komentar Tampil Dua Format

Cara Blogging - bagaimana cara membuat kotak komentar blogspot yang formatnya seperti yang ada di blog kang rohman ini, yaitu ada dua format, yang satu di dalam iframe dan yang satu lagi format biasa?

Hehehe... want to know aja dech loe. Memang tidak salah sih pepatah mengatakan " Lain ladang lain belalang, lain orang lain mau nya ". Ini terbukti dengan komentar yang lainnya yang kontradiktif yaitu " Kang, bagaimana jika komentarnya hanya dalam bentuk iframe saja tidak seperti punya kang rohman yang ada dua, kan ribet lihatnya? " hayoh.. bener kan kang rohman bilang, lain orang lain maunya. Nah jika sudah begitu bagaimana jadinya? biar adil mending di jawab dua-duanya.

Dulu, kang rohman pernah menulis artikel tentang bagaimana cara membuat kotak komentar blogspot langsung di bawah postingan yang kang rohman post di sini, nah perlu di ketahui bahwa hasil dari postingan tersebut adalah membuat kotak komentar dalam bentuk iframe saja tidak seperti punya kang rohman yang komentarnya jadi ada dua, trus bagaimana dengan yang komentarnya ada dua? caranya seperti ini :

Pada kode-kode yang kang rohman terangkan dulu, ada sedikit yang harus di hapus, yaitu silahkan cari kode yang seperti ini :

<div class='onepx'>
<dl id='comments-block' style='height: 1px;overflow:hidden;'>

Hapus kode yang kang rohman cetak merah di atas, sehingga menjadi seperti ini :

<div class='onepx'>
<dl id='comments-block'>

Setelah di hapus, jangan lupa di save atau di simpan, selesai.

Jika kode yang berwarna merah tadi di hapus, maka kotak komentarnya akan menjadi ada dua, yaitu kotak komentar yang muncul di luar iframe, dan yang satunya di dalam iframe.

Selamat mencoba !

Membuat Background Posting Berbeda-beda

Cara blogging - Dalam membuat background ada dua alternatif yaitu membuat background dengan warna dan membuat background dengan bantuan gambar, khusus untuk background dengan gambar terbagi lagi ke dalam beberapa teknik yaitu background gambar dengan teknik repeat (ada repeat, repeat-x, repeat-y) dan background gambar dengan teknik no-repeat (gambar backgroundnya memang ukuran besar). Untuk teknik-teknik ini mungkin lain kali saja deh, kangrohman nya sedikit bad mood nih, mending sekarang yang singkat aja deh.





Membuat background dengan warna



Agar warna background postingan bisa berbeda-beda setiap postingan, anda perlu melakukan :



Ketika anda akan memulai untuk membuat postingan, pilih tab Edit HTML jangan pilih Compose. Awali postingan anda dengan kode seperti ini :



<div style="background:kode_warna_disini;">



Dan diakhir postingan, harus di tutup dengan kode seperti ini :



</div>





Ganti tulisan kode_warna_disini dengan kode warna yang anda inginkan. Sedikit tips yang masih bingung dengan kode warna, silahkan baca di sini.



Karena kode ini merupakan Style dari CSS, maka tentu saja bukan hanya warna background yang bisa anda tentukan, warna hurup, jenis hurup, perataan posting, dan lain-lain pun bisa anda tentukan. So, yang pasti postingan anda akan bervariasi dan tidak terkesan monoton (monoton TV apa monoton Film ye?). Sebagai contoh, jika postingan anda ingin berwarna background abu-abu, tulisan bisa rata kiri-kanan, besarnya hurup 120% dan padding sebesar 10 pixel :





<div style="background:#D9D7D7; text-align:justify; font-size:120%">



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.



</div>



Hasilnya akan seperti ini :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.

heuheuheu.. gampang banget kan? kang rohman bilang juga apa, sok di coba atuh biar seru.



Membuat background dengan Gambar



Nah jika postingan anda ingin mempunyai background berupa gambar, langkah pertama yang harus di ingat yaitu anda harus punya gambar yang akan di jadikan background (bahasanya ko bolak-balik dekok begitu yach?). Trus gambar tersebut harus di upload ke hosting tempat menyimpan gambar. Bingung cara upload gambar ke hosting gratisan? ya udah baca dulu postingan kang rohman yang di sini, di sini juga.



Ketika anda akan memulai untuk membuat postingan, pilih tab Edit HTML jangan pilih Compose. Awali postingan anda dengan kode seperti ini :



<div style="background:url(alamat_gambar_disini) no-repeat;">



Dan diakhir postingan, harus di tutup dengan kode seperti ini :



</div>





Ganti tulisan alamat_gambar_disini dengan alamat gambar yang ingin anda tampilkan. Penggunaan kode no-repeat tentu saja apabila gambar yang anda miliki memiliki ukuran besar dan tidak mau di tampilkan berulang-ulang.



Seperti halnya pada background dengan warna, kode inipun bisa anda tambah-tambahin sesuai dengan keinginan.



Sebagai contoh, saya ingin membuat posting dengan background yang beralamat di http://kangrohman.googlepages.com/roll_02.jpg, background ingin di simpan di sebelah kanan atas posting tanpa repeat, padding sebesar 10 pixel, besar hurup 90% :





<div style="background:url(http://kangrohman.googlepages.com/roll_02.jpg) no-repeat right top; text-align:justify; font-size:90%; padding:10px">



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.



</div>



Hasilnya akan seperti ini :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.

Eiiiith... gampang juga kan? ya udah di coba dulu aja biar jadi hafal...



Udah dulu ah kang rohman mau nerusin main game nya. Cheeeerrrr..

Tips SEO : Optimisasi Meta tag Keyword dan Deskripsi

Cara Blogging - Jika beberapa hari yang lalu, sahabat kang rohman yaitu oom memberikan tips SEO (Search Engine Optimization) melalui
Meta Title Tag, maka kang rohman pun mencoba berbagi tips
SEO, namun tentu saja sedikit berbeda. Tips yang ingin kang rohman bagi adalah
Tips SEO melalui Meta tag Keyword serta Meta tag Deskripsi.
Kenapa meta tag keyword serta meta tag deskripsi perlu di optimisasi, jawabnya
karena sering kali mesin Crawler Search engine terlebih dahulu menyambangi bagian
ini di banding dengan bagian-bagian yang lain.



Trik dasar dari teknik ini adalah menambahkan Judul Blog ke dalam
meta tag keyword dan meta tag deskripsi. Jika pada posting terdahulu kang rohman pernah
memberi tips membuat meta tag seperti ini :




<meta name="description" content=" Deskripsi blog "/>


<meta name="keywords" content=" keyword 1, keyword 2, keyword 3, dst "/>




Contoh seperti ini :





<meta name="description" content=" Panduan praktis membuat blog di blogspot serta download ebook dan software secara gratis "/>

<meta name="keywords" content=" blog tutorial, tutorial blogspot, blogging tutorial, free download, free software, gratis, google adsense, template, favicon, javaScript tutorial, html tutorial, blog tutorial banner, technorati, banner, css "/>






Contoh di atas merupakan pemasangan meta tag yang umum di pakai. Untuk mengoptimalkannya
kita sisipkan kode judul blog ( title blog ) ke dalam meta tag tersebut, sehingga kodenya
akan menjadi seperti ini :




<meta expr:content='data:blog.pageTitle + " - Deskripsi blog"' name='description'/>


<meta expr:content='data:blog.pageTitle + ", keyword 1, keyword 2, keyword 3, dst"' name='keywords'/>




Contoh seperti ini :





<meta expr:content='data:blog.pageTitle + " - Panduan praktis membuat blog di blogspot serta download ebook dan software secara gratis"' name='description'/>


<meta expr:content='data:blog.pageTitle + ", blog tutorial, tutorial blogspot, blogging tutorial, free download, free software, gratis, google adsense, template, favicon, javaScript tutorial, html tutorial, blog tutorial banner, technorati, banner, css"' name='keywords'/>




Mudah-mudahan dengan meta tag seperti di atas dapat meningkatkan traffik ke blog anda.
Sebagai perumpamaan yaitu ketika kang rohman menggunakan meta tag yang biasa, jumlah
pengunjung blog ini sekitar 500 sampai 600 pengunjung. Setelah melakukan optimalisasi
meta tag maka pengunjung blog kang rohman menjadi sekitar 800 sampai 1000 pengunjung.
Silahkan lihat pada site meter yang kang rohman pakai (namun kemarin sempat mengalami
penurunan beberapa hari akibat dari blogger tidak bisa di akses oleh pengguna ISP tertentu
di indonesia).



Selain melakukan cara di atas, ada pula yang harus di perhatikan dalam hal membuat meta tag
deskripsi atau keyword yaitu di antaranya :

• Jangan terjadi duplikasi antara judul blog dengan deskripsi blog (kata-katanya sama).





• Sebaiknya jumlah karakter keyword jangan lebih dari 500 katrakter.





• Untuk jumlah keyword sebaiknya jangan lebih dari 20 keyword. Pemasangan keyword yang terlalu
  banyak bisa di anggap spam oleh seach engine.





• Keyword yang di pasang sebaiknya berhubungan dengan isi dari postingan.





• Lakukan analisa terhadap meta tag yang anda pasang. Untuk hal ini anda bisa
  menggunakan tool di internet secara gratis. Caranya gampang, ketik meta tag analyzer
  pada Google Search yang ada di bagian atas blog ini, kemudian klik Search lalu kunjungi situs
  yang tampil paling atas (karena situs yang diindex paling atas berarti SEO situs tersebut memang OK banget)

Sampai ketemu lagi pada tips SEO berikutnya.

Pasang Widget Post Terbaru dan Komentar Terbaru

Cara Blogging - Banyak dari blogger berkeinginan untuk menginstall widget Post Terbaru
serta widget komentar terbaru di bagian sidebar blog mereka, untuk hal
tersebut beberapa blogger menciptakan sebuah widget Post Terbaru dan komentar terbaru
dengan menggunakan javascrip seperti yang pernah saya posting di sini, namun sebenarnya memasang berbagai widget dengan menggunakan javascript
sangat berpotensi sekali untuk memperlambat loading blog serta tidak terlalu baik untuk
search engine, dan di samping itu pula apabila loading blog kita terlalu berat untuk
di akses, maka sangat besar kemungkinan blog kita akan langsung di tinggalkan oleh para pengunjung.




Untuk keperluan hal ini, ada alternatif lain selain memakai javascript yaitu engan menggunakan
alamat feed kita sendiri. Untuk Post Terbaru bisa menggunakan feed post, dan untuk
komentar terbaru bisa menggunakan feed comment. berikut ini adalah alamat feed untuk
Post serta feed komentar asli kepunyaan blogger. Alamat feednya adalah sebagai berikut :



Alamat Post Terbaru :

http://NamaBlogAnda.blogspot.com/feeds/posts/default



Alamat Komentar terbaru :




http://NamaBlogAnda.blogspot.com/feeds/comments/default


NamaBlogAnda harus di ganti dengan alamat blog anda. Contoh :
nama blog saya adalah kolom-tutorial, sehingga untuk alamat feednya sebagai berikut,



Alamat Post Terbaru :

http://kolom-tutorial.blogspot.com/feeds/posts/default



Alamat Komentar terbaru :




http://kolom-tutorial.blogspot.com/feeds/comments/default


Untuk cara memasang di blog adalah seperti ini :

1. Sign in di blogger dengan ID anda.





2. Klik Layout





3. Klik tab Elemen Halaman





4. Klik Tambah sebuah Elemen Halaman





5. Setelah muncul window popup, klik TAMBAHKAN KE BLOG untuk yang feed.














6. Masukan alamat feed yang mau anda pasang (URL untuk post terbaru atau URL komentar terbaru). Contoh :








7. Setelah anda masukan alamatnya, klik tombol Lanjutkan





8. Ganti judul dengan Post terbaru atau Komentar terbaru, dan pilih juga
   berapa yang anda inginkan (maksimal 5)








9. Klik tombol Simpan Perubahan





10. Pindahkan elemen yang baru di buat ke tempat yang anda inginkan, kemudian klik tombol Simpan






11. Selesai. Silahkan lihat hasilnya.

Sekarang ada mempunyai widget Post terbaru danKomentar terbaru yang
tidak terlalu membebani loading blog anda.



Selamat mencoba !

Membuat Menu Drop down dengan CSS

Cara Blogging - Silahkan arahkan mouse komputer anda ke tab menu di bawah ini :

• HOME

• LINKS

  CSS Play

  blog kang rohman

  unique template

  rubrik elektronik

  css library

• LAYOUTS

  Fixed 1

  Fixed 2

  Fixed 3

  Fixed 4

  minimum width for Internet Explorer

Tab menu dropdown ini 100% menggunakan Cascading Style Sheet (CSS), tanpa javascript ataupun skript yang lainnya. Sehingga Menu drop down ini tidak akan membuat blog anda menjadi lambat ketika di loading, dan cocok dalam banyak browser. Bagi anda yang ingin memasang tab menu di bagian headernya, saya sarankan untuk memasang menu drop down ini di blognya. Bagaimana cara untuk membuat menu drop down ini? tentu saja banyak cara untuk membuatnya, namun dalam kesempatan ini saya akan menuliskan dengan 2 cara. Kira-kira caranya seperti ini :



# Metode yang pertama :



langkah #1 :

1. Login ke blogger dengan ID anda


2. Setelah berada pada halaman dashboard, klik Layout.


3. Kemudian klik tab edit HTML.


4. Saya sarankan kepada anda sebelum mengubah kode template, silahkan di backup dulu. Klik link Download template sepenuhnya.


5. Silahkan lihat ke kode template anda, dan temukan kode berikut : ]]></b:skin>


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


/* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/drop_definition2.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the assocaited (x)html may be modified in any way to fit your requirements. =================================================================== */ #menu {list-style-type:none; margin:5px; padding:0;} #menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;} #menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;} #menu li a, #menu li a:visited {text-decoration:none;} #menu li dd {display:none;} #menu li a:hover {border:0;} #menu li:hover dd, #menu li a:hover dd {display:block;} #menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;} #menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;} #menu dl {width: 150px; margin: 0; padding: 0; background: #c9ba65;} #menu dt {margin:0; padding: 5px 5px 5px 20px; font-size: 1.1em; color: #fff; border-bottom:1px solid #fff; border-top:1px solid #fff;} #menu .one {background: #827b6b; border-top:5px solid #dca;} #menu .two {background: #646e4c; border-top:5px solid #bb9;} #menu .three {background: #a4a88d; border-top:5px solid #eec;} #menu .four {background: #a29f68; border-top:5px solid #f8f8b8;} #menu .one dt {background: #b2ab9b;} #menu .two dt {background: #949e7c;} #menu .three dt {background: #d4d8bd;} #menu .four dt {background: #e2dfa8;} #menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;} #menu .one dd {border-bottom:1px solid #aaa;} #menu .two dd {border-bottom:1px solid #e8e8e8;} #menu .three dd {border-bottom:1px solid #eee;} #menu .four dd {border-bottom:1px solid #999;} #menu dd.last {border-bottom:1px solid #fff;} #menu dt a, #menu dt a:visited {display:block; color:#444;} #menu dd a, #menu dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:125px;} #menu .one dd a {background:#949e7c; color:#eee;} #menu .two dd a {background:#d4d8bd; color:#346;} #menu .three dd a {background:#e2dfa8; color:#654;} #menu .four dd a {background:#b2ab9b; color:#ff8;} #menu .one dd a:hover {background: #b2ab9b; color:#345;} #menu .two dd a:hover {background: #949e7c; color:#543;} #menu .three dd a:hover {background: #d4d8bd; color:#123;} #menu .four dd a:hover {background: #e2dfa8; color:#534;}
7. Silahkan lihat ke bagian bawah lagi, lalu temukan kode 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 saya cetak 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. Klik tombol Simpan Template. Tunggu beberapa saat sampai template anda selesai di simpan.

langkah #2

1. Klik pada tab elemen Halaman yang berada di bagian atas. Perhatikan gambar berikut :



2. Klik pada Tambahkan sebuah Elemen halaman yang berada di atas elemen header. Perhatikan gambar berikut ini:



3. setelah window pop up muncul, klik tombol Tambahkan ke blog untuk HTML/JavaScript.:


4. Copy kemudian paste kode di bawah ini pada elemen yang muncul tadi :


<ul id="menu"><!-- drop down menu start --> <li> <!--[if lte IE 6]><a href="#nogo"><table> <tr><td><![endif]--> <dl class="one"> <!-- Alter the links with your own --> <dt><a href="../menu/index.html">DEMOS</a></dt> <dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd> <dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd> <dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd> <dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd> <dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd> <dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd> <dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd> <dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd> <dd class="last"><a href="../menu/em_images.html" title="em size images compared">em sized images</a></dd> </dl> <!--[if lte IE 6]></td></tr> </table> </a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table> <tr><td><![endif]--> <dl class="two"> <dt><a href="index.html">MENUS</a></dt> <dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd> <dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd> <dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd> <dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd> <dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd> <dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd> <dd class="last"><a href="circles.html" title="circular links">circular links</a></dd> </dl> <!--[if lte IE 6]></td></tr> </table> </a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table> <tr><td><![endif]--> <dl class="three"> <dt><a href="../layouts/index.html">LAYOUTS</a></dt> <dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd> <dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd> <dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd> <dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd> <dd class="last"><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd> </dl> <!--[if lte IE 6]></td></tr> </table> </a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table> <tr><td><![endif]--> <dl class="four"> <dt><a href="../mozilla/index.html">MOZILLA</a></dt> <dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd> <dd><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd> <dd><a href="../mozilla/content.html" title="Using content:">content:</a></dd> <dd><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd> <dd><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd> <dd><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a></dd> <dd class="last"><a href="../mozilla/target.html" title="Target Practise">target practise</a></dd> </dl> <!--[if lte IE 6]></td></tr> </table> </a><![endif]--> </li> </ul> <!-- end of drop down menu -->
5. Klik tombol Simpan Template


6. Selesai. Silahkan lihat hasilnya.

Catatan : untuk beberapa template, cara ini tidak menghasilkan tampilan yang bagus, maka anda bisa mencoba cara berikut.



Metode kedua



Karena desain dari template sangat berbeda antara satu dengan yang lainnya, maka saya hanya mengambil contoh untuk template minima saja (template asli blogger) sebagai gambaran saja. langkahnya adalah sebagai berikut :

1. Login ke blogger dengan ID anda


2. setelah berada di halaman dashbord , klik Layout.


3. Kemudian klik tabedit HTML.


4. Saya sarankan kepada anda sebelum mengubah kode template, silahkan di backup dulu. Klik link Download template sepenuhnya.


5. Silahkan anda beri tanda tik/cek pada kotak kecil di samping tulisan Expand Templates Widget. Tunggu beberapa saat.



6. Lihat ke kode template anda dan temukan kode berikut : ]]></b:skin>


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


/* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/drop_definition2.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the assocaited (x)html may be modified in any way to fit your requirements. =================================================================== */ #menu {list-style-type:none; margin:5px; padding:0;} #menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;} #menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;} #menu li a, #menu li a:visited {text-decoration:none;} #menu li dd {display:none;} #menu li a:hover {border:0;} #menu li:hover dd, #menu li a:hover dd {display:block;} #menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;} #menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;} #menu dl {width: 150px; margin: 0; padding: 0; background: #c9ba65;} #menu dt {margin:0; padding: 5px 5px 5px 20px; font-size: 1.1em; color: #fff; border-bottom:1px solid #fff; border-top:1px solid #fff;} #menu .one {background: #827b6b; border-top:5px solid #dca;} #menu .two {background: #646e4c; border-top:5px solid #bb9;} #menu .three {background: #a4a88d; border-top:5px solid #eec;} #menu .four {background: #a29f68; border-top:5px solid #f8f8b8;} #menu .one dt {background: #b2ab9b;} #menu .two dt {background: #949e7c;} #menu .three dt {background: #d4d8bd;} #menu .four dt {background: #e2dfa8;} #menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;} #menu .one dd {border-bottom:1px solid #aaa;} #menu .two dd {border-bottom:1px solid #e8e8e8;} #menu .three dd {border-bottom:1px solid #eee;} #menu .four dd {border-bottom:1px solid #999;} #menu dd.last {border-bottom:1px solid #fff;} #menu dt a, #menu dt a:visited {display:block; color:#444;} #menu dd a, #menu dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:125px;} #menu .one dd a {background:#949e7c; color:#eee;} #menu .two dd a {background:#d4d8bd; color:#346;} #menu .three dd a {background:#e2dfa8; color:#654;} #menu .four dd a {background:#b2ab9b; color:#ff8;} #menu .one dd a:hover {background: #b2ab9b; color:#345;} #menu .two dd a:hover {background: #949e7c; color:#543;} #menu .three dd a:hover {background: #d4d8bd; color:#123;} #menu .four dd a:hover {background: #e2dfa8; color:#534;}
8. lihat ke bagian bawah dan temukan kode ini:



<div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </b:if> </b:includable> </b:widget> </b:section>

9. Delete / hapus kode di atas lalu ganti dengan kode di bawah ini :


<div class='descriptionwrapper'> <p class='description'> <span><data:description/></span></p> </div> </b:if> </b:includable> </b:widget> </b:section> <ul id="menu"><!-- drop menu start --> <li> <!--[if lte IE 6]><a href="#nogo"><table> <tr><td><![endif]--> <dl class="one"> <!-- Alter the links with your own --> <dt><a href="../menu/index.html">DEMOS</a></dt> <dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd> <dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd> <dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd> <dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd> <dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd> <dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd> <dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd> <dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd> <dd class="last"><a href="../menu/em_images.html" title="em size images compared">em sized images</a></dd> </dl> <!--[if lte IE 6]></td></tr> </table> </a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table> <tr><td><![endif]--> <dl class="two"> <dt><a href="index.html">MENUS</a></dt> <dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd> <dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd> <dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd> <dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd> <dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd> <dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd> <dd class="last"><a href="circles.html" title="circular links">circular links</a></dd> </dl> <!--[if lte IE 6]></td></tr> </table> </a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table> <tr><td><![endif]--> <dl class="three"> <dt><a href="../layouts/index.html">LAYOUTS</a></dt> <dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd> <dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd> <dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd> <dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd> <dd class="last"><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd> </dl> <!--[if lte IE 6]></td></tr> </table> </a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table> <tr><td><![endif]--> <dl class="four"> <dt><a href="../mozilla/index.html">MOZILLA</a></dt> <dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd> <dd><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd> <dd><a href="../mozilla/content.html" title="Using content:">content:</a></dd> <dd><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd> <dd><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd> <dd><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a></dd> <dd class="last"><a href="../mozilla/target.html" title="Target Practise">target practise</a></dd> </dl> <!--[if lte IE 6]></td></tr> </table> </a><![endif]--> </li> </ul> <!-- end of drop down menu -->
10. Klik tombol Simpan Perubahan


11. Selesai. Silahkan lihat hasilnya.

Langkah-langkah di atas hanyalah untuk template minima , jadi untuk template anda terkadang kode nya sama dan banyak juga yang berbeda, silahkan di pelajari saja.



Sedikit tambahan :



Pada kode menu drop down yang saya berikan, ada kode seperti ini :





<dt><a href="../menu/index.html">DEMOS</a></dt>

<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>



Perhatikan pada kode <dt> dan <dd>

Kode yang di awali dengan <dt>, adalah judul pada menu utama (tulisan yang muncul di muka).

Kode yang di awali dengan <dd>, adalah judul untuk sub menu (tulisan pada drop menu).



Anda harus mengganti link yang ada dengan link milik anda sendiri, sebagai contoh :

<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page"> zero dollars</a></dd>

ganti menjadi :

<dd><a href="http://template-unik.blogspot.com/2007/11/unique-template-r-21.html" title="free template R 1.2">UniQue Template R 1.2</a></dd>





Selamat mencoba dan mempelajari.

Membuat Read more Sejajar Dengan Paragrap

Cara Blogging - 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,

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 !