Melayang

Membuat tab menu dropdown di blog merupakan lanjutan untuk melengkapi tutorial panduan dan cara membuat blog pada blog Super-Bee ini. Namun berbeda dengan tab menu dropdown yang sering kita lihat dari kebanyakan blogger yang menggunakan tab menu dropdown yang nantinya akan saya jelaskan. Saya menamakan tab menu dropdown ini adalah tab menu mega dropdown, karena dengan style yang berbeda serta keunikan dan memiliki multi tab menu yang dapat kita gunakan dan manfaatkan.

Sebelum kita memasuki cara membuat menu dropdown, perlu saya sampaikan bahwa ketika kita sudah membuat tab menu mega dropdown ini, ada sedikit perbedaan pada halam dasbor blog yang kita miliki. Akan tetapi perubahan ini tidak berpengaruh pada konten serta postingan artikel didalam blog Anda. Hal ini dikarenakan setiap masing-masing template memiliki struktur dan bagian template blog yang berbeda. Saya sudah menguji coba tab menu mega dropdown ini pada beberapa template blog yang memiliki struktur berbeda, dan hasilnya befungsi 100 persen. Bentuk menu mega dropdown ini dapat Anda lihat seperti screnshot dibawah ini

Lihat Demo

Saya yakin sekali setelah Anda melihat demo tab menu dropdown ini, Anda tertarik untuk mengaplikasikannya kedalam blog yang anda miliki. Jika demikian saya akan memandu anda untuk membuat tab menu dropdown ini, seperti tutorial yang dapat anda baca dibawah ini.

1. Login ke account blogger Anda

2. Untuk dasbor blogger baru
Klik template > Edit HTML > Klik Lanjutkan > Beri ceklis/centang pada kotak kecil Expan template widget

Untuk dasbor blogger lama
Klik rancangan > Edit HTML > Beri ceklis/centang pada kotak kecil Expand template widget

Sebelum kita muali untuk menambah kode tab menu dropdown ini saya sangat menganjurkan kepada Anda untuk mendownload lengkap template Anda dulu. Hal ini dilakukan untuk membeckup template lama dan berjaga-jaga jika nanti terjadi kesalahan. Untuk dasbor blogger baru tombol untuk mendownload template ada pada opsi Cadangkan/Pulihkan yang berada pada kiri atas dasbor blog Anda. Jika sudah saya Akan melanjutkan tutorial berikutnya.

3. Cari kode ]]></b:skin> (gunakan ctrl + f atau F3 untuk mempermudah pencarian)

4. Jika sudah dapat masukkan kode berikut ini tepat diatas ]]></b:skin>

/* Menu Live
----------------------------------------------- */
#Live ul, li{
padding: 0px;
margin: 0px;
}
#Live ul.dropmenu{
position: relative;
margin: 0px;
padding: 1px 0px 0px 0px;
background:transparent url(http://s3.envato.com/files/1075971/images/navigation.png) repeat-x scroll 0 0;
display:block;
height: 35px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
}
#Live .dropmenu li{
position: relative;
list-style: none;
float: left;
margin: 0px;
padding: 0px;
}
#Live .dropmenu li a{
height: 22px;
padding: 9px 30px 0px 15px;
display: block;
cursor: point;
border-right: solid 1px #4a779d;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
}
#Live .dropmenu li span{
display: block;
float: right;
height: 10px;
width: 10px;
background:transparent url(http://s3.envato.com/files/1075971/images/arrow_up.png) repeat-x scroll 0 0;
position: absolute;
top: 12px;
right: 10px;
}

#Live .dropmenu li a:hover span{
background:transparent url(http://s3.envato.com/files/1075971/images/arrow_hover.png) repeat-x scroll 0 0;
}
#Live .dropmenu li:hover ul, .dropmenu li:hover div{
display: block;
}
#Live .dropmenu ul{
position: absolute;
display: none;
width: 140px;
padding: 0px;
margin: 0px;
border-bottom: 1px solid #ccc;
background: #FFFFFF url(http://s3.envato.com/files/1075971/images/gradient.png) repeat-x scroll 0 0;
}
#Live .dropmenu ul li{
border: 0;
float: none;
}
#Live .dropmenu ul a {
border: 1px solid #ccc;
border-bottom: 0;
white-space: nowrap;
display:block;
color: #0657AD;
text-transform: none;
}

