Modifikasi Widget Follower Blog Valid HTML5

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOH80RWQ0m3ZR5kbdWnnxh0333i21pfi-SIcm4DBjaViaPwhgG6LxmK6WqvuFAeHkoOvjExXboGS_UxdSe1KjSsFIhdFBeDlo678O8fxRcwKJGBbZOaG72qY_7s2O44o0o71VNTRHg3LM/s1600/widget-follower-blog-valid-html5.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Widget Follower Blog Valid HTML5" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOH80RWQ0m3ZR5kbdWnnxh0333i21pfi-SIcm4DBjaViaPwhgG6LxmK6WqvuFAeHkoOvjExXboGS_UxdSe1KjSsFIhdFBeDlo678O8fxRcwKJGBbZOaG72qY_7s2O44o0o71VNTRHg3LM/s540/widget-follower-blog-valid-html5.jpg" title="Modifikasi Widget Follower Blog Valid HTML5" width="540" /></a><b>Modifikasi Widget Follower Blog Valid HTML5</b> – untuk membuat widget follower blog agar valid HTML5 sebenarnya tidak susah dan bisa di bilang simple. Namun pada tutorial ini bukan hanya sekedar untuk valid HTML5 saja yang akan saya bahas, melainkan untuk memodifikasi tampilan widget follower blog agar menjadi lebih menarik dan terlihat rapi dengan kondisi valid HTML5. Custom widget follower ini nantinya tidak berbeda pada tutorial yang sudah pernah saya bahas sebelumnya yakni tepatnya pada artikel yang berjudul <a href="http://mas-andes.blogspot.com/2013/07/cara-modifikasi-facebook-like-box-pada.html" target="_blank" title="modifikasi widget like box facebook">modifikasi widget like box facebook</a> dan <a href="http://mas-andes.blogspot.com/2013/07/cara-modifikasi-widget-google-badge.html" target="_blank" title="modifikasi widget google+ follower">modifikasi widget google+ follower</a>. Seperti itulah nantinya hasil dari modifikasi widget follower blog, cukup menarik bukan. Namun cara penerapannya ke dalam blog agak sedikit berbeda dengan modifikasi widget facebook like box dan modifikasi widget google+ follower tersebut, karena pada kedua widget tersebut seluruh kodenya baik itu CSS maupun HTML langsung di terapkan kedalam widget oleh sebab itulah yang menyebabkan munculnya beberapa jumlah error pada saat validasi HTML5 di W3C. Maka dari itu untuk modifikasi widget follower blog agar valid HTML5 maka perlu memisahkan CSS dan menaruhnya kedalam template blog. Untuk lebih jelasnya, berikut tutorial untuk <b>Modifikasi Widget Follower Blog Valid HTML5</b>.<br /><br />1. Login ke akun blogger.<br />2. Selanjutnya pada template pilih Edit HTML.<br />3. Copy kode berikut ini lalu taruh di atas kode <code>]]></b:skin></code><pre>.widget-follower { width: 280px; height: 140px; border-radius: 3px; position: relative; background: #E9FBE9; padding: 0px 0px 15px 0px; margin:0px auto 10px auto; } <br />.widget-follower,.widget-follower:before,.widget-follower:after { background: #E9FBE9; border: 1px solid #52E052; } <br />.widget-follower:before,.widget-follower:after { position: absolute; content: &quot;&quot;; bottom: -3px; left: 2px; right: 2px; height: 1px; border-top: none; } <br />.widget-follower:after { left: 4px; right: 4px; bottom: -5px; box-shadow: 0 0 2px #52E052; }</pre>4. Copy kode berikut ini lalu pasang ke widget HTML/Javascript.<pre><div class="widget-follower"><br /><div style="height:150px;overflow:hidden;"><br /><script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script><br /><div id="<span style="color: red;">div-7w5ths5ahnit</span>"></div><br /><script type="text/javascript"><br />var skin = {};<br />skin['BORDER_COLOR'] = '#52e052';<br />skin['ENDCAP_BG_COLOR'] = '#52e052';<br />skin['ENDCAP_TEXT_COLOR'] = '#000000';<br />skin['ENDCAP_LINK_COLOR'] = '#000000';<br />skin['ALTERNATE_BG_COLOR'] = '#transparent';<br />skin['CONTENT_BG_COLOR'] = '#transparent';<br />skin['CONTENT_LINK_COLOR'] = '#e9fbe9';<br />skin['CONTENT_TEXT_COLOR'] = '#000000';<br />skin['CONTENT_SECONDARY_LINK_COLOR'] = '#000000';<br />skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#000000';<br />skin['CONTENT_HEADLINE_COLOR'] = '#000000';<br />skin['NUMBER_ROWS'] = '2';<br />google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);<br />google.friendconnect.container.renderMembersGadget(<br /> { id: '<span style="color: red;">div-7w5ths5ahnit</span>',<br />   site: '<span style="color: red;">10916685731781888212</span>' },<br />  skin);<br /></script><br /></div><br /></div></pre>Keterangan:<br />Ganti tulisan warna <span style="color: red;">merah </span>dengan ID widget follower blog anda.<br /><br />5. Terakhir tinggal klik Simpan dan lihat hasilnya.<br /><br />Dari tutorial diatas maka widget follower blog sudah terlihat cukup menarik dan pastinya valid HTML5. Namun apabila ingin membuat ketiga widget tersebut tampil berurutan pada satu ruang widget, antara widget follower blog, widget google+ follower dan widget facebook like box maka anda perlu menambahkan sedikit kode lagi kemudian menaruhnya tepat di bawahnya kode point 4 di atas. Agar lebih mudah copy saja kode berikut ini, lalu ganti ID masing-masing dan taruh di bawah kode widget follower point 4 di atas.<pre><div class="widget-follower" style="height:100px;"><br /><div style="height:150px;overflow:hidden;"><br /><div class="g-person" data-href="//plus.google.com/<span style="color: red;">104093787575230359634</span>" data-theme="dark" data-layout="landscape" data-showcoverphoto="false" data-rel="author"></div><br /><script type="text/javascript"><br />(function() {<br />var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;<br />po.src = 'https://apis.google.com/js/plusone.js';<br />var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);<br />})();<br /></script><br /></div><br /></div><br /><br /><div class="widget-follower" style="height:145px;"><br /><div style="height:150px;overflow:hidden;"><br /><div class="fb-like-box" data-href="http://www.facebook.com/<span style="color: red;">andestyle</span>" data-width="292" data-show-faces="true" data-stream="false" data-header="false" data-show_border="false"></div> <br /></div><br /></div></pre>Dari kode di atas, widget facebook like box juga sudah valid HTML5. Demikian akhir dari tutorial sederhana untuk <b>Modifikasi Widget Follower Blog Valid HTML5</b>, sekian dan selamat mencoba karena hal tersusah adalah salah satu hal yang tidak pernah dicoba.

Modifikasi Widget Follower Blog Valid HTML5 – untuk membuat widget follower blog agar valid HTML5 se…

Read More

Cara Membuat Animasi Menu Drop Down di Blog

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrgVK_KNfGWunWkHBHGbXUWDoSApSP2SNGCuPq-bATuganRITEjI5m0jHMYBhfAfvtFXxKH0krVcg65FsO238vttQ6Q16zIaTGwG3mqdDwVFs8686QAlBi6jTs2ajuZIIUldAoftA4N3M/s1600/animasi-menu-navigasi-drop-down.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Animasi Menu Drop Down Blogger" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrgVK_KNfGWunWkHBHGbXUWDoSApSP2SNGCuPq-bATuganRITEjI5m0jHMYBhfAfvtFXxKH0krVcg65FsO238vttQ6Q16zIaTGwG3mqdDwVFs8686QAlBi6jTs2ajuZIIUldAoftA4N3M/s540/animasi-menu-navigasi-drop-down.gif" title="Cara Membuat Animasi Menu Drop Down di Blog" width="540" /></a><b>Cara Membuat Animasi Menu Drop Down di Blog</b> – kaitannya dengan menu navigasi blog, setelah pada tutorial sebelumnya sudah membahas mengenai cara <a href="http://mas-andes.blogspot.com/2013/09/membuat-menu-navigasi-with-form-search.html" target="_blank" title="membuat menu navigasi with form search">membuat menu navigasi with form search</a> 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 <a href="http://mas-andes.blogspot.com/2013/08/9-style-mega-menu-drop-down-blogger.html" target="_blank" title="9 style mega menu navigasi drop down">menu navigasi drop down</a> 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 <b>Cara Membuat Animasi Menu Drop Down di Blog</b>.<br /><br />1. Login ke blogger.<br />2. Masuk ke menu template dan pilih Edit HTML.<br />3. Copy kode berikut ini lalu taruh di atas kode <code>]]></b:skin></code><pre>#nav_menu { font:bold 13px verdana; height: 35px; list-style: none; padding: 0px; margin: 0px auto; background:#0091d6; }<br />#nav_menu ul { left: -9999px; position: absolute; top: -9999px; z-index: 1; }<br />#nav_menu li { border-right: 1px solid #111; display: block; float: left; height: 35px; position: relative; width: 105px; }<br />#nav_menu li a { color: #fff; display: block; line-height: 35px; text-align: center; text-decoration: none; background-color:#0091d6; }<br />#nav_menu li a:hover{ background-color:#222; }<br />@-webkit-keyframes animation1 { 0% { -webkit-transform: scale(1); } 30% { -webkit-transform: scale(1.3); } 100% { -webkit-transform: scale(1); } }<br />@-moz-keyframes animation1 { 0% { -moz-transform: scale(1); } 30% { -moz-transform: scale(1.3); } 100% { -moz-transform: scale(1); } }<br />#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; }<br />#nav_menu li:hover > a { z-index: 4; }<br />#nav_menu li:hover ul.sub { padding: 0; left: 0; top: 35px; width: 200px; }<br />#nav_menu ul li { background: none repeat scroll 0 0 #838383; opacity: 0; width: 100%; }<br />#nav_menu ul li a{ text-align: left; padding-left: 10px; border-top: 1px solid #333; background:#222; }<br />#nav_menu ul li a:hover{ background:#111; }<br />@-webkit-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } }<br />@-moz-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } }<br />#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; }<br />#nav_menu li:hover ul li:nth-child(1) { -moz-animation-delay: 0; -webkit-animation-delay: 0; }<br />#nav_menu li:hover ul li:nth-child(2) { -moz-animation-delay: 0.05s; -webkit-animation-delay: 0.05s; }<br />#nav_menu li:hover ul li:nth-child(3) { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; }<br />#nav_menu li:hover ul li:nth-child(4) { -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.15s; }<br />#nav_menu li:hover ul li:nth-child(5) { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; }<br />#nav_menu li:hover ul li:nth-child(6) { -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; }<br />#nav_menu li:hover ul li:nth-child(7) { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; }<br />#nav_menu li:hover ul li:nth-child(8) { -moz-animation-delay: 0.35s; -webkit-animation-delay: 0.35s; }</pre>4. Copy kode berikut ini lalu paste kedalam Widget HTML/Javascript. <pre><ul id='nav_menu'><br />    <li><a expr:href='data:blog.homepageUrl'>Home</a></li><br />    <li><a href='http://mas-andes.blogspot.com'>Menu 1</a><br />        <ul class='sub'><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 6</a></li><br />        </ul><br />    </li><br />    <li><a href='http://mas-andes.blogspot.com'>Menu 2</a><br />        <ul class='sub'><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li><br />        </ul><br />    </li><br />    <li><a href='http://mas-andes.blogspot.com'>Menu 3</a><br />        <ul class='sub'><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li><br />        </ul><br />    </li><br />    <li><a href='http://mas-andes.blogspot.com'>Menu 4</a><br />    </li><br /></ul></pre>Keterangan:<br />Ganti <b>http://mas-andes.blogspot.com</b> dengan label link pada blog anda.<br /><br />5. Langkah terakhir klik Simpan dan hasilnya akan seperti pada dibawah ini.<br /><br /> <style>#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; } </style> <ul id='nav_menu'> <li><a href='http://mas-andes.blogspot.com'>Home</a></li> <li><a href='#'>Menu 1</a> <ul class='sub'> <li><a href='#'>Sub Menu 1</a></li> <li><a href='#'>Sub Menu 2</a></li> <li><a href='#'>Sub Menu 3</a></li> <li><a href='#'>Sub Menu 4</a></li> <li><a href='#'>Sub Menu 5</a></li> <li><a href='#'>Sub Menu 6</a></li> </ul> </li> <li><a href='#'>Menu 2</a> <ul class='sub'> <li><a href='#'>Sub Menu 1</a></li> <li><a href='#'>Sub Menu 2</a></li> <li><a href='#'>Sub Menu 3</a></li> <li><a href='#'>Sub Menu 4</a></li> <li><a href='#'>Sub Menu 5</a></li> </ul> </li> <li><a href='#'>Menu 3</a> <ul class='sub'> <li><a href='#'>Sub Menu 1</a></li> <li><a href='#'>Sub Menu 2</a></li> <li><a href='#'>Sub Menu 3</a></li> <li><a href='#'>Sub Menu 4</a></li> </ul> </li> <li><a href='#'>Menu 4</a> </li></ul> <br />Demikian tutorial untuk <b>Cara Membuat Animasi Menu Drop Down di Blog</b>, apabila ingin merubah misal pada warna atau font maupun lainnya silahkan bisa di custom sendiri.

