Cara Membuat Menu Navigasi Horizontal Pada Blog

Menu navigasi horizontal biasa digunakan pada situs web atau blog. Dilihat dari peranannya menu horizontal sangat berguna bagi pemilik blog maupun pengunjung guna menavigasi ke halaman yang diinginkan.

Memasang menu navigasi ini biasa diletakkan di bawah maupun di atas header. Anda bisa memasukkan link secara horizontal atau berderet kesamping. Biasanya link yang diletakkan pada menu horizontal ini adalah menu yang dianggap penting, karena pengunjung blog ketika pertama kali membuka halaman secara tidak langsung akan melihat menu ini.

Menu ini sangat mudah diaplikasikan pada template blog, karena cara membuat menu navigasi horizontal ini menggunakan css biasa yang tidak akan membebani loading blog Anda. Menu horizontal yang akan kita buat adalah menu navigasi seperti yang ada pada blog ini, atau Anda bisa lihat contoh gambarnya di bawah ini:

Langsung saja saya akan ajarkan langkah-langkahnya :

1. Login ke blog Anda

2. Pilih Template > Click Edit Template.

3. Cari kode ]]></b:skin>

4. Copy-paste code CSS berikut ini tepat diatasnya :

#menunavigasi {float:left; background:#252525; width:auto; margin:0 auto; padding:0 auto;-moz-border-radius: 10px; border-radius:4px}
#menubar {width:100%}
#menubar,#menubar ul {list-style:none; margin:0; padding-left:10px}
#menubar a {display:block; text-decoration:none; font-size:12px; font-weight:Bold; color:#eee; border-right:1px solid #666; padding:8px 12px}
#menubar li {float:left; width:auto}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a {color:#fff}

Keterangan :
#252525 : Warna background menu navigasi
#eee : Warna font atau tulisan menu navigasi
#666 : Warna border samping kanan tulisan
#fff : Warna font atau tulisan saat di sorot kursor

Kode warna diatas bisa sobat ganti sesuai keinginan sobat.

5. Kemudian cari kode <div id='content-wrapper'>

6. Copy-paste code berikut ini tepat dibawahnya :

<div id='menunavigasi'>
<ul id='menubar'>
<li><a href='http://brainword21.blogspot.com'>Home</a></li>
<li><a href='#'>CorelDRAW</a></li>
<li><a href='#'>Harvest Moon</a></li>
<li><a href='#'>Tutorial Blogger</a></li>
<li><a href='#'>Tips Dan Trick</a></li>
</ul>
<div style='clear:both;'/>
</div>
<div class='clear'/>

Keterangan:

- Ganti tulisan warna merah dengan alamat link milik Anda yang ingin dimasukkan dalam menu.

- Ganti tulisan warna biru dengan nama alamat link yang anda inginkan.

7. Pratinjau, jika tidak ada kesalahan silahkan simpan template Anda.

Sekian tutorial cara membuat menu navigasi pada blog. Semoga bermanfaat. Jangan lupa tinggalkan komentarmu dan join this site ya :)  Salam brainword21 

Cara Mempercantik Tampilan Entri Populer Di Blog

Halo...? Apa kabar sobat brain :) Kali ini saya akan memberikan tutorial bagaimana cara membuat tampilan desain Entri Populer pada blog agar terlihat lebih keren seperti gambar diatas. Langsung saja kita menuju ke langkah-langkahnya :

1. Login ke blog sobat
2. Klik Tata letak >> Tambah Gadget >> Entri Populer >> tampilkan entri populer hanya judulnya saja. Jangan menggunakan tubnail dan cuplikan. Atur jumlah judul posting yang akan dimunculkan.
3. Klik simpan
4. Selanjutnya klik Template
5. Klik Edit Html >>klik lanjutkan
6. Cari kode  "]]></b:skin>" Jika sudah ketemu kopi paste kode css berikut ini tepat diatas kode ]]></b:skin>

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

7.  Setelah itu sobat Pratinjau template dahulu, setelah berhasil baru di SAVE..

Nah sekian tutorial dari kami. Semoga bermanfaat bagi sobat yang belajar nge blog. . Sampai jumpa dengan tutorial lainnya ya. Jangan bosan-bosan untuk mampir lagi :)

Cara Membuat Efek Auto Zoom Image View Pada Blog

Membuat Efek Auto Zoom Image View - Efek auto zoom image view, maksudnya adalah jika kita mengarahkan cursor (pointer cursor) ke arah gambar maka secara otomatis gambar tersebut akan mengalami zoom (perbesaran ukuran). Hal ini dapat memberikan keunikan dan membuat daya tarik blog anda menjadi lebih bagus. Namun tetap ingat! Pastikan blog anda tidak memasang terlalu banyak widget atau pernak-pernik yang berbobot sedang atau bahkan berat. Karena jika hal itu tidak anda pedulikan dan anda tetap memasangnya secara berlebihan, maka bukan hasil yang bagus yang akan anda dapatkan. Justru hasilnya akan buruk dan berdampak negatif pada kualitas blog anda khususnya pada waktu loading.

Berikut tutorial  Cara Membuat Efek Auto Zoom Image View di Blog :


1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian cari kode ]]></b:skin> (gunakan Ctrl+F untuk mencarinya) dan letakkan script CSS berikut ini tepat di atasnya!

?

1 2 3 4 5 6 7 8 9 10

.post img:hover { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -moz-transform: scale(1.3); -webkit-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); }

5. Lalu klik save/simpan template, selesai...

Sekian tutorial Cara Membuat Efek Auto Zoom pada gambar di Blog saat di sentuh mouse. Semoga bermanfaat. Sampai jumpa pada tutorial-tutorial lainnya. Salam brainword21.. Jangan lupa tulis komentarmu ya, agar kami bisa lebih baik lagi dalam mengeposkan di blog ini..

Cara Membuat Energy Saving Di Blog

Memasang Energy Saving Mode di Blog - Untuk membuat kesan yang lebih menarik pada blog kita, maka energy saving mode ini bisa anda terapkan pada blog anda. Energy saving mode ini akan memberikan efek seolah-olah blog kita terkesan memiliki penghemat daya ketika pointer mouse tidak di gerakkan dalam jangka waktu beberapa detik. Sebenarnya energy saving mode ini lebih mirip atau menyerupai dengan screensaver yang ada pada hp atau komputer, kurang lebih cara kerjanya seperti itu.

Langsung saja saya akan memberitahu cara untuk memasang energy saving :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian cari kode </head> dan letakkan script kode berikut ini tepat di atasnya.

Energy saving mode dalam bahasa Inggris : 

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js?time=30'
type='text/javascript'/>
<script>jQuery.noConflict();</script>

Energy saving mode dalam bahasa Indonesia :

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js?lang=id'
type='text/javascript'/>
<script>jQuery.noConflict();</script>

5. Cukup pilih salah satu dari kedua script kode di atas, setelah itu klik save/simpan template. Selesai dan lihat hasilnya...

Sekian tutorial Cara Membuat Energy Saving di Blog dari saya. Semoga bermanfaat. Jangan lupa tulis komentarmu ya... Salam brainword21