.dropmenu a.selected, .dropmenu a:hover{
color: #0657AD !important;
background: #FFFFFF url(http://s3.envato.com/files/1075971/images/gradient.png) repeat-x scroll 0 0;
}
#Live a.selected span{
background:transparent url(http://s3.envato.com/files/1075971/images/arrow_hover.png) repeat-x scroll 0 0;
}
#Live .dropmenu ul a:hover {
color:#F67A00 !important;
text-decoration: none;
background-color: #F0F0F0;
background-image: none;
}
#Live .dropmenu div ul{
position: relative;
display: block;
}
#Live .dropmenu li div{
background: #FFFFFF url(http://s3.envato.com/files/1075971/images/gradient.png) repeat-x scroll 0 0;
border: 1px solid #ccc;
padding: 5px;
display: none;
position: absolute;
}
#Live .dropmenu li div ul{
border: none;
background: none;
position: relative !important;
}
#Live .dropmenu li div a{
border: none;
border-bottom: 1px solid #ccc;
}

#Live .dropmenu li div div{
display: block;
position: relative;
background: none;
border: none;
}

#Live .dropmenu li div div a{
display: inline;
border: none;
color: #0657AD;
padding: 0px;
margin: 0px;
text-transform: none; /*
text-decoration: underline; */
}
#Live .dropmenu li div div a:hover{
color: #F67A00;
text-decoration: none;
border-bottom: 1px dashed #000;
}

#Live ul.left{
float: left;
width: 145px;
}
#Live ul.right{
float: right;
width: 145px;
}
#Live .small{
color: #666;
font-size: 11px;
padding: 10px 5px 8px 5px !important;
display: block;
clear: both;
}
#Live .products{
width: 300px;
padding: 15px !important;
}
#Live .products ul{
width: 100%;
}
#Live .products ul li{
border-bottom: 1px solid #ccc;
height: 40px;
padding: 10px 0px;
}
#Live .products h2{
font-size: 16px;
padding: 2px 0px 3px 0px;
margin: 0px;
}
#Live .products p{
color: #666;
font-size: 10px;
padding: 0px;
margin: 0px;
}
#Live .products img{
float: left;
padding-right: 10px;
}
#Live .products ul li a{
display: inline;
border: none;
color: #666;
padding: 0px;
margin: 0px;
text-transform: none; /*
text-decoration: underline; */
}
#Live .products ul li a:hover{
color: #000 !important;
text-decoration: none;
background: none !important;
border-bottom: 1px dashed #000;
}

#Live .tutorials{
width: 300px;
}

#Live .profile{
width: 300px;
padding: 15px !important;
}

#Live .profile ul{
width: 100%;
}
#Live .profile ul li{
border-bottom: 1px solid #ccc;
height: 40px;
padding: 10px 0px;
}
#Live .profile h2{
font-size: 16px;
padding: 2px 0px 3px 0px;
margin: 0px;
}
#Live .profile p{
color: #666;
font-size: 10px;
padding: 0px;
margin-left: 120px;
}
#Live .profile img{
float: left;
padding-right: 10px;
border: 1px solid rgb(226, 226, 226);
width: 100px;
height: 100px;
padding: 5px;
margin-top: 17px;
margin-right: 10px;
}

#Live .profile a:hover {
background:none;
}
#Live .login{
padding: 15px !important;
width: 180px;
}
#Live input{
border:1px solid #4A779D;
padding: 3px 8px;
margin-bottom: 8px;
width: 164px;
}
#Live label{
padding: 0px 0px 4px 0px;
display:block;
}
#Live button{
background: #4A779D url(http://s3.envato.com/files/1075971/images/navigation.png) repeat-x scroll 0 0;
color: #FFF;
border:1px solid #4A779D;
padding: 4px 10px;
width: 180px;
}

