prek

fgfgfgfghfhgfghfgffkgfg

PRETEL

Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header

den zuaz | 23:49 | 53comments

Salam blogger, Kali ini saya sedikit berbagi tentang Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header yang telah di request oleh sahaba-sahabat Zuaz'Z Creator pada halaman Facebook.

Menu drop down dapat kita pasang di atas maupun di bawah nama blog, dengan memasang menu semacam ini tampilan blog kita semakin tampak bagus dan pastinya akan mempermudah pengunjung untuk mencari apa yang dibutuhkan dari blog kita. 

Untuk demonya silakan sobat blogger klik link berikut ini DEMO. Bagi sobat blogger yang berminat memasang menu semacam ini silakan ikutu langkah-langkah berikut ini:

Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header:

1. Seperti biasa sobat harus login dulu di akun blog sobat
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
4. Sobat cari kode ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>

Klik show untuk melihat

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(http://2.bp.blogspot.com/-eVufkC686Cw/TwGo8YAlWwI/AAAAAAAAAYM/tWP7l3ENpjY/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjESUo5VmL6z_J8bosyuWDY6M1leuPNCNe0txnHq-YfEMmpGpNM-0Qv4sBC7Rtbe0GqGGjcq2bZPkh9FUYfVpeKLgWkwqwR_0yDHPijI4drktBzCf7ZxhUA5eXJePu4Gsqr87gPzh4Zi5o/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

Selanjutnya sobat blogger cari kode berikut:

• <header>  : untuk menempatkan menu di atas nama blog
• </header> : untuk menempatkan menu di bawah nama blog

Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode </header>

Klik show untuk melihat

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7e-3zmjU-AoH9ktKWa8Y279KQrSNtQUtmwz_K8VaFP-3mxsQ8SD7-3sJvUHr6CwwtwCH3DNnNWgTQCeV-4DzyJwbd8mE34mQJJf0NvX7t0AHkQQpMZ-EHyCoiufPRewU3abSt6DT0quc/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://www.blogger.com/profile/06961337061354681028' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/u/0/106997202037581570725' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://twitter.com/den_zuaz' target='new'>Contact on Twitter</a></li>
<li><a href='http://www.myspace.com/denzuaz' target='new'>Contact on Myspace</a></li>
<li><a href='http://www.facebook.com/zuazTama' target='new'>Zuaz&#39;Z on Facebook</a></li>
</ul>
</li>
<li><a href='http://zuazz.blogspot.com' target='new'>Zuaz&#39;Z Creator</a></li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20komputer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20blog'>Blogspot</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/facebook'>Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='http://zuazz.blogspot.com/2012/01/tv-online.html'>TV Online</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/computer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/desain%20grafis'>Desain Grafis</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/game'>Game</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/microsoft'>Microsoft</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20aplikasi'>Software APP</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20program'>Software Program</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://zuazz.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://zuazz.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilu6GwlF2ewF_4Ac-l9r3i4iREOz77HbllklQw8XX6-vGIVN-UTX2-sZ5yx8pmits1ilDe3j4ewBwGudMZNKGTObYZM1i9CkNWoEBTAuYn5-rQw9ccfQX3Id575zlpQzNOiDvDo_Rx2hQ/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlSohkouaCZKggUBprQaYPHvC6wwIFR5YUQVBzBzrpe_lDvOWk_VWjzHxSA8SrAn-pffi9fZ__9hrfLKnd5rSZVcglhvXDQYIPmSOeN2xB8d3uVBkIEJ5s-5yEvJN6P2zyQZ9aKH9-oA4/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

Keterangan:

1. Kode berwarna merah adalah Url tujuan, silakan sobat ganti dengan Url pada blog sobat
2. Kode berwarna kuning adalah kalimat yang tampil pada menu dropdown, Silakan sobat sesuaikan.

Demikianlah Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header, semoga bermanfaat bagi sobat blogger.

1. Masuk ke account blogger anda
2. Pilih tata letak/layout
3. Pilih tambah gadget
4. Pilih HTML/javascript.
5. Beri Judul Dafar isi atau judul sesuai dengan keinginan sobat
5. Kopas kode di bawah ini

• <div style="overflow:auto;width:430px;height:120px;padding:10px;border:1px solid #eee"><script style="text/javascript" src="http://sites.google.com/site/barajajs/listofcontent/contents.js"></script><script src="http://namablog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
  </div>

namablog.blogspot.com : ganti dengan alamat blog sobat

width:430px : Ganti Lebar sesuai dengan yang sobat inginkan, sesuaikan dengan template

height:120px : Ganti tinggi nya sesuai dengan keinginan sobat


6. Kemudian save dan letakkan sesuai dengan keinginan sobat.


Kemudian cara kedua saya akan bahas Daftar isi yang akan ditampilkan pada satu halaman penuh

Berikut ini langkah-langkahnya :
1. Masuk ke account blogger anda
2. Pilih New post
3. Pilih Edit HTML pada kanan atas halaman tersebut
4. Beri Judul postingan tersebut dengan Daftar Isi, atau judul apapun sesuai keinginan sobat.
5. Copy paste script berikut ini :

• <script style="text/javascript" src="http://sites.google.com/site/barajajs/listofcontent/contents.js"></script><script src="http://alamatblog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

http://alamatblog.blogspot.com : Ganti dengan alamat blog sobat

6. Klik Publish Post

Jadi deh, hasilnya atau sebagai contih dapat dilihat disini.

ty

Cara Membuat Daftar Isi Lengkap

daftar isi yang kita bahas disini adalah daftar isi yang akan ditampilkan pada satu halaman penuh dan bisa menampilkan seluruh judul postingan yang dikelompokkan sesuai dengan label atau kategori masing-masing judul. Jadi alangkah baiknya sebelum membuat daftar isi Anda harus benar-benar mengelompokkan posting artikel sesuai dengan Label atau kategori, karena kalau postingan dibuat tanpa menggunakan label ada kemungkinan judul postingan tidak akan tampil didalam daftar isi ini.

Berikut langkah-langkahnya :

Masuk ke account blogger Anda

Pilih Posting / Entri Baru. Pilih Edit HTML pada kanan atas halaman

Beri Judul postingan tersebut dengan Daftar Isi Lengkap, atau yang lain sesuai keinginan Anda.

Copy paste script berikut ini :

Klik Terbitkan Entri dan lihat hasilnya, jika langkah Anda benar daftar isi akan tampil pada halaman penuh dan dikelompokkan sesuai dengan label atau kategori yang Anda buat. Lankah terakhir link halaman Daftar isi ini tempatkan pada Menu Navigasi supaya gampang kalau Anda atau sobat lain menjelajah blog Anda.

Untuk contohnya lihat disini..!

rr

Mungkin ada teman-teman yang masih pemula yang ingin membuat link teks, jika anchor text (teks link) di klik, maka akan terbuka sebuah halaman baru. Terkadang jika anda berkunjung di sebauah blog, misalnya di blog saya ini, jika anda mengklik sebuah link halaman targetnya terbuka di halaman (tab/jendela)baru, dan terkadang halaman target terbuka di halaman (tab/window)yang sama.

Untuk membuat halaman target terbuka di halaman (tab)baru bisa buat link seperti di bawah ini:
(jika linknya berada dalam postingan, maka atur option teks editor pada mode Edit HTML)


Membuat link untuk membuka halaman target di halaman baru, anda perlu menambahkan kode target="_blank" ke kode link standar.

Contoh 1:
<a href="url tujuan" target="_blank">teks yang akan ditampilkan</a>
atau
<a href="url tujuan" target="_blank">anchor text</a>
(catatan: anchor text = teks yang akan ditampilkan, biasa juga disebut teks yang berisi link /merujuk ke halaman postingan lain)

Contoh source code link:
<a href="http://mycomputerdummies.blogspot.com/" target="_blank">Dummy</a>

Hasil linknya Klik disini Dummy


Contoh 2:
<a href="http://artikelkomputerku.blogspot.com/2008/08/daftar-isi-tips-dan-tutorial-blog.html" target="_blank">Tutorial Blog</a>

Hasil linknya seperti ini: Tutorial Blog

Sebagai bahan perbandingan, anda bisa lihat contoh lain yang berbeda seperti di bawah ini, halaman target terbuka di halaman (tab)yang sama

<a href="url tujuan">teks yang akan ditampilkan</a>
Contoh source code linknya:
<a href="http://kalongkalong.blogspot.com/">Kalongkalong</a>

Hasil linknya Klik disini Kalongkalong

Selain membuat link di dalam postingan, anda juga bisa membuat link di sidebar, header, maupun footer. Kode yang digunakan sama saja. Kode ini saya terapkan di bagian header blog saya, dengan menggunakan gadget html/javascrip

cpr

Assalamu'alaikum Wr. Wb. Oke, pada postingan kali ini.. saya akan share bagaimana cara membuat daftar isi (arsip) blog lengkap pada blogger. Arsip merupakan dokumen (postingan terdahulu) yang disimpan dan dipelihara di tempat khusus (Widget/Item Pages) sebagai referensi pengunjung. Nah, sebelumnya postingan ini adalah request post dari salah satu sahabat blogger saya, dan semoga juga bisa berguna dan bermanfaat untuk blogger yang lainnya.

Penampakkannya dulu..

Klik Untuk Memperbesar Gambar

Langsung aja ya, Cara Membuat Daftar Isi (Arsip) Blog Lengkap Untuk Blogger.

1. Pertama, yang pasti sobat harus masuk/login ke akun bloggernya.
2. kemudian, Klik "New Post/Entri Baru". Setelah masuk pada halaman "New Post/Entri Baru". Silahkan, isi "Title" atau judul postingannya terserah sobat.
3. Pilih opsi "Edit HTML" bukan Compose.
4. Lalu, Paste Script dibawah ini..

<script src="http://arsip-blog-lengkap-by-pradiszwardhana.googlecode.com/files/arsip-blog-lengkap-by-pradiszwardhana.js"> </script> <script src="http://www.pradiszwardhana.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"> </script>

5. Gantilah teks yang bertulisan link http://www.pradiszwardhana.com/ dengan alamat blog sobat, (http://alamatblogsobat.blogspot.com/) atau (http://www.alamatblogsobat.com/), dsb.
6. Klik "Publish Post/Terbitkan Entri". Semoga Berhasil...

Catatan: Tutorial ini bisa digunakan dalam 2 bentuk, yaitu pada halaman postingan atau juga widget. Namun, lebih disarankan memilih opsi halaman postingan saja.

Sekian.. semoga berguna dan bermanfaat.