Cara membuat menu dropdown dibawah dan diatas header

Dalam membuat sebuah blog maka secara default kita sudah memiliki menu dengan bentuk horizontal yang letaknya diatas Header yang disebut navbar (Navigasi Bar). Pada navbar default tersebut kita sudah disediakan navbar tinggal memilh saja, namun bagi sebagian para blogger menu tersebut dihilangkan dan di atur ulang sesuai selera sehingga tampilan blog terlihat menarik.

Untuk mengaturnya kembali atau membuat menu sendiri diperlukan beberapa kode CSS dan langkah-langkah dibawah ini :

1. Sign in di blogger

2. Klik Opsi lainnya

3. Klik Templete

4. klik Edit HTML

5. Centang tulisan Expand Widget Templates

6. Cari kode ]]></b:skin>  (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)

7. Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: #ff0000 repeat-x;width:980px;margin:0 auto;padding:0 auto} #menuwrapper{width:980px;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:#000000;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdiaOEobyYKCXZ61crzIHd54a8k-HqNoU5S_LpvyNVnBnekrBnSVid1QYen9ka07y1dj0XAu1jhdLexAXJXdw5dcIIu55EfY8XAIY5dYFi5n3_ig5uLg4jIJ1OQKqrmmW2Itx1GyZSzAo/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}
/* Menu Horizontal Dropdown ----------------------------------------------- */

 

8. Kemudian cari kode

1. <header> : untuk menu di atas header blog

2. </header>: untuk menu di bawah header blog

9. Copy dan pastekan kode dibawah ini dan letakkan diatas kode <header> dan atau </header> untuk menu dibawah header

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='nama-alamat-blog.html' target='new'>Home </a></li>
<li><a href='nama-alamat-blog.html' target='new'>Menu 1</a></li>
<li><a href='nama-alamat-blog.html' target='new'>Menu 2</a></li>
<li><a class='trigger'>Menu 3</a>
<ul>
<li class='hr'/>
<li><a href='nama-alamat-blog.html' target='new'>Sub Menu 3</a></li>
<li class='hr'/>
<li><a href='nama-alamat-blog.html'  target='new'>Sub Menu 3</a></li>
<li class='hr'/>
<li><a href='nama-alamat-blog.html'  target='new'>Sub Menu 3</a></li>
</ul>
</li>
<li><a class='trigger'>Menu 4</a>
<ul>
<li class='hr'/>
<li><a href='nama-alamat-blog.html'  target='new'>Sub Menu 4</a></li>
<li class='hr'/>
<li><a href='nama-alamat-blog.html'  target='new'>Sub Menu 4</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://ketutjoel.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://ketutjoel.blogspot.com'/>
<input id="search-box" name="q" size="25" type="text" style="background: #EEEDED; border: 1px solid #000000 "/>
<input id="search-btn" value="Search" type="submit"/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

Keterangan

1. Kode berwarna merah adalah Warna background, lebar Menu utama , lebar menu dan lebar Menu Search (sesuaikan dengan lebar blognya kawan)

2. Kode berwarna merah adalah Url tujuan, ganti dengan Url pada blognya kawan

3. Kode berwarna kuning adalah judul menu bar ganti dengan judul nya kawan

4. Kode berwarna biru adalah sub judul dropdown ganti dengan judul nya kawan

5. Kode berwarna hijau adalah alamat pencarian ganti dengan alamat blognya kawan

Demikianlah postingan kali ini tentang cara membuat menu dropdown diatas header atau dibawah header, semoga bermanfaat.

Sumber Artikel : http://ketutjoel.blogspot.com

Readmore → Cara membuat menu dropdown dibawah dan diatas header

Cara Buat Background Judul Widget/Gatget blog

Cara Buat Background Judul Widget/Gatget blog Ada berbagai cara untuk Membuat Background Judul Widget/Gatget blog, untuk yang suka mempercantik atau yang mau menambah gambar animasi hidup pada background judul gadget/widget dibawah ini Contoh Gambar Judul Widget/Gatget.

Langkah-langkahnya sbb;-

1. Login/Masuk pada blog
2. Pilih Rancangan kemudian Edit/HTML
3. Cari kode ]]></b:skin> Copy kode dibawah ini dan Paste diatas kode ]]></b:skin>

.sidebar h2 {
     background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrXVD4iNC_v2jRJxTdw_sXXOwTPHdJb5n-1-hMC06ZabV4DMuMzME8mG1HkorIxP00osE9yVKqsQLep2741JAS86FP1EWN6OJTPniMQmaWlsEvsndwxqZs5NUERFrZPWXc2rPs8q02Wnc/s144/buton.jpg)repeat-x;
     color: #071019;
     font-size: 12px;
     font-family: Arial;
     font-weight: strong;
     margin: 0px 0px 5px 0px;
     padding: 3px 0px 3px 0px;
     text-align:center;
     }

color: #071019; (warna teks judul sidebar)
font-size: 12px;  (ukuran besarnya huruf judul sidebar)
font-family:Arial; (tipe font huruf judul sidebar)

4. Ganti Text yang berwarna merah dengan alamat Link Background anda kemudia Save Template Terakhir lihat blog anda.

Jika sahabat tidak punya gambar nya nih saya kasih 2 gambarnya:

sidebar widget gambar 1 : http://i560.photobucket.com/albums/ss44/erge32/RGsdbar.gif 

sidebar widget gambar 2 :http://i560.photobucket.com/albums/ss44/erge32/EkaSidebar.gif

Semoga Artikel ini dapat Bermanfaat.

Readmore → Cara Buat Background Judul Widget/Gatget blog

Cara Membuat Tombol Next Page Dengan Angka di Blog

Tombol next page ini sama fungsinya dengan tombol next page, previous, dan home yang terdapat pada bagian bawah postingan, namun yang satu ini kita merubah itu semua dengan angka, tujuan nya agar para pengunjung lebih mudah menjelajahi isi dari blog sobat. Tombol next page yang satu ini berbeda dengan tutorial blogger lainnya, karena mungkin tutorial ini belum pernah ada yang share dan CSS nya saya ambil dari template Fastest Magz, dan kode JavaScript nya saya ambil dari beberapa sumber. Dan saya upload ulang alamat javascript nya untuk mencegah apabila, hosting di google code dihapus, ada baiknya sobat upload ulang untuk mencegah terjadinya error.

Cara Membuat Tombol Next Page Dengan Angka di Blog:
 1. Login ke blogger.com
 2. Pada dashboar -> template -> klik edit HTML
 3. Kemudian tambahkan kode dibawah ini diatas ]]></b:skin>


/* Tombol Next Page Dengan Angka by Blog Krizeer
----------------------------------------------- */
.showpageArea{float:left;color:#555;font-size:11px;margin:10px 0}
.showpageArea a{color:#555;text-shadow:0 1px 2px #fff}
.showpageNum a:hover,.showpage:hover{border:1px solid #b2b2b2;color:#555!important}
.showpage{margin:0}
.showpage:hover a{color:#555!important}
.showpagePoint{background:#f8f8f8;border:1px solid #b2b2b2;margin:0 2px 0 0;padding:5px 12px}
.showpageNum a,.showpageOf,.showpage{border:1px solid #e8e8e8;background:#f8f8f8;margin:0 2px 0 0;padding:5px 12px}

4. Kemudian cari kode </body>, dan tambahkan kode dibawah ini tepat diatasnya:


<script type='text/javascript'>
var pageCount=4;
var displayPageNum=4;
var upPageWord='Prev';
var downPageWord='Next';
</script>
<!-- Tombol Next Page by BlogKrizeer.blogspot.com -->
<script type="text/javascript" src="https://googledrive.com/host/0By9Vs49VphQqeWVMYzNqbWlNaU0"></script>

5. Simpan template

Catatan: silahkan sobat ganti angka "4", dan kata "Prev" dan "Next" yang saya kasih tanda kuning sesuai keinginan sobat. Angka 4 pertama itu akan menunjukanjumlah post yang ingin ditampilkan ketika mengklik salah-satu nomor pada tombol next page tersebut, dan angka 4 kedua akan menampilkan jumlah nomor yang ingin sobat tampilkan pada homepage blog sobat.

Sumber Artikel : http://blogkrizeer.blogspot.com

Readmore → Cara Membuat Tombol Next Page Dengan Angka di Blog

Cara Membuat Readmore Otomatis Ringan di Blog

Sebenarnya banyak cara pemasangan readmore otomatis pada blog, ada yang hanya menggunakan kata-kata, gambar, dll. Tetapi kali ini akan share tentang Cara Membuat Readmore Otomatis yang hanya menggunakan kata-kata agar tidak mengurangi loading blog kita.

Read more dalam bahasa indonesia yaitu " Baca Selengkapnya " dan fungsi read more itu sendiri adalah meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik. Read more otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan

Langkah-langkah Membuat Read More sbb;-

1.  Login blogger
2.  Pilih template -> klik edit html
3. Cari kode </head> (gunakan CTRL+F atau F3 untuk mempermudah pencarian)
4. Letakkan kode dibawah ini diatas kode </head>, Angka yang bewarna merah merupakan ukuran gambar postingan, bisa anda ubah sesuai keinginan

<script type='text/javascript'>
 var thumbnail_mode = &quot;float&quot; ;
 summary_noimg = 150;
 summary_img = 150;
 img_thumb_height = 80;
 img_thumb_width = 120;
 </script>
 <script type='text/javascript'>
 //<![CDATA[
 function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
 //]]>
 </script>

Keterangan kode berwarna merah:

• summary_noimg =  banyaknya huruf jika tidak ada gambar
• summary_img = banyaknya huruf jika ada gambar
• img_thumb_height = Ukuran tinggi gambar
• img_thumb_width = Ukuran lebar gambar


1.  Selanjutnya cari kode <data:post.body/> dan Ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:left'> <a expr:href='data:post.url'><b>Readmore</b> &#8594; <data:post.title/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

6. Tulisan Readmore bisa anda ganti sesuai dengan keinginan anda.
7. Simpan template dan Lihat hasilnya.

Disini banyak blogger yang bingung, karena ada banyak sekali kode <data:post.body/>, Jadi anda pilih kede yang kedua (yang diganti adalah yang kode Kedua)

Cara Membuat Readmore Otomatis di Blog semoga bermanfaat.

Sumber Artikel : http://www.seocips.com

Readmore → Cara Membuat Readmore Otomatis Ringan di Blog