Cara Membuat Animasi Menu Drop Down di Blog – kaitannya dengan menu navigasi blog, setelah pada tuto…

Read More

Modifikasi Efek Tooltip Widget Popular Post Blogger

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZpIevcZybHJIy_3oWPfK-Y4X-YtFfyDFFoCXGBaiJl2mVu-UNFJm8mIiiPXLZ1X3Iaau39-pwQLTGhWra2c9ctjGWAxOroo0uOskSTkoTDWXatUwxrKJvxZVPVGlTDy4Vs8vvsqn8ntc/s1600/popular-post-tooltip-hover.jpg"><img alt="Efek Tooltip Widget Popular Post Blogger" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZpIevcZybHJIy_3oWPfK-Y4X-YtFfyDFFoCXGBaiJl2mVu-UNFJm8mIiiPXLZ1X3Iaau39-pwQLTGhWra2c9ctjGWAxOroo0uOskSTkoTDWXatUwxrKJvxZVPVGlTDy4Vs8vvsqn8ntc/s320/popular-post-tooltip-hover.jpg" title="Modifikasi Efek Tooltip Widget Popular Post Blogger" width="550" /></a><b>Modifikasi Efek Tooltip Widget Popular Post Blogger</b> – setelah pada tutorial sebelumnya membahas mengenai widget related post atau artikel terkait, maka kini beralih ke widget popular post atau artikel populer. Tentu sudah tidak asing lagi dengan istilah tooltip, sebuah teks box yang muncul pada sebuah link saat hover atau tersentuh kursor. Tooltip muncul secara otomatis saat pointer di arahkan ke link tanpa harus di klik terlebih dahulu. Untuk membuat efek tooltip pada widget popular post blogger caranya cukup mudah. Pertama kali hanya perlu menambahkan atau pastikan terlebih dahulu blog sudah terpasang widget popular post default blogger. Setelah itu kemudian baru modifikasi widget popular post menggunakan CSS untuk menciptakan tooltip hover. Berikut langkah-langkahnya untuk <b>Modifikasi Efek Tooltip Widget Popular Post Blogger</b>.<br /><br />1. Login ke akun blogger.<br />2. Masuk ke Edit HTML template.<br />3. Copy kode berikut ini lalu taruh di atas kode <code>]]></b:skin></code><pre><br />.PopularPosts .widget-content ul li{padding:0;position:relative;border-top: 1px solid #333;border-bottom: 1px solid #111;background: #222; color: #fff; float: left;list-style: none;margin-left: -15px !important;padding: 5px !important; height: 30px;}<br />.item-snippet { font-size: 90%; line-height: 1.2em; position: absolute; width: 230px; background-color: #222; padding: 7px; border: 2px solid #333; color: #fff; box-shadow: 1px 1px 6px 1px #52E052; z-index: 2; left: 300px; top: 60%; height: 4.5em!important; visibility: hidden; opacity: 0; transition: all 0.6s cubic-bezier(1,2,0,0) 0s; -moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s; -webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s; -o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}<br />.PopularPosts .widget-content ul li:hover .item-snippet{z-index:999;left:60px;opacity:1;visibility:visible}<br />.PopularPosts img{width:30px;height:30px}<br />.PopularPosts .item-title{font: Verdana 14px bold;}</pre>4. Simpan template lalu lihat hasilnya.<br /><br />Demikian tutorial sederhana untuk <b>Modifikasi Efek Tooltip Widget Popular Post Blogger</b>, sangat mudah tentu dalam penerapannya.

Modifikasi Efek Tooltip Widget Popular Post Blogger – setelah pada tutorial sebelumnya membahas meng…

Read More

Membuat Menu Navigasi With Form Search di Blog

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg1T11pbEkTRJPAR_6ZMtn_U_1FoB2OGmhdVpp6X3PgTysA2WsFudJd8y0uEJjxPsjLxuYCrBLl_a_N3DG2MYzITKS11tZOdrIr6xFhjrhD_Pwf9thWD1pHIMKwJ9jdTZh0QZICCa3HP0/s1600/navigasi-menu-with-form-search-blogger.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Menu Navigasi With Form Search Blogger" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg1T11pbEkTRJPAR_6ZMtn_U_1FoB2OGmhdVpp6X3PgTysA2WsFudJd8y0uEJjxPsjLxuYCrBLl_a_N3DG2MYzITKS11tZOdrIr6xFhjrhD_Pwf9thWD1pHIMKwJ9jdTZh0QZICCa3HP0/s910/navigasi-menu-with-form-search-blogger.gif" title="Membuat Menu Navigasi With Form Search di Blog" width="540" /></a><b>Membuat Menu Navigasi With Form Search di Blog</b> – 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 <a href="http://mas-andes.blogspot.com/2013/09/cara-membuat-menu-navigasi-horisontal.html" target="_blank" title="cara membuat navigasi menu horisontal">membuat navigasi menu horisontal</a> 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 <b>Membuat Menu Navigasi With Form Search di Blog</b>.<br /><br />1. Login ke blogger.<br />2. Masuk ke Edit HTML template.<br />3. Copy kode berikut ini lalu taruh di atas kode <code>]]></b:skin></code><pre>#panelnav { background: darkgreen; width: 100%; position: relative; height:37px; margin: auto; z-index:999; }<br />#navmenu,#navmenu ul { list-style:none; margin:0; padding:0; }<br />#navmenu { position:relative; width:auto; background-color:darkgreen; }<br />#navmenu ul { height:0; left:0; overflow:hidden; position:absolute; top:37px; }<br />#navmenu li { float:left; position:relative; }<br />#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; }<br />#navmenu li:hover > a { background:#222; }<br />#navmenu li:hover ul.submenu { height:auto; width:200px; }<br />#navmenu ul li { opacity:0; transition:0.5s; width:100%; }<br />#navmenu li ul li { transition-delay:0s; }<br />#navmenu li:hover ul li { opacity:1; transition-delay:0.5s; }<br />#navmenu ul li a { background:#222; border-top:1px solid #333; border-bottom:1px solid #111; color:#fff; line-height:1px; transition:1.5s; }<br />#navmenu li:hover ul li a { line-height:25px; }<br />#navmenu ul li a:hover { background:darkgreen; }<br />#searchform    {float:right; height: 30px; margin:3px}<br />#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;}<br />#searchform input.field {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1wj6zHquPrH-1iccZ2Au0XjR8x_AvEBqfSebLaKVOTsWyz_sW3hmVCnpuBTSJKMYerfCXyaed3FE24ZdS-UDxxkXhZyRymK-LwRBQlna-x_RyoqtH3AbUGMZwqg1ObRLL7UIw4jxtt4cj/s30/search_icon.png); <br />background-color:#222; color: #fff;}<br />#searchform input.field:focus {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1wj6zHquPrH-1iccZ2Au0XjR8x_AvEBqfSebLaKVOTsWyz_sW3hmVCnpuBTSJKMYerfCXyaed3FE24ZdS-UDxxkXhZyRymK-LwRBQlna-x_RyoqtH3AbUGMZwqg1ObRLL7UIw4jxtt4cj/s30/search_icon.png); <br />background-color:#333; background-position:right; background-repeat:no-repeat;}<br />#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;}</pre>4. Copy kode berikut ini lalu paste kedalam Widget HTML/Javascript.<pre><div id='panelnav'><br />    <ul id='navmenu'><br />        <li><a expr:href='data:blog.homepageUrl'>Home</a></li><br />        <li><a href='http://mas-andes.blogspot.com'>Menu 1</a><br />            <ul class='submenu'><br />                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li><br />                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li><br />                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li><br />                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li><br />                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li><br />                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 6</a></li><br />                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 7</a></li><br />            </ul><br />        </li><br />        <li><a href='http://mas-andes.blogspot.com'>Menu 2</a><br />            <ul class='submenu'><br />                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li><br />                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li><br />                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li><br />                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li><br />                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li><br />            </ul><br />        </li><br />        <li><a href='http://mas-andes.blogspot.com'>Menu 3</a><br />            <ul class='submenu'><br />                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li><br />                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li><br />                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li><br />            </ul><br />        </li><br />        <li><a href='http://mas-andes.blogspot.com'>Menu 4</a></li><br />    </ul><br /> <form action='/search' id='searchform' method='get'><br /> <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..'/><br /> <input class='submit' name='submit' type='submit' value='Search'/></div><br /> </form><br /></div></pre>Keterangan:<br />Ganti <b>http://mas-andes.blogspot.com</b> dengan label link blog anda.<br /><br />5. Langkah terakhir Simpan dan lihat hasilnya.<br /><br />Demikian tutorial cara <b>Membuat Menu Navigasi With Form Search di Blog</b>, apabila masih terdapat kekurangan silahkan bisa di custom kembali agar lebih menarik dan seperti selera yang di inginkan entah itu warna atau yang lainnya.

