Beberapa waktu yang
lalu, ada seorang blogger yang bertanya lewat pesan di fb-ku tentang bagaimana
cara memasukkan posting artikel ke dalam
menu blog. Sebenarnya hal ini sangatlah mudah, oleh
karena itu jarang blogger yang membahasnya, tapi walaupun begitu demi sebuah persahabatan
saya akan mengulasnya di sini, toh saya juga tidak akan rugi, hehehe.. Karena
ada kata bijak yang mengatakan, kalau kita mau mengamalkan ilmu kita maka itu
akan menjadikan ilmu kita semakin bertambah, bukan berkurang. Weh weh weh,
malah ceramah, sorry deh... wkwkwk.. Oke langsung saja saya
mulai tutorial kali ini tentang bagaimana memasukkan
posting artikel ke menu blog kita. Selamat membaca...
Sebelum kita
mengetahui bagaimana caranya memasukkan
posting artikel ke menu blog, maka alangkah
baiknya kita buat dulu menu di blog kita. Kebanyakan blog menggunakan menu
horisontal, maka kali ini saya juga akan menjelaskan bagaimana caranya membuat menu navigasi horisontal dengan mudah.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - -
Apa itu Navigasi? Navigasi adalah menu untuk
penentu arah atau penunjuk posisi. Setiap blogatau situs menurut saya harus
bahkan wajib memiliki menu navigasi sebagai penuntun untuk pengunjung blog
kita.
Lalu bagaimana membuat
menu tersebut? Berikut tutorial mudahnya
Cara
Membuat Navigasi Horizontal Drop Down :
1. Masuk blogger
>> Klik Template >> Edit HTML.
2. Cari kode ]]>
kemudian pastekan kode di bawah ini tepat di atas kode ]]>
#NavbarMenu{background:#000000; width:960px;
height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial,
Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;}
#NavbarMenuleft{width:700px; float:left;
margin:0; padding:0;}
#search{width:240px; font-size:11px;
float:right; margin:0; padding:0;}
#nav{margin:0; padding:0;}
#nav ul{float:left; list-style:none; margin:0;
padding:0;}
#nav li{list-style:none; margin:0; padding:0;
text-shadow:1px 1px 1px #000;}
#nav li a, #nav li a:link, #nav li
a:visited{color:#fff; display:block; text-transform:uppercase; margin:0;
padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}
#nav li a:hover, #nav li
a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px;
text-decoration:none;}
#nav li li a, #nav li li a:link, #nav li li
a:visited{background:#000000; width:150px; color:#e5e3e3;
text-transform:capitalize; float:none; margin:0; padding:3px 10px;
border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px
solid #151f23; font:normal 14px Georgia, Times New Roman;}
#nav li li a:hover, #nav li li
a:active{background:#4a4d4c; color:#fff; padding:3px 10px;}
#nav li{float:left; padding:0;}
#nav li ul{z-index:9999; position:absolute;
left:-999em; height:auto; width:170px; margin:0; padding:0;}
#nav li ul a{width:140px;}
#nav li ul ul{margin:-24px 0 0 170px;}
#nav li:hover ul ul, #nav li:hover ul ul ul,
#nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li
li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li
li.sfhover ul{left:auto;}
#nav li:hover, #nav li.sfhover{position:static;}
#searchbox{padding:0; margin:0;}
#search input{background:#fff; color:#000;
float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid
#cdcdcd; font:normal 11px arial, verdana, Times New Roman;}
#search .btn{background:#333; color:#fff;
font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer;
border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid
#111; border-bottom:2px solid #111;}
#top{background:#f6f6f6; margin:10px auto 0;
padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word;
overflow: hidden; font-size:13px;}
#top a, #top a:visited{font-weight: normal;
color: #00338F; text-decoration: none;}
#top a:hover{color:#cc0000; text-decoration:
underline;}
#top p {font-size: 14px; font-weight: bold;
padding: 0; margin: 0;}
.topleft {width: 304px; float: left; margin: 0;
padding:0;}
.topleft img a, .topleft img {border:1px solid
#ccc; margin: 0; padding: 1px;}
.topright {width: 600px; float: right;
margin:0; padding:0; text-transform: normal;}
3. Setelah Itu Cari Kode
Contoh
:
title='RezDown7 (Header)'
type='Header'/>
4. Copy-Paste Kode HTML yang
tersedia dibawah ini tepat di bawah kode
jika ingin menempatkan Di Bawah Header. Jika ingin menempatkan di atas
header paste kode di bawah ini tepat Di Atas kode
Berikut ini kodenya:
Kemudian
Save Template!!
Jadi
dech..
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - -
Ket :
kode syntac html di atas adalah kode -kode yang saya gunakan untuk membuat
salah satu menu dalam blog saya yang SATU ini.
Nah, bagaimana sobat? Sampai di sini sudah faham?
Oke lanjut...
Nah,
dari kode-kode syntac menu di atas, maka terlihat kalau saya menggunakan link
arahan dalam memasukkan artikel ke dalam menu blog yang akan saya perjelas lagi
berikut ini:
Ket :
Kode
yang bergaris bawah adalah link arahan.
Kode
yang berwarna biru adalah menu utama.
dan
kode yang berwarna ungu adalah submenu.
Nah,
dari kode-kode tersebut terlihat bahwa saya mengarahkan menu utama maupun
submenu ke link postingan artikel yang saya kehendaki.
Sebagai contoh:
1. Saya mengarahkan menu Home ke link
http://www.amronbadriza.com/
2. Saya mengarahkan Submenu Motivasi ke
link http://www.amronbadriza.com/2011/06/artikel-artikel-motivasi.html
3. Saya
mengarahkan menu Peluang Bisnis ke link http://www.amronbadriza.com/2011/12/peluang-bisnis.html
dsb..
Selain
ke postingan artikel, kita juga bisa mengarahkan menu atau submenu ke link-link
lain, misalnya: diarahkan ke label, ke facebook, twitter atau yang lain. Saya kira cukup penjelasannya mengenai Cara
Memasukkan Posting Artikel ke dalam Menu Blog, kurang lebihnya saya mohon ma'af.
Happy Blogging! ^_^
