Rabu, 16 September 2015

Cara Membuat Widget Artikel Per Kategori Pilihan


Membuat Widget Posting Terbaru Berdasarkan Kategori/Label tertentu, yaitu dengan memasukkan URL Blog dan Memasukkan kode HTML/Javascript.

CARA 1
1. Layout > Add a gadget > Feed
2. Masukkan url:

http://contohblognih.blogspot.com/feeds/posts/default/-/Label

3. Save!

CARA 2
1. Layout > Add a gadhet > HTML/Javascript 
2. Masukkan (Copas) salah satu kode berikut ini, pilih saja, atau tes satu-satu, mana yang cocok menurut selera dan pasa dengan template blog Anda.
3. Save!

Berikut ini Kode-Kode Posting Terbaru Berdasarkan Label yang harus Anda Copas di langkah kedua cara 2 di atas:

KODE 1 : Posting Terbaru Berdasarkan Label  Simple

<script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = false;
var showpostdate = false;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Label?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag"></script>

KODE 2 : Posting Terbaru Berdasarkan Label Simple

<div style="border: 1px solid rgb(000, 000, 000); height: 100px; overflow: auto; padding: 10px; width: 90%;">
<script style="text/javascript">
var numposts = 5;
var standardstyling = true;
</script>
<script type='text/javascript'>function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write('<li>');
document.write(posttitle);}
if (standardstyling) document.write('</li>');}</script>
<ul><script src="http://contohblognih.blogspot.com/feeds/posts/default/-/LABEL?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=500"></script> </ul>
</div>

KODE 3 : Posting Terbaru Berdasarkan Label Tanpa Gambar Thumbnail

<script style="text/javascript">
var numposts = 5;
var standardstyling = true;
</script>
<script type='text/javascript'>function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write('<li>');
document.write(posttitle);}
if (standardstyling) document.write('</li>');}</script>
<script src="http://contohblognih.blogspot.com/feeds/posts/default/-/NAMALABEL?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=500"></script>

KODE 4 : Posting Terbaru Berdasarkan Label + Gambar Thumbnail

<style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0; float:left;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;} </style><script type="text/javascript" src="http://yourjavascript.com/71374511518/recent-post-label-thumbnail.js"></script><script>
var numposts = 10;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 150;
</script><script src="http://contohblognih.blogspot.com/feeds/posts/default/-/LABEL?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">
</script>

KODE 5 : Posting Terbaru Berdasarkan Label + Gambar Thumbnail

<style>
img.recent_thumb {padding:1px;width:72px;height:72px;border:0; float:left;margin:0 10px 5px 1px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 72px;margin: 5px 10px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:72px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;} </style>
<script>
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){
if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)
{
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl=d;} else thumburl='http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif';
}
var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec";document.write('<li class="clearfix">');
if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><br>');

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write('<i>');
document.write(postcontent);
document.write('</i>');}
else {
document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...');
document.write('</i>');}
}

var towrite='';var flag=0;
document.write('<br><strong>');

if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}

if(showcommentnum==true)
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='1 Comments') commenttext='1 Comment';
if(commenttext=='0 Comments') commenttext='No Comments';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}

if(displaymore==true)
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Read more&#187;&#187;</a>';
flag=1;
;
}
document.write(towrite);
document.write('</strong></li>');
if(displayseparator==false)
if (i!=(numposts-1))
document.write('<hr color="#d9f1fa" size=0.5>');
}document.write('</ul>');

}
</script>
<script>
var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;
</script><script src="/feeds/posts/default/-/Label?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">
</script><div class="clear"/></div>

Catatan: Perhatina yang warna merah
1. Ganti contohblognih dengan alamat blog
2. Ganti Label dengan Label Posting yang akan ditampilkan
3. Label Dua Kata gunakan kode pemisah %20 sehingga menjadi Nama%20Label

Nah itu dia Cara Membuat Widget Posting Terbaru Berdasarkan Label alias Artikel Per Kategori. Kodenya CB koleksi dari berbagai sumber.
Read more

CARA MEMBUAT RECENT POST PILIHAN SEDERHANA