Membuat Menu Navigasi With Form Search di Blog – untuk sebagian blogger yang sudah menggunakan templ…

Read More

Membuat Artikel Terkait Dibawah Posting Blog

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ-Zzbh-uhaQaqRq0GHId8mmrZ-MtgP9VzNOPH1lwqXJKR0D0nZITUO4L-XNU9fgB29Iy8FyumQAu-FImel_7W39f44ppg8OtvtW_7NzuR7OqsLpup6lNUYkJNPxSrYYmK2Ac37oEuGUo/s1600/related-post-blogger.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="widget related post atau artikel terkait" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ-Zzbh-uhaQaqRq0GHId8mmrZ-MtgP9VzNOPH1lwqXJKR0D0nZITUO4L-XNU9fgB29Iy8FyumQAu-FImel_7W39f44ppg8OtvtW_7NzuR7OqsLpup6lNUYkJNPxSrYYmK2Ac37oEuGUo/s540/related-post-blogger.gif" title="Membuat Artikel Terkait Dibawah Posting Blog" width="540" /></a><b>Membuat Artikel Terkait Dibawah Posting Blog</b> – tentu widget ini sudah tidak asing lagi keberadaanya didalam sebuah blog, widget yang sudah familiar dengan setiap artikel halaman blog dan banyak di gunakan oleh para blogger untuk menampilkan judul dari halaman artikel yang terkait atau istilah lainnya biasa di sebut-sebut related post. Memang sudah banyak widget artikel terkait yang lebih bagus dan dengan berbagai gaya, di antaranya mulai dari yang sudah dilengkapi icon thumbnail maupun tooltip dan yang lainnya. Namun pada tutorial ini saya akan membahas untuk membuat widget artikel terkait yang sederhana dan menurut saya lebih simple. Untuk memasang widget artikel terkait dibawah posting blog caranya cukup mudah. Apabila blog yang di gunakan belum terdapat widget artikel terkait bisa mengikuti langkah-langkah yang terdapat dibawah. Berikut tutorialnya untuk <b>Membuat Artikel Terkait Dibawah Posting Blog</b>.<br /><br />1. Login ke akun blogger.<br />2. Copy kode berikut ini lalu taruh di atas kode <code>]]></b:skin></code><pre>#related-posts {clear: both;border:2px solid #52e052;}<br />#related-posts h2{color: #000;background-color: #52e052;padding:5px 5px 5px 10px;}<br />#related-posts ul{padding: 0;list-style: none;margin:0px;}<br />#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;background: #222;}<br />#related-posts ul li:first-child {border-top: none;}<br />#related-posts ul li:last-child {border-bottom: none;}<br />#related-posts ul li a {padding: 5px 5px 5px 10px;display: block;color: #fff;text-decoration: none;cursor: pointer; transition: padding-left 250ms ease-out;}<br />#related-posts ul li a:hover {padding-left: 20px;background: #111;}</pre>3. Copy kode berikut ini lalu taruh di bawah kode <code><data:post.body/></code> atau bisa juga <code><div class='post-footer'></code><pre><script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/related-post.js'/><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'/><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop><br /><h2>Artikel Terkait</h2><br /><script type='text/javascript'><br />var currentposturl=&quot;<data:post.url/>&quot;;<br />var maxresults=5;<br />removeRelatedDuplicates(); printRelatedLabels();<br /></script><br /></div><br /></b:if></pre>4. Langkah terakhir Simpan template.<br /><br />Perlu diperhatikan dalam langkah pemasangannya, biasanya didalam template blog terdapat 2 atau 3 kode <code><data:post.body/></code>. Anda bisa menaruh kode tersebut pada kode yang terakhir, namun apabila kurang sesuai maka silahkan di coba saja pada kode yang pertama atau kedua. Jika menaruhnya pada kode <code><div class='post-footer'></code> biasanya terdapat 2 kode tersebut. Anda bisa menaruhnya pada kode yang terakhir, namun apabila kurang tepat dengan template blog anda silahkan di coba saja pada kode yang pertama.

Membuat Artikel Terkait Dibawah Posting Blog – tentu widget ini sudah tidak asing lagi keberadaanya …

Read More

Mengatasi Error Icon Desktop Windows 7

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqKQ3CGjT8JBOEN7XMLXFaU2eRvO-WtZHxD0wHZVP2DjvYt2SEwyZ4_dMDnlBUc2cjJvSTYuK_kKmM2B75fU1nGIJZP7XUuUvIrjvlXrmVx2pnA-T8GpTKDU6se_khYQjmazEM3yu0CeU/s1600/windows+media+center.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Error Icon Desktop Windows 7" height="252" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqKQ3CGjT8JBOEN7XMLXFaU2eRvO-WtZHxD0wHZVP2DjvYt2SEwyZ4_dMDnlBUc2cjJvSTYuK_kKmM2B75fU1nGIJZP7XUuUvIrjvlXrmVx2pnA-T8GpTKDU6se_khYQjmazEM3yu0CeU/s320/windows+media+center.jpg" title="Mengatasi Error Icon Desktop Windows 7 menjadi windows media center" width="540" /></a><b>Mengatasi Error Icon Desktop Windows 7</b> – pada tutorial kali ini saya akan sedikit membahas mengenai permasalahan pada komputer. Kesalahan pada seluruh icon yang terdapat di desktop bahkan seluruh file berekstensi <b>.EXE</b> yang terdapat pada Windows Explorer berubah secara total menjadi icon atau logo <b>Windows Media Center</b> semua, hal ini saya alami sehari yang lalu pada komputer keponakan saya. Jika komputer baru di nyalakan maka selalu menampilkan layout Windows Media Center secara otomatis walaupun tidak di klik pada salah satu shortcut. Kalaupun sudah di Close dan nantinya akan membuka shortcut yang terdapat di desktop maupun file apa saja yang berekstensi .EXE maka yang muncul hanyalah Windows Media Center. <br /><br />Kenapa bisa demikian? Ini disebabkan karena keponakan saya tersebut masih kecil karena usianya saja yang masih menginjak 6 tahun dan setiap harinya saat melihat saya blogging dia juga langsung tidak kalah saing langsung menyalakan komputernya buat ngegame jadi rasa penasaran dan ingin tahu selalu timbul dalam pikirannya, secara tidak sengaja kesalahan ini terjadi saat dia membuka salah satu shortcut game dengan fitur <b>Open With</b> di Windows 7. Saat membuka salah satu game dia klik Open With dengan Windows Media Center. Maka yang terjadi seperti yang sudah saya sebutkan diatas, akhirnya semua shortcut aplikasi di desktop maupun di Windows Explorer secara total berubah menjadi logo Windows Media Center. <br /><br />Hal demikian bisa di alami jika membuka salah satu shortcut lalu Open With dengan aplikasi yang seharusnya tidak di gunakan maka error seperti inilah yang terjadi. Tergantung dari aplikasi yang di gunakan saat membuka menggunakan Open With. Apabila shortcut tersebut berekstensi .EXE namun saat Open With menggunakan (misal saja) Windows Media Player maka icon keseluruhan juga akan berubah secara total menjadi logo Windows Media Player.<br /><br />Maka dari itu untuk mengatasi kesalahan serupa dengan yang saya sampaikan di atas, caranya tidak perlu khawatir maupun jangan berpikiran untuk menginstal ulang komputer. Hal ini bisa kita atasi dengan cara merubah registry agar kembali ke pengaturan default atau seperti semula. Berikut langkah-langkahnya untuk memeperbaiki error tersebut.<br /><br />1. Copy kode berikut ini, lalu paste ke dalam Notepad. <pre>Windows Registry Editor Version 5.00<br />[-HKEY_CLASSES_ROOT\.exe]<br />[HKEY_CLASSES_ROOT\.exe]<br />@=”exefile”<br />“Content Type”=”application/x-msdownload”<br />[HKEY_CLASSES_ROOT\.exe\PersistentHandler]<br />@=”{098f2470-bae0-11cd-b579-08002b30bfeb}”<br />[HKEY_CLASSES_ROOT\exefile]<br />@=”Application”<br />“EditFlags”=hex:38,07,00,00<br />“FriendlyTypeName”=hex(2):40,00,25,00,53,00,79,00,73,00,74,00,65,00,6d,00,52,\<br />00,6f,00,6f,00,74,00,25,00,5c,00,53,00,79,00,73,00,74,00,65,00,6d,00,33,00,\<br />32,00,5c,00,73,00,68,00,65,00,6c,00,6c,00,33,00,32,00,2e,00,64,00,6c,00,6c,\<br />00,2c,00,2d,00,31,00,30,00,31,00,35,00,36,00,00,00<br />[HKEY_CLASSES_ROOT\exefile\DefaultIcon]<br />@=”%1″<br />[HKEY_CLASSES_ROOT\exefile\shell]<br />[HKEY_CLASSES_ROOT\exefile\shell\open]<br />“EditFlags”=hex:00,00,00,00<br />[HKEY_CLASSES_ROOT\exefile\shell\open\command]<br />@=”\”%1\” %*”<br />“IsolatedCommand”=”\”%1\” %*”<br />[HKEY_CLASSES_ROOT\exefile\shell\runas]<br />“HasLUAShield”=”"<br />[HKEY_CLASSES_ROOT\exefile\shell\runas\command]<br />@=”\”%1\” %*”<br />“IsolatedCommand”=”\”%1\” %*”<br />[HKEY_CLASSES_ROOT\exefile\shell\runasuser]<br />@=”@shell32.dll,-50944″<br />“Extended”=”"<br />“SuppressionPolicyEx”=”{F211AA05-D4DF-4370-A2A0-9F19C09756A7}”<br />[HKEY_CLASSES_ROOT\exefile\shell\runasuser\command]<br />“DelegateExecute”=”{ea72d00e-4960-42fa-ba92-7792a7944c1d}”<br />[HKEY_CLASSES_ROOT\exefile\shellex]<br />[HKEY_CLASSES_ROOT\exefile\shellex\ContextMenuHandlers]<br />@=”Compatibility”<br />[HKEY_CLASSES_ROOT\exefile\shellex\ContextMenuHandlers\Compatibility]<br />@=”{1d27f844-3a1f-4410-85ac-14651078412d}”<br />[HKEY_CLASSES_ROOT\exefile\shellex\DropHandler]<br />@=”{86C86720-42A0-1069-A2E8-08002B30309D}”<br />[-HKEY_CLASSES_ROOT\SystemFileAssociations\.exe]<br />[HKEY_CLASSES_ROOT\SystemFileAssociations\.exe]<br />“FullDetails”=”prop:System.PropGroup.Description;System.FileDescription;System.ItemTypeText;System.FileVersion;System.Software.ProductName;System.Software.ProductVersion;System.Copyright;*System.Category;*System.Comment;System.Size;System.DateModified;System.Language;*System.Trademarks;*System.OriginalFileName”<br />“InfoTip”=”prop:System.FileDescription;System.Company;System.FileVersion;System.DateCreated;System.Size”<br />“TileInfo”=”prop:System.FileDescription;System.Company;System.FileVersion;System.DateCreated;System.Size”<br />[-HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\FileExts\.exe]<br />[HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\FileExts\.exe]<br />[HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\FileExts\.exe\OpenWithList]<br />[HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\FileExts\.exe\OpenWithProgids]<br />“exefile”=hex(0):<br />[-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\.exe]<br />[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\.exe]<br />@=”exefile”<br />“Content Type”=”application/x-msdownload”<br />[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\.exe\PersistentHandler]<br />@=”{098f2470-bae0-11cd-b579-08002b30bfeb}”</pre>2. Kemudian simpan di Desktop dengan nama file “<b>Default_EXE.reg</b>” tanpa tanda kutip. Perhatikan ekstensi filenya adalah <b>.REG</b> bukan <b>.TXT</b><br />3. Maka di desktop muncul satu file bernama <b>Default_EXE.reg</b><br />4. Kemudian klik kanan file tersebut lalu klik lagi <b>Merge </b>kemudian klik <b>OK</b>.<br />5. Langkah terakhir <b>Restart </b>komputer.<br /><br />Jika setelah komputer di Restart seluruh icon pada Desktop berubah menjadi putih semua (tanpa logo apapun) dan muncul notifikasi Open With maka klik Cancel saja kemudian Restart lagi komputernya. Selanjutnya komputer sudah kembali normal seperti sedia kala dengan shortcut logo sesuai dengan masing-masing apliaksi. Demikian tutorial untuk cara <b>Mengatasi Error Icon Desktop Windows 7</b>, selanjutnya komputer sudah bisa di gunakan kembali tanpa adanya shortcut yang error.

