Tampilkan postingan dengan label halaman blog. Tampilkan semua postingan
Cara Membuat Menu Horizontal Blog Drop Down Search Engine merupakan menu laman blog yang terlengkap yang bisa anda pasang di blog anda. Pada menu ini sudah disediakan beberapa sub-menu yang bisa anda gunakan untuk menghemat ruang atau tempat di blog anda dan selain itu juga sudah terdapat kolom pencarian yang akan membantu pengunjung blog anda mencari artikel yang mereka inginkan. Seperti halnya membuat menu horizontal yang lain, yang telah saya jelaskan dibeberapa artikel, membuat menu horizontal blog drop down dengan serach engine juga sangat mudah dilakukan, seperti penjelasan berikut ini
Cara Membuat Menu Horizontal Blog Drop Down Search Engine
Cara Membuat Menu Horizontal Blog Drop Down Search Engine
- Masuk ke akun blogger anda
- Pilih dan klik Template >> Edit Html >> Lanjutkan >> centang Expand Template Widget >> tekan Ctrl + F di keyboard
- Cari kode ]]></b:skin>
- Masukkan kode CSS berikut tepat diatas ]]></b:skin>
#menudropse{background:#000000 url() repeat-x;width:940px;margin:0 auto;padding:0 auto}
#menuwrapperdropse{width:940px;height:30px;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}
#menubardropse{width:100%}
#menubardropse,#menubardropse ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubardropse a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;text-shadow: 0px 1px 1px #000;color:#f2f1f1;border-right:1px solid #666;padding:9px 10px 8px}
#menubardropse a.trigger{background-image:url();background-repeat:no-repeat;background-position:right center;padding:9px 24px 8px 10px}
#menubardropse li{float:left;position:static;width:auto}
#menubardropse li ul,#menubardropse ul li{width:170px}
#menubardropse 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}
#menubardropse 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)}
#menubardropse li:hover a,#menubardropse a:active,#menubardropse a:focus,#menubardropse li.hvr a{background-color:#222;color:#E98C0A}
#menubardropse li:hover ul,#menubardropse li.hvr ul{display:block}
#menubardropse li:hover ul a,#menubardropse li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#menubardropse 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}
#menubardropse ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none} - Cari kode seperti berikut ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Panduan Template Blog(Header)' type='Header'/>
</b:section>
</div> - Letakkan kode menu horizontal berikut dengan memperhatikan dua pilihan ini
Jika anda ingin menampilkan menu horizontal diatas judul blog, letakkan kode menu horizontal dibawah <div id='header-wrapper'>
Jika anda ingin menampilkan menu horizontal dibawah judul blog, letakkan kode menu horizontal dibawah </b:section> - Kode Menu Horizontal Blog Drop Down Dengan Search Engine
<div id='menudropse'>
<div id='menuwrapperdropse'>
<ul id='menubardropse'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Halaman1</a></li>
<li><a class='trigger' href='#'>Halaman2</a>
<ul>
<li><a href='#'>SubHal2</a></li>
<li class='hr'/>
<li><a href='#'>SubHal2</a></li>
<li class='hr'/>
<li><a href='#'>SubHal2</a></li>
</ul>
</li>
<li><a href='#'>Halaman3</a></li>
<li><a class='trigger' href='#'>Halaman4</a>
<ul>
<li><a href='#'>SubHal4</a></li>
<li class='hr'/>
<li><a href='#'>SubHal4</a></li>
<li class='hr'/>
<li><a href='#'>SubHal4</a></li>
</ul>
</li>
<li><a href='#'>Halaman5</a></li>
<li><a class='trigger' href='#'>Uncategories</a>
<ul>
<li><a href='#'>Uncategories1</a></li>
<li class='hr'/>
<li><a href='#'>Uncategories2</a></li>
<li class='hr'/>
<li><a href='#'>Uncategories3</a></li>
<li class='hr'/>
<li><a href='#'>Uncategories4</a></li>
<li class='hr'/>
<li><a href='#'>Uncategories5</a></li>
</ul>
</li>
</ul>
<div class='menusearch'>
<div style='float:right;padding:4px 8px 0 0;'>
<form action='http://www.google.com/search' method='get' target='_blank'>
<input name='sitesearch' style='display:none;' value='http://panduantemplateblog.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' style='width:170px;border:none;padding:4px 10px; font:12px Arial;color:#666; background:#FFFFFF;' type='text' value='Cari Artikel...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVvaigvf4MLaZF8aF0s6s3Et5OGfnxLZ923bp83yat4SBDMxvL8H4hUiixYT00SmEspCnLTLyqZCosUooHPfpe4sJ_6P2xk_t-V5AmQEHw5Rh_x5clkpJ0s7AuStnflUnyJkgIZ59y1Jti/' type='image' value='Cari'/>
</form>
</div>
</div>
<br class='clearit'/>
</div>
</div> - Jika semuanya sudah dilakukan, silahkan Pratinjau terlebih dahulu. Jika tidak ada error, Simpan Template anda dan lihat hasilnya.
- Tambahan : http://panduantemplateblog.blogspot.com ganti dengan link url blog anda
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Menu Horizontal Blog Drop Down Search Engine
Cara Membuat Daftar Isi Blog di Halaman Blog - Sebagian teman-teman blogger ada yang membuat daftar isi blog dan menaruhnya di halaman blog sehingga menjadi menu halaman blog dan terkadang ada yang memasangnya di kolom blog agar selalu tampil 'dimana-mana' yang disertai dengan scrolling agar irit tempat. Dan juga, ada teman-teman blogger yang tidak membuat daftar isi blog karena mungkin mereka telag memasang artikel terkait atau memasang artikel populer di blog mereka. Hmm.. ternyata aktivitas blogging itu unik ya....
Jika anda sepaham dengan saya, yaitu menambahkan daftar isi blog maka anda bisa membaca artikel ini, Cara Membuat Daftar Isi Blog di Halaman Blog seperti yang ada di halaman menu Arsip, dengan tampilan sederhana dan cara membuatnya pun tidak terlalu ribet dan sudah tersedia tab scrollnya, cukup mengikuti panduan berikut ini
Cara Membuat Daftar Isi Blog di Halaman Blog
Jika anda sepaham dengan saya, yaitu menambahkan daftar isi blog maka anda bisa membaca artikel ini, Cara Membuat Daftar Isi Blog di Halaman Blog seperti yang ada di halaman menu Arsip, dengan tampilan sederhana dan cara membuatnya pun tidak terlalu ribet dan sudah tersedia tab scrollnya, cukup mengikuti panduan berikut ini
Cara Membuat Daftar Isi Blog di Halaman Blog
- Silahkan buat halaman blog terlebih dahulu
- Pastekan kode script brikut ini di area penulisan artikel dengan menggunakan mode penulisan Html
<div style="height: 500px; overflow: auto; width: 100%;">
<span style="color: black; font-size: 14px;"><b>Arsip Blog Panduan Template Blog</b></span>
<script src="http://yourjavascript.com/23131381311/daftarisinyablog.js">
</script>
<script src="http://panduantemplateblog.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc">
</script></div>
Ganti http://panduantemplateblog.blogspot.com dengan url blog anda
Jika isi artikel blog anda sudah lebih dari 1000 artikel, ganti max-results=500 dengan max-results=9999 - Publikasikan halaman blog anda, selesai dan lihat hasilnya
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Daftar Isi Blog di Halaman Blog
Terimakasih buat mas Rohan selaku admin Animeart atas kunjungan dan komentarnya di Panduan Cara Membuat Halaman Blog. Sebelumnya saya minta maaf jika di artikel tersebut agak membingungkan tapi menurut saya permasalahan yang mas Rohan hadapi dengan menu halaman blognya yang tidak muncul sebenarnya tidak ada yang salah tapi penerapan dari penjelasan artikel tersebut yang mungkin kurang jelas saya membuatnya.
Okey, untuk mas Rohan, setelah saya melihat blog anda dan meninjau kode template yang digunakan blog anda, ternyata saya menemukan kode seperti gambar di bawah ini
Pada kedua gambar diatas, dapat saya simpulkan jika mas Rohan menggunakan menu widget Laman blog yang sudah disediakan oleh Blogger.com seperti yang terlihat pada gambar nomer 2 sehingga setiap membuat halaman blog maka akan otomatis tampil dan tidak akan menyertakan link-link halaman yang telah dibuat kedalam template.
Dan lagi, apabila menggunakan widget Laman blog untuk membuat halaman dan memilih menu Jangan tampilkan seperti gambar dibawah ini maka halaman blog yang telah dibuat atau yang telah ada tidak akan tampil
Lalu bagaimana menampilkan halaman blog yang telah kita buat sedangkan kita tetap memilih menu Jangan tampilkan ▼ ?
Solusinya : Buatlah halaman blog anda sendiri seperti yang telah saya jelaskan di artikel Menu Horizontal Blog di Blogspot
Untuk mas Rohan, buat halaman blog anda sendiri untuk menampilkan kembali halaman blog anda namun jika tidak anda bisa tetap menggunakan widget Laman untuk memunculkan kembali halaman blog anda dan mengaturnya di Tata Letak. Jika permasalahannya belum terselesaikan, ijinkan saya untuk membantu anda, silahkan hubungi saya di 082336041117 (SMS Only) saya tunggu sampai 1x24 jam. Terimakasih
Okey, untuk mas Rohan, setelah saya melihat blog anda dan meninjau kode template yang digunakan blog anda, ternyata saya menemukan kode seperti gambar di bawah ini
Pada kedua gambar diatas, dapat saya simpulkan jika mas Rohan menggunakan menu widget Laman blog yang sudah disediakan oleh Blogger.com seperti yang terlihat pada gambar nomer 2 sehingga setiap membuat halaman blog maka akan otomatis tampil dan tidak akan menyertakan link-link halaman yang telah dibuat kedalam template.
Dan lagi, apabila menggunakan widget Laman blog untuk membuat halaman dan memilih menu Jangan tampilkan seperti gambar dibawah ini maka halaman blog yang telah dibuat atau yang telah ada tidak akan tampil
Lalu bagaimana menampilkan halaman blog yang telah kita buat sedangkan kita tetap memilih menu Jangan tampilkan ▼ ?
Solusinya : Buatlah halaman blog anda sendiri seperti yang telah saya jelaskan di artikel Menu Horizontal Blog di Blogspot
Untuk mas Rohan, buat halaman blog anda sendiri untuk menampilkan kembali halaman blog anda namun jika tidak anda bisa tetap menggunakan widget Laman untuk memunculkan kembali halaman blog anda dan mengaturnya di Tata Letak. Jika permasalahannya belum terselesaikan, ijinkan saya untuk membantu anda, silahkan hubungi saya di 082336041117 (SMS Only) saya tunggu sampai 1x24 jam. Terimakasih
Tambahan untuk Animeart - mas Rohan
Silahkan lihat perbandingan kode html dibawah ini
Ini adalah kode di template Animeart setelah <body>
<body>
<div id='header-wrapper'>
<div id='header11'>
<div class='logoblogazine section' id='blog-title'><div class='widget Header' id='Header1'>
<div id='header11'>
<div class='title'>
Animeart
</div>
</div>
</div></div>
<div id='search'>
<form action='http://www.animeart.tk/search/' id='searchform' method='get'>
<input id='searchtext' name='q' type='text' value='Search'/>
<input id='searchbutton' size='10' type='submit' value=''/>
</form>
</div>
<!-- Pages -->
<div class='section' id='pages'></div>
<!-- /Pages -->
</div>
</div>
<!-- Featured Content Slider Started -->
Untuk kode <div class='logoblogazine section' id='blog-title'> dan penutupnya </div> yang ada diatas kode <div id='search'> salah satunya saya hapus
Untuk kode
<!-- Pages -->
<div class='section' id='pages'></div>
<!-- /Pages -->
silahkan di hapus saja
Dan untuk menambah menu halaman blog dibawah header, cari kode ini
</form>
</div>
</div>
Dan tambahkan kode berikut tepat dibawah kode diatas
<div style='clear:both;'></div>
<div id='navhorizontalpic'>
<div id='navhorizontal'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='http://jasapanduantemplateblog.blogspot.com/p/cara-order.html'>Cara Order</a></li>
<li><a href='#'>Ketentuan</a></li>
<li><a href='#'>Kontak</a></li>
<li><a href='#'>Tentang</a></li>
</ul>
</div>
<div style='clear:both;'></div>
</div>
Ini adalah kode template blog saya yang menggunakan template yang sama persis dengan Animeart yang sudah menyertakan menu halaman blog
<body>
<div id='header-wrapper'>
<div id='header11'>
<div class='widget Header' id='Header1'>
<div id='header11'>
<div class='title'>
<a href='http://jasapanduantemplateblog.blogspot.com' title='Jasa Panduan Template Blog'>Jasa Panduan Template Blog</a>
</div>
</div>
</div>
<div id='search'>
<form action='http://panduantemplateblog.blogspot.com/search/' id='searchform' method='get'>
<input id='searchtext' name='q' type='text' value='Search'/>
<input id='searchbutton' size='10' type='submit' value=''/>
</form>
</div>
</div><div style='clear:both;'></div>
<div id='navhorizontalpic'>
<div id='navhorizontal'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='http://jasapanduantemplateblog.blogspot.com/p/cara-order.html'>Cara Order</a></li>
<li><a href='#'>Ketentuan</a></li>
<li><a href='#'>Kontak</a></li>
<li><a href='#'>Tentang</a></li>
</ul>
</div>
<div style='clear:both;'></div>
</div>
</div>
<!-- Featured Content Slider Started -->
Untuk memasang CSS silahkan sesuaikan dengan keinginan, yang penting penempatan kode Html untuk menu halaman blog sesuai
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Permasalahan Halaman Blog Mas Rohan Animeart
