Cara Buat Meta Tag Berbeda Untuk Setiap Posting Blogger

Pada tampilan dasbor baru blogger (blogger new interface) pengguna Blogspot dimanjakan dengan kemudahan untuk menambahkan Meta Tag Deskripsi hanya dengan menambahkan Deskripsi Penelusuran pada setiap penulisan Artikel, tetapi bagi pengguna blogger lama (old interface) pada dasbor tidak terdapat hal yang disempurnakan pada dasbor baru blogger (blogger new interface) , dari pada mengganti Template Blogger dengan yang baru dan dianggap akan menurunkan trafic, maka kita harus merubah sedikit Meta Tag pada Edit HTML , langkah Cara Buat Meta Tag Berbeda Untuk Setiap Posting Blogger sebagai berikut :

Apa Meta Tag Berbeda Untuk Setiap Posting di Blogger?
Secara default, jika Anda menambahkan Meta Tag ke template blogger, maka semua halaman Anda, termasuk halaman rumah akan memiliki Meta Description Tag sama. Apakah salah? No Hanya saja ketika Anda mengirimkan blog Anda ke google maka Anda akan memiliki duplikat meta tag deskripsi. Meta Description Tags berbeda dalam setiap posting akan lebih google friendly.

READ MORE - Cara Buat Meta Tag Berbeda Untuk Setiap Posting Blogger

Cara membuat Live Demo menggunakan Java Script dan Laman Blogger Template

Tulisan saya sebelumnya tentang bagaimana Cara membuat Live Demo Template menggunakan Java Script pada blogger  berisikan tentang bagaimana alasan dan inspirasi dalam membuat Live Demo menggunakan Java Script dan Laman Blogger Template  , untuk live demo tentang tutorial silahkan lihat http://stylebloggertemplate.blogspot.com/p/demo.html?iframe=setneg.blogspot.com dan sedangkan cara membuatnya yang paling mudah adalah sebagai berikut :

01 Langkah pertama , membuat menu Laman pada blogger Template, dengan format http://namablog.blogspot.com/p/demo.html , silahkan ikuti langkah cara membuat menu laman blogger.

02 Langkah kedua, silahkan cari kode </head>, kemudian ganti dengan kode dibawah ini :
<!-- Demo Style Blogger Template -->
<b:if cond='data:blog.url == &quot;http://namablog.blogspot.com/p/demo.html&quot;'>
<script src='http://reog.googlecode.com/files/jquery-1.js' type='text/javascript'/>
<script src='http://reog.googlecode.com/files/iframe.js' type='text/javascript'/>