Mengatasi Error Icon Desktop Windows 7 – pada tutorial kali ini saya akan sedikit membahas mengenai …

Read More

Cara Meningkatkan Traffic Blog Melalui Fanpage

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLllAQ7mG6EMhnarWvmYAb-i5_t1zi41IEBAhmsxjbBDtL11rm0KGbHzMSi4YRa-DR2VqInKCvx8EXdM5XCeJL8hxkSJgf5tAaBkbkn73SfS3GIvEXUSdQ0UXErCHV4NwS2OzadzUfjv0/s1600/trafik-facebook.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Traffic Blog Melalui Fanpage" height="267" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLllAQ7mG6EMhnarWvmYAb-i5_t1zi41IEBAhmsxjbBDtL11rm0KGbHzMSi4YRa-DR2VqInKCvx8EXdM5XCeJL8hxkSJgf5tAaBkbkn73SfS3GIvEXUSdQ0UXErCHV4NwS2OzadzUfjv0/s540/trafik-facebook.png" title="Cara Meningkatkan Traffic Blog Melalui Fanpage" width="540" /></a><b>Cara Meningkatkan Traffic Blog Melalui Fanpage</b> – banyak yang sudah saya bahas untuk meningkatkan traffic blog pada artikel-artikel sebelumnya dengan menggunakan berbagai cara. Hal ini sudah pernah saya singgung sebelumnya pada artikel terakhir terakhir mengenai traffic blog di artikel yang berjudul <a href="http://mas-andes.blogspot.com/2013/09/tips-meningkatkan-traffic-blog-dengan.html" target="_blank" title="Tips Meningkatkan Trafik Blog Dengan Facebook">Tips Meningkatkan Trafik Blog Dengan Facebook</a>. Disitu situ sudah saya sebutkan untuk meningkatkan lalu lintas ke blog yakni salah satu di antaranya dengan memanfaatkan fanpage. Maka dari itu sekarang kita bahas untuk menelusur seberapa jauh yang bisa kita dapat dari fanpage untuk mengarahkan sumber lalu lintas. Saya yakin setiap blogger pastinya sudah memiliki fanpage baik itu yang sudah di pasang ke dalam blog maupun yang tidak dipasang. Dengan adanya fanpage tersebut, dari pada sekedar menjadi pajangan atau hiasan blog akan lebih baik kalau sebaiknya di kelola sedemikian rupa untuk memaksimalkan konten blog hingga bisa berdampak positif terhadap perkembangan blog yang sudah kita kelola. Dibawah ini terdapat beberapa tips sederhana untuk mengarahkan lalu lintas dari fanpage sehingga bisa meningkatkan traffic blog.<br /><br />Pertama, apabila belum mempunyai fanpage segera buatlah fanpage yang bertema niche blog anda. Apabila belum pernah membuat fanpage bisa cari di google, saya yakin pasti banyak blog-blog yang menyediakan tutorial untuk cara membuat fanpage. Setelah fanpage siap terpakai, undang sebanyak mungkin teman-teman atau orang-orang untuk subcribe fanpage anda.<br /><br />Kedua, apabila belum mempunyai akun Networked blog segera buat akunnya dan hubungkan ke fanpage anda. Maka nanti secara otomatis tanpa perlu share secara manual posting yang anda publikasikan akan muncul juga di fanpage dan hal tersebut sangat efisien tanpa harus melakukan secara manual untuk share artikel satu per satu.<br /><br />Pada fanpage itulah nanti anda dapat memantau perkembangan blog anda dengan datangnya traffic dari fanpage yang sudah anda buat tersebut. Untuk mengelola fanpage tidak perlu terlalu aktif untuk menjaring banyak lalu lintas ke blog, biarkan traffic mengalir dengan sendirinya dan hal tersebut saya rasa tidak susah. Demikian sedikit tips yang bisa saya sampaikan, langkah selanjutnya bisa anda cermati sendiri setelah melakukan dan menganalisa untuk mengoptimalkan perkembangan blog yang sekarang dan berikutnya.

Cara Meningkatkan Traffic Blog Melalui Fanpage – banyak yang sudah saya bahas untuk meningkatkan tra…

Read More

Cara Membuat Space Banner Iklan di Blog

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitIQ9QHng5WNcxZJSbVH3RpJonGTDOpTqFOdrBKQCqkRQMlh8iNyVfYAXHQPmTGCu0BtEJ2DMfW5bwUOtE4OJxVa4o99HhspyY638NWZ2feMgGio7Z6PtONna9TEvEVDw_A2l1VTtDcZs/s1600/banner-iklan-blogger.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Space Banner Iklan Blog" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitIQ9QHng5WNcxZJSbVH3RpJonGTDOpTqFOdrBKQCqkRQMlh8iNyVfYAXHQPmTGCu0BtEJ2DMfW5bwUOtE4OJxVa4o99HhspyY638NWZ2feMgGio7Z6PtONna9TEvEVDw_A2l1VTtDcZs/s540/banner-iklan-blogger.gif" title="Cara Membuat Space Banner Iklan di Blog" width="540" /></a><b>Cara Membuat Space Banner Iklan di Blog</b> – setelah pada sebelumnya pernah membahas mengenai <a href="http://mas-andes.blogspot.com/2013/06/cara-membuat-iklan-seperti-google.html" target="_blank" title="cara membuat iklan seperti google adsense">cara membuat iklan seperti google adsense</a> di blog dengan menggunakan CSS dan HTML, maka sekarang apabila ingin memasang iklan di blog yang disertai hover image dengan sedikit jQuery agar terlihat lebih menarik caranya cukup mudah bahkan simple. Cukup dengan memasukan kode yang terdapat di bawah lalu menaruh kode tersebut kedalam widget blog maka space banner pun siap terpajang di blog. Apabila ingin merubah default image ubah saja pada bagian URL gambar dengan gambar atau banner iklan yang akan dimasukan. Jika sudah terdapat space banner yang terdapat di sidebar blog atau bagian blog lainnya dan trafik blog sudah meningkat maka visitor jika ingin menempel iklannya ke dalam blog tersebut juga tidak sungkan. Untuk membuat ruang banner pada widget blog, berikut tutorial <b>Cara Membuat Space Banner Iklan di Blog</b>.<br /><br />1. Login ke akun blogger.<br />2. Copy kode berikut ini. <pre><br /><style type="text/css"><br />div#banner a { text-decoration:none; color:#fff; text-align:center;}<br />div#banner { width:260px; margin:0 auto; }<br />#banner .iklan { display:block; width:125px; height:125px; border:2px solid #52e052; float:left; position:relative; }<br />#banner .iklan img{ display:block; width:125px; height:125px;}<br />#banner .iklan .caption { position:absolute; top:90px; left:2px; padding:3px; font:bold 10px arial; width:115px; display:none; background:#000; }<br />.clear { clear:both; }<br />.effect { box-shadow: 0 0 10px #52e052; }<br /></style><br /><script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery-spotlight.js"></script><br /><script type="text/javascript"> $(document).ready(function () { $('#banner .iklan').each(function () { title = $(this).attr('title'); $(this).append('<span class="caption">' + title + '</span>'); $(this).attr('title',''); }); $('#banner .iklan').hover( function () { $(this).siblings().css({'opacity': '0.1'}); $(this).css({'opacity': '1.0'}).addClass('effect'); $(this).children('.caption').show(); }, function () { $(this).children('.caption').hide(); } ); $('#banner').mouseleave(function () { $(this).children().fadeTo('100', '1.0').removeClass('effect'); }); }); </script><br /><br /><div id="banner"><br /><a class="iklan" href="http://mas-andes.blogspot.com/2012/11/contact-me.html" title="Pasang Iklan Disini Ukuran 125 x 125"><br /><img src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlNYyxlspEBtuKvJBeLwiNwAJoqj7RrPNjTeIoZSEyi3gxcjeQz07p_TBAIDCwm0wEMWDcWGeFXVJsjwZT_m_hqV2kf5kfQLuV19aNADZt82E2AB55zIaKbrebzoh6zaT2lRTuEP0-ME4/s207-p-no/</span>" alt="banner iklan"/></a><br /><a class="iklan" href="http://mas-andes.blogspot.com/2012/11/contact-me.html" title="Pasang Iklan Disini Ukuran 125 x 125"><br /><img src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlNYyxlspEBtuKvJBeLwiNwAJoqj7RrPNjTeIoZSEyi3gxcjeQz07p_TBAIDCwm0wEMWDcWGeFXVJsjwZT_m_hqV2kf5kfQLuV19aNADZt82E2AB55zIaKbrebzoh6zaT2lRTuEP0-ME4/s207-p-no/</span>" alt="banner iklan"/></a><br /><a class="iklan" href="http://mas-andes.blogspot.com/2012/11/contact-me.html" title="Pasang Iklan Disini Ukuran 125 x 125"><br /><img src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlNYyxlspEBtuKvJBeLwiNwAJoqj7RrPNjTeIoZSEyi3gxcjeQz07p_TBAIDCwm0wEMWDcWGeFXVJsjwZT_m_hqV2kf5kfQLuV19aNADZt82E2AB55zIaKbrebzoh6zaT2lRTuEP0-ME4/s207-p-no/</span>" alt="banner iklan"/></a><br /><a class="iklan" href="http://mas-andes.blogspot.com/2012/11/contact-me.html" title="Pasang Iklan Disini Ukuran 125 x 125"><br /><img src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlNYyxlspEBtuKvJBeLwiNwAJoqj7RrPNjTeIoZSEyi3gxcjeQz07p_TBAIDCwm0wEMWDcWGeFXVJsjwZT_m_hqV2kf5kfQLuV19aNADZt82E2AB55zIaKbrebzoh6zaT2lRTuEP0-ME4/s207-p-no/</span>" alt="banner iklan"/></a><br /></div><br /><div class="clear"></div><br /></pre>Silahkan ubah banner yang ingin di pasang dengan mengganti URL gambar berwarna <span style="color: red;">merah</span> dengan ukuran 125 X 125.<br /><br />3. Masuk menu Tata Letak > Tambah Widget > HTML/Javascript lalu paste kode tersebut kemudian klik Simpan.<br />4. Selesai dan space banner sudah terpasang kedalam blog.<br /><br />Demikian tutorial <b>Cara Membuat Space Banner Iklan di Blog</b> dengan mudah dan sederhana.

