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
Menu Horizontal Blog di Blogspot merupakan daftar menu-menu halaman yang ada di blog yang biasanya terletak diatas atau dibawah atau sejajar dengan judul blog atau header dan kadang ada sebagian teman-teman blogger meletakkan menu-menu ini berada dibawah blog atau tepatnya diatas footer blog. Berbeda dengan menu vertikal, menu horizontal memiliki bentuk yang sejajar dengan lebar blog atau lebar header blog dari arah kanan ke kiri. Seperti yang ada di blog ini atau pada tampilan gambar berikut ini
Menu horizontal blog di Blogspot bisa dibuat sesuai dengan keinginan pemilik blog, seperti yang telah saya lakukan terhadap blog ini. Dan pada artikel ini saya membagi beberapa cara dalam membuat menu horizontal blog di Blogspot yang bisa anda pilih sesuai dengan keinginan anda
Menu horizontal blog di Blogspot bisa dibuat sesuai dengan keinginan pemilik blog, seperti yang telah saya lakukan terhadap blog ini. Dan pada artikel ini saya membagi beberapa cara dalam membuat menu horizontal blog di Blogspot yang bisa anda pilih sesuai dengan keinginan anda
- Menu Horizontal Blog Otomatis
- Menu Horizontal Blog Sederhana
- Menu Horizontal Blog Dengan Search Engine
- Menu Horizontal Blog Drop Down
- Menu Horizontal Blog Drop Down Dengan Search Engine (coming soon...)
- Menu Horizontal Blog Warna Plus
- Menu Horizontal Blog Dengan Tab Warna Warni Berbeda
- Menu Horizontal Blog Dengan Iklan (coming soon...)
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Menu Horizontal Blog di Blogspot
Cara Membuat Menu Horizontal Blog Otomatis adalah cara yang digunakan untuk menampilkan menu-menu halaman blog secara otomatis. Tidak hanya itu, dalam artikel cara membuat menu morizontal blog otomatis ini, anda tidak hanya membuat menu horizontal tapi anda bisa membuat menu dalam bentuk vertikal dan posisi letaknya pun bisa sesuai dengan keinginan anda. Serta dalam artikel cara membuat menu horizontal blog otomatis ini, anda tidak perlu menggunakan kode-kode html atas membuat kode-kode css seperti yang biasa dilakukan dalam membuat menu horizontal
Berikut Cara Membuat Menu Horizontal Blog Otomatis
Untuk menampilkan menu dalam menu horizontal atau vertikal, anda harus membuat halaman blog terlebih dahulu seperti yang telah saya bahas dalam artikel cara membuat halaman blog.
Jika ada pertanyaan, silahkan tinggalkan komentar anda untuk artikel ini, Cara Membuat Menu Horizontal Blog Otomatis
Berikut Cara Membuat Menu Horizontal Blog Otomatis
- Masuk ke akun blogger anda
- Pilih menu Laman >> Jangan tampilkan ▼
- Pilih Tab atas jika anda ingin menampilkan menu dengan tampilan horizontal dibawah judul blog atau header
- Pilih Tautan samping jika anda ingin menampilkan menu dengan tampilan vertikal disamping blog atau sidebar
- Selesai
Untuk menampilkan menu dalam menu horizontal atau vertikal, anda harus membuat halaman blog terlebih dahulu seperti yang telah saya bahas dalam artikel cara membuat halaman blog.
Jika ada pertanyaan, silahkan tinggalkan komentar anda untuk artikel ini, Cara Membuat Menu Horizontal Blog Otomatis
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Menu Horizontal Otomatis
Cara Membuat Menu Horizontal Blog Sederhana - Saya yakin anda sudah tahu apa itu menu horizontal blog, jika belum silahkan di baca pada artikel sebelumnya, menu horizontal blog di Blogspot. Pada artikel ini, saya akan membahas bagaimana cara membuat menu horizontal blog sederhana dengan menggunakan kode-kode html atau css seperti contoh gambar berikut ini
Berikut Cara Membuat Menu Horizontal Blog Sederhana
Berikut Cara Membuat Menu Horizontal Blog Sederhana
- 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>
.navhorizontalpic{background:#434343 url() repeat-x top left;width:100%;height:40px;border-top:1px solid #000000;margin:0 auto;padding:0 auto}
.navhorizontal{width:960px;height:35px;margin:0 auto;padding:12px 0}
.navhorizontal ul{padding-left:0;color:#fff;text-transform:none;list-style-type:none;font:normal 12px Arial,sans-serif;margin:0}
.navhorizontal li{display:inline;margin:0}
.navhorizontal li a{background:url() no-repeat center right;float:left;display:block;text-decoration:none;color:#eee;line-height:1.5em;padding:1px 12px}
.navhorizontal li a:visited{color:#eee}
.navhorizontal li a:hover{color:#8a8050;text-decoration:none;-moz-transition:color .25s linear;-webkit-transition:color .25s linear;transition:color .25s linear} - Cari kode dengan struktur seperti berikut ini
<div id='header-outer'>
<div id='header-inter'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' (Header)' type='Header'>
<b:includable id='title'>
----------------------
----------------------
----------------------
</b:includable>
</b:widget>
</b:section>
</div>
</div>
</div>
Letakkan kode berikut tepat dibawah kode </b:section> diatas
<div class='navhorizontalpic'>
<div class='navhorizontal'>
<ul>
<li><a href='/'><img alt='Panduan Template Blog' border='0' src='link url gambar' title=''/></a></li>
<li><a href='#'>Forum</a></li>
<li><a href='#'>Color Code</a></li>
<li><a href='#'>Archieves</a></li>
<li><a href='#'>Contact us</a></li>
</ul>
</div>
<div style='clear:both;'/>
</div> - Selesai. Silahkan pratinjau perubahan blog anda, jika tidak ada error maka pada tampilan Preview, anda akan melihat tampilan menu horizontal blog sederhana seperti yang ada pada blog ini.
- Simpan Template
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Menu Horizontal Blog Sederhana
Cara Membuat Menu Horizontal Blog Search Engine - Setelah mengetahui beberapa contoh menu horizontal dan cara membuat menu horizontal sederhana, kini kita akan melengkapi menu horizontal yang telah kita buat dengan adanya search engine pada menu horizontal tersebut. Untuk blog saya ini, memang tidak saya terapkan menu horizontal search engine karena search engine sendiri sudah ada di halam utama blog ini. Untuk contohnya seperti tampilan gambar berikut ini
Berikut Cara Membuat Menu Horizontal Blog Search Engine
Berikut Cara Membuat Menu Horizontal Blog 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>
navse-element{width:900px; margin-top:15px; padding:0; float:center;}
#navse{ background:#FFFFFF url() no-repeat center top;height:32px; padding:10px 0 0; margin-bottom:0px; clear:both; margin:0 auto;}
#navse-left{float:left; display:inline; width:680px; padding-left:10px; padding-top:1px}
#navse-right{float:right; display:inline; width:170px; padding-top:3px; padding-right:23px}
#navse ul{position:relative; overflow:hidden; padding:0; margin:0; font-weight:bold; font-size:12px}
#navse li{cursor:pointer; float:left; margin:0 padding:0; height:30px; display:inline}
#navse ul li{float:left; list-style:none}
#navse ul li a, #navse ul li a:visited{background:#FFFFFF url() no-repeat right;border:0px solid #fff; margin:0 1px 0 0; float:left; padding:4px 12px; text-transform:normal; color:#000000; font-weight:bold; font-size:12px; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px}
#navse ul li a:hover{color:#000000;border:0px solid #FFFFFF;background:none;}
#navse ul li a.current, #navse ul li a.current:visited, #navse ul li a.current:hover{background:none; color:#000000; border:0px solid #FFFFFF }
src-m{border:1px solid #999; height:18px; width:180px; padding-top:0px; background:#f6f4f4; }
#src-m input{border:0; background:none; color:#777}
#s-m{font-size:12px; width:180px; padding-left:4px; margin:0; background:none}
#tsrc-m #src-m{margin-top:0px;background-color:#FFFFFF;border:1px solid #dedede; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px}
#tsrc-m #s-m{width:155px} - Cari kode dengan struktur seperti berikut ini
<div id='header-outer'>
<div id='header-inter'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' (Header)' type='Header'>
<b:includable id='title'>
----------------------
----------------------
----------------------
</b:includable>
</b:widget>
</b:section>
</div>
</div>
</div>
Letakkan kode berikut tepat dibawah kode </b:section> diatas
<div id='navse-element'>
<div class='widget-content'>
<div id='navse'>
<div id='navse-left'>
<ul>
<li><a class='current' href='/' title='home'>Home</a></li>
<li><a href='link'>Menu 1</a></li>
<li><a href='link'>Menu 2</a></li>
<li><a href='link'>Menu 3</a></li>
<li><a href='link'>Menu 4</a></li>
<li><a href='link'>Menu 5</a></li>
</ul>
<script language='javascript'>setPage()</script>
</div>
<div id='navse-right'>
<div id='tsrc-m'>
<div id='src-m'>
<form action='/search' id='searchform' method='get' name='searchform'>
<input class='keyword' id='s-m' name='q' onblur='if (this.value == "") {this.value = "Cari artikel..";}' onfocus='if (this.value == "Cari artikel..") {this.value = ""}' type='text' value='Cari artikel..'/>
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAs2y9FZsohfp4jYJFJVmnslAmPeYzvm2CaSjSwt3nsfR9Xd1Jy0hLhGoWHykL-U-XkF1KBCw7VG5Ohf8Mx0oHb4kV1Sj_4URfSp43im3D8LkYB7BLPTz3R-bhVzJGotbMyyyp3USHO7U/s200/search-c.png' style='border: 0pt none ; vertical-align: top; padding-top:3px' type='image'/>
</form>
</div>
</div>
</div>
</div>
</div>
</div> - Selesai. Silahkan pratinjau perubahan blog anda, jika tidak ada error maka pada tampilan Preview, anda akan melihat tampilan menu horizontal blog search engine.
- Simpan Template
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Menu Horizontal Blog Search Engine
Cara Membuat Menu Horizontal Blog Drop Down adalah cara berbeda dalam menampilkan menu-menu yang ada didalam blog yang akan menghemat ruang serta mengelompokkan setiap kategori dari sub menu halaman yang memiliki keterkaitan dengan menu utama dalam blog tersebut. Membuat menu horizontal drop down tidak sama dengan menu horizontal sebelumnya yang telah saya ulas sebelumnya. Pada menu horizontal ini akan memiliki sub menu yang komplek dan tidak autonom seperti menu horizontal sebelumnya karena ia memiliki sub menu yang berkaitan dengan menu utama seperti yang terlihat pada gambar berikut ini
Berikut Cara Membuat Menu Horizontal Blog Drop Down
Berikut Cara Membuat Menu Horizontal Blog Drop Down
- 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>
#navdropdownsearchengine { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; }
#navdropdownseleft { width: 400px; float: left; margin: 0; padding: 0; }
#navdropdownse { margin: 0; padding: 0; }
#navdropdownse ul { float: left; list-style: none; margin: 0; padding: 0; }
#navdropdownse li { list-style: none; margin: 0; padding: 0; }
#navdropdownse li a, #navdropdownse li a:link, #navdropdownse li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; }
#navdropdownse li a:hover, #navdropdownse li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; }
#navdropdownse li li a, #navdropdownse li li a:link, #navdropdownse li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; }
#navdropdownse li li a:hover, #navdropdownse li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; }
#navdropdownse li { float: left; padding: 0; }
#navdropdownse li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }
#navdropdownse li ul a { width: 140px; }
#navdropdownse li ul ul { margin: -32px 0 0 171px; }
#navdropdownse li:hover ul ul, #navdropdownse li:hover ul ul ul, #navdropdownse li.sfhover ul ul, #navdropdownse li.sfhover ul ul ul { left: -999em; }
#navdropdownse li:hover ul, #navdropdownse li li:hover ul, #navdropdownse li li li:hover ul, #navdropdownse li.sfhover ul, #navdropdownse li li.sfhover ul, #navdropdownse li li li.sfhover ul { left: auto; }
#navdropdownse li:hover, #navdropdownse li.sfhover { position: static; } - Cari kode dengan struktur seperti berikut ini
<div id='header-outer'>
<div id='header-inter'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' (Header)' type='Header'>
<b:includable id='title'>
----------------------
----------------------
----------------------
</b:includable>
</b:widget>
</b:section>
</div>
</div>
</div>
Letakkan kode berikut tepat dibawah kode </b:section> diatas
<div class='menuhorisontal'>
<ul id='navdropdownse'>
<li><a href='#'>Menu DropDown</a></li>
<li><a href='#'>Menu DropDown A</a>
<ul>
<li><a href='#'>Menu DropDown Sub A1</a></li>
<li><a href='#'>Menu DropDown Sub A2</a></li>
<li><a href='#'>Menu DropDown Sub A3</a></li></ul></li>
<li><a href='#'>Menu DropDown B</a> </li>
<li><a href='#'>Menu DropDown C</a> </li>
<li><a href='#'>Menu DropDown D</a>
<ul>
<li><a href='#'>Menu DropDown Sub D1</a></li>
<li><a href='#'>Menu DropDown Sub D2</a></li>
<li><a href='#'>Menu DropDown Sub D3</a></li></ul></li>
<li><a href='#'>Menu DropDown E</a> </li>
</ul>
</div> - Selesai. Silahkan pratinjau perubahan blog anda, jika tidak ada error maka pada tampilan Preview, anda akan melihat tampilan menu horizontal blog drop down
- Simpan Template
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Menu Horizontal Blog Drop Down
Cara Membuat Menu Horizontal Blog Tab Warna Plus - Setelah mengetahui macam menu horizontal yang telah saya bahas sebelumnya dengan tampilan yang sederhana ataupun lengkap dengan search engine maka pada artikel menu horizontal tab warna plus ini, saya kembali membahas tentang menu horizontal tapi pada kali dengan tampilan menu yang memiliki warna seperti contoh gambar dari menu horizontal tab warna plus berikut ini
Berikut Cara Membuat Menu Horizontal Blog Tab Warna Plus
Berikut Cara Membuat Menu Horizontal Blog Tab Warna Plus
- 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>
#tabwarnaplus {background: #fff;margin: 0 auto;padding: 0;width:920px;}
#navtabwarnaplus {background: #fff;height: 32px;margin: 0;padding:2px 0 1px 0;border-top: 1px solid #f0f0f0;border-bottom: 1px solid #f0f0f0;font-size: 11px;}
#navtabwarnaplus .current_page_item {background: #AB2D2D;}
#navtabwarnaplus .current_page_item a {color: #fff !important;}
#navtabwarnaplus ul {float: left;list-style: none;margin: 0 0 0 1px;padding: 0;}
#navtabwarnaplus li {float: left;list-style: none;margin: 0 5px 0 0;padding: 0;font-weight: bold;text-transform: uppercase;}
#navtabwarnaplus ul li {list-style: none;margin: 0 0 0 5px;padding: 0;}
#navtabwarnaplus li a, #navtabwarnaplus li a:link, #navtabwarnaplus li a:visited {font-weight: bold;color: #242423;display: block;margin: 0;padding: 8px 12px 7px 12px;}
#navtabwarnaplus li a:hover, #navtabwarnaplus li a:active {background: #AB2D2D;color: #fff;display: block;text-decoration: none;margin: 0;padding: 8px 12px 7px 12px;border-bottom: none;}
#navtabwarnaplus li li a, #navtabwarnaplus li li a:link, #navtabwarnaplus li li a:visited {background: #fff;width: 130px;color: #111;float: none;margin: 0;padding: 8px 12px 7px 12px;border-bottom: 1px solid #ddd;border-left: 1px solid #ddd;border-right: 1px solid #ddd;}
#navtabwarnaplus li li a:hover, #navtabwarnaplus li li a:active {background: #AB2D2D;color: #fff;padding: 8px 12px 7px 12px;}
#navtabwarnaplus li ul {z-index: 9999;width: 155px;margin: 0;padding: 0;position: absolute;left: -999em;height: auto;}
#navtabwarnaplus li li {border:none;}
#navtabwarnaplus li ul a {width: 120px;}
#navtabwarnaplus li ul a:hover, #navtabwarnaplus li ul a:active {}
#navtabwarnaplus li ul ul {margin: -29px 0 0 156px;border: none;}
#navtabwarnaplus li:hover ul ul, #navtabwarnaplus li:hover ul ul ul, #tnavtabwarnaplus li.sfhover ul ul, #tnavtabwarnaplus li.sfhover ul ul ul {left: -999em;}
#navtabwarnaplus li:hover ul, #navtabwarnaplus li li:hover ul, #navtabwarnaplus li li li:hover ul, #navtabwarnaplus li.sfhover ul, #navtabwarnaplus li li.sfhover ul, #navtabwarnaplus li li li.sfhover ul {
left: auto;}#navtabwarnaplus li:hover, #navtabwarnaplus li.sfhover {position: static;}
#navtabwarnaplus .left a {margin: 0;padding: 0 5px 0 5px;} - Cari kode dengan struktur seperti berikut ini
<div id='header-outer'>
<div id='header-inter'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' (Header)' type='Header'>
<b:includable id='title'>
----------------------
----------------------
----------------------
</b:includable>
</b:widget>
</b:section>
</div>
</div>
</div>
Letakkan kode berikut tepat dibawah kode </b:section> diatas
<div id='tabwarnaplus'>
<div id='navtabwarnaplus'>
<div class='left'>
<ul>
<li class='page_item current_page_item'><a href='#'>Beranda</a></li>
<li class='page_item'><a href='#'>Daftar Isi</a></li>
<li class='page_item'><a href='#'>Kontak Admin</a></li>
<li class='page_item'><a href='#'>Privasi</a></li>
<li class='page_item'><a href='#'>Blog</a></li>
</ul>
</div>
</div>
</div> - Selesai. Silahkan pratinjau perubahan blog anda, jika tidak ada error maka pada tampilan Preview, anda akan melihat tampilan menu horizontal blog tab warna plus
- Simpan Template
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Menu Horizontal Blog Tab Warna Plus
Cara Membuat Menu Horizontal Blog Tab Warna Berbeda pada artikel ini merupakan edisi khusus yang saya buat untuk anda karena menu horizontal tab warna berbeda yang dibuat akan menampilkan tab dengan warna berbeda ketika disorot oleh pointer-mouse. Menu horizontal tab warna berbeda sangat bagus dan cocok digunakan untuk blog yang memiliki kategori teknologi dan tentunya kode-kode yang digunakan dalam menu horizontal tab warna berbeda tidak memberatkan loading blog anda karena tidak ada gambar yang terpasang dalam kode menu horizontal tab warna berbeda tersebut.
Apakah anda tertarik untuk menggunakan menu horizontal tab warna berbeda seperti gambar diatas?
Berikut Cara Membuat Menu Horizontal Blog Tab Warna Berbeda
Apakah anda tertarik untuk menggunakan menu horizontal tab warna berbeda seperti gambar diatas?
Berikut Cara Membuat Menu Horizontal Blog Tab Warna Berbeda
- 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>
.menuwarnawarni{background:#E6E6FA;width:100%;margin:0 auto;}
#menuwarnawarni{background:#E6E6FA url() repeat-x; height:32px }
#menuwarnawarni1 {background:#483D8B url() repeat-x;border-top: 4px solid #8A2BE2;height:32px }
#menuwarnawarni2 {background: url() repeat-x;border-top: 4px solid #0000FF;height:32px }
#menuwarnawarni3 {background: url() repeat-x;border-top: 4px solid #DC143C;height:32px }
#menuwarnawarni4 {background: url() repeat-x;border-top: 4px solid #8B008B;height:32px }
#menuwarnawarni5 {background: url() repeat-x;border-top: 4px solid #FF8C00;height:32px }
#menuwarnawarniwrapper {width:100%; height:30px; margin:0 auto }
.clearit {clear:both; height:0; line-height:0.0; font-size:4px }
#menuwarnawarniline {color:#fff; height:32px; overflow:hidden; -moz-border-radius-topleft:0px; -moz-border-radius-topright:0px; margin:0 auto }
#menuwarnawarniline li a {border-right:1px float:left; display:block; font-weight:970; text-decoration:none; color:#000;background:#E6E6FA;margin:0; padding:8px 7px}
#menuwarnawarniline ul {padding-left:0px; font:bold 15px Arial; color:#F7F7F7; text-shadow:#999 2px 0px 1px ; text-transform:none; list-style-type:none; letter-spacing:.01em; margin:0 }
#menuwarnawarninav {width:100% }
#menuwarnawarninav,#menuwarnawarninav ul {list-style:none; font-size:bold 12px; margin:0; padding:0 }
#menuwarnawarninav a {border-right:0 solid #fff; border-left:0px solid #fff; float:left; display:block; font-weight:700; text-decoration:none; color:#fff; margin:0; padding:8px 7px }
#menuwarnawarninav li {float:left; position:static; width:auto }
#menuwarnawarninav li.blueviolet a:hover {background:#8A2BE2; color:#FFF; text-decoration:none }
#menuwarnawarninav li.blue a:hover {background:#0000FF; color:#FFF; text-decoration:none }
#menuwarnawarninav li.crimson a:hover {background:#DC143C; color:#FFF; text-decoration:none }
#menuwarnawarninav li.darkmagenta a:hover {background:#8B008B; color:#FFF; text-decoration:none }
#menuwarnawarninav li.darkorange a:hover {background:#FF8C00;color:#FFF;text-decoration:none;} - Cari kode dengan struktur seperti berikut ini
<div id='header-outer'>
<div id='header-inter'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' (Header)' type='Header'>
<b:includable id='title'>
----------------------
----------------------
----------------------
</b:includable>
</b:widget>
</b:section>
</div>
</div>
</div>
Letakkan kode berikut tepat dibawah kode </b:section> diatas
<div id='menuwarnawarniline'>
<div id='menuwarnawarniwrapper'>
<ul id='menuwarnawarninav'>
<li class='blueviolet'><div id='menuwarnawarni1'><a class='tooltip' href='#' title='Panduan'>Panduan</a></div></li>
<li class='blue'><div id='menuwarnawarni2'><a class='tooltip' href='#' title='Blog Pelanggan'>Blog Pelanggan</a></div></li>
<li class='crimson'><div id='menuwarnawarni3'><a class='tooltip' href='#' title='Desain'>Desain</a></div></li>
<li class='darkmagenta'><div id='menuwarnawarni4'><a class='tooltip' href='#' title='Template'>Template</a></div></li>
<li class='darkorange'><div id='menuwarnawarni5'><a class='tooltip' href='#' title='Testimoni'>Testimoni</a></div></li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div></div> - Selesai. Silahkan pratinjau perubahan blog anda, jika tidak ada error maka pada tampilan Preview, anda akan melihat tampilan menu horizontal tab warna berbeda
- Simpan Template
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Menu Horizontal Blog Tab Warna Berbeda
Panduan Cara Membuat Halaman Blog - Sampai pada artikel ini, saya yakin anda sudah bisa membuat blog anda sendiri di blogspot dan mengisi artikel dengan baik. Sama seperti ketika membuat artikel, membuat halaman blog juga tidak sulit. Jadi, jika anda terbiasa menulis artikel di Ms.Word, anda pasti bisa menulis artikel di blog. Jika anda bisa menulis artikel di blog, anda juga bisa membuat halaman blog dan mengisinya dengan artikel.
Halaman blog tidak hanya bisa di isi oleh tulisan saja, apapun bisa anda masukkan atau anda pasang di halaman blog tersebut. Seperti gambar, musik, bakan jika anda memiliki toko online, anda bisa memajangnya disana.
Berikut panduan cara membuat halaman blog
"Aduh, halaman blog yang saya buat, artikelnya kok tidak munculnya ya mbak Yuni? Gimana caranya?"
Jika halaman blog yang anda buat artikel atau isinya tidak muncul silahkan baca petunjuknya di cara mengatasi artikel halaman tidak muncul
Okey, terimakasih telah membaca artikel ini, semoga bermanfaat. Jika berkenan, silahkan tinggalkan komentar anda untuk artikel ini, Panduan Cara Membuat Halaman Blog
Halaman blog tidak hanya bisa di isi oleh tulisan saja, apapun bisa anda masukkan atau anda pasang di halaman blog tersebut. Seperti gambar, musik, bakan jika anda memiliki toko online, anda bisa memajangnya disana.
Berikut panduan cara membuat halaman blog
- Masuk ke akun bloger anda
- Pilih menu Laman yang ada disebelah kiri dashboard blogger
- Pilih Jangan tampilkan
Pada menu ini, ada 3 opsi yang harus anda lakukan yaitu;- Tab atas
Merupakan pengaturan standart dari blogger yang secara otomatis akan tampil setiap kali anda membuat halaman baru. Laman atau halaman blog akan berada di atas blog atau tepatnya dibagian bawah header atau judul blog anda dan tampilan yang umum digunakan. Contohnya adalah blog ini. - Tautan samping
Merupakan pengaturan standart dari blogger yang secara otomatis akan tampil setiap kali anda membuat halaman baru. Laman atau halaman blog akan berada di samping blog atau tepatnya dibagian sidebar blog. Jarang digunakan. - Jangan tampilkan
Laman atau halaman blog tidak akan ditampilkan alias tersembunyi dan untuk menampilkannya, anda hanya bisa menggunakan cara manual dengan membuat halaman blog sendiri. Dari ketiga opsi diatas, saya sendiri biasanya dan selalu memilih opsi yang ketiga, Jangan tampilkan.
- Tab atas
- Pilih Jangan tampilkan
- Pilih Laman Baru
Ada 2 opsi yang bisa anda pilih yaitu;- Laman Kosong : halaman baru yang akan anda buat dan mengisinya dengan artikel.
- Alamat Web : halaman baru yang langsung di isi tanpa membuat artikel dalam halaman tersebut. Dengan memilih opsi ini, anda cukup memasukkan judul halaman dan alamat web atau blog yang ingin anda tampilkan di daftar halaman blog anda. Karena kita akan membuat halaman baru, maka pilih Laman Kosong.
- Setelah memilih Laman Kosong, akan muncul halaman baru seperti tampilan gambar berikut ini
Sama seperti ketika anda membuat artikel blog, menulis atau mengisi halaman blog dengan artikel atau apapun adalah sama dengan membuat artikel. - Pilih menu Pilihan yang ada disebelah kanan
Ada 3 opsi yang perlu atau tidak perlu anda lakukan- Komentar pembaca
- Izinkan : menampilkan kolom komentar untuk halaman blog anda. Dengan memilih Izinkan, berarti, isi halaman blog anda bisa dikomentari oleh pengunjung blog anda.
- Jangan bolehkan : kebalikannya dari Izinkan, silahkan diartikan sendiri :)
- Mode tulis
- Tunjukkan HTML apa adanya
Contoh : <a href="http://panduantemplateblog.blogspot.com">Panduan Template Blog</a> akan ditampilkan tulisan Panduan Template Blog saja tanpa ada kode html nya didalam artikel. - Tafsirkan HTML yang diketik
Contoh : <a href="http://panduantemplateblog.blogspot.com">Panduan Template Blog</a> akan tetap ditamplkan seperti itu didalam artikel
- Tunjukkan HTML apa adanya
- Baris baru
Ada 2 opsi yang akan berlaku untuk artikel anda- Gunakan tag <br> : setiap anda membuat baris baru dalam artikel maka diakhir artikel tersebut harus anda tuliskan tag <br>. Kalau tidak, maka tulisan atau artikel anda tidak akan memiliki garis baru atau paragraf.
- Tekan "Enter" untuk baris baru : cukup tekan Enter di keyboard untuk baris baru dalam artikel blog anda. Hal ini sama dengan ketika anda mengetik artikel di Ms.Word
- Komentar pembaca
- Membuat halaman dan mengisinya dengan artikel atau gambar
- Tuliskan judul halaman di kolom Judul Laman.
- Mulai mengetik. Ketik artikel di kolom penulisan.
- Kalau sudah mengetik dan artikel anda sudah siap untuk dipublikasikan, Pratinjau terlebih dahulu.
- Kalau tampilan atau hasil penulisan sudah sesuai, klik Publikasikan.
"Aduh, halaman blog yang saya buat, artikelnya kok tidak munculnya ya mbak Yuni? Gimana caranya?"
Jika halaman blog yang anda buat artikel atau isinya tidak muncul silahkan baca petunjuknya di cara mengatasi artikel halaman tidak muncul
Okey, terimakasih telah membaca artikel ini, semoga bermanfaat. Jika berkenan, silahkan tinggalkan komentar anda untuk artikel ini, Panduan Cara Membuat Halaman Blog
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Panduan Cara Membuat Halaman Blog
Panduan Cara Mengatasi Halaman Statis Blog Tidak Muncul - Untuk membuat halaman blog anda bisa membaca artikel di cara membuat halaman blog namun bagaimana setelah halaman blog yang anda buat isinya tidak muncul? Sebelum melanjutkan panduan cara artikel mengatasi halaman statis blog tidak muncul, saya akan jelaskan sedikit kenapa artikel halaman statis blog tidak muncul? Faktor utama yang membuat halaman blog tidak muncul adalah karena adanya kode template yang hanya mengarahkan atau hanya menampilkan untuk artikel saja sehingga artikel yang ada di halaman blog tidak bisa muncul atau tampil
Oke, sekarang kita melanjutkan panduan cara mengatasi artikel halaman statis blog tidak muncul. Untuk memunculkan halaman blog yang bermasalah ini, silahkan ikuti beberapa panduannya berikut ini. Panduan berikut terdiri dari beberapa bahasan yang saya sesuaikan dengan permasalahan yang anda alami dengan halaman blog anda yang tidak muncul
Masalah 1 : Halaman Statis Blog & Isi Artikel Muncul Tapi Artikel Terpotong Oleh Read More
Pada masalah 2 ini masih berhubungan dengan penambahan kode yang ada di masalah 1. Maksudnya, jika halaman statis blog tidak muncul dan anda sudah menerapkan cara pada masalah 1 tapi artikel blog juga tidak muncul-muncul, berikut panduannya
Oke, sekarang kita melanjutkan panduan cara mengatasi artikel halaman statis blog tidak muncul. Untuk memunculkan halaman blog yang bermasalah ini, silahkan ikuti beberapa panduannya berikut ini. Panduan berikut terdiri dari beberapa bahasan yang saya sesuaikan dengan permasalahan yang anda alami dengan halaman blog anda yang tidak muncul
Masalah 1 : Halaman Statis Blog & Isi Artikel Muncul Tapi Artikel Terpotong Oleh Read More
- Buka akun blogger anda.
- Pilih Template >> Edit HTML >> Lanjutkan >> centang Expand Template Widget >> tekan Ctrl + F pada keyboard
- Cari kode berikut melalui form pencarian yang ada dibagian kiri bawah atau kanan atas (tergantung browser)
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url' rel='nofollow'>Read More</a></span>
</b:if>
Untuk memudahkan pencarian silahkan baca di panduan cara mengedit dan mencari kode template - Kalau kode sudah ditemukan, tambahkan kode berikut
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<-- kode no. 3 -->
</b:if>
Sehingga hasilnya seperti berikut
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url' rel='nofollow'>Read More</a></span>
</b:if>
</b:if> - Jika sudah, klik Pratinjau terlebih dahulu untuk mengetahui apakah kode yang anda tambahkan error atau tidak. Jika tidak ada error, silahkan klik Simpan Template.
- Lihat hasilnya.
Pada masalah 2 ini masih berhubungan dengan penambahan kode yang ada di masalah 1. Maksudnya, jika halaman statis blog tidak muncul dan anda sudah menerapkan cara pada masalah 1 tapi artikel blog juga tidak muncul-muncul, berikut panduannya
- Cari kode <b:if cond='data:blog.homepageUrl != data:blog.url'> . Kode ini ada 2, maka pilihlah kode yang kedua (lihat gambar)
- Hapus semua kode berikut ini
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style='padding:5px;border-right:1px solid #ebebeb; border-bottom:1px solid #ebebeb;margin-bottom:5px;background:#f2f2f2;'>
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if> - Ganti kode yang dihapus dengan kode <b:include data='post' name='post'/>
- Jika sudah, klik Pratinjau terlebih dahulu untuk mengetahui apakah kode yang anda tambahkan error atau tidak. Jika tidak ada error, silahkan klik Simpan Template.
- Lihat hasilnya.
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Panduan Cara Mengatasi Artikel Halaman Statis Blog Tidak Muncul