<style type='text/css'>
a{outline-style:none; color:#0696cb; font-size:11px;text-decoration:none;}
#navbar-iframe{display:none}
html, #iframe{overflow: hidden;}
/* iframe */
#iframe, iframe{width: 100%; height: 100%; border:none;}
#iframe{margin-top:31px;}


/*-- DROPDOWN MENU --*/
.likefb, .google_plus, .twitter{float:left;margin:0 3px 0 0 !important;padding:4px 0 0 1px; }
.likefb {width:90px !important;}
.google_plus {width:63px !important;}
.twitter {width:95px !important;}
#toolbar {position:fixed; top:0;left:0; width: 100%; height:30px !important; margin: 0; padding:0; z-index:50}
#nav-menu-label{float:right; margin:0px; padding:0px; }
.text-style{background:url(http://1.bp.blogspot.com/-VaJX0ShxH6c/TeUGQ0IGOWI/AAAAAAAAJGo/Qw7sIjc5MrQ/s200/bc_separator.png) no-repeat;color:#333; display:block; font-size:12px; font-family:arial,verdana,georgia; font-weight:normal; text-transform:normal; margin:0; border-left:0px solid #CDCDCD; padding:8px 4px 8px 14px; height:14px }
.text-style:hover{color:#FF6600; cursor:pointer;height:14px}
/*-- (Menu Nav LABEL) --*/
#nav-menu-label{float:right; margin:0px; padding:0px}
#nav-menu-label ul{float:left; list-style:none; margin:0px; padding:0px}
#nav-menu-label li{list-style:none; margin:0px; padding:0px}
#nav-menu-label li a, #nav-menu-label li a:link, #nav-menu-label li a:visited{color:#333; display:block; font-size:12px; font-family:arial,verdana,georgia; font-weight:normal; text-transform:normal; margin:0px; background:url(http://1.bp.blogspot.com/-VaJX0ShxH6c/TeUGQ0IGOWI/AAAAAAAAJGo/Qw7sIjc5MrQ/s200/bc_separator.png) no-repeat ; padding:8px 3px 6px 14px}
#nav-menu-label li a:hover, #nav-menu-label li a:active{color:#FF6600; margin:0px; padding:8px 3px 6px 14px; text-decoration:none}
#nav-menu-label li li a, #nav-menu-label li li a:link, #nav-menu-label li li a:visited{background:#f5f5f5; width:90px; color:#333; font-size:11px; font-family: arial,Times New Roman; font-weight:normal; text-transform:normal; float:none; margin:0px; padding:4px 10px 4px 10px; border-top:1px solid #fff; border-bottom:1px solid #CDCDCD;border-left:1px solid #CDCDCD; border-right:1px solid #CDCDCD}
#nav-menu-label li li a:hover, #nav-menu-label li li a:active{background:#fff; color:#FF6600; padding:4px 10px 4px 10px}
#nav-menu-label li{float:left; padding:0px}
#nav-menu-label li ul{z-index:999; position:absolute; left:-999em; height:auto; width:100px; margin:0px; padding:0px}
#nav-menu-label li li{}
#nav-menu-label li ul a{width:100px}
#nav-menu-label li ul a:hover, #nav-menu-label li ul a:active{}
#nav-menu-label li ul ul{margin:-31px 0 0 100px}
#nav-menu-label li:hover ul ul, #nav-menu-label li:hover ul ul ul, #nav-menu-label li.sfhover ul ul, #nav-menu-label li.sfhover ul ul ul{left:-999em}
#nav-menu-label li:hover ul, #nav-menu-label li li:hover ul, #nav-menu-label li li li:hover ul, #nav-menu-label li.sfhover ul, #nav-menu-label li li.sfhover ul, #nav-menu-label li li li.sfhover ul{left:auto}
#nav-menu-label li:hover, #nav-menu-label li.sfhover{position:static}
/* -- SEARCR BOX -- */
#src-bar{border:1px solid #C9D7F1;  height:18px; width:130px; padding:0;  background:#f6f4f4;  }
#src-bar input{border:0;  background:none;  color:#575757}
#s-bar{font-size:11px; width:120px; padding-left:4px;  margin:0;  background:none}
#tsrc-bar #src-bar{margin-top:0px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:3px;background-color:#FFFFFF;border:1px solid #CDCDCD;}
#tsrc-bar #s-bar{width:105px}

#mta_bar{background:#E7E7E7 url(http://3.bp.blogspot.com/_C6KkooKXCEw/TUP2QV3Ut4I/AAAAAAAAH5w/MYcoSss0M28/s400/bg.png) repeat-x;      overflow: hidden; padding-top:0px; width:100%; height:30px;display:block; border-bottom:1px solid #cdcdcd}
#mta_bar .bar_logo{float:left;  padding-left:8px; text-align:left; font-family:Arial; font-size:15px; font-weight:bold; font-style:normal; color:#333; width:148px; padding-top:7px}
#mta_bar .bar_logo a{background:url(https://dev.twitter.com/sites/all/themes/twitter_commons/favicon.ico) 0px no-repeat; text-decoration:none; color:#333; padding-left:21px; }
#mta_bar .bar_logo a:hover{text-decoration:underline; color:#FF6600}
#mta_bar .bar_search{float:left;  padding-top:5px; margin:0px; text-align:left; font-family:tahoma; font-weight:bold; font-style:normal; color:#333; width:140px}
#mta_bar .bar_search a{text-decoration:none; color:#333; padding-left:10px; padding:0}
#mta_bar .bar_search a:hover{text-decoration:underline; color:#FF6600}
#mta_bar .bar-menu-label{float:right; text-align:left; font-family:tahoma; font-size:13px; font-weight:normal; font-style:normal; color:#333; width:520px; padding:0px}
#mta_bar .bar-menu-label a{text-decoration:none}
#mta_bar .bar-download{float:left;  text-align:left; font-family:arial; font-size:13px; font-weight:normal; font-style:normal; color:#333; padding:6px 3px; width:65px}
#mta_bar .bar-download a{background:url(http://4.bp.blogspot.com/_C6KkooKXCEw/TIBn_s2bLjI/AAAAAAAAGyE/ONn17YW5G9o/s200/submit-c.png) 0px no-repeat; text-decoration:none; color:#333; padding-left:17px; }
#mta_bar .bar-download a:hover{text-decoration:underline; color:#FF6600}
#mta_bar .bar_hide{float:right;  text-align:left; font-family:arial; font-size:13px; font-weight:bold; font-style:normal; color:#333; padding:7px 0 0 5px; width:20px}
#mta_bar .bar_hide a{background:url(http://2.bp.blogspot.com/_C6KkooKXCEw/Si0hpItyl-I/AAAAAAAAEYQ/kmsk9iVM9HM/s400/delete.png)  no-repeat; text-decoration:none; color:#333; padding-left:20px; }
#mta_bar .bar_hide a:hover{text-decoration:underline; color:#FF6600}
#mta_bar .bar_fb {float:left; width:70px;padding-top:6px; padding-left:2px; margin:0px;}
</style>
</b:if>
  </head>

03 Langkah ketiga, silahkan cari kode <body>, kemudian ganti dengan kode dibawah ini :
<body>
<b:if cond='data:blog.url != &quot;http://namablog.blogspot.com/p/demo.html&quot;'>

04 Langkah keempat, silahkan cari kode </body> kemudian ganti dengan kode dibawah ini dan selanjutnya silahkan save template :
</b:if>
<b:if cond='data:blog.url == &quot;http://namablog.blogspot.com/p/demo.html&quot;'>
    <div id='toolbar'>
        <div id='mta_bar'>
                    <div class='mta_bar bar_logo'>
                        <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
                    </div>
                    <div class='mta_bar bar_search'>
                        <div id='tsrc-bar'>
                            <div id='src-bar'>
                                <form action='http://www.zoomtemplate.com/search' id='searchform' method='get' name='searchform'>
                                    <input class='keyword' id='s-bar' name='s' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search Template..&quot;;}' onfocus='if (this.value == &quot;Search Template..&quot;) {this.value = &quot;&quot;}' type='text' value='Search Template..'/>
                                    <input src='http://1.bp.blogspot.com/_C6KkooKXCEw/TIBqtV6pdmI/AAAAAAAAGyM/QUBsym_R9V0/s200/search-c.png' style='border: 0pt none ; vertical-align: top; padding-top:3px' type='image'/>
                                </form>
                            </div>
                        </div>
                    </div>
                  
                    <div class='mta_bar bar-download'>
                        <a href='http://box.zoomtemplate.com/?dl=' rel='nofollow'>Download</a>  
                    </div>
                   
                    <div class='mta_bar bar_hide'>
                        <a href='javascript:void(0);' id='close'/>
                    </div>   


                    <div class='mta_bar bar-menu-label'>
                        <div id='NavbarMenuleft'>       
                            <ul id='nav-menu-label'>
                                <li>
                                    <div class='text-style'>Coloums &#9660;</div>
                                    <ul>
<li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                    </ul>
                                </li>
                               
                                <li>
                                    <div class='text-style'>Sidebars &#9660;</div>
                                    <ul>
                                        <li><a href=''>1 Left Sidebar</a></li>
                                        <li><a href=''>2 Left Sidebar</a></li>
                                        <li><a href=''>1 Left Sidebar</a></li>
                                        <li><a href=''>2 Left Sidebar</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <div class='text-style'>Colors &#9660;</div>
                                    <ul>
                                        <li><a href='#'>Black</a></li>
                                        <li><a href='#'>Blue</a></li>
                                        <li><a href='#'>Brown</a></li>
                                        <li><a href='#'>Green</a></li>
                                        <li><a href='#'>Gray</a></li>
                                        <li><a href='#'>Orange</a></li>
                                        <li><a href='#'>Pink</a></li>
                                        <li><a href='#'>Red</a></li>
                                        <li><a href='#'>Violet</a></li>
                                        <li><a href='#'>White</a></li>
                                        <li><a href='#'>Yellow</a></li>
                                    </ul>
                                </li>
                               
                                <li>
                                    <div class='text-style'>Styles &#9660;</div>
                                    <ul>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                    </ul>
                                </li>
                               
                                <li>
                                    <div class='text-style'>Topics &#9660;</div>
                                    <ul>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                    </ul>
                                </li>
                                   
                                <li>
                                    <div class='text-style'>Features &#9660;</div>
                                    <ul>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                    </ul>
                                </li>
                               
                                <li>
                                    <div class='text-style'>Width &#9660;</div>
                                    <ul>
                                        <li>
                                            <a href='#'>Fixed</a>
                                        </li>
                                        <li>
                                            <a href='#'>Fluid</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>   
                    </div>
                </div>
            </div>
<div style='clear: both;'/>
<div id='iframe'><iframe src=''/></div>
</b:if>
</body>

Kode warna Kuning merupakan Java Script, untuk selebihnya jika dianggap perlu silahkan edit atau simpan pada hosting yang anda miliki.

Kode warna Coklat merupakan css dan HTML mega menu Blogger, silahkan edit sesuka anda sebagai inspirasi dapat membaca artikel Cara membuat , cara mengedit, cara setting dan cara menerapkan Sitebase Mega Drop Menu pada Blogger Template ( Create Setting Mega Menu to Blogger ) atau Cara membuat , cara mengedit, cara setting dan cara menerapkan Vimeo-like Top Mega Menus Navigation pada Blogger Template ( Create Setting Mega Menu )

READ MORE - Cara membuat Live Demo menggunakan Java Script dan Laman Blogger Template

Cara membuat Live Demo Template menggunakan Java Script pada blogger

Banyak blogger menanyakan tentang Cara membuat Live Demo Template menggunakan Java Script pada blogger dan disamping itu juga banyak yang membuat sudah membuat kumpulan Template Blogger dengan Live Demo yang bermacam macam serta penuh kreatif dan inspiratif seperti beberapa yang menginspirasi saya , diantaranya sebagai berikut :

01Blogger Templates dengan live demo template http://btemplates.com/2012/blogger-template-darkpress/demo/ yang tidak dapat diubah sewaktu waktu.

02zoomtemplate.com sangat inspiratif dalam menggunakan subdomain demo.zoomtemplate.com dengan format http://demo.zoomtemplate.com?dm=url, jadi akan mudah membuat live demo hanya dengan menambahkan alamat url yang akan dibuat live demo, sebagai contoh apabila ingin membuat live demo template blogger karya fianhar dengan alamat http://setneg.blogspot.com , maka pada zoomtemplate tinggal menambahkan url setelah http://demo.zoomtemplate.com?dm= , sehingga untuk live demo http://setneg.blogspot.com adalah http://demo.zoomtemplate.com/?dm=http://setneg.blogspot.com

03Ilmu inspiratif selanjutnya dimiliki oleh http://www.dhetemplate.com/ yang telah membuat live demo template koleksi pada http://demo.dhetemplate.com dengan alamat blogspot aslinya di http://demo-dhetemplate.blogspot.com , jadi http://www.dhetemplate.com/ setiap akan membuat live demo harus memposting pada http://demo.dhetemplate.com dengan dasar iframe live demo, ini menurut saya akan sedikit repot dibandingkan dengan http://demo.zoomtemplate.com yang tinggal menambahkan url (alamat website) setelah url http://demo.zoomtemplate.com?dm= , tetapi http://demo.dhetemplate.com mempunyai kelebihan sangat mudah terindex search engine. 

Sekarang giliran saya yang mendapat inspirasi untuk menggabungkan kelebihan demo.zoomtemplate.com dan http://demo.dhetemplate.com , dimana saya hanya menggunakan Laman bawaan blogger dan sedikit java script, jadi saya membuat live demo dengan menggunakan alamat subdomain blogspot.com dari blogger dan ketika akan membuat Live Demo Template saya hanya akan menambahkan url dibelakang ?iframe= , sebagai contoh saya membuat Live Demo pada laman http://stylebloggertemplate.blogspot.com/p/demo.html , jika saya akan membuat Live Demo template Black Reog Warok dengan alamat http://setneg.blogspot.com maka saya akan mudah membuat live demo template dengan cara hanya menambahkan url dibelakang ?iframe sehingga alamat Live Demo Template adalah http://stylebloggertemplate.blogspot.com/p/demo.html?iframe=setneg.blogspot.com , untuk lebih simplenya silahkan lihat langsung Live Demo Template by Fianhar

Apakah anda berminat menerapkan pada template yang anda?
Jika berminat silahkan comment sertakan alamat email, saya tidak meminta biaya dan akan membagi secara geratis melalui email yang anda sertakan pada comment atau silahkan kunjungi langsung Cara membuat Live Demo menggunakan Java Script dan Laman Blogger Template.

READ MORE - Cara membuat Live Demo Template menggunakan Java Script pada blogger

Typography Joomla in Style Blogger Template

Tip Trik Blogger Template, Kumpulan Artikel Blogger, Gallery Style Template Blogger, CSS, HTML, New Template Blogger, New Article Blogger, Free Blogger Template, Elegant Style Blogger Template, dan Blogger Indonesia. Tip Trik Blogger Template, Kumpulan Artikel Blogger, Gallery Style Template Blogger, CSS, HTML, New Template Blogger, New Article Blogger, Free Blogger Template, Elegant Style Blogger Template, dan Blogger Indonesia. Tip Trik Blogger Template, Kumpulan Artikel Blogger, Gallery Style Template Blogger, CSS, HTML, New Template Blogger, New Article Blogger, Free Blogger Template, Elegant Style Blogger Template, dan Blogger Indonesia. Tip Trik Blogger Template, Kumpulan Artikel Blogger, Gallery Style Template Blogger, CSS, HTML, New Template Blogger, New Article Blogger, Free Blogger Template, Elegant Style Blogger Template, dan Blogger Indonesia. Tip Trik Blogger Template, Kumpulan Artikel Blogger, Gallery Style Template Blogger, CSS, HTML, New Template Blogger, New Article Blogger, Free Blogger Template, Elegant Style Blogger Template, dan Blogger Indonesia. This page presents most of typographical aspects of JA Purity ii. Make your readers happy with great Typography and User Experience!

This is an Heading 1

Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.

This is an Heading 2

Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst.

This is an Heading 3

Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.

This is an Heading 4

Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.

Special Content

<div class="pengumuman"> Style Blogger Template tentang Tip Trik Blogger Template, Kumpulan Artikel Blogger, Gallery Style Template Blogger, CSS, HTML, New Template Blogger, New Article Blogger, Free Blogger Template, Elegant Style Blogger Template, dan Blogger Indonesia </div>

<div class="perhatian"> Style Blogger Template tentang Tip Trik Blogger Template, Kumpulan Artikel Blogger, Gallery Style Template Blogger, CSS, HTML, New Template Blogger, New Article Blogger, Free Blogger Template, Elegant Style Blogger Template, dan Blogger Indonesia </div>

<div class="awas"> Style Blogger Template tentang Tip Trik Blogger Template, Kumpulan Artikel Blogger, Gallery Style Template Blogger, CSS, HTML, New Template Blogger, New Article Blogger, Free Blogger Template, Elegant Style Blogger Template, dan Blogger Indonesia </div>

<div class="note2"> Style Blogger Template tentang Tip Trik Blogger Template, Kumpulan Artikel Blogger, Gallery Style Template Blogger, CSS, HTML, New Template Blogger, New Article Blogger, Free Blogger Template, Elegant Style Blogger Template, dan Blogger Indonesia </div>

<div class="note3"> Style Blogger Template tentang Tip Trik Blogger Template, Kumpulan Artikel Blogger, Gallery Style Template Blogger, CSS, HTML, New Template Blogger, New Article Blogger, Free Blogger Template, Elegant Style Blogger Template, dan Blogger Indonesia </div>

<div class="footnote"> Style Blogger Template tentang Tip Trik Blogger Template, Kumpulan Artikel Blogger, Gallery Style Template Blogger, CSS, HTML, New Template Blogger, New Article Blogger, Free Blogger Template, Elegant Style Blogger Template, dan Blogger Indonesia </div>

Below is a sample of <pre> or <div class="code">

#ja-rightcol {
width: 180px;
float: right;
color: #EEEEEE;
}

This is a highlight phrase. Use <span class="highlight">Your highlight phrase goes here!</span>.

This is a Magazine Style Drop Cap. Use <span class="dropcap">Y</span>our highlight phrase goes here! . The first letter in this paragraph is big. JA Purity II bring into your Jooomla template the magazine drop cap technique and CSS2 includes the first-letter pseudo class. In all fairness to the paragraph itself we probably should type enough to see how it looks when it is surrounded by its textual friends by using more words.

This is a sample Blockquote. Use <blockquote>Your quote goes here!</blockquote> to form a quote!

This is a sample Blockquote. Use <blockquote>Your quote goes her<span class="close">e!</span></blockquote> to form a quote!

Lists Style

1. This is a sample Ordered List.
2. Lorem ipsum dolor sit amet consectetuer.
3. Condimentum quis.
4. Congue Quisque augue elit dolor nibh.

• This is a sample Unordered List.
• Condimentum quis.
• Lorem ipsum dolor sit amet consectetuer.
• Congue Quisque augue elit dolor nibh.

• This is a sample Arrow list.
• Use <ul class="arrow"><li><span class="icon"> </span>List's content goes here!</li></ul>
• This is a sample Checklist.

• This is a sample Star List.
• Use <ul class="star"><li><span class="icon"> </span>List's content goes here!</li></ul>
• This is a sample Star List.

• This is a sample Checklist.
• Use <ul class="checklist"><li><span class="icon"> </span>List's content goes here!</li></ul>
• This is a sample Checklist.

• This is a sample Phone List.
• Use <ul class="phone"><li><span class="icon"> </span>List's content goes here!</li></ul>
• This is a sample Phone List.

• This is a sample Address List.
• Use <ul class="address"><li><span class="icon"> </span>List's content goes here!</li></ul>
• This is a sample Address List.

• This is a sample Email List.
• Use <ul class="email"><li><span class="icon"> </span>List's content goes here!</li></ul>
• This is a sample Email List.

01This is a sample block number. Use <p class="blocknumber"><span class="bignumber-1">01.</span>Your content goes here!</p> to form a block number!

02This is a sample block number. Use <p class="blocknumber"><span class="bignumber-1">02.</span>Your content goes here!</p> to form a block number!

03This is a sample block number. Use <p class="blocknumber"><span class="bignumber-1">03.</span>Your content goes here!</p> to form a block number!

01This is a sample block number. Use <p class="blocknumber"><span class="bignumber-2">01.</span>Your content goes here!</p> to form a block number!

02This is a sample block number. Use <p class="blocknumber"><span class="bignumber-2">02.</span>Your content goes here!</p> to form a block number!

03This is a sample block number. Use <p class="blocknumber"><span class="bignumber-2">03.</span>Your content goes here!</p> to form a block number!

01This is a sample block number. Use <p class="blocknumber"><span class="bignumber-3">01.</span>Your content goes here!</p> to form a block number!

02This is a sample block number. Use <p class="blocknumber"><span class="bignumber-3">02.</span>Your content goes here!</p> to form a block number!

03This is a sample block number. Use <p class="blocknumber"><span class="bignumber-3">03.</span>Your content goes here!</p> to form a block number!

Paragraph Style

Use <p class="error"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="message"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="tips"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="key"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="tag"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="cart"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="doc"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="note"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="photo"><span class="icon"> </span>Your message goes here!</p> to make this

Use <p class="mobi"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="link">Your message goes here!</p> to make this.

Bubbles

<div class="bubble bubble-l1 clearfix"> <div class="box-ct"> <div class="box tl"> </div> <div class="box tr"> </div> <div class="box bl"> </div> <div class="box br"> </div> Buble's content goes here! </div> <span class="arrow"> </span> <span class="author">Put author name here</span> </div>

Put author name here

<div class="bubble bubble-l2 clearfix"> <div class="box-ct"> Bubble's content goese here! </div> <span class="arrow"> </span> <span class="author">Put author name here</span> </div>

Put author name here

<div class="bubble bubble-d1 clearfix"> <div class="box-ct"> <div class="box tl"> </div> <div class="box tr"> </div> <div class="box bl"> </div> <div class="box br"> </div> Buble's content goes here! </div> <span class="arrow"> </span> <span class="author">Put author name here</span> </div>

Put author name here

<div class="bubble bubble-d2 clearfix"> <div class="box-ct"> Bubble's content goese here! </div> <span class="arrow"> </span> <span class="author">Put author name here</span> </div>

Put author name here

<div class="bubble bubble-hl1 clearfix"> <div class="box-ct"> <div class="box tl"> </div> <div class="box tr"> </div> <div class="box bl"> </div> <div class="box br"> </div> Buble's content goes here! </div> <span class="arrow"> </span> <span class="author">Put author name here</span> </div>

Put author name here

<div class="bubble bubble-hl2 clearfix"> <div class="box-ct"> Bubble's content goese here! </div> <span class="arrow"> </span> <span class="author">Put author name here</span> </div>

Put author name here

Boxes and Legends Style

This is a sticky. Use <p class="box-sticky">Your clip note goes here!</p> to create a clip note!

This is a download box. Use <p class="box-download">Your download goes here!</p> to create a download box!

This is a grey box. Use <p class="box-grey">Your content goes here!</p> to create a grey box!

This is a hilite box. Use <p class="box-hilite">Your content goes here!</p> to create a hilite box!

Legend style

Use <div class="legend"><h3 class="legend-title">Your title</h3><p>Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.</p></div>

Legend style highlight

Use <div class="legend-hilite"><h3 class="legend-title">Your title</h3><p>Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.</p></div>

READ MORE - Typography Joomla in Style Blogger Template

Cara membuat , cara mengedit, cara setting dan cara menerapkan Sitebase Mega Drop Menu pada Blogger Template ( Create Setting Mega Menu to Blogger )

With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. You can also use a div as drop down element. This way you can create big drop down menus like under the buttons products and tutorials in the live preview. Or you can create a login panel in your drop down like I did in the live preview.

With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. You can also use a div as drop down element. This way you can create big drop down menus like under the buttons products and tutorials in the preview or you can create a login panel in your drop down!

Translate :

Dengan script ini Anda dapat membuat drop bagus dan interaktif down menu. Keuntungan dari script ini adalah bahwa ia tidak hanya memberikan Anda kemampuan untuk membuat drop down menu. Anda juga dapat menggunakan div sebagai drop-down elemen. Dengan cara ini Anda dapat membuat drop down menu besar seperti di bawah produk tombol dan tutorial di live preview. Atau Anda dapat membuat sebuah panel login di drop ke bawah seperti yang saya lakukan dalam pratayang langsung.

Dengan script ini Anda dapat membuat drop bagus dan interaktif down menu. Keuntungan dari script ini adalah bahwa ia tidak hanya memberikan Anda kemampuan untuk membuat drop down menu. Anda juga dapat menggunakan div sebagai drop-down elemen. This way you can create big drop down menus like under the buttons products and tutorials in the preview or you can create a login panel in your drop down! Dengan cara ini Anda dapat membuat drop down menu besar seperti di bawah produk tombol dan tutorial di preview atau Anda dapat membuat sebuah panel Anda login di drop down!

Features

• Create dropdown menus
• Horizontal and vertical menus
• Supports div dropdown
• 3 examples dropdown menus included
• 3 dropdown animations
• use different anim for open and close
• Graceful degradation
• Customizable through css
• Works in all browsers
• Custom animations
• Show on top of flash content

Demo Sitebase Mega Drop Menu to Blogger Template

Untuk menerapkan Sitebase Mega Drop Menu to Blogger Template silahkan ikuti langkah sebagai berikut :

1. Langkah 1 : Login Blogger -> Rancangan -> Rancangan -> Back Up template Anda.


2. Langkah 2 : Masukkan kode di bawah tepat di atas <b:skin> :
   <!-- Live Menu by Fianhar -->
<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>

3. Langkah 3 : Copy kode di bawah ini di atas kode ]]></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;
}

4. Langkah 4 : Tambahkan kode dibawah ini pada bagian Header Blog atau pada bagian <body> atau jika template masih setandar letakkan pada bagian <div id='outer-wrapper'> :<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'>Style Blogger Template hanya sebuah catatan kecil dari seorang Blogger Indonesia, blog ini berisi tentang Tip Trik Blogger Template, Kumpulan Artikel Blogger, Gallery Style Template Blogger, CSS, HTML, New Template Blogger, New Article Blogger, Free Blogger Template, Elegant Style Blogger Template, dan Blogger Indonesia.</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>

<li>
<a href='#'>Profile</a>
<div class='profile'>


<div class='small'>
<a href='http://www.facebook.com/fianhar' target='_blank'><img src='https://lh3.googleusercontent.com/_HR8egC6j8tg/TYIGkw5J-2I/AAAAAAAAAVw/XrtCnnTwQQk/aha.jpg'/></a>

<p style='text-align: justify;'>Saya adalah <a href='http://fianhar.blogspot.com' target='_blank'>Fianhar</a>, berasal dan dibesarkan di <a href='http://id.wikipedia.org/wiki/Kabupaten_Ponorogo' target='_blank'>Kota Reog Ponorogo</a> Indonesia. Sekarang tinggal di <a href='http://id.wikipedia.org/wiki/Jakarta' target='_blank'>Kota Jakarta</a> dan bekerja di Institusi Penegak Hukum. Photografi dan Web Design hanya sebuah hobby.</p>

<p style='text-align: justify'>Hukum, Web design, dan fotografi adalah merupakan suatu seni yang menghasilkan keindahan jika berjalan seimbang.
</p>
</div>
</div>
</li>

<li>
<a href='#'>Login</a>
<div class='login'>
<label for='txtuser'>Username: </label>
<input id='txtuser' name='txtuser' type='text'/>
<label for='txtuser'>Password: </label>
<input id='txtpass' name='txtpass' type='password'/>
<button>Login</button>

</div>
</li>
</ul>
</div>

Keterangan :
Kode yang terdapat pada langkah ke-4 masukkan pada HTML Blogger Template Anda, tetapi lebih baik penempatan Mega Drop Down Menus pada Header Template.

Referensi Artikel :

• Drop Menu by Sitebase.

  Link : http://codecanyon.net/item/drop-menu/81289?ref=1stwebdesigner

• 38 jQuery And CSS Drop Down Multi Level Menu Solutions.

  Link : http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/

READ MORE - Cara membuat , cara mengedit, cara setting dan cara menerapkan Sitebase Mega Drop Menu pada Blogger Template ( Create Setting Mega Menu to Blogger )

Cara membuat , cara mengedit, cara setting dan cara menerapkan Vimeo-like Top Mega Menus Navigation pada Blogger Template ( Create Setting Mega Menu )

I really like the top navigation implemented on Vimeo.com. First time I saw it I wanted to recreate it. And this is exactly what I am going to do in this tutorial.

What I like the most is the menu that drops down when you hover search box. It offers you different search options that you can choose and narrow your search.

I’ve featured this Janko’s tutorial some time ago, but sometimes I will repeat myself, since this article is completely dedicated to showcase advanced drop down menus. Very detailed and well written tutorial, with drop-down search options narrowing and targeting search by checking options. Menu is done completely using just CSS, structure is visually describet in the image below:

Translate Indonnesia:

Saya sangat suka navigasi atas diterapkan pada Vimeo.com. Pertama kali aku melihatnya aku ingin menciptakan itu. Dan ini persis apa yang akan saya lakukan dalam tutorial ini.

Apa yang paling saya sukai adalah menu yang turun ke bawah ketika Anda membawa kotak pencarian. Ia menawarkan pilihan pencarian yang berbeda yang dapat Anda pilih dan mempersempit pencarian Anda.

Aku sudah menampilkan tutorial ini Janko's beberapa waktu lalu, tapi kadang-kadang saya akan mengulangi diriku sendiri, karena artikel ini benar-benar didedikasikan untuk menampilkan menu drop-down lanjutan. Sangat rinci dan ditulis dengan baik tutorial, dengan drop-down pencarian penyempitan dan menargetkan pencarian dengan memeriksa pilihan. Menu ini dilakukan sepenuhnya hanya menggunakan CSS, struktur secara visual describet pada gambar di bawah:

Demo Vimeo-like Top Mega Menus Navigation to Blogger Template

Cara membuat , cara mengedit, cara setting dan cara menerapkan Demo Vimeo-like Top Mega Menus Navigation to Blogger Template silahkan ikuti langkah sebagai berikut :

1. Langkah 1 : Login Blogger -> Rancangan -> Rancangan


2. Langkah 2 : Back Up template Anda.
3. Langkah 3 : Copy kode di bawah ini di atas kode ]]></b:skin>
   
#janko #menu{ margin:0px; padding:0px; list-style:none; color:#fff; line-height:45px; display:inline-block; float:left; z-index:1000; }
#janko #menu a { color:#fff; text-decoration:none; }
#janko #menu > li {background:#172322 none repeat scroll 0 0; cursor:pointer; float:left; position:relative;padding:0px 10px;}
#janko #menu > li a:hover {color:#B0D730;}
#janko #menu .logo {background:transparent none repeat scroll 0% 0%; padding:0px; background-color:Transparent;}
/* sub-menus*/
#janko #menu ul { padding:0px; margin:0px; display:block; display:inline;}
#janko #menu li ul { position:absolute; left:-10px; top:0px; margin-top:45px; width:150px; line-height:16px; background-color:#172322; color:#0395CC; /* for IE */ display:none; }
#janko #menu li:hover ul { display:block;}
#janko #menu li ul li{ display:block; margin:5px 20px; padding: 5px 0px; border-top: dotted 1px #606060; list-style-type:none; }
#janko #menu li ul li:first-child { border-top: none; }
#janko #menu li ul li a { display:block; color:#0395CC; }
#janko #menu li ul li a:hover { color:#7FCDFE; }
/* main submenu */
#janko #menu #main { left:0px; top:-20px; padding-top:20px; background-color:#7cb7e3; color:#fff; z-index:999;}
/* search */
#janko .searchContainer div { background-color:#fff; display:inline; padding:5px;}
#janko .searchContainer input[type="text"] {border:none;}
#janko .searchContainer img { vertical-align:middle;}
/* corners*/
#janko #menu .corner_inset_left { position:absolute; top:0px; left:-12px;}
#janko #menu .corner_inset_right { position:absolute; top:0px; left:150px;}
#janko #menu .last { background:transparent none repeat scroll 0% 0%; margin:0px; padding:0px; border:none; position:relative; border:none; height:0px;}
#janko #menu .corner_left { position:absolute; left:0px; top:0px;}
#janko #menu .corner_right { position:absolute; left:132px; top:0px;}
#janko #menu .middle { position:absolute; left:18px; height: 20px; width: 115px; top:0px;}
4. Langkah 4 : Tambahkan kode dibawah ini pada bagian Header Blog atau pada bagian <body> atau jika template masih setandar letakkan pada bagian <div id='outer-wrapper'> :
   