Berikut Langkah-Langkah Membuat Widget Recent Post Berdasarkan Label / Kategori 


  • Masuk ke akun blogger anda.
  • Pilih halaman tata letak (Layout).
  • Pilih elemen laman >> pilih tambah gadget ( add a gadget).
  • Kemudian pilih HTML/Javascript.
  • Selanjutnya silahkan salin code di bawah ini dan masukkan pada widget tersebut kemudian simpan.


  • <div style="overflow:auto;width:100%px;height:300px;padding:10px;border:2px solid #000000">
    <span id="pbl_labels"></span>
    <div id="pbl_posts"> Recent Posts </div>
    <script type="text/javascript">

    var jumlah_maksimum_post = 10;
    var dengan_ringkasan = true;
    var jumlah_karakter_ringkasan = 100;

    </script>
    <script src="http://septiamujizat.googlecode.com/files/recent-post.js">
    </script>

    <script src="http://okepos.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed">

    </script></div>
    Keterangan : 
    • Ganti huruf yang berwarna merah dengan alamat (url) blog Sobat
    • var jumlah_maksimum_post =  adalah jumlah maksimum post yang ingin ditampilkan
    • var dengan_ringkasan = true dan ganti "true" dengan "false" jika tidak mau disertai ringkasan
    • var jumlah_karakter_ringkasan = 100 adalah jumlah karakter ringkasan post Anda

    Demikianlah cara mudah membuat recent post berdasarkan label / kategori. Mudah-mudahan bermanfaat...

    Happy blogging...

    Read more

    Cara Membuat Widget Artikel Acak Terbaru


    Seperti gambar diatas, kali ini saya akan membagikan cara membuatnya. Tak sulit, cukup disimak ya...

    Langkah-langkah :
    1. Login ke akun Blogger
    2. Masuk ke Dasbor, lalu pilih menu Tata Letak
    3. Tambahkan Gadget, kemudian pilih HTML/JavaScripst
    4. Kemudian copy kode dibawah ini dan paste-kan ke kolom konten tersebut.

    <script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=10;function randomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    </script>
    <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&
    callback=randomposts" type="text/javascript"></script>


    * Catatan : teks berwarna biru merupakan jumlah posting yang akan tampil pada widget tersebut, bisa di rubah sesuai keinginan.
         5.   Klik Simpan
         6.   Selesai.



    Semoga bermanfaat...
    Read more

    Cara Merubah Widget Popular Post Update Terbaru


    Kelebihan widget ini adalah :
    1. Menggunakan Efek Hover
    2. Thumbnail gambar tidak kotak (Menggunakan Round Corner)
    3. Background terpisah di setiap judul posting dan menggunakan efek round corner (Sudut bulat)

    Bagaimana, menarik bukan?
    OK, langsung saja. Disimak ya...


    Cara menerapkan kode widget Popular Post :
    • Sign in di blogger.com
    • Pada menu drop down pilih template dan klik "Edit HTML"
    • Cari kode ]]></b:skin> lalu tempatkan kode berikut sebelum kode ]]></b:skin>
    /* Kode CSS tutorialblogspot.com */
    .popular-posts ul{padding-left:0}
    .popular-posts ul li{background:#FFF url() no-repeat scroll 5px 10px;list-style-type:none;border:1px solid #ddd;border-radius:30px;-moz-border-radius:30px;-webkit-border-radius:30px;-moz-box-shadow:3px 2px 5px #242424;-webkit-box-shadow:3px 2px 5px #242424;box-shadow:3px 2px 5px #242424;margin-bottom:5px;height:40px;padding:5px 5px 5px 20px !important}
    .popular-posts ul li a{font-style:italic}
    .popular-posts ul li:hover{border:1px solid #d10202;-moz-box-shadow:3px 2px 5px #d10202;-webkit-box-shadow:3px 2px 5px #d10202;box-shadow:3px 2px 5px #d10202}
    .popular-posts ul
    li a:hover{text-decoration:none}
    .popular-posts .item-thumbnail img{height:40px;width:40px;webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4)}
    .popular-posts .item-thumbnail img:hover{-moz-box-shadow:0 0 5px #d10202;-webkit-box-shadow:0 0 5px #d10202;box-shadow:0 0 5px #d10202}
    • Simpan template.


    Cara konfigurasi widget popular post
    1. Setelah menerapkan kode di atas, klik Layout (Tata letak)
    2. Klik add a gadget
    3. Tambahkan widget Popular Post
      widget
    1. Hilangkan tanda centang pada "Snippet" atau "Cuplikan"
    2. Klik Save

    Semoga bermanfaat...
    Read more

    6 Bagian Tubuh Wanita Yang Tak Boleh Disentuh Pasangan

    Apakah pasangan Anda sering berkata "jangan sentuh!" setiap kali Anda ingin memulai aktivitas yang lebih intim? Tak perlu khawatir, wanita memang selalu memiliki waktu-waktu tertentu yang tidak ingin disentuh pasangan.

    Nah, bagi para pria tentunya harus mengetahui kapan wanita tidak ingin disentuh di bagian-bagian tertentu. Jangan sampai, hanya karena tidak peka, Anda dan pasangan pun bertengkar hebat. Oleh karena itu, simak daftarnya berikut ini seperti yang dilansir dari The Stir by Cafemom.

    Puting

    Ketika wanita sedang menyusui atau sedang mengalami menstruasi, puting adalah bagian yang paling tidak nyaman. Oleh karena itu, hindari menyentuh area tersebut. 


    Kaki

    Wanita yang belum mencukur atau waxing pada bagian kaki, mereka seringkali merasa takut Anda akan menganggapnya jorok atau malas mencukur bulu-bulu halus di kaki.


    Organ intim

    Setelah selesai melakukan kegiatan sehari-hari, wanita cenderung segan dan tidak membiarkan pasangan menyentuh organ intim mereka. Bukan hanya tidak percaya diri, wanita juga tidak merasa nyaman bercinta sebelum mandi atau sebelum membersihkan tubuh terlebih dulu.


    Rambut

    Nah, untuk yang satu ini hampir semua wanita selalu melakukannya. Wanita selalu merasa lebih percaya diri ketika keluar dari salon dan tak ingin rambut yang indah sehabis perawatan rusak karena sentuhan atau belaian pasangan.


    Perut

    Sehabis makan, perut pasti akan terasa kenyang dan penuh. Di waktu ini lah wanita tidak suka disentuh di bagian perutnya.


    Bagian manapun, ketika berkeringat

    Banyak wanita yang merasa tidak nyaman ketika berkeringat sehabis olahraga ataupun melakukan kegiatan yang melelahkan. Hal itu yang menyebabkan mereka tidak ingin disentuh oleh pasangannya.


    Tentu saja selalu terdapat pengecualian mengenai hal-hal di atas yang dapat membuat para pria kebingungan. Pria memang harus memberikan perhatian lebih untuk dapat memuaskan hati wanita.


    Sumber : http://life.viva.co.id/news/read/610922-6-area-wanita-yang-tak-boleh-disentuh-pasangan

    Read more

    Menu Vertikal Keren di Sidebar Efek Menu Statis Fixed


    Seperti judul diatas dengan contoh gambarnya. kali ini saya akan memberikan 1 lagi menu vertikal yang gak kalah menariknya, tentunya akan semakin menambah kesan pro pada blog anda. Langsung saja, mari disimak yaaa...
    Pertama masuk Layout >> Add a new Widget >> HTML/JAVASCRIPT
     Paste kedalamnya semua kode di bawah ini >>

    <style>
    ul{
        list-style-type: none;
        margin: 0px;
        padding: 0px;
    }
    #BuildNextWebMenu{
        width: 240px;
        height: 100%;
        position: fixed;
    }

    .BuildNextWebMenu-left{
        left: -180px;
        top: 0px;
        transition:left 1s;
    }

    .BuildNextWebMenu-left:hover{
        left:0px;
    }

    /*################## RIGHT MENU ##############*/
    .BuildNextWebMenu-right{
        right: -180px;
        top: 0px;
        direction: rtl;
        transition:right 1s;
    }
    .BuildNextWebMenu-right ul>li i,#toggle{
        right: 200px;
    }

    .BuildNextWebMenu-right:hover{
        right:0px;
    }


    #menuHeader{
        width: 100%;
        height: 60px;
        cursor: pointer;
    }

    #toggle{
        position: absolute;
        left: 195px;
        top: 10px;
    }

    #menuLogo{
        position: absolute;
        top: 10px;
    }

    #BuildNextWebMenu ul>li{
        position: relative;
        height: 45px;
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }

    #BuildNextWebMenu ul>li a{
        color: #fff;
        line-height: 48px;
        margin: 20px;
        font-family: 'Alegreya Sans SC', sans-serif;
        transition: color 0.5s;
        text-decoration: none;
    }
    #BuildNextWebMenu ul>li i{
        position: absolute;
        left: 200px;
        top:15px;
        color: rgba(255, 255, 255, 0.3);
        transition: color 0.5s;
    }
    #social{
        width: 85%;
        height: 100px;
        margin: 20px auto auto auto;
    }

    #social a{
        text-decoration: none;
    }

    #social i{
        width: 36px;
        height: 36px;
        color: #fff;
        text-align: center;
        line-height: 37px;
        border: 1px solid rgba(255, 255, 255, 0.03);
        transition: background 0.5s;
    }

    #social .fa-facebook:hover{
        background: #305891;
    }

    #social .fa-twitter:hover{
        background: #2CA8D2;
    }

    #social .fa-youtube:hover{
        background: #C82828;
    }

    #social .fa-google-plus:hover{
        background: #CE4D39;
    }

    #BuildNextWebMenu{
        background: #222222;
        color: #fff;
    }
    #menuHeader{
        background: #24AAE9;
    }

    #BuildNextWebMenu ul>li:hover  a{
        color: #24AAE9;
    }
    #BuildNextWebMenu ul>li:hover  i{
        color: #24AAE9;
    }
    </style>
    <div id="BuildNextWebMenu" class="BuildNextWebMenu-left">
        <div id="menuHeader">
            <div id="toggle"><i class="fa fa-bars fa-2x"></i></div>
          <div id="menuLogo"><img src="img/logo.png" alt="BuildNextWebMenu"/></div>
        </div>
        <nav>
            <ul>
                <li>
                    <a href="#">
                        HOME <i class="fa fa-home"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        ABOUT <i class="fa fa-user"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        CLIENTS    <i class="fa fa-users"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        SHOP <i class="fa fa-shopping-cart"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        NEWS <i class="fa fa-file"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        SERVICES <i class="fa fa-laptop"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        PORTFOLIO <i class="fa fa-home"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        TEAM <i class="fa fa-group"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        BLOG <i class="fa fa-folder"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        MAP <i class="fa fa-map-marker"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        CONTACT <i class="fa fa-envelope"></i>
                    </a>
                </li>
            </ul>
        </nav>

        <div id="social">
            <a href="#">
                <i class="fa fa-facebook fa-2x"></i>
            </a>   
            <a href="#">
                <i class="fa fa-google-plus fa-2x"></i>
            </a>   
            <a href="#">
                <i class="fa fa-twitter fa-2x"></i>
            </a>   
            <a href="#">
                <i class="fa fa-youtube fa-2x"></i>
            </a>   
        </div>

    </div>
    Terakhir Save/Simpan.
    Eitttzzz satu lagi... setelah itu copy kode di bawah ini dibawah <meta content=) HTML blog anda. 
    <link href='http://lipis.github.io/bootstrap-social/assets/css/font-awesome.css' rel='stylesheet'/>
    <link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

    Sekian, semoga bermanfaat...
    Read more

    Cara Membuat Menu Vertikal Sidebar Blogger HTML 5 CSS3

    
    
    Pada kesempatan kali ini saya akan share vertikal menu menggunakan CSS3 and HTML5 yang keren tentunya. Contohnya seperti gambar diatas. Mari, langsung saja gan, disimak ya...
    
    
    Duplicat atau centang expand template dulu ya, sekedar jaga-jaga aja.
    
    
    
    
    1.  Letakkan kode script dibawah ini di gadget HTML kalian...
    
    
    
    
    <nav id="menu">
    
            <ul class="parent-menu">
    
                <li><a href="#">Home & Kitchen</a>
    
                    <ul>
    
                        <li><a href="#">item</a></li>
    
                        <li><a href="#">item</a></li>
    
                        <li><a href="#">item</a></li>
    
                        <li><a href="#">item</a></li>
    
                        <li><a href="#">item</a></li>
    
                        <li><a href="#">item</a></li>
    
                    </ul>
    
                </li>
    
                <li><a href="#">Electronics</a>
    
                    <ul>
    
                        <li><a href="#">item</a></li>
    
                        <li><a href="#">item</a></li>
    
                        <li><a href="#">item</a></li>
    
                        <li><a href="#">item</a></li>
    
                        <li><a href="#">item</a></li>
    
                    </ul></li>
    
                <li><a href="#">Clothing</a>
    
                    <ul>
    
                        <li><a href="#">item</a></li>
    
                        <li><a href="#">item</a></li>
    
                        <li><a href="#">item</a></li>
    
                        <li><a href="#">item</a></li>
    
                    </ul></li>
    
                <li><a href="#">Cars & Motorbikes</a>
    
                    <ul>
    
                        <li><a href="#">item</a></li>
    
                        <li><a href="#">item</a></li>
    
                        <li><a href="#">item</a></li>
    
                        <li><a href="#">item</a></li>
    
                    </ul>
    
                </li>
    
                <li><a href="#">Books</a>
    
                    <ul>
    
                        <li><a href="#">item</a></li>
    
                        <li><a href="#">item</a></li>
    
                        <li><a href="#">item</a></li>
    
                        <li><a href="#">item</a></li>
    
                    </ul>
    
                </li>
    
                <li><a href="#">Support</a>
    
                    <ul>
    
                        <li><a href="#">Contact Us</a></li>
    
                        <li><a href="#">Forum</a></li>
    
                        <li><a href="#">Deliveries</a></li>
    
                        <li><a href="#">T&C</a></li>
    
                    </ul>
    
                </li>
    
            </ul>
    
        </nav>
    
    
    
    
    2. Save/Simpan
    3. Masuk Blogger edit HTML kalian lalu Cari kode ]]:</skin> dan paste kode dibawah ini tepat dibawahnya.
    
    
    p, ul, li, div, nav
            {
    
                padding:0;
                margin:0;
            }
    
    
            body
            {
                font-family:Calibri;
            }
    
    
            #menu {
                overflow: auto;
                position:relative;
                z-index:2;
            }
    
    
            .parent-menu {
                background-color: #0c8fff;
                min-width:200px;
                float:left;
            }
    
    
            #menu ul
            {
                list-style-type:none;
            }
    
    
            #menu ul li a
            {
    
                padding:10px 15px;
                display:block;
                color:#fff;
                text-decoration:none;
            }
    
    
                #menu ul li a:hover
                {
                    background-color:#007ee9;
    
                } 
    #menu ul li:hover > ul {
    
                    left: 200px;
    
                    -webkit-transition: left 200ms ease-in;
    
                    -moz-transition: left 200ms ease-in;
    
                    -ms-transition: left 200ms ease-in;
    
                    transition: left 200ms ease-in;
    
                }
    
    
                #menu ul li > ul {
    
                    position: absolute;
    
                    background-color: #333;
    
                    top: 0;
    
                    left: -200px;
    
                    min-width: 200px;
    
                    z-index: -1;
    
                    height: 100%;
    
                    -webkit-transition: left 200ms ease-in;
    
                    -moz-transition: left 200ms ease-in;
    
                    -ms-transition: left 200ms ease-in;
    
                    transition: left 200ms ease-in;
    
                }
    
    
                #menu ul li > ul li a:hover
    
                {
    
                    background-color:#2e2e2e;
    
                }
    
    
    4. Klik save/simpan
    5. Selesai
    
    
    
    
    Sekian artikel ini dibuat untuk berbagi saja...
    Read more