Rekomendasi : Agar ukuran kode CSS menjadi lebih kecil, saya merekomendasikan dan menyarankan kepada Anda untuk mengkompres kode css diatas. Hal ini dilakukan untuk menghindari lambatnya loading blog yang anda miliki. Anda dapat menguunakan CSS compressor tool yang telah saya sediakan dan sangat mudah dalam penggunaannya.

5. Kemudian Anda lanjutkan dengan mencari kode </head> jika sudah dapat, masukkan kode berikut ini tepat diatasnya

<!-- Live Menu by Super-Bee -->
<script src=http://reog.googlecode.com/files/jquery.js type=text/javascript/>
<script src=http://reog.googlecode.com/files/dropmenu.js type=text/javascript/>
<script>
$(document).ready(function(){
$(&quot;#nav-one&quot;).dropmenu();
});
</script>

6. Tambahkan kode dibawah ini pada bagian Header Blog atau pada bagian <body> atau jika template masih setandar letakkan pada bagian <div id=outer-wrapper> namun ada beberapa template yang memiliki struktur kode yang berbeda seperti template blogger standar pada demo, saya meletakkan kode berikut ini dibawah tag penutup </header> (masing-masing template berbeda).

<div id=Live>
<ul class=dropmenu id=nav-one>
<li>
<a href=#>Home</a>
</li>
<li>
<a href=#>Forum</a>
<ul>
<li><a href=#>Support</a></li>
<li><a href=#>Help</a></li>
<li><a href=#>Examples</a></li>
<li><a href=#>Your work</a></li>
</ul>
</li>
<li>
<a href=#item3>Downloads</a>
<ul>
<li><a href=#>Tools</a></li>
<li><a href=#>Office</a></li>
<li><a href=#>Custom projects</a></li>
</ul>
</li>
<li>
<a href=#>Services</a>
<div class=products>
<ul>
<li><img alt=Thumb border=0 height=40 src=https://lh3.googleusercontent.com/_HR8egC6j8tg/TaO0_4J88II/AAAAAAAAAWQ/jXzJP5JiRr4/design.png width=40/><h2>Design Template</h2><p><a href=#>Desig Template Blogger</a></p></li>
<li><img alt=Thumb border=0 height=40 src=https://lh4.googleusercontent.com/_HR8egC6j8tg/TaO1GgOaqvI/AAAAAAAAAWU/9Gy6ImALKXk/gallery.png width=40/><h2>Gallery Blogger</h2><p><a href=#>View and Download Template</a></p></li>
<li><img alt=Thumb border=0 height=40 src=https://lh6.googleusercontent.com/_HR8egC6j8tg/TaO1MROxsBI/AAAAAAAAAWY/d6UthoqsB0I/help.png width=40/><h2>Blogger Help</h2><p><a href=#>Can Help Blog Problem</a></p></li>
<li><img alt=Thumb border=0 height=40 src=https://lh4.googleusercontent.com/_HR8egC6j8tg/TaO1T5uh_VI/AAAAAAAAAWc/SrFLXC-dwPM/safety.png width=40/><h2>Blogger Safety</h2><p><a href=#>Safety Blogger Template</a></p></li>
</ul>
<div class=small><a href="http://super-bee.blogspot.com/"> Panduan dan Cara Membuat Blog</a></div>
</div>
</li>
<li>
<a href=#>Tutorials</a>
<div class=tutorials>
<ul class=left>
<li><a href=#>Javascript</a></li>
<li><a href=#>Python</a></li>
<li><a href=#>PHP</a></li>
</ul>
<ul class=right>
<li><a href=#>HTML/CSS</a></li>
<li><a href=#>ASP.NET</a></li>
<li><a href=#>Actionscript</a></li>
</ul>
<div class=small>View <a href=#>all categories</a> or a <a href=#>list of the best tutorials</a>.</div>
</div>
</li>
<li>
<a href=#>Links</a>
<ul>
<li><a href=#>Programming</a></li>
<li><a href=#>Inspiration</a></li>
<li><a href=#>My websites</a></li>
<li><a href=#>Clients</a></li>
<li><a href=#>Cool stuff</a></li>
<li><a href=#>Sitebase</a></li>
<li><a href=#>Other</a></li>
</ul>
</li>
</ul>
</div>

Perhatikan tanda pagar yang saya beri warna merah pada kode diatas, tanda pagar tesrsebut dapat Anda ganti dengan url/link yang Ada pada blog Anda dan sesuaikan juga textnya dengan yang anda inginkan.

7. Klik pratinjau untuk melihat hasil sementara, jika tidak mengalami masalah, kemudian save dan lihat hasilnya.

Anda dapat memodifikasi tab menu dropdown diatas dengan tampilan yang lebih bagus lagi, jika Anda sudah mengerti CSS dan bagian template blogger. Sampai disini dulu penjelasan panduan dan cara membuat blog khususnya membuat tab menu dropdown yang dapat saya sampaikan, kita akan berjumpa kembali pada kesempatan yang berbeda dengan tutorial-tutorial menarik yang berbeda pula. Untuk itu saya harapkan bagi Anda untuk terus memantau blog Super-Bee ini karena akan selalu Anda postingan yang menarik yang dapat Anda baca dan jumpai.

Menulis artikel di blog pada umumnya relative mudah, namun beberapa kesalahan sering dilakukan. Post Checklist adalah beberapa tips untuk membuat tulisan artikel anda menjadi lebih menarik dan unik. Istilah ini saya buat sendiri karena kebanyakan dari mereka dalam membuat konten banyak yang mengabaikan beberapa kesalahan mencolok dan benar-benar melewatkannya.
Posting ini mungkin dapat anda bookmark atau bahkan diprint. Menjadi blog yang professional memang sangat sulit, namun apakah sulit menjadi seorang penulis artikel handal serta mempunyai kualitas? Yuk, jadikan konten artikel blog anda unik, segar, ceria, dan kreatif.

 Beberapa tips dan hal yang harus diperhatikaan saat membuat artikel :

1. Grammar dan Ejaan
Benar kan? Tentu iya. Begitu banyak orang mempublikasikan artikel secepat mungkin ketika telah selesai mengetik sebuah kata atau kalimat terakhir pada artikelnya. Hal yang paling dilupakan adalah melakukan cek terhadap setiap kata, ejaan, dan grammar penulisan bahasa yang benar.

Pada dasarnya di setiap program pengolah kata terdapat koreksi otomatis mengenai setiap penulisan kata yang baku atau tidak. Tidak hanya itu, Blogger dan Wordpress juga menyediakan fasilitas tersebut yang kita sadari.

Cobalah anda membuat sebuah artikel baru di blog, kemudian ketik beberapa kata / kalimat. Anda akan melihat garis lekuk merah dibawah setiap huruf text yang anda tulis. Taukah anda apa fungsi dari garis berlekuk-lekuk tersebut?

AutoCorrect ejaan terdapat dalam setiap text editor yang dapat dimanfaatkan untuk mengetahui beberapa jumlah kesalahan yang anda buat. Di dalam setiap paragraf yang anda tulis, itu akan dikoreksi otomatis sampai anda membuat paragraf selanjutnya. Apabila saat menekan tombol ENTER tidak terlihat garis berlekuk merah, berarti tulisan anda sudah dikoreksi dan selesai.

Tetapi ingat, pada saat anda masih di paragraf yang auto correct nya aktif, kata yang tidak memiliki garis berlekuk merah adalah ejaan yang salah. Anda akan sangat terbantu dengan ini, tinggal melihat dengan sekilas bisa dengan mudah mengoreksi setiap baris kata yang dibuat sebelum mempublikasikannya. Namun, setelah berganti paragraf, maka auto correct ini akan segera aktif di paragraf selanjutnya/baru.

Menulis postingan di dalam menu Post Blogger akan lebih baik dibandingkan mengoreksi mereka semua di tempat text editor lain atau bahkan mengoreksi dan membacanya satu persatu.

Di dalam menulis, pastikan Ejaan dan Grammar yang digunakan tepat berdasarkan bahasa wilayah anda.

2. SEO ( Search Engine Optimization )
Semoga anda telah memiliki plugins SEO atau tema SEO jika anda menggunakan blog Wordpress. Sebagian besar alat tersebut memungkinkan anda mengedit judul dan deskripsi meta. Mungkin anda akan terbantu dengan plugins tersebut untuk mempermudah artikel anda masuk ke mesin pencari.

Bagi yang tidak menggunakan seperti di Blogger, dalam menulis artikel perhatikan dan lakukan dua buah tips berikut :

• Jika anda menginginkan peringkat dan kata kunci khusus, pastikan itu adalah kata kunci yang ada pada judul posting dan urutan di kata sebelumnya. Itu jauh lebih baik.
• Pastikan kata kunci yang anda target ada di dalam kalimat pertama dari posting Anda. Sekali lagi, sebelumnya lebih baik.

3. Readability ( Keefektifan bacaan )
Cara terbaik untuk memastikan postingan Anda mudah dibaca adalah dengan membaca keras-keras kepada diri sendiri dan menyuruh orang lain membaca untuk dinilai apakah sudah efektif atau tidak. Anda akan menangkap semua ungkapan serta tulisan canggung pada artikel anda akan tampak baik-baik saja seperti yang anda tulis.

Readability memiliki 3 buah bagian penting yaitu :

• Mudah, Tidak berbeli-belit
• Kata kata dan kalimat yang koherensi
• Struktur Paragraf

 Cara untuk membuat artikel anda menjadi menarik dan lebih mudah dibaca pada kalimat dan tingkat paragraf adalah

• Gunakan kata-kata sesingkat mungkin, kecuali jika anda perlu menjelaskan sebuah makna yang dibutuhkan dan makna tersebut berasal dari istilah atau kata-kata yang lebih besar.
• Tuliskan kalimat sesingkat mungkin. Dalam membuat satu buah kalimat, jangan terlalu banyak menggunakan kata-kata. Rekomendasi paling baik adalah 9-22 kata pada setiap kalimat.
• Menulis paragraf sesingkat mungkin. Konten artikel di blog berbeda dengan sebuah cerita, novel, buku atau dokumen. Tulislah hanya 1-3 kalimat pada setiap paragraf dan jangan sampai lebih.
• Gunakan poin-poin untuk daftar 3 buah item atau lebih.
• Gunakan subheadings (H2 atau H3) untuk memecah teks dan menyediakan ruang putih agar terlihat rapih.

Untuk cara yang lebih objektif untuk menguji keterbacaan postingan blog anda, dapat menggunakan sebuah readability tes. Perlu diingat, terkadang beberapa text tulisan anda juga membuatnya tidak cukup mudah untuk dibaca. Jangan khawatir dengan hal ini, karena semua orang pada industri anda / niche sudah tau Jargon, sehingga tidak akan tampak rumit bagi mereka sama sekali.

Jika anda memiliki tujuan yang baik di dalam pikiran, berikan ide tersebut dan berbagi pada orang lain. Maka, pembaca akan tersentak untuk melakukan sesuatu jika memang artikel yang anda berikan itu bagus, berkualitas dan berguna.

Dalam Post Checklist ini terdapat 8 buah kriteria.

• Grammar dan Ejaan
• SEO
• Readability
• Strong Lead
• Link
• Permalink
• Gambar
• Pertanyaan, Jawaban, Pendapat, Saran, dan Fakta

Kriteria lainnya dalam tips ini akan dibahas pada artikel yang sama Jilid 2. Media Blogger juga sedang membangun blog baru yang disediakan khusus untuk mendidik anda dari pemula hingga menjadi seseorang yang besar dan blog yang mampunya kriteria ciri khas. Kunjungi www.idbloggers.com pada 3 September 2013, saat ini server domains sedang diatur. Terimakasih.