nadiacss: Navigasi

Tampilkan postingan dengan label Navigasi. Tampilkan semua postingan

Jumat, 13 Desember 2013

CSS Animasi Menu Dropdown Blogger

CSS Animasi Menu Dropdown Blogger – pada tutorial ini setelah lama tidak membahas tentang menu navigasi blogger maka sekarang sedikit akan saya jelaskan tentang CSS animasi dropdown menu yang terpasang pada template Darkforyou dan Bluesforyou. Untuk membuat animasi menu dropdown ini tidak memerlukan adanya jquery dan disinilah letak kehebatan fitur CSS transition untuk membuat animasi CSS yang berjalan secara halus dengan mengatur efek pada transition-delay. Berikut lebih jelasnya untuk memasang CSS Animasi Menu Dropdown Blogger ke dalam blog.

1. Login ke akun blogger lalu masuk ke Edit HTML template.
2. Lalu taruh kode CSS berikut ini di atas kode ]]></b:skin>

.menu,.menu ul{list-style:none;margin:0;padding:0}
.menu{background:#252525;height:35px;width:100%;border-bottom:2px solid #181818;border-top:2px solid #303030}
.menu li{background:#252525}
.menu &gt; li{display:block;float:left;position:relative;box-shadow:2px 0 0 0 rgba(51,51,51,1)}
.menu a{border-left:3px solid rgba(0,0,0,0);color:gray;display:block;font-family:Electrolize,sans-serif;font-size:18px;line-height:35px;text-decoration:none;text-transform:uppercase;padding:0 25px}
.menu a:first-letter{color:#0091d6}
.menu li:hover{background-color:#1c1c1c}
.menu li:hover &gt; a{border-left:3px solid #0091d6;color:#fff}
.submenu{left:0;max-height:0;position:absolute;top:100%;z-index:0;perspective:400px;width:200%}
.submenu li{opacity:0;transform:rotateY(90deg);transition:opacity .4s, transform .5s;border-bottom:2px solid #181818;border-top:2px solid #303030}
.menu .submenu li:hover a{border-left:3px solid #454545;color:#fff}
.menu &gt; li:hover .submenu,.menu &gt; li:focus .submenu{max-height:2000px;z-index:10}
.menu &gt; li:hover .submenu li,.menu &gt; li:focus .submenu li{opacity:1;transform:none}
.menu li:hover .submenu li:nth-child(1){transition-delay:0s}
.menu li:hover .submenu li:nth-child(2){transition-delay:50ms}
.menu li:hover .submenu li:nth-child(3){transition-delay:100ms}
.menu li:hover .submenu li:nth-child(4){transition-delay:150ms}
.menu li:hover .submenu li:nth-child(5){transition-delay:200ms}
.menu li:hover .submenu li:nth-child(6){transition-delay:250ms}
.menu li:hover .submenu li:nth-child(7){transition-delay:300ms}
.menu li:hover .submenu li:nth-child(8){transition-delay:350ms}
.submenu li:nth-child(1){transition-delay:350ms}
.submenu li:nth-child(2){transition-delay:300ms}
.submenu li:nth-child(3){transition-delay:250ms}
.submenu li:nth-child(4){transition-delay:200ms}
.submenu li:nth-child(5){transition-delay:150ms}
.submenu li:nth-child(6){transition-delay:100ms}
.submenu li:nth-child(7){transition-delay:50ms}
.submenu li:nth-child(8){transition-delay:0s}
.menu &gt; li:nth-child(1) {border-right:2px solid #111}
.menu &gt; li:nth-child(2),.menu &gt; li:nth-child(3),.menu &gt; li:nth-child(4),.menu &gt; li:nth-child(5),.menu &gt; li:nth-child(6),.menu &gt; li:nth-child(7),.menu &gt; li:nth-child(8){border-right:2px solid #111;border-left:2px solid #333}

3. Selanjutnya untuk menampilkan menu ini dibawah header, jika menggunakan struktur template HTML5 maka cari kode </header> lalu taruh kode berikut ini tepat di bawahnya. Cara lain, bisa juga dengan menaruh kode berikut tepat di atas kode <div id='main-wrapper'> atau <article id='main-wrapper'>

<nav>
<ul class='menu'>
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><a href='#'>Menu 1</a>
        <ul class='submenu'>
            <li><a href='#'>Submenu a</a></li>
            <li><a href='#'>Submenu b</a></li>
            <li><a href='#'>Submenu c</a></li>
            <li><a href='#'>Submenu d</a></li>
            <li><a href='#'>Submenu e</a></li>
            <li><a href='#'>Submenu f</a></li>
            <li><a href='#'>Submenu g</a></li>
            <li><a href='#'>Submenu h</a></li>
        </ul>
    </li>
    <li class='active'><a href='#'>Menu 2</a>
        <ul class='submenu'>
            <li><a href='#'>Submenu a</a></li>
            <li><a href='#'>Submenu b</a></li>
            <li><a href='#'>Submenu c</a></li>
            <li><a href='#'>Submenu d</a></li>
            <li><a href='#'>Submenu e</a></li>
            <li><a href='#'>Submenu f</a></li>
            <li><a href='#'>Submenu g</a></li>
            <li><a href='#'>Submenu h</a></li>
        </ul>
    </li>
    <li><a href='#'>Menu 3</a>
        <ul class='submenu'>
            <li><a href='#'>Submenu a</a></li>
            <li><a href='#'>Submenu b</a></li>
            <li><a href='#'>Submenu c</a></li>
            <li><a href='#'>Submenu d</a></li>
            <li><a href='#'>Submenu e</a></li>
            <li><a href='#'>Submenu f</a></li>
            <li><a href='#'>Submenu g</a></li>
            <li><a href='#'>Submenu h</a></li>
        </ul>
    </li>
    <li><a href='#'>Menu 4</a></li>
    <li><a href='#'>Menu 5</a></li>
</ul>
</nav>

4. Langkah terakhir Simpan template.

Demikian tutorial sederhana untuk membuat CSS Animasi Menu Dropdown Blogger. Harapan saya setelah anda mengenal satu per satu elemen kode pada template maka anda bisa berkreasi sendiri untuk membuat tampilan blog seperti keinginan kreasi masing-masing.

Rabu, 11 Desember 2013

Page Number Navigation Blogger Valid HTML5

Page Number Navigation Blogger Valid HTML5 – untuk yang mengalami masalah validasi HTML5 pada widget number navigation yang terdapat pada bagian bawah list post homepage, berikut tutorial yang akan saya bahas pada tutorial ini agar nanti pada saat validasi HTML5 tidak terdeteksi masalah error pada widget number navigation. Pada saat validasi biasanya dibagian page number terdeteksi error pada kode & yang terdapat pada JS, sedangkan untuk mengatasi masalah tersebut sangatlah sepele dan bisa langsung kita atasi dengan mudah. Berikut cara sederhana untuk mengatasi page number navigation yang belum valid HTML5. Cari bagian kode & yang terdeteksi error lalu jika sudah ditemukan ganti dengan kode &, kode tersebut biasanya tidak hanya satu namun ada beberapa kode. Selanjutnya ubah pada keseluruhan kode yang di perlukan agar tidak terjadi lagi error saat validasi HTML5. Atau jika ada yang belum memasang dan ingin menggunakan widget number navigation pada blog berikut cara membuat Page Number Navigation Blogger Valid HTML5.

1. Login ke akun blogger lalu masuk ke Edit HTML template.
2. Copy kode CSS berikut ini lalu taruh diatas kode ]]></b:skin>

.showpageArea{position:relative;display:block;padding:0;margin:0 7px 40px 0}
.showpageArea a{position:relative;background:#111;color:#fff;padding:10px;top:0;float:left}
.showpageOf,.showpagePoint{position:relative;color:#63C4F1;background:#111;padding:10px;float:left}
.showpageOf{display:none;float:right}

3. Selanjutnya cari kode berikut ini.

<b:section class='main' id='main' showaddelement='no'>
...............................................
</b:section>

Tampilan lengkapnya kode tersebut seperti pada screenshot dibawah ini

4. Lalu copy kode berikut ini kemudian paste di bawah kode </b:section>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
&lt;script type='text/javascript'&gt;
var home_page_url = location.href;
var pageCount=15;
var displayPageNum=10;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
function showpageCount(json) { var thisUrl = home_page_url; var htmlMap = new Array(); var thisNum = 1; var postNum=1; var itemCount = 0; var fFlag = 0; var eFlag = 0; var html= &#39;&#39;; var upPageHtml =&#39;&#39;; var downPageHtml =&#39;&#39;; for(var i=0, post; post = json.feed.entry[i]; i++) {var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1);var title = post.title.$t;if(title!=&#39;&#39;){ if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; }if(title!=&#39;&#39;) postNum++; htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;&amp;amp;max-results=&#39;+pageCount; } }itemCount++;}for(var p =0;p&lt; htmlMap.length;p++){ if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){ if(fFlag ==0 &amp;&amp; p == thisNum-2){ if(thisNum==2){ upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; }else{ upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; } fFlag++; } if(p==(thisNum-1)){ html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;; }else{ if(p==0){ html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;}else{ html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; }}if(eFlag ==0 &amp;&amp; p == thisNum){ downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; eFlag++; }}} if(thisNum&gt;1){ html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;; }html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span class=&quot;showpageOf&quot;&gt;Pages [&#39;+(postNum-1)+&#39;]&lt;/span&gt;&#39;+html; if(thisNum&lt;(postNum-1)){ html += downPageHtml; }if(postNum==1) postNum++; html += &#39;&lt;/div&gt;&#39;; var pageArea = document.getElementsByName(&quot;pageArea&quot;); var blogPager = document.getElementById(&quot;blog-pager&quot;); if(postNum &lt;= 2){ html =&#39;&#39;; }for(var p =0;p&lt; pageArea.length;p++){ pageArea[p].innerHTML = html; }if(pageArea&amp;&amp;pageArea.length&gt;0){ html =&#39;&#39;; }if(blogPager){ blogPager.innerHTML = html; }} function showpageCount2(json) { var thisUrl = home_page_url; var htmlMap = new Array(); var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1; var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;; thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable; var thisNum = 1; var postNum=1; var itemCount = 0; var fFlag = 0; var eFlag = 0; var html= &#39;&#39;; var upPageHtml =&#39;&#39;; var downPageHtml =&#39;&#39;; var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;; var thisUrl = home_page_url; for(var i=0, post; post = json.feed.entry[i]; i++) { var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1); var title = post.title.$t; if(title!=&#39;&#39;){ if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } if(title!=&#39;&#39;) postNum++; htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;&amp;amp;max-results=&#39;+pageCount; }}itemCount++;} for(var p =0;p&lt; htmlMap.length;p++){ if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){ if(fFlag ==0 &amp;&amp; p == thisNum-2){ if(thisNum==2){ upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; }else{ upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; }fFlag++;} if(p==(thisNum-1)){ html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;; }else{ if(p==0){ html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;; }else{ html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; }} if(eFlag ==0 &amp;&amp; p == thisNum){ downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; eFlag++; }}} if(thisNum&gt;1){ if(!isLablePage){ html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;; }else{ html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;; }} html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span class=&quot;showpageOf&quot;&gt; page(&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html; if(thisNum&lt;(postNum-1)){ html += downPageHtml; } if(postNum==1) postNum++; html += &#39;&lt;/div&gt;&#39;; var pageArea = document.getElementsByName(&quot;pageArea&quot;); var blogPager = document.getElementById(&quot;blog-pager&quot;); if(postNum &lt;= 2){ html =&#39;&#39;; } for(var p =0;p&lt; pageArea.length;p++){ pageArea[p].innerHTML = html; } if(pageArea&amp;&amp;pageArea.length&gt;0){ html =&#39;&#39;; } if(blogPager){ blogPager.innerHTML = html; }} &lt;/script&gt; &lt;script&gt; var thisUrl = home_page_url; if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){ if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){ var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;)); }else{ var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;amp;max&quot;)); }} var home_page = &quot;/&quot;; if (thisUrl.indexOf(&quot;?q=&quot;)==-1){ if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){ document.write(&#39;&lt;script src=&quot;&#39;+home_page+&#39;feeds/posts/summary?alt=json-in-script&amp;amp;callback=showpageCount&amp;amp;max-results=99999&quot; &gt;&lt;\/script&gt;&#39;) }else{document.write(&#39;&lt;script src=&quot;&#39;+home_page+&#39;feeds/posts/full/-/&#39;+lblname1+&#39;?alt=json-in-script&amp;amp;callback=showpageCount2&amp;amp;max-results=99999&quot; &gt;&lt;\/script&gt;&#39;) }}
&lt;/script&gt; 
</b:if>
</b:if>
</b:if>

5. Terakhir Simpan template.

Selesai sudah untuk membuat Page Number Navigation Blogger Valid HTML5, dan apabila ingin merubah warna pada widget silahkan kreasikan sendiri pada bagian CSS.

Kamis, 10 Oktober 2013

Cara Membuat Navigasi Menu Full Color di Blog

Cara Membuat Navigasi Menu Full Color di Blog – setelah beberapa waktu lalu membaca komentar dari Bang Ancis maka timbul dalam pikiran untuk membagikan menu navigasi ini kepada siapapun yang ingin mencobanya dan mohon maaf Bang Ancis baru sekarang saya baru bisa share tutorial ini. Sebetulnya pada hari itu juga sudah langsung jadi namun apa daya seperti yang sudah saya katakan pada komentar sebelumnya. Untuk membagikan tutorial ini saya nunggu postingan yang sudah saya jadwalkan sebelumnya, harap di maklumi. Oke sekarang kembali ke inti tutorial, bagaimana cara untuk membuat navigasi menu full color di blog? Untuk membuat navigasi menu supaya menjadi full color atau warna-warni sebenarnya tidak susah. Membuat navigasi menu dengan warna yang berbeda-beda di setiap link menu sama saja khalayak membuat navigasi menu pada umumnya, hanya saja untuk membuat navigasi menu menjadi full color kita perlu menambahkan class yang berisi background untuk setiap warnanya pada link menu satu per satu. Namun biarpun begitu saya rasa hasilnya juga tidak cukup mengecewakan karena navigasi menu ini juga lumayan serasi di terapkan ke template blog, apalagi jika menggunakan template Metro UI. Untuk lebih jelasnya, berikut tutorial untuk Cara Membuat Navigasi Menu Full Color di Blog.

1. Login ke akun blogger.
2. Langsung menuju Template klik Edit HTML.
3. Copy kode CSS berikut ini, lalu taruh di atas kode ]]></b:skin> kemudian Simpan template.

.navmenu { background: #111; border-bottom: 5px solid #0091d6; position: relative; height:35px; margin: 0 auto; text-transform: uppercase; z-index: 1; }
ul.navfullcolor { list-style: none; padding: 0; font: 14px Arial; font-weight: bold; width:auto; line-height: 15px; margin: auto; }
ul.navfullcolor li { float: left; position: relative; margin: 0px 1px 0px 0px; }
ul.navfullcolor li a, ul.navfullcolor li a:link { color: #fff; text-decoration: none; display: block; padding: 10px 26px; transition: all 0.2s ease; }
ul.navfullcolor li a:hover { color: #fff; transition: all 1s ease; }
ul.navfullcolor li ul { display: none; top: 35px; border-top: 5px solid #FF8000; }
ul.navfullcolor li:hover ul { position: absolute; display: block; padding: 0; list-style: none; }
ul.navfullcolor li ul li { float: none; background: #282321; border-bottom: 1px solid #191614; border-top: 1px solid #3a3230; width:210px; }
ul.navfullcolor li ul li a, ul.navfullcolor li ul li a:link { color: #aaa; display: block; }
ul.navfullcolor li ul li a:hover { background: #FF8000; }
.green{background-color:#01A451 !important;} .green:hover{background-color:#52e052 !important;}
.yellow{background-color:#FBC700 !important;} .yellow:hover{background-color:#FFE500 !important;}
.red{background-color:#D52100 !important;} .red:hover{background-color:#ff0000 !important;}
.purple{background-color:#660099 !important;} .purple:hover{background-color:#D580FE !important;}
.blue{background-color:#0091d6 !important;} .blue:hover{background-color:#80C8FE !important;}

4. Selanjutnya taruh HTML ke dalam template, letaknya bisa menyesuaikan template lama atau agar lebih mudah masuk Tata Letak > Tambah Widget > HTML/Javascript.
5. Copy kode berikut ini, lalu paste ke dalam widget HTML/Javascript kemudian klik Simpan.

<div class='navmenu'>
<ul class='navfullcolor'>
    <li><a expr:href='data:blog.homepageUrl' class='blue'>Home</a></li>
    <li><a href='http://mas-andes.blogspot.com' class='red'>Menu 1</a>
        <ul>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>
        </ul>
    </li>
    <li><a href='http://mas-andes.blogspot.com' class='yellow'>Menu 2</a>
        <ul>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
        </ul>
    </li>
    <li><a href='http://mas-andes.blogspot.com' class='green'>Menu 3</a>
        <ul>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
        </ul>
    </li>
    <li><a href='http://mas-andes.blogspot.com' class='purple'>Menu 4</a>
        <ul>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
        </ul>
    </li>
    <li><a href='http://mas-andes.blogspot.com' class='red'>Menu 5</a></li>
    <li><a href='http://mas-andes.blogspot.com' class='yellow'>Menu 6</a></li>
    <li><a href='http://mas-andes.blogspot.com' class='green'>Menu 7</a></li>
</ul>
</div>

Keterangan:
Ganti http://mas-andes.blogspot.com dengan label link blog anda.

6. Setelah tersimpan silahkan lihat hasilnya.

Apabila bagi yang masih kesulitan dalam melakukan Edit HTML template, bisa langsung memasukan seluruh kode diatas ke dalam widget HTML/Javascript agar lebih mudah. Caranya seperti di bawah ini:

<style type="text/css" scoped>

Taruh CSS yang terdapat pada point 3 disini

</style>

Taruh HTML yang terdapat pada point 5 disini

Kemudian Simpan.

Demikian tutorial untuk Cara Membuat Navigasi Menu Full Color di Blog, lakukan yang mana yang lebih mudah. Akhir kata hanya bisa saya sampaikan untuk sedikit motivasi “Not an error when you try and then fail. The only mistake is when you do not dare try for fear of failure”. Sekian dan keep blogging!

Minggu, 06 Oktober 2013

Cara Membuat Floating (Fixed) Menu di Blog

Cara Membuat Floating (Fixed) Menu di Blog – jika sebelumnya sudah pernah membaca artikel cara membuat navigasi floating menu di blog saya yakin pasti sudah tahu maksud dari judul di atas mengenai apa itu floating menu atau fixed menu. Secara singkatnya floating atau fixed menu merupakan sebuah navigasi menu yang terdapat pada sebuah blog dan letaknya biasanya di taruh pada bagian atas header bilamana fungsi scroll pada mouse di geser menu tersebut akan tetap nampak pada posisi seperti semula karena menu tersebut tidak bergeser mengikuti arah scroll mouse. Tidak sedikit blogger yang menggunakan floating atau fixed menu untuk mempercantik desain blog mereka dan memudahkan visitor dalam menemukan artikel yang mereka cari didalam menu navigasi yang sudah tersusun. Yang lebih menarik lagi pada floating menu ini memiliki style hover 3D yang cukup pada saat akan menampilkan drop down menu. Cara pemasangan floating menu atau fixed menu ini juga cukup mudah, sama seperti cara memasang navigasi menu biasanya. Apabila ingin menerapkan ke dalam blog, berikut langkah-langkah Cara Membuat Floating (Fixed) Menu di Blog pada blog.

Demo

1. Login terlebih dahulu ke akun blogger.
2. Kemudian pada template pilih Edit HTML.
3. Lalu copy kode CSS berikut ini lalu taruh di atas kode ]]></b:skin>

#menufixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
.menu3Dflip {margin:0 auto; text-align:center; position:relative; height:40px; z-index:999; background:#0091d6; -moz-perspective: 100px; -webkit-perspective: 100px; -o-perspective: 100px; perspective: 100px; }
.menu3Dflip ul.nav li {display:inline-block; display:inline;}
.menu3Dflip ul.nav {padding:0; margin:0; list-style:none; display:inline-block; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; }
.menu3Dflip ul.nav li {float:left; display:block; padding:0 4px;}
.menu3Dflip ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menu3Dflip ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menu3Dflip ul.nav li a.top-a b {display:block; padding:0 20px; font:bold 14px/30px arial, sans-serif; color:#fff;}
.menu3Dflip ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }
.menu3Dflip ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0; border-radius:0 0 15px 15px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -moz-transform-origin: 0px 0px; -moz-transform: rotateX(-90deg); -webkit-transform-origin: 0px 0px; -webkit-transform: rotateX(-90deg); -o-transform-origin: 0px 0px; -o-transform: rotateX(-90deg); transform-origin: 0px 0px; transform: rotateX(-90deg); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; }
.menu3Dflip ul.nav div.left {left:auto; right:4px;} .menu3Dflip ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }
.menu3Dflip ul.nav div ul.colLeft {margin-left:10px;}
.menu3Dflip ul.nav div ul.colRight {margin-right:10px;}
.menu3Dflip ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menu3Dflip ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menu3Dflip ul.nav div ul li:last-child {border:0;}
.menu3Dflip ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifRX7GTMCFHEfkUJYYxfXutCENO-mKAeM46ci2PE1jgYBuUROZznhHRxZfSaE0TOZ7zRAUKrV7NK8spGtottJy5rFle7RWTSwy8wzPFQhosolT0jN3VrDy4l2FCYvsRhTMvWKwTuVE0uU/h120/arrow.gif) no-repeat left center;}
.menu3Dflip ul.nav div ul li a:hover {color:#09c; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifRX7GTMCFHEfkUJYYxfXutCENO-mKAeM46ci2PE1jgYBuUROZznhHRxZfSaE0TOZ7zRAUKrV7NK8spGtottJy5rFle7RWTSwy8wzPFQhosolT0jN3VrDy4l2FCYvsRhTMvWKwTuVE0uU/h120/arrow.gif) no-repeat 1px center;}
.menu3Dflip ul.nav div.col1 {width:160px;}
.menu3Dflip ul.nav div.col2 {width:310px;}
.menu3Dflip ul.nav div.col3 {width:460px;}
.menu3Dflip ul.nav li:hover div { -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); }

4. Selanjutnya copy kode HTML berikut ini lalu taruh di bawah kode <body> atau bisa juga ke dalam widget HTML/Javascript.

<div id='menufixed'>
<div class='menu3Dflip'>
    <ul class='nav'>
        <li><a class='top-a' href='http://mas-andes.blogspot.com'><b>Home</b></a></li>
        <li><a class='top-a' href='http://mas-andes.blogspot.com'><b>Menu 1</b></a>
        <div class='col3'>
            <ul class='colLeft'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>
            </ul>
            <ul class='col'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 6</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 7</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 8</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 9</a></li>
            </ul>
            <ul class='colRight'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 10</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 11</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 12</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 13</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='http://mas-andes.blogspot.com'><b>Menu 2</b></a>
        <div class='col2'>
            <ul class='colLeft'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>
            </ul>
            <ul class='colRight'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 6</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 7</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 8</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 9</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='http://mas-andes.blogspot.com'><b>Menu 3</b></a>
        <div class='col1'>
            <ul class='colSingle'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='http://mas-andes.blogspot.com'><b>Menu 4</b></a>
        <div class='col2 left'>
            <ul class='colLeft'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
            </ul>
            <ul class='colRight'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 6</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 7</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 8</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 9</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='http://mas-andes.blogspot.com'><b>Menu 5</b></a></li>
    </ul>
</div>
</div>

Keterangan:
Ganti http://mas-andes.blogspot.com dengan URL link blog anda.

5. Langkah terakhir Simpan template dan selesai sudah bisa di lihat hasilnya.

Bagi yang ingin memasang floating menu atau fixed menu ini namun tidak perlu masuk Edit HTML template, maka bisa juga langsung menaruh seluruh kode diatas ke dalam widget HTML/Javascript. Caranya gabungkan antara CSS dan HTML namun sebelumnya jangan lupa untuk menambahkan kode <style type="text/css"> pada awal CSS dan tambahkan juga kode </style> pada akhir CSS. Selanjutnya kode HTML yang terdapat pada point 4 taruh dibawahnya kode </style> langkah terakhir klik Simpan.

Senin, 30 September 2013

Cara Membuat Animasi Menu Drop Down di Blog

Cara Membuat Animasi Menu Drop Down di Blog – kaitannya dengan menu navigasi blog, setelah pada tutorial sebelumnya sudah membahas mengenai cara membuat menu navigasi with form search yang tidak lain pada navigasi menu tersebut tidak berbeda jauh dengan navigasi menu yang saya gunakan pada blog ini. Untuk memodifikasi sebuah menu navigasi pada blog maka pada tutorial ini saya kembali share tentang bagaimana cara untuk membuat animasi pada menu drop down serta langkah-langkah cara menerapkannya ke dalam blog. Untuk memasang menu navigasi drop down dengan efek animasi ke dalam blog langkahnya cukup mudah dan simple, anda hanya perlu menambahkan sedikit kode kedalam template dengan mengikuti petunjuk yang ada dibawah. Untuk melihat hasilnya dari tutorial menu navigasi ini bisa terlebih dahulu melihat demo yang sudah saya sertakan pada akhir artikel dibawah. Apabila ingin memasangnya ke blog, berikut tutorial untuk Cara Membuat Animasi Menu Drop Down di Blog.

1. Login ke blogger.
2. Masuk ke menu template dan pilih Edit HTML.
3. Copy kode berikut ini lalu taruh di atas kode ]]></b:skin>

#nav_menu { font:bold 13px verdana; height: 35px; list-style: none; padding: 0px; margin: 0px auto; background:#0091d6; }
#nav_menu ul { left: -9999px; position: absolute; top: -9999px; z-index: 1; }
#nav_menu li { border-right: 1px solid #111; display: block; float: left; height: 35px; position: relative; width: 105px; }
#nav_menu li a { color: #fff; display: block; line-height: 35px; text-align: center; text-decoration: none; background-color:#0091d6; }
#nav_menu li a:hover{ background-color:#222; }
@-webkit-keyframes animation1 { 0% { -webkit-transform: scale(1); } 30% { -webkit-transform: scale(1.3); } 100% { -webkit-transform: scale(1); } }
@-moz-keyframes animation1 { 0% { -moz-transform: scale(1); } 30% { -moz-transform: scale(1.3); } 100% { -moz-transform: scale(1); } }
#nav_menu li > a:hover { -moz-animation-name: animation1; -moz-animation-duration: 0.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation1; -webkit-animation-duration: 0.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; }
#nav_menu li:hover > a { z-index: 4; }
#nav_menu li:hover ul.sub { padding: 0; left: 0; top: 35px; width: 200px; }
#nav_menu ul li { background: none repeat scroll 0 0 #838383; opacity: 0; width: 100%; }
#nav_menu ul li a{ text-align: left; padding-left: 10px; border-top: 1px solid #333; background:#222; }
#nav_menu ul li a:hover{ background:#111; }
@-webkit-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } }
@-moz-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } }
#nav_menu li:hover ul li { -moz-animation-name: animation2; -moz-animation-duration: 0.3s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation2; -webkit-animation-duration: 0.3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; }
#nav_menu li:hover ul li:nth-child(1) { -moz-animation-delay: 0; -webkit-animation-delay: 0; }
#nav_menu li:hover ul li:nth-child(2) { -moz-animation-delay: 0.05s; -webkit-animation-delay: 0.05s; }
#nav_menu li:hover ul li:nth-child(3) { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; }
#nav_menu li:hover ul li:nth-child(4) { -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.15s; }
#nav_menu li:hover ul li:nth-child(5) { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; }
#nav_menu li:hover ul li:nth-child(6) { -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; }
#nav_menu li:hover ul li:nth-child(7) { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; }
#nav_menu li:hover ul li:nth-child(8) { -moz-animation-delay: 0.35s; -webkit-animation-delay: 0.35s; }

4. Copy kode berikut ini lalu paste kedalam Widget HTML/Javascript.

<ul id='nav_menu'>
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><a href='http://mas-andes.blogspot.com'>Menu 1</a>
        <ul class='sub'>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 6</a></li>
        </ul>
    </li>
    <li><a href='http://mas-andes.blogspot.com'>Menu 2</a>
        <ul class='sub'>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>
        </ul>
    </li>
    <li><a href='http://mas-andes.blogspot.com'>Menu 3</a>
        <ul class='sub'>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
        </ul>
    </li>
    <li><a href='http://mas-andes.blogspot.com'>Menu 4</a>
    </li>
</ul>

Keterangan:
Ganti http://mas-andes.blogspot.com dengan label link pada blog anda.

5. Langkah terakhir klik Simpan dan hasilnya akan seperti pada dibawah ini.

Demikian tutorial untuk Cara Membuat Animasi Menu Drop Down di Blog, apabila ingin merubah misal pada warna atau font maupun lainnya silahkan bisa di custom sendiri.

Kamis, 26 September 2013

Membuat Menu Navigasi With Form Search di Blog

Membuat Menu Navigasi With Form Search di Blog – untuk sebagian blogger yang sudah menggunakan template dari situs penyedia template biasanya sudah dilengkapi navigasi menu dengan kotak pencariannya. Namun bagaimana jika yang masih menggunakan menu navigasi masih standar dan ingin di buat sejajar dengan kotak pencarian atau search form, ini dia yang akan saya pada tutorial ini. Untuk membuat navigasi menu horisontal supaya sejajar dengan form search atau kotak pencarian tidaklah terlalu sulit. Form search dapat kita custom sedemikian rupa agar tidak perlu lagi menambahkan default widget kotak pencarian blogger yang masih sederhana. Tampilan atau warna menu nevigasi ini seperti yang terlihat pada gambar di atas, sedangkan efeknya sama seperti pada navigasi yang saya gunakan pada blog ini. Untuk lebih detailnya berikut tutorial untuk Membuat Menu Navigasi With Form Search di Blog.

1. Login ke blogger.
2. Masuk ke Edit HTML template.
3. Copy kode berikut ini lalu taruh di atas kode ]]></b:skin>

#panelnav { background: darkgreen; width: 100%; position: relative; height:37px; margin: auto; z-index:999; }
#navmenu,#navmenu ul { list-style:none; margin:0; padding:0; }
#navmenu { position:relative; width:auto; background-color:darkgreen; }
#navmenu ul { height:0; left:0; overflow:hidden; position:absolute; top:37px; }
#navmenu li { float:left; position:relative; }
#navmenu li a { background-color:darkgreen; border-right:1px solid green; color:#fff; display:block; font:bold 14px Arial; line-height:27px; padding:5px 20px; text-decoration:none; transition:0.5s; }
#navmenu li:hover > a { background:#222; }
#navmenu li:hover ul.submenu { height:auto; width:200px; }
#navmenu ul li { opacity:0; transition:0.5s; width:100%; }
#navmenu li ul li { transition-delay:0s; }
#navmenu li:hover ul li { opacity:1; transition-delay:0.5s; }
#navmenu ul li a { background:#222; border-top:1px solid #333; border-bottom:1px solid #111; color:#fff; line-height:1px; transition:1.5s; }
#navmenu li:hover ul li a { line-height:25px; }
#navmenu ul li a:hover { background:darkgreen; }
#searchform    {float:right; height: 30px; margin:3px}
#searchform input.field {background-position:right; background-repeat:no-repeat; width: 200px; padding:7px; outline: none; font: 13px Georgia; font-style: italic; border: none; z-index: 1; height:16px; float:left; padding-right:30px;}
#searchform input.field {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzs9lLqP6P3nvoAy1dlXLvl9-iFOkD6Xnyjt4NWysSNLBthcEsZV3ZNt4OK1IkINcX83LlFuzwNp0Ued3YN5r2j1VD5gb6QbpzHzfE9uRU-QP2mpFnmrKC5F8z0BSSts99mKHj-6-H-rxG/s30/search_icon.png); 
background-color:#222; color: #fff;}
#searchform input.field:focus {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzs9lLqP6P3nvoAy1dlXLvl9-iFOkD6Xnyjt4NWysSNLBthcEsZV3ZNt4OK1IkINcX83LlFuzwNp0Ued3YN5r2j1VD5gb6QbpzHzfE9uRU-QP2mpFnmrKC5F8z0BSSts99mKHj-6-H-rxG/s30/search_icon.png); 
background-color:#333; background-position:right; background-repeat:no-repeat;}
#searchform input.submit {background-color:#52e052; color:#000; width:70px; height:30px; float:left; border:none; font: 13px Arial; font-weight:bold; cursor:pointer; margin:0 0 0 1px;}

4. Copy kode berikut ini lalu paste kedalam Widget HTML/Javascript.

<div id='panelnav'>
    <ul id='navmenu'>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Menu 1</a>
            <ul class='submenu'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 6</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 7</a></li>
            </ul>
        </li>
        <li><a href='http://mas-andes.blogspot.com'>Menu 2</a>
            <ul class='submenu'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>
            </ul>
        </li>
        <li><a href='http://mas-andes.blogspot.com'>Menu 3</a>
            <ul class='submenu'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
            </ul>
        </li>
        <li><a href='http://mas-andes.blogspot.com'>Menu 4</a></li>
    </ul>
 <form action='/search' id='searchform' method='get'>
 <div><input class='field' id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter keywords..&apos;;}' onfocus='if (this.value == &apos;Enter keywords..&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter keywords..'/>
 <input class='submit' name='submit' type='submit' value='Search'/></div>
 </form>
</div>

Keterangan:
Ganti http://mas-andes.blogspot.com dengan label link blog anda.

5. Langkah terakhir Simpan dan lihat hasilnya.

Demikian tutorial cara Membuat Menu Navigasi With Form Search di Blog, apabila masih terdapat kekurangan silahkan bisa di custom kembali agar lebih menarik dan seperti selera yang di inginkan entah itu warna atau yang lainnya.

Senin, 16 September 2013

Cara Membuat Ajax Menu di Blog

Cara Membuat Ajax Menu di Blog – masih membahas seputar navigasi menu horisontal blog. Jika pada tutorial sebelumnya pada menu horisontal tersebut masih standar dan mungkin biasa-biasa saja, maka sekarang kita modifikasi navigasi menu tersebut agar lebih elegant pada platform Blogger dengan menggunakan Blogger JSON API dan AJAX sehingga navigasi menu ini bekerja berdasarkan jQuery library dan Blogger JSON API. Pengaturan lain juga bisa anda lakukan untuk membuat bagimana navigasi menu ini dapat bekerja dengan baik. Dalam artian navigasi menu ini bekerja seperti menu drop-down normal apabila javascript di nonaktifkan, sedangkan akan berubah menjadi menu drop-down bertenaga AJAX ketika javascript di aktifkan. Dibawah terdapat tiga style navigasi menu, jika ingin memasang ikuti saja langkah-langkah penerapannya sama. Untuk memasang menerapkan kedalam blog, berikut tutorial untuk Cara Membuat Ajax Menu di Blog.

1. Login ke akun blogger dahulu.
2. Masuk ke menu Template dan pilih Edit HTML.
3. Copy kode CSS berikut ini lalu paste di atas kode ]]></b:skin>

.menunavblue *{margin: 0;padding: 0;}
ul.menunavblue {padding: 0;list-style: none;line-height: 1;overflow: visible !important;}
ul.menunavblue:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.menunavblue li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.menunavblue li a{background:#0098CA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY0vOP6ufa4jrZcSEgo1f6CeGnRRQIdUJ_RI4hUtPUUpxw3w2Efj7epTf2L-qhsA6oV5sSYlkhU4aW6ZjLJvxotx9g1n7ZADiZRrA0fRyAEwgMTrZ1aIAz3xAbcPac6MmzGiQbEjjSfwo/h108/blue.gif);text-decoration:none;margin: 0;padding: 11px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #000 !important;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;}
ul.menunavblue li a:hover,ul.menunavblue li a.hoverover{ background-position: 0% -60px;}
ul.menunavblue ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.menunavblue li:hover > ul{display: block;}
ul.menunavblue ul li{float: none;min-width: 160px;background:#3BBAE5;text-shadow: none;}
ul.menunavblue ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.menunavblue ul li a:hover,ul.menunavblue ul li a.hoverover{ background-position: 0% -60px;}
ul.menunavblue ul ul{display: none;left: 100%;top: 0;}
ul.menunavblue li div.submenu {box-shadow: 1px 1px 5px #3BBAE5;display: none;position: absolute;width: 600px;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #ffffff;border-top: none;}
ul.menunavblue li:hover div.submenu {display: block;}
ul.menunavblue ul ,ul.menunavblue ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.menunavblue ul li{background: none !important;float: none !important;}
ul.menunavblue ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #3BBAE5;}
ul.menunavblue ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.menunavblue ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.menunavblue ul.postslist li:last-child{border-bottom: none 0;}
ul.menunavblue ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #3BBAE5;font-size: 0;line-height: 0;}
ul.menunavblue ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.menunavblue ul.postslist li a{background: none;display: block;line-height: 1.4;padding: 0 !important;}
ul.menunavblue .loader{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkN45fsuB_58S_YF10E95gQr942KQzpiFt_sOYVDPnUraca_Er1gX-hIk-OtFA741BvubL58PlqmQrN2-z91f4KlkLduUU9X16Y8oMMCQpnhmkqz6WR1Ti5sPvDXXmHNKIPKSTIXv3OKw/h120/loading.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.menunavblue .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #000;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#menunavblue {background:#0098CA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim7TloR8KDVS0ShNPnrd8cmX2sy0yko-l90v3Yoj7BA9HCgqeqq1lNyrxdD6kyX2JeLJr7Jp_85fSR9INMGmIA2R53t8bUEyihQiAWtNutu1TAn6Gl1kljlSCChIGNWU1fD3Jkru9O_ak/h120/bluebg.gif);background-position: 0% -1px;border: 1px solid #3BBAE5;}
.end{ width:2px;}

4. Selanjutnya copy Javascript berikut ini lalu paste di atas kode </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/ajaxbloggermenu.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#menunavblue').ajaxBloggerMenu({
numPosts : 4, // Maksimal tampilan jumlah posting
defaultImg : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLmPGULim-Zawu8wFY7CIs3FW08v68KkzJebxNjzOKP29Qs4JuhWd-v20IH8uLg28yz6dnoKNGyrWzd4kWWwZcwfPui_hRNfSVetCCxWyTzQ9t2V7BqcQDLDBIYMi6NeKmLpO6aR9lDlE/w140-h140-p/no-image.png' // Default thumbnail Image
});
});
</script>

5. Copy kode HTML berikut ini lalu taruh kedalam widget caranya seperti biasa, klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode tersebut kemudian klik Simpan.

<ul id='menunavblue' class='menunavblue'>
 <li><a expr:href='data:blog.homepageUrl' title='Halaman Utama'>Home</a></li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Komputer' target='_blank' title='Komputer'>Komputer</a>
    <ul class='submenu'>
    <li><a href='http://mas-andes.blogspot.com/search/label/Software' target='_blank' title='Software'>Software</a></li>
     <li><a href='http://mas-andes.blogspot.com/search/label/Networking' target='_blank' title='Networking'>Networking</a></li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Pemrograman' target='_blank' title='Programming'>Programming</a></li>
</ul>
</li>
 <li><a href='http://mas-andes.blogspot.com/search/label/CSS' target='_blank' title='CSS'>CSS</a>
<ul class='submenu'>
 <li><a href='http://mas-andes.blogspot.com/search/label/Slider' target='_blank' title='Slider'>Slider</a></li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Navigasi' target='_blank' title='Navigasi'>Navigasi</a></li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Image%20Effect' target='_blank' title='Image Effect'>Image Effect</a></li>
</ul>
</li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Tips%20Trik%20Blogger' target='_blank' title='Blogging'>Blogging</a>
    <ul class='submenu'>
     <li><a href='http://mas-andes.blogspot.com/search/label/HTML' target='_blank' title='HTML'>HTML</a></li>
     <li><a href='http://mas-andes.blogspot.com/search/label/Jquery' target='_blank' title='jQuery'>jQuery</a></li>
     <li><a href='http://mas-andes.blogspot.com/search/label/Widget' target='_blank' title='Widget Blog'>Widget Blog</a></li>
    </ul>
</li>
<li><a href='http://mas-andes.blogspot.com/search/label/SEO' target='_blank' title='SEO'>SEO</a></li>
<li><a href='http://mas-andes.blogspot.com/p/blog-page_8467.html' target='_blank' title='Sitemap'>Sitemap</a></li>
<li><a class="end">&nbsp;</a></li>
</ul>

Seluruh link di atas silahkan ganti dengan link label pada blog anda.

Setelah semua terpasang dengan benar maka navigasi menu hasilnya akan tampak seperti berikut ini:

Sedangkan apabila ingin memasang dengan warna lain seperti pada dibawah ini, langkah-langkah cara pemasangannya juga sama persis seperti pada yang sudah diterangkan pada point 1-5 diatas. Berikut demo dan source kode menunya:

Berikut kodenya:
CSS*

.menunavred *{margin: 0;padding: 0;}
ul.menunavred {padding: 0;list-style: none;line-height: 1;overflow: visible !important;}
ul.menunavred:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.menunavred li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.menunavred li a{background:#9A0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9bC0Ey4gIWNdaMLBZ_iiZ0NARRPZrCvUfe0oqEDPNwSo1_dG1VLiV5VLf3NBIGYLhrHfN59eOX_k6gL90j83Bp9aV7d_H3n4ZpGZX-7OECromwyHbAHZNB_kUs-vHLHLuL4DHO0OlUog/h108/bg.gif);text-decoration:none;margin: 0;padding: 11px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #000 !important;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: none !important;}
ul.menunavred li a:hover,ul.menunavred li a.hoverover{background: #e75921 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp3Xvx96aUxTbYAjUspk3cugMANTMatW5ByQvma2bHKrKM0hP8-bfeTZxfbfzRJMh6dkMVNvUo1r0u_Deke8e2DfTsKlCCLUY1EtJRmbSCAXOrqvNfeALZT0dpgfySECBDVLw1qu9yJlk/h120/bg_red.png);}
ul.menunavred ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.menunavred li:hover > ul{display: block;}
ul.menunavred ul li{float: none;min-width: 160px;background:#e75921;text-shadow: none;}
ul.menunavred ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.menunavred ul li a:hover,ul.navmenured ul li a.hoverover{background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp3Xvx96aUxTbYAjUspk3cugMANTMatW5ByQvma2bHKrKM0hP8-bfeTZxfbfzRJMh6dkMVNvUo1r0u_Deke8e2DfTsKlCCLUY1EtJRmbSCAXOrqvNfeALZT0dpgfySECBDVLw1qu9yJlk/h120/bg_red.png);}
ul.menunavred ul ul{display: none;left: 100%;top: 0;}
ul.navmenured li div.submenu {box-shadow: 1px 1px 5px #e75921;display: none;position: absolute;width: 600px;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #ffffff;border-top: none;}
ul.navmenured li:hover div.submenu {display: block;}
ul.navmenured ul ,ul.navmenured ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.navmenured ul li{background: none !important;float: none !important;}
ul.navmenured ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #9A0000;}
ul.navmenured ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.navmenured ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.navmenured ul.postslist li:last-child{border-bottom: none 0;}
ul.navmenured ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #9A0000;font-size: 0;line-height: 0;}
ul.navmenured ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.navmenured ul.postslist li a{background: none;display: block;line-height: 1.4;padding: 0 !important;}
ul.navmenured .loader{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkN45fsuB_58S_YF10E95gQr942KQzpiFt_sOYVDPnUraca_Er1gX-hIk-OtFA741BvubL58PlqmQrN2-z91f4KlkLduUU9X16Y8oMMCQpnhmkqz6WR1Ti5sPvDXXmHNKIPKSTIXv3OKw/h120/loading.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.navmenured .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #000;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#navmenured {background:#9A0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG4Bf9hVO8K3NixvtZGPVEYvThRiCyl7sNtc5CDbyC_KkpU8F0s9i8NvsojX3LgjctdLDS3UzOG1ZlIDCAy69RCzZ4XZTyhJpes0C0H_DG9DLq5uJc9txj7CUR2Gwm1AU0bZE5TTDRBV4/h120/bg1.gif);border: 1px solid #e75921;}
.end{ width:2px;}

Javascript*

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/ajaxbloggermenu.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#navmenured').ajaxBloggerMenu({
numPosts : 4, // Maksimal tampilan jumlah posting
defaultImg : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLmPGULim-Zawu8wFY7CIs3FW08v68KkzJebxNjzOKP29Qs4JuhWd-v20IH8uLg28yz6dnoKNGyrWzd4kWWwZcwfPui_hRNfSVetCCxWyTzQ9t2V7BqcQDLDBIYMi6NeKmLpO6aR9lDlE/w140-h140-p/no-image.png' // Default thumbnail Image
});
});
</script>

HTML*

<ul id='navmenured' class='menunavred'>
 <li><a expr:href='data:blog.homepageUrl' title='Halaman Utama'>Home</a></li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Komputer' target='_blank' title='Komputer'>Komputer</a>
 <ul class='submenu'>
 <li><a href='http://mas-andes.blogspot.com/search/label/Software' target='_blank' title='Software'>Software</a></li>
  <li><a href='http://mas-andes.blogspot.com/search/label/Networking' target='_blank' title='Networking'>Networking</a></li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Pemrograman' target='_blank' title='Programming'>Programming</a></li>
</ul>
</li>
 <li><a href='http://mas-andes.blogspot.com/search/label/CSS' target='_blank' title='CSS'>CSS</a>
<ul class='submenu'>
 <li><a href='http://mas-andes.blogspot.com/search/label/Slider' target='_blank' title='Slider'>Slider</a></li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Navigasi' target='_blank' title='Navigasi'>Navigasi</a></li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Image%20Effect' target='_blank' title='Image Effect'>Image Effect</a></li>
</ul>
</li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Tips%20Trik%20Blogger' target='_blank' title='Blogging'>Blogging</a>
 <ul class='submenu'>
  <li><a href='http://mas-andes.blogspot.com/search/label/HTML' target='_blank' title='HTML'>HTML</a></li>
  <li><a href='http://mas-andes.blogspot.com/search/label/Jquery' target='_blank' title='jQuery'>jQuery</a></li>
  <li><a href='http://mas-andes.blogspot.com/search/label/Widget' target='_blank' title='Widget Blog'>Widget Blog</a></li>
 </ul>
</li>
<li><a href='http://mas-andes.blogspot.com/search/label/SEO' target='_blank' title='SEO'>SEO</a></li>
<li><a href='http://mas-andes.blogspot.com/p/blog-page_8467.html' target='_blank' title='Sitemap'>Sitemap</a></li>
<li><a class="end">&nbsp;</a></li>
</ul>

CSS*

.menunavgreen *{margin: 0;padding: 0;}
ul.menunavgreen {padding: 0;list-style: none;line-height: 1;overflow: visible !important;}
ul.menunavgreen:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.menunavgreen li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.menunavgreen li a{background:#52e052 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZLP-jx2rZF-MohYYEUCU3-x_IQAIgcUjosktVYcGaJV3ouQ3-fydtubS-Q3ReLFzkq3AVG1D8qNwGXfC94Mze1Qz5Ju-6eACJiAFJhkuSXMm_CWOGK9YBkSDNuhlUUu8e4ud4gZ8Cy4Q/h108/green.gif);text-decoration:none;margin: 0;padding: 11px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #000 !important;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;}
ul.menunavgreen li a:hover,ul.menunavgreen li a.hoverover{ background-position: 0% -60px;}
ul.menunavgreen ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.menunavgreen li:hover > ul{display: block;}
ul.menunavgreen ul li{float: none;min-width: 160px;background:#52e052;text-shadow: none;}
ul.menunavgreen ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.menunavgreen ul li a:hover,ul.menunavgreen ul li a.hoverover{ background-position: 0% -60px;}
ul.menunavgreen ul ul{display: none;left: 100%;top: 0;}
ul.menunavgreen li div.submenu {box-shadow: 1px 1px 5px #52e052;display: none;position: absolute;width: 600px;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #ffffff;border-top: none;}
ul.menunavgreen li:hover div.submenu {display: block;}
ul.menunavgreen ul ,ul.menunavgreen ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.menunavgreen ul li{background: none !important;float: none !important;}
ul.menunavgreen ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #2BAA2B;}
ul.menunavgreen ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.menunavgreen ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.menunavgreen ul.postslist li:last-child{border-bottom: none 0;}
ul.menunavgreen ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #52e052;font-size: 0;line-height: 0;}
ul.menunavgreen ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.menunavgreen ul.postslist li a{background: none;display: block;line-height: 1.4;padding: 0 !important;}
ul.menunavgreen .loader{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkN45fsuB_58S_YF10E95gQr942KQzpiFt_sOYVDPnUraca_Er1gX-hIk-OtFA741BvubL58PlqmQrN2-z91f4KlkLduUU9X16Y8oMMCQpnhmkqz6WR1Ti5sPvDXXmHNKIPKSTIXv3OKw/h120/loading.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.menunavgreen .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #000;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#menunavgreen {background:#52e052 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGqQmNqf4DzKt8gSLVibxEmQDMzAVxwonDPj-SRKXE19b2h1CiU1VcmhTKr3PtkM85toNbD7t-9pNzq-xT2CrnnLIP54MALxyowRn6BvNuzsVT4oiJwtxmP2fP65YXn1DjUC-IBpJ42t8/h120/greenbg.gif);background-position: 0% -1px;border: 1px solid #52e052;}
.end{ width:2px;}

Javascript*

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/ajaxmenublogger.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#menunavgreen').ajaxBloggerMenu({
numPosts : 4, // Maksimal tampilan jumlah posting
defaultImg : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLmPGULim-Zawu8wFY7CIs3FW08v68KkzJebxNjzOKP29Qs4JuhWd-v20IH8uLg28yz6dnoKNGyrWzd4kWWwZcwfPui_hRNfSVetCCxWyTzQ9t2V7BqcQDLDBIYMi6NeKmLpO6aR9lDlE/w140-h140-p/no-image.png' // Default thumbnail Image
});
});
</script>

HTML*

<ul id='menunavgreen' class='menunavgreen'>
 <li><a expr:href='data:blog.homepageUrl' title='Halaman Utama'>Home</a></li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Komputer' target='_blank' title='Komputer'>Komputer</a>
    <ul class='submenu'>
    <li><a href='http://mas-andes.blogspot.com/search/label/Software' target='_blank' title='Software'>Software</a></li>
     <li><a href='http://mas-andes.blogspot.com/search/label/Networking' target='_blank' title='Networking'>Networking</a></li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Pemrograman' target='_blank' title='Programming'>Programming</a></li>
</ul>
</li>
 <li><a href='http://mas-andes.blogspot.com/search/label/CSS' target='_blank' title='CSS'>CSS</a>
<ul class='submenu'>
 <li><a href='http://mas-andes.blogspot.com/search/label/Slider' target='_blank' title='Slider'>Slider</a></li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Navigasi' target='_blank' title='Navigasi'>Navigasi</a></li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Image%20Effect' target='_blank' title='Image Effect'>Image Effect</a></li>
</ul>
</li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Tips%20Trik%20Blogger' target='_blank' title='Blogging'>Blogging</a>
    <ul class='submenu'>
     <li><a href='http://mas-andes.blogspot.com/search/label/HTML' target='_blank' title='HTML'>HTML</a></li>
     <li><a href='http://mas-andes.blogspot.com/search/label/Jquery' target='_blank' title='jQuery'>jQuery</a></li>
     <li><a href='http://mas-andes.blogspot.com/search/label/Widget' target='_blank' title='Widget Blog'>Widget Blog</a></li>
    </ul>
</li>
<li><a href='http://mas-andes.blogspot.com/search/label/SEO' target='_blank' title='SEO'>SEO</a></li>
<li><a href='http://mas-andes.blogspot.com/p/blog-page_8467.html' target='_blank' title='Sitemap'>Sitemap</a></li>
<li><a class="end">&nbsp;</a></li>
</ul>