Cara Membuat Space Banner Iklan di Blog – setelah pada sebelumnya pernah membahas mengenai cara memb…

Read More

Cara Membuat Ajax Menu di Blog

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDPeH-avsfBaZZyPRPMvCyOhc67E3-B5MVaf68gF3py_lT98MFGuOXhpzpl8AH447t0H_57RboN8ZqfjPMoaRGzgs-dntG8aEMl4vHHSrTITQhMJnSKIRFOCgY7jz7rSP2NH8SKm-IAPA/s1600/ajax-menu-blogger.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Ajax Menu Blogger" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDPeH-avsfBaZZyPRPMvCyOhc67E3-B5MVaf68gF3py_lT98MFGuOXhpzpl8AH447t0H_57RboN8ZqfjPMoaRGzgs-dntG8aEMl4vHHSrTITQhMJnSKIRFOCgY7jz7rSP2NH8SKm-IAPA/s540/ajax-menu-blogger.jpg" title="Cara Membuat Ajax Menu di Blog" width="540" /></a><b>Cara Membuat Ajax Menu di Blog</b> – masih membahas seputar <a href="http://mas-andes.blogspot.com/2013/09/cara-membuat-menu-navigasi-horisontal.html" target="_blank" title="cara membuat menu navigasi horisontal blog">navigasi menu horisontal blog</a>. 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 <b>Cara Membuat Ajax Menu di Blog</b>.<br /><br />1. Login ke akun blogger dahulu.<br />2. Masuk ke menu Template dan pilih Edit HTML.<br />3. Copy kode CSS berikut ini lalu paste di atas kode <code>]]></b:skin></code><br /><pre>.menunavblue *{margin: 0;padding: 0;}<br />ul.menunavblue {padding: 0;list-style: none;line-height: 1;overflow: visible !important;}<br />ul.menunavblue:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}<br />ul.menunavblue li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}<br />ul.menunavblue li a{background:#0098CA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz11rwKPB4n0r434OsIsLzB9ye6vmoAUPd92JuMnWjjtiFwb3SitCsbN1E04rlRZQuGwrvtyYa_4F-bpeh0pzuFiKMGKozhZ4MFWxo_kbVxGceAOJydODZ6KoLqHtQNnVVq9-1QVb4TIU/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;}<br />ul.menunavblue li a:hover,ul.menunavblue li a.hoverover{ background-position: 0% -60px;}<br />ul.menunavblue ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}<br />ul.menunavblue li:hover > ul{display: block;}<br />ul.menunavblue ul li{float: none;min-width: 160px;background:#3BBAE5;text-shadow: none;}<br />ul.menunavblue ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}<br />ul.menunavblue ul li a:hover,ul.menunavblue ul li a.hoverover{ background-position: 0% -60px;}<br />ul.menunavblue ul ul{display: none;left: 100%;top: 0;}<br />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;}<br />ul.menunavblue li:hover div.submenu {display: block;}<br />ul.menunavblue ul ,ul.menunavblue ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}<br />ul.menunavblue ul li{background: none !important;float: none !important;}<br />ul.menunavblue ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #3BBAE5;}<br />ul.menunavblue ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}<br />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;}<br />ul.menunavblue ul.postslist li:last-child{border-bottom: none 0;}<br />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;}<br />ul.menunavblue ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}<br />ul.menunavblue ul.postslist li a{background: none;display: block;line-height: 1.4;padding: 0 !important;}<br />ul.menunavblue .loader{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI8rIVnBPTdzopaglxAHerViV-XkXC64gAHH8tYbnbPKGMi-Y8l15V6CyWXMSl9H8B8Fo845RST-iPQPSRZrzRogMW0j7NKXPZMjLrWdjtRfzkBYBdtmDgoErfVNrOpxSgokskXHdrLkc/h120/loading.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}<br />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;}<br />#menunavblue {background:#0098CA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwAgWDnjrupRFH_Ye9wlKMS-BGsGD4yCiiAu4pLvIPCzYP7vTiAaCPRB3FJ3Q7-agotjeM1a08Nu_GE4D2LM6QJdu_Kf1dVUa_hYsnJPfEv47y8PVLg15FY0WVbjrfHVkPie5ViMvp5sI/h120/bluebg.gif);background-position: 0% -1px;border: 1px solid #3BBAE5;}<br />.end{ width:2px;}</pre>4. Selanjutnya copy Javascript berikut ini lalu paste di atas kode <code></head></code><br /><pre><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><br /><script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/ajaxbloggermenu.js"></script><br /><script type="text/javascript"><br />jQuery(document).ready(function($) {<br />$('#menunavblue').ajaxBloggerMenu({<br />numPosts : 4, // Maksimal tampilan jumlah posting<br />defaultImg : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNoxifa1bbiOSfaFmzAH1Nm0GFy0rDVYTq4fX4FQQEiIWvDNI9O5NfhAKnPRktCvFrH36dkBffZgVMl-DBVvMtpxkhNAb5UsQn6XQC180jcgvLmzpVgDq4fd4AHtmC52_7FkwZNsTL7Y/w140-h140-p/no-image.png' // Default thumbnail Image<br />});<br />});<br /></script></pre>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.<br /><pre><ul id='menunavblue' class='menunavblue'><br /> <li><a expr:href='data:blog.homepageUrl' title='Halaman Utama'>Home</a></li><br /> <li><a href='http://mas-andes.blogspot.com/search/label/Komputer' target='_blank' title='Komputer'>Komputer</a><br />    <ul class='submenu'><br />    <li><a href='http://mas-andes.blogspot.com/search/label/Software' target='_blank' title='Software'>Software</a></li><br />     <li><a href='http://mas-andes.blogspot.com/search/label/Networking' target='_blank' title='Networking'>Networking</a></li><br /> <li><a href='http://mas-andes.blogspot.com/search/label/Pemrograman' target='_blank' title='Programming'>Programming</a></li><br /></ul><br /></li><br /> <li><a href='http://mas-andes.blogspot.com/search/label/CSS' target='_blank' title='CSS'>CSS</a><br /><ul class='submenu'><br /> <li><a href='http://mas-andes.blogspot.com/search/label/Slider' target='_blank' title='Slider'>Slider</a></li><br /> <li><a href='http://mas-andes.blogspot.com/search/label/Navigasi' target='_blank' title='Navigasi'>Navigasi</a></li><br /> <li><a href='http://mas-andes.blogspot.com/search/label/Image%20Effect' target='_blank' title='Image Effect'>Image Effect</a></li><br /></ul><br /></li><br /> <li><a href='http://mas-andes.blogspot.com/search/label/Tips%20Trik%20Blogger' target='_blank' title='Blogging'>Blogging</a><br />    <ul class='submenu'><br />     <li><a href='http://mas-andes.blogspot.com/search/label/HTML' target='_blank' title='HTML'>HTML</a></li><br />     <li><a href='http://mas-andes.blogspot.com/search/label/Jquery' target='_blank' title='jQuery'>jQuery</a></li><br />     <li><a href='http://mas-andes.blogspot.com/search/label/Widget' target='_blank' title='Widget Blog'>Widget Blog</a></li><br />    </ul><br /></li><br /><li><a href='http://mas-andes.blogspot.com/search/label/SEO' target='_blank' title='SEO'>SEO</a></li><br /><li><a href='http://mas-andes.blogspot.com/p/blog-page_8467.html' target='_blank' title='Sitemap'>Sitemap</a></li><br /><li><a class="end">&nbsp;</a></li><br /></ul></pre>Seluruh link di atas silahkan ganti dengan link label pada blog anda.<br /><br />Setelah semua terpasang dengan benar maka navigasi menu hasilnya akan tampak seperti berikut ini:<br /><style>.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/AVvXsEhz11rwKPB4n0r434OsIsLzB9ye6vmoAUPd92JuMnWjjtiFwb3SitCsbN1E04rlRZQuGwrvtyYa_4F-bpeh0pzuFiKMGKozhZ4MFWxo_kbVxGceAOJydODZ6KoLqHtQNnVVq9-1QVb4TIU/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/AVvXsEhI8rIVnBPTdzopaglxAHerViV-XkXC64gAHH8tYbnbPKGMi-Y8l15V6CyWXMSl9H8B8Fo845RST-iPQPSRZrzRogMW0j7NKXPZMjLrWdjtRfzkBYBdtmDgoErfVNrOpxSgokskXHdrLkc/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/AVvXsEiwAgWDnjrupRFH_Ye9wlKMS-BGsGD4yCiiAu4pLvIPCzYP7vTiAaCPRB3FJ3Q7-agotjeM1a08Nu_GE4D2LM6QJdu_Kf1dVUa_hYsnJPfEv47y8PVLg15FY0WVbjrfHVkPie5ViMvp5sI/h120/bluebg.gif);background-position: 0% -1px;border: 1px solid #3BBAE5;} .end{ width:2px;} </style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script><script src="http://faceblog-evolutions.googlecode.com/files/ajaxbloggermenu.js" type="text/javascript"></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/AVvXsEhRNoxifa1bbiOSfaFmzAH1Nm0GFy0rDVYTq4fX4FQQEiIWvDNI9O5NfhAKnPRktCvFrH36dkBffZgVMl-DBVvMtpxkhNAb5UsQn6XQC180jcgvLmzpVgDq4fd4AHtmC52_7FkwZNsTL7Y/w140-h140-p/no-image.png' // Default thumbnail Image }); }); </script> <br /><ul class="menunavblue" id="menunavblue"><li><a href="http://mas-andes.blogspot.com/" 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"> </a></li></ul><br />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: <br /><style>.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:#C60000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlKQpd2JGHIBJwtPrzdlFrKvQ6M4dJUWqK77mfve_gOLQe9Pe4i8adSRSp2drY2wodBt37DFbptAR5voUT_Xk1trDIq__Mftav0I1iju9hlBLl_qZRc3V8ZuWcVoO2fs0nUIVZn9ac6rE/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/AVvXsEhM3o3rG_wyLSNqDLafsfgy_JTsjtdkTBNJSEnaY3vrof7MaTkt1WDF5QBJYzRBulg8DKfTPQvQofkVX9KlqXRkqt-lm9uiYE79y0wMsO3tzq0ZykG3PwfaXzO7k_eaMYzI1HYfxJ1juSM/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/AVvXsEhM3o3rG_wyLSNqDLafsfgy_JTsjtdkTBNJSEnaY3vrof7MaTkt1WDF5QBJYzRBulg8DKfTPQvQofkVX9KlqXRkqt-lm9uiYE79y0wMsO3tzq0ZykG3PwfaXzO7k_eaMYzI1HYfxJ1juSM/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/AVvXsEhI8rIVnBPTdzopaglxAHerViV-XkXC64gAHH8tYbnbPKGMi-Y8l15V6CyWXMSl9H8B8Fo845RST-iPQPSRZrzRogMW0j7NKXPZMjLrWdjtRfzkBYBdtmDgoErfVNrOpxSgokskXHdrLkc/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/AVvXsEhMJoDxazUKpvtRCcEl-fwjoVySGjQpBrjKZ8g4Hvu_dzt-n5N0iu9lcDEwqpryS1g8R-zCPKWv1AhGYz1fKqecSljk5bNGeryiaatvJ26w0Ey2iwG2ahDliyf66bT00OiMxSJGgBlNEz8/h120/bg1.gif);border: 1px solid #e75921;} .end{ width:2px;} </style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script><script src="http://faceblog-evolutions.googlecode.com/files/ajaxblogmenu.js" type="text/javascript"></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/AVvXsEhRNoxifa1bbiOSfaFmzAH1Nm0GFy0rDVYTq4fX4FQQEiIWvDNI9O5NfhAKnPRktCvFrH36dkBffZgVMl-DBVvMtpxkhNAb5UsQn6XQC180jcgvLmzpVgDq4fd4AHtmC52_7FkwZNsTL7Y/w140-h140-p/no-image.png' // Default thumbnail Image }); }); </script> <br /><ul class="menunavred" id="navmenured"><li><a href="http://mas-andes.blogspot.com/" 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"> </a></li></ul><br />Berikut kodenya:<br />CSS*<br /><pre>.menunavred *{margin: 0;padding: 0;}<br />ul.menunavred {padding: 0;list-style: none;line-height: 1;overflow: visible !important;}<br />ul.menunavred:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}<br />ul.menunavred li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}<br />ul.menunavred li a{background:#9A0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlKQpd2JGHIBJwtPrzdlFrKvQ6M4dJUWqK77mfve_gOLQe9Pe4i8adSRSp2drY2wodBt37DFbptAR5voUT_Xk1trDIq__Mftav0I1iju9hlBLl_qZRc3V8ZuWcVoO2fs0nUIVZn9ac6rE/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;}<br />ul.menunavred li a:hover,ul.menunavred li a.hoverover{background: #e75921 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM3o3rG_wyLSNqDLafsfgy_JTsjtdkTBNJSEnaY3vrof7MaTkt1WDF5QBJYzRBulg8DKfTPQvQofkVX9KlqXRkqt-lm9uiYE79y0wMsO3tzq0ZykG3PwfaXzO7k_eaMYzI1HYfxJ1juSM/h120/bg_red.png);}<br />ul.menunavred ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}<br />ul.menunavred li:hover > ul{display: block;}<br />ul.menunavred ul li{float: none;min-width: 160px;background:#e75921;text-shadow: none;}<br />ul.menunavred ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}<br />ul.menunavred ul li a:hover,ul.navmenured ul li a.hoverover{background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM3o3rG_wyLSNqDLafsfgy_JTsjtdkTBNJSEnaY3vrof7MaTkt1WDF5QBJYzRBulg8DKfTPQvQofkVX9KlqXRkqt-lm9uiYE79y0wMsO3tzq0ZykG3PwfaXzO7k_eaMYzI1HYfxJ1juSM/h120/bg_red.png);}<br />ul.menunavred ul ul{display: none;left: 100%;top: 0;}<br />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;}<br />ul.navmenured li:hover div.submenu {display: block;}<br />ul.navmenured ul ,ul.navmenured ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}<br />ul.navmenured ul li{background: none !important;float: none !important;}<br />ul.navmenured ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #9A0000;}<br />ul.navmenured ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}<br />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;}<br />ul.navmenured ul.postslist li:last-child{border-bottom: none 0;}<br />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;}<br />ul.navmenured ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}<br />ul.navmenured ul.postslist li a{background: none;display: block;line-height: 1.4;padding: 0 !important;}<br />ul.navmenured .loader{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI8rIVnBPTdzopaglxAHerViV-XkXC64gAHH8tYbnbPKGMi-Y8l15V6CyWXMSl9H8B8Fo845RST-iPQPSRZrzRogMW0j7NKXPZMjLrWdjtRfzkBYBdtmDgoErfVNrOpxSgokskXHdrLkc/h120/loading.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}<br />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;}<br />#navmenured {background:#9A0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMJoDxazUKpvtRCcEl-fwjoVySGjQpBrjKZ8g4Hvu_dzt-n5N0iu9lcDEwqpryS1g8R-zCPKWv1AhGYz1fKqecSljk5bNGeryiaatvJ26w0Ey2iwG2ahDliyf66bT00OiMxSJGgBlNEz8/h120/bg1.gif);border: 1px solid #e75921;}<br />.end{ width:2px;}</pre>Javascript*<br /><pre><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><br /><script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/ajaxbloggermenu.min.js"></script><br /><script type="text/javascript"><br />jQuery(document).ready(function($) {<br />$('#navmenured').ajaxBloggerMenu({<br />numPosts : 4, // Maksimal tampilan jumlah posting<br />defaultImg : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNoxifa1bbiOSfaFmzAH1Nm0GFy0rDVYTq4fX4FQQEiIWvDNI9O5NfhAKnPRktCvFrH36dkBffZgVMl-DBVvMtpxkhNAb5UsQn6XQC180jcgvLmzpVgDq4fd4AHtmC52_7FkwZNsTL7Y/w140-h140-p/no-image.png' // Default thumbnail Image<br />});<br />});<br /></script></pre>HTML*<br /><pre><ul id='navmenured' class='menunavred'><br /> <li><a expr:href='data:blog.homepageUrl' title='Halaman Utama'>Home</a></li><br /> <li><a href='http://mas-andes.blogspot.com/search/label/Komputer' target='_blank' title='Komputer'>Komputer</a><br /> <ul class='submenu'><br /> <li><a href='http://mas-andes.blogspot.com/search/label/Software' target='_blank' title='Software'>Software</a></li><br /> <li><a href='http://mas-andes.blogspot.com/search/label/Networking' target='_blank' title='Networking'>Networking</a></li><br /> <li><a href='http://mas-andes.blogspot.com/search/label/Pemrograman' target='_blank' title='Programming'>Programming</a></li><br /></ul><br /></li><br /> <li><a href='http://mas-andes.blogspot.com/search/label/CSS' target='_blank' title='CSS'>CSS</a><br /><ul class='submenu'><br /> <li><a href='http://mas-andes.blogspot.com/search/label/Slider' target='_blank' title='Slider'>Slider</a></li><br /> <li><a href='http://mas-andes.blogspot.com/search/label/Navigasi' target='_blank' title='Navigasi'>Navigasi</a></li><br /> <li><a href='http://mas-andes.blogspot.com/search/label/Image%20Effect' target='_blank' title='Image Effect'>Image Effect</a></li><br /></ul><br /></li><br /> <li><a href='http://mas-andes.blogspot.com/search/label/Tips%20Trik%20Blogger' target='_blank' title='Blogging'>Blogging</a><br /> <ul class='submenu'><br /> <li><a href='http://mas-andes.blogspot.com/search/label/HTML' target='_blank' title='HTML'>HTML</a></li><br /> <li><a href='http://mas-andes.blogspot.com/search/label/Jquery' target='_blank' title='jQuery'>jQuery</a></li><br /> <li><a href='http://mas-andes.blogspot.com/search/label/Widget' target='_blank' title='Widget Blog'>Widget Blog</a></li><br /> </ul><br /></li><br /><li><a href='http://mas-andes.blogspot.com/search/label/SEO' target='_blank' title='SEO'>SEO</a></li><br /><li><a href='http://mas-andes.blogspot.com/p/blog-page_8467.html' target='_blank' title='Sitemap'>Sitemap</a></li><br /><li><a class="end">&nbsp;</a></li><br /></ul></pre><br /><style>.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/AVvXsEiUoFz80RhPnhLsAxKTSwmUJ0AFw0brfCrTlSlEK7XUCRAjGJgseUFLCj-L3uCAW87YSrl08CEytG0cfJWeUJs9_MRQCdQd4Hhxcn9F2zcnIN4JNKo-MyTqGjCRNY7P1Jum8pcJ981UDzk/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/AVvXsEhI8rIVnBPTdzopaglxAHerViV-XkXC64gAHH8tYbnbPKGMi-Y8l15V6CyWXMSl9H8B8Fo845RST-iPQPSRZrzRogMW0j7NKXPZMjLrWdjtRfzkBYBdtmDgoErfVNrOpxSgokskXHdrLkc/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/AVvXsEjTYxkJ-UpGQdp-eiTdhaMuXuVNXKFc5YBVTgSjePCYLOt7KwzeEZSNGdRxa8qFqZ55R1d-jHiCjl7LoeKSbpkBut057A0cD_kJZ3-GArhJshnwGtiSuwPaTLF56mEbHTaeNXjVlKM4dgk/h120/greenbg.gif);background-position: 0% -1px;border: 1px solid #52e052;} .end{ width:2px;} </style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script><script src="http://faceblog-evolutions.googlecode.com/files/ajaxmenublogger.js" type="text/javascript"></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/AVvXsEhRNoxifa1bbiOSfaFmzAH1Nm0GFy0rDVYTq4fX4FQQEiIWvDNI9O5NfhAKnPRktCvFrH36dkBffZgVMl-DBVvMtpxkhNAb5UsQn6XQC180jcgvLmzpVgDq4fd4AHtmC52_7FkwZNsTL7Y/w140-h140-p/no-image.png' // Default thumbnail Image }); }); </script> <br /><ul class="menunavgreen" id="menunavgreen"><li><a href="http://mas-andes.blogspot.com/" 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"> </a></li></ul><br />CSS*<br /><pre>.menunavgreen *{margin: 0;padding: 0;}<br />ul.menunavgreen {padding: 0;list-style: none;line-height: 1;overflow: visible !important;}<br />ul.menunavgreen:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}<br />ul.menunavgreen li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}<br />ul.menunavgreen li a{background:#52e052 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUoFz80RhPnhLsAxKTSwmUJ0AFw0brfCrTlSlEK7XUCRAjGJgseUFLCj-L3uCAW87YSrl08CEytG0cfJWeUJs9_MRQCdQd4Hhxcn9F2zcnIN4JNKo-MyTqGjCRNY7P1Jum8pcJ981UDzk/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;}<br />ul.menunavgreen li a:hover,ul.menunavgreen li a.hoverover{ background-position: 0% -60px;}<br />ul.menunavgreen ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}<br />ul.menunavgreen li:hover > ul{display: block;}<br />ul.menunavgreen ul li{float: none;min-width: 160px;background:#52e052;text-shadow: none;}<br />ul.menunavgreen ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}<br />ul.menunavgreen ul li a:hover,ul.menunavgreen ul li a.hoverover{ background-position: 0% -60px;}<br />ul.menunavgreen ul ul{display: none;left: 100%;top: 0;}<br />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;}<br />ul.menunavgreen li:hover div.submenu {display: block;}<br />ul.menunavgreen ul ,ul.menunavgreen ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}<br />ul.menunavgreen ul li{background: none !important;float: none !important;}<br />ul.menunavgreen ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #2BAA2B;}<br />ul.menunavgreen ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}<br />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;}<br />ul.menunavgreen ul.postslist li:last-child{border-bottom: none 0;}<br />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;}<br />ul.menunavgreen ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}<br />ul.menunavgreen ul.postslist li a{background: none;display: block;line-height: 1.4;padding: 0 !important;}<br />ul.menunavgreen .loader{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI8rIVnBPTdzopaglxAHerViV-XkXC64gAHH8tYbnbPKGMi-Y8l15V6CyWXMSl9H8B8Fo845RST-iPQPSRZrzRogMW0j7NKXPZMjLrWdjtRfzkBYBdtmDgoErfVNrOpxSgokskXHdrLkc/h120/loading.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}<br />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;}<br />#menunavgreen {background:#52e052 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTYxkJ-UpGQdp-eiTdhaMuXuVNXKFc5YBVTgSjePCYLOt7KwzeEZSNGdRxa8qFqZ55R1d-jHiCjl7LoeKSbpkBut057A0cD_kJZ3-GArhJshnwGtiSuwPaTLF56mEbHTaeNXjVlKM4dgk/h120/greenbg.gif);background-position: 0% -1px;border: 1px solid #52e052;}<br />.end{ width:2px;}</pre>Javascript*<br /><pre><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><br /><script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/ajaxmenublogger.js"></script><br /><script type="text/javascript"><br />jQuery(document).ready(function($) {<br />$('#menunavgreen').ajaxBloggerMenu({<br />numPosts : 4, // Maksimal tampilan jumlah posting<br />defaultImg : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNoxifa1bbiOSfaFmzAH1Nm0GFy0rDVYTq4fX4FQQEiIWvDNI9O5NfhAKnPRktCvFrH36dkBffZgVMl-DBVvMtpxkhNAb5UsQn6XQC180jcgvLmzpVgDq4fd4AHtmC52_7FkwZNsTL7Y/w140-h140-p/no-image.png' // Default thumbnail Image<br />});<br />});<br /></script></pre>HTML*<br /><pre><ul id='menunavgreen' class='menunavgreen'><br /> <li><a expr:href='data:blog.homepageUrl' title='Halaman Utama'>Home</a></li><br /> <li><a href='http://mas-andes.blogspot.com/search/label/Komputer' target='_blank' title='Komputer'>Komputer</a><br />    <ul class='submenu'><br />    <li><a href='http://mas-andes.blogspot.com/search/label/Software' target='_blank' title='Software'>Software</a></li><br />     <li><a href='http://mas-andes.blogspot.com/search/label/Networking' target='_blank' title='Networking'>Networking</a></li><br /> <li><a href='http://mas-andes.blogspot.com/search/label/Pemrograman' target='_blank' title='Programming'>Programming</a></li><br /></ul><br /></li><br /> <li><a href='http://mas-andes.blogspot.com/search/label/CSS' target='_blank' title='CSS'>CSS</a><br /><ul class='submenu'><br /> <li><a href='http://mas-andes.blogspot.com/search/label/Slider' target='_blank' title='Slider'>Slider</a></li><br /> <li><a href='http://mas-andes.blogspot.com/search/label/Navigasi' target='_blank' title='Navigasi'>Navigasi</a></li><br /> <li><a href='http://mas-andes.blogspot.com/search/label/Image%20Effect' target='_blank' title='Image Effect'>Image Effect</a></li><br /></ul><br /></li><br /> <li><a href='http://mas-andes.blogspot.com/search/label/Tips%20Trik%20Blogger' target='_blank' title='Blogging'>Blogging</a><br />    <ul class='submenu'><br />     <li><a href='http://mas-andes.blogspot.com/search/label/HTML' target='_blank' title='HTML'>HTML</a></li><br />     <li><a href='http://mas-andes.blogspot.com/search/label/Jquery' target='_blank' title='jQuery'>jQuery</a></li><br />     <li><a href='http://mas-andes.blogspot.com/search/label/Widget' target='_blank' title='Widget Blog'>Widget Blog</a></li><br />    </ul><br /></li><br /><li><a href='http://mas-andes.blogspot.com/search/label/SEO' target='_blank' title='SEO'>SEO</a></li><br /><li><a href='http://mas-andes.blogspot.com/p/blog-page_8467.html' target='_blank' title='Sitemap'>Sitemap</a></li><br /><li><a class="end">&nbsp;</a></li><br /></ul></pre>

Cara Membuat Ajax Menu di Blog – masih membahas seputar navigasi menu horisontal blog. Jika pada tut…

Read More

Cara Membuat Menu Navigasi Horisontal Blog

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhefX5zrBn6I9lyLse4lf_BKpYxzqrmI6NEYntTvfhxMwgv4IHdm4gL_xDu-v8wAYuMxNX2BjcfW9ZC57XPnzCgLuptCvkQIRbUvBDQwSObj7tyv6j7uiomJGIHu4EvlmrZSwcvMrHss_0/s1600/navigasi-menu-horisontal.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Menu Navigasi Horisontal Blog" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhefX5zrBn6I9lyLse4lf_BKpYxzqrmI6NEYntTvfhxMwgv4IHdm4gL_xDu-v8wAYuMxNX2BjcfW9ZC57XPnzCgLuptCvkQIRbUvBDQwSObj7tyv6j7uiomJGIHu4EvlmrZSwcvMrHss_0/s540/navigasi-menu-horisontal.gif" title="Cara Membuat Menu Navigasi Horisontal Blog" width="540" /></a><b>Cara Membuat Menu Navigasi Horisontal Blog</b> – kalau pada tutorial sebelumnya mungkin  mengenai <a href="http://mas-andes.blogspot.com/2013/08/9-style-mega-menu-drop-down-blogger.html" target="_blank" title="9 style mega menu drop down">mega menu drop down</a> terlalu ribet maka sekarang kita membahas yang ringan saja, menu horisontal sederhana dengan kode CSS yang tidak terlalu banyak maka membuat menu ini tidak terlalu rumit seperti mega menu yang mempunyai banyak sub menu. Menu navigasi horisontal dengan CSS yang sederhana ini terdapat dua pilihan menu beserta demo yang ada dibawah agar tidak penasaran sebelum memasang mungkin bisa terlebih dahulu dengan melihat demonya. Tampilan yang ramping dan masih sederhana serta source kode yang simple bisa menjadi tahap dasar untuk permulaan belajar, khususnya saya pribadi dan pemula lainnya untuk melangkah lebih jauh lagi dalam belajar mengolah kode dan mempercantik tampilan blog. Untuk penjelasan lebih lanjut, maka berikut tutorial untuk <b>Cara Membuat Menu Navigasi Horisontal Blog</b>.<br /><br />1. Login ke akun blogger.<br />2. Masuk menu Template lalu pilih Edit HTML.<br />3. Copy kode berikut ini lalu paste di atas kode <code>]]></b:skin></code> kemudian Simpan Template.<br /><pre>div.redmenu{ background:#9A0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMJoDxazUKpvtRCcEl-fwjoVySGjQpBrjKZ8g4Hvu_dzt-n5N0iu9lcDEwqpryS1g8R-zCPKWv1AhGYz1fKqecSljk5bNGeryiaatvJ26w0Ey2iwG2ahDliyf66bT00OiMxSJGgBlNEz8/h120/bg1.gif); border:1px solid #000; font-size:0; }<br />div.redmenu a{ display: inline-block; padding: 0 20px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlKQpd2JGHIBJwtPrzdlFrKvQ6M4dJUWqK77mfve_gOLQe9Pe4i8adSRSp2drY2wodBt37DFbptAR5voUT_Xk1trDIq__Mftav0I1iju9hlBLl_qZRc3V8ZuWcVoO2fs0nUIVZn9ac6rE/h108/bg.gif); color:#fff; text-decoration:none; font: bold 12px Arial; line-height: 32px; }<br />div.redmenu a:hover, div.redmenu a.current{ background-position:0 -60px; }<br />div.redmenu a.end{ width:2px; padding-left:0;padding-right:0; }</pre>4. Lalu langkah selanjutnya untuk menampilkan Menu Navigasi Horisontal di Blog caranya copy kode berikut ini, kemudian klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode tersebut didalamnya.<br /><pre><div class='redmenu'><br /><a expr:href='data:blog.homepageUrl' class='current'>Home</a><br /><a href='http://mas-andes.blogspot.com'>Menu 1</a><br /><a href='http://mas-andes.blogspot.com'>Menu 2</a><br /><a href='http://mas-andes.blogspot.com'>Menu 3</a><br /><a href='http://mas-andes.blogspot.com'>Menu 4</a><br /><a href='http://mas-andes.blogspot.com'>Menu 5</a><br /><a class="end">&nbsp;</a><br /></div></pre>Keterangan:<br />Ganti http://mas-andes.blogspot.com dengan URL label blog anda.<br /><br />5. Langkah terakhir klik Simpan, maka selesai dan seperti ini nanti hasilnya dari <b>Cara Membuat Menu Navigasi Horisontal Blog</b>.<br /><style>div.redmenu{ background:#9A0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMJoDxazUKpvtRCcEl-fwjoVySGjQpBrjKZ8g4Hvu_dzt-n5N0iu9lcDEwqpryS1g8R-zCPKWv1AhGYz1fKqecSljk5bNGeryiaatvJ26w0Ey2iwG2ahDliyf66bT00OiMxSJGgBlNEz8/h120/bg1.gif); border:1px solid #000; font-size:0; } div.redmenu a{ display: inline-block; padding: 0 20px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlKQpd2JGHIBJwtPrzdlFrKvQ6M4dJUWqK77mfve_gOLQe9Pe4i8adSRSp2drY2wodBt37DFbptAR5voUT_Xk1trDIq__Mftav0I1iju9hlBLl_qZRc3V8ZuWcVoO2fs0nUIVZn9ac6rE/h108/bg.gif); color:#fff; text-decoration:none; font: bold 12px Arial; line-height: 32px; } div.redmenu a:hover, div.redmenu a.current{ background-position:0 -60px; } div.redmenu a.end{ width:2px; padding-left:0;padding-right:0; } </style> <br /><div class="redmenu"><a href="http://mas-andes.blogspot.com/">Home</a><a href="http://mas-andes.blogspot.com/">Menu 1</a><a href="http://mas-andes.blogspot.com/">Menu 2</a><a href="http://mas-andes.blogspot.com/">Menu 3</a><a href="http://mas-andes.blogspot.com/">Menu 4</a><a href="http://mas-andes.blogspot.com/">Menu 5</a><a class="end"> </a></div><br />Atau apabila ingin menggunakan Menu Navigasi Horisontal Blog dengan warna lain seperti yang ada dibawah, maka langkah-langkah penerapannya seperti pada yang sudah tertera di atas. Berikut ini live demo beserta source kode menu navigasi horisontal blog.<br /><style>#bluemenu { border: solid 1px #39F; background:#64DAFC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwAgWDnjrupRFH_Ye9wlKMS-BGsGD4yCiiAu4pLvIPCzYP7vTiAaCPRB3FJ3Q7-agotjeM1a08Nu_GE4D2LM6QJdu_Kf1dVUa_hYsnJPfEv47y8PVLg15FY0WVbjrfHVkPie5ViMvp5sI/h120/bluebg.gif) repeat-x; } #menublues{ font-size:0; } #menublues ul, #menublues li{ display: inline; list-style-type: none;padding: 0;margin: 0;border:0;background-image:none; } #menublues a{ text-align: center; display: inline-block; font: normal 12px Arial; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz11rwKPB4n0r434OsIsLzB9ye6vmoAUPd92JuMnWjjtiFwb3SitCsbN1E04rlRZQuGwrvtyYa_4F-bpeh0pzuFiKMGKozhZ4MFWxo_kbVxGceAOJydODZ6KoLqHtQNnVVq9-1QVb4TIU/h108/blue.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; } #menublues a:hover, #menublues a.current{ background-position: 0% -60px; color: #fff; } #menublues a.end{ width:2px; padding-left:0;padding-right:0; } </style> <br /><div id="bluemenu"><div id="menublues"><ul><li><a href="http://mas-andes.blogspot.com/">Home</a></li><li><a href="http://mas-andes.blogspot.com/">Menu 1</a></li><li><a href="http://mas-andes.blogspot.com/">Menu 2</a></li><li><a href="http://mas-andes.blogspot.com/">Menu 3</a></li><li><a href="http://mas-andes.blogspot.com/">Menu 4</a></li><li><a href="http://mas-andes.blogspot.com/">Menu 5</a></li><li><a class="end"> </a></li></ul></div></div><br />CSS*<br /><pre>#bluemenu { border: solid 1px #39F; background:#64DAFC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwAgWDnjrupRFH_Ye9wlKMS-BGsGD4yCiiAu4pLvIPCzYP7vTiAaCPRB3FJ3Q7-agotjeM1a08Nu_GE4D2LM6QJdu_Kf1dVUa_hYsnJPfEv47y8PVLg15FY0WVbjrfHVkPie5ViMvp5sI/h120/bluebg.gif) repeat-x; }<br />#menublues{ font-size:0; } <br />#menublues ul, #menublues li{ display: inline; list-style-type: none;padding: 0;margin: 0;border:0;background-image:none; }<br />#menublues a{ text-align: center; display: inline-block; font: normal 12px Arial; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz11rwKPB4n0r434OsIsLzB9ye6vmoAUPd92JuMnWjjtiFwb3SitCsbN1E04rlRZQuGwrvtyYa_4F-bpeh0pzuFiKMGKozhZ4MFWxo_kbVxGceAOJydODZ6KoLqHtQNnVVq9-1QVb4TIU/h108/blue.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; }<br />#menublues a:hover, #menublues a.current{ background-position: 0% -60px; color: #fff; }<br />#menublues a.end{ width:2px; padding-left:0;padding-right:0; }</pre>HTML*<br /><pre><div id='bluemenu'><br /><div id='menublues'><br /><ul><br /><li><a expr:href='data:blog.homepageUrl' class='current'>Home</a></li><br /><li><a href='http://mas-andes.blogspot.com'>Menu 1</a></li><br /><li><a href='http://mas-andes.blogspot.com'>Menu 2</a></li><br /><li><a href='http://mas-andes.blogspot.com'>Menu 3</a></li><br /><li><a href='http://mas-andes.blogspot.com'>Menu 4</a></li><br /><li><a href='http://mas-andes.blogspot.com'>Menu 5</a></li><br /><li><a class='end'>&nbsp;</a></li><br /></ul><br /></div><br /></div></pre><br /><style>#greenmenu { border: solid 1px #52e052; background:#64DAFC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTYxkJ-UpGQdp-eiTdhaMuXuVNXKFc5YBVTgSjePCYLOt7KwzeEZSNGdRxa8qFqZ55R1d-jHiCjl7LoeKSbpkBut057A0cD_kJZ3-GArhJshnwGtiSuwPaTLF56mEbHTaeNXjVlKM4dgk/h120/greenbg.gif) repeat-x; } #menugreen{ font-size:0; } #menugreen ul, #menugreen li{ display: inline; list-style-type: none;padding: 0;margin: 0;border:0;background-image:none; } #menugreen a{ text-align: center; display: inline-block; font: normal 12px Arial; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUoFz80RhPnhLsAxKTSwmUJ0AFw0brfCrTlSlEK7XUCRAjGJgseUFLCj-L3uCAW87YSrl08CEytG0cfJWeUJs9_MRQCdQd4Hhxcn9F2zcnIN4JNKo-MyTqGjCRNY7P1Jum8pcJ981UDzk/h108/green.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; } #menugreen a:hover, #menugreen a.current{ background-position: 0% -60px; color: #fff; } #menugreen a.end{ width:2px; padding-left:0;padding-right:0; } </style> <br /><div id="greenmenu"><div id="menugreen"><ul><li><a href="http://mas-andes.blogspot.com/">Home</a></li><li><a href="http://mas-andes.blogspot.com/">Menu 1</a></li><li><a href="http://mas-andes.blogspot.com/">Menu 2</a></li><li><a href="http://mas-andes.blogspot.com/">Menu 3</a></li><li><a href="http://mas-andes.blogspot.com/">Menu 4</a></li><li><a href="http://mas-andes.blogspot.com/">Menu 5</a></li><li><a class="end"> </a></li></ul></div></div><br />CSS*<br /><pre><br />#greenmenu { border: solid 1px #52e052; background:#64DAFC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTYxkJ-UpGQdp-eiTdhaMuXuVNXKFc5YBVTgSjePCYLOt7KwzeEZSNGdRxa8qFqZ55R1d-jHiCjl7LoeKSbpkBut057A0cD_kJZ3-GArhJshnwGtiSuwPaTLF56mEbHTaeNXjVlKM4dgk/h120/greenbg.gif) repeat-x; }<br />#menugreen{ font-size:0; } <br />#menugreen ul, #menugreen li{ display: inline; list-style-type: none;padding: 0;margin: 0;border:0;background-image:none; }<br />#menugreen a{ text-align: center; display: inline-block; font: normal 12px Arial; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUoFz80RhPnhLsAxKTSwmUJ0AFw0brfCrTlSlEK7XUCRAjGJgseUFLCj-L3uCAW87YSrl08CEytG0cfJWeUJs9_MRQCdQd4Hhxcn9F2zcnIN4JNKo-MyTqGjCRNY7P1Jum8pcJ981UDzk/h108/green.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; }<br />#menugreen a:hover, #menugreen a.current{ background-position: 0% -60px; color: #fff; }<br />#menugreen a.end{ width:2px; padding-left:0;padding-right:0; }</pre>HTML*<br /><pre><br /><div id='greenmenu'><br /><div id='menugreen'><br /><ul><br /><li><a expr:href='data:blog.homepageUrl' class='current'>Home</a></li><br /><li><a href='http://mas-andes.blogspot.com'>Menu 1</a></li><br /><li><a href='http://mas-andes.blogspot.com'>Menu 2</a></li><br /><li><a href='http://mas-andes.blogspot.com'>Menu 3</a></li><br /><li><a href='http://mas-andes.blogspot.com'>Menu 4</a></li><br /><li><a href='http://mas-andes.blogspot.com'>Menu 5</a></li><br /><li><a class='end'>&nbsp;</a></li><br /></ul><br /></div><br /></div></pre>

Cara Membuat Menu Navigasi Horisontal Blog – kalau pada tutorial sebelumnya mungkin  mengenai mega m…

Read More