<div id='janko'>
<div style='margin-left:50px;'>
<ul id='menu'>
<li class='logo'>

<img alt='' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/menu_left.png' style='float:left;'/>
<ul id='main'>
<li>Welcome to <b>Create Vimeo-like top navigation</b> tutorial!</li>
<li class='last'>
<img alt='' class='corner_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_blue_left.png'/>
<img alt='' class='middle' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/dot_blue.png'/>
<img alt='' class='corner_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_blue_right.png'/>

</li>
</ul>

</li>
<li><a href='#'>Login</a>
</li>
<li><a href='#'>Help</a>
<ul id='help'>
<li>

<img alt='' class='corner_inset_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_left.png'/>
<a href='#'>General help</a>
<img alt='' class='corner_inset_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_right.png'/>
</li>
<li><a href='#'>Posts</a></li>
<li><a href='#'>Pages</a></li>
<li><a href='#'>Posts</a></li>
<li><a href='#'>Pages</a></li>
<li><a href='#'>Posts</a></li>
<li class='last'>

<img alt='' class='corner_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_left.png'/>
<img alt='' class='middle' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/dot.gif'/>
<img alt='' class='corner_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_right.png'/>
</li>
</ul>
</li>

<li><a href='#'>Help</a>
<ul id='help'>
<li>
<img alt='' class='corner_inset_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_left.png'/>
<a href='#'>General help</a>
<img alt='' class='corner_inset_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_right.png'/>
</li>
<li><a href='#'>Posts</a></li>
<li><a href='#'>Pages</a></li>
<li><a href='#'>Posts</a></li>
<li><a href='#'>Pages</a></li>
<li><a href='#'>Posts</a></li>
<li class='last'>

<img alt='' class='corner_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_left.png'/>
<img alt='' class='middle' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/dot.gif'/>
<img alt='' class='corner_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_right.png'/>
</li>
</ul>
</li>

<li class='searchContainer'>
<div>
<input id='searchField' type='text'/>

<img alt='Search' onclick='alert(&apos;You clicked on search button&apos;)' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/magnifier.png'/></div>
<ul id='search'>
<li>
<img alt='' class='corner_inset_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_left.png'/>
<input id='cbxAll' type='checkbox'/>All
<img alt='' class='corner_inset_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_right.png'/>
</li>
<li><input id='Articles' type='checkbox'/>Articles</li>
<li><input id='Tutorials' type='checkbox'/>Tutorials</li>

<li><input id='Reviews' type='checkbox'/>Reviews</li>
<li><input id='Resources' type='checkbox'/>Resources</li>
<li class='last'>
<img alt='' class='corner_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_left.png'/>
<img alt='' class='middle' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/dot.gif'/>
<img alt='' class='corner_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_right.png'/>
</li>
</ul>

</li>
</ul>
<img alt='' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/menu_right.png' style='float:left;'/>
</div>
</div>

Keterangan :
Kode yang terdapat pada langkah ke-4 masukkan pada HTML Blogger Template Anda, tetapi lebih baik penempatan Mega Drop Down Menus pada Header Template.

Referensi Artikel :

1. Create Vimeo-like top navigation.
   Link : http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx


2. 38 jQuery And CSS Drop Down Multi Level Menu Solutions.
   Link : http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/

READ MORE - Cara membuat , cara mengedit, cara setting dan cara menerapkan Vimeo-like Top Mega Menus Navigation pada Blogger Template ( Create Setting Mega Menu )