Cara Gampang Menciptakan Sajian Label Keren Diblog

Cara Praktis Membuat Menu Label Keren diblog - Tutorial kali ini saya bilang sangat unik, kenapa tidak, tampilan menu ini apabila di klik maka akan menunjukkan semua entri yang ada dalam label tersebut, tidak seperi label bawaan apabila di klik maka akan melaksanakan loading dan menawarkan hasil entri dalam label tertentu di areal entri ( postingan ), menu label tersebut akan melaksanakan penyesuain dengan lebar widget kawasan menu label ini di letakkan jadi tidak perlu lagi melaksanakan resize.

Jika teman galau kurang lebihnya ibarat gambar dibawah ini:

 Nah,, bagai mana sudah ada gambaran? untuk lebih jelasnya ikuti petunjuk dibawah ini dan teman dapat eksklusif coba pada blog sobat:

Cara Praktis Membuat Menu Label Keren diblog

- Masuk Keakun Blog sobat
- Pilih Template
- Klik Tombol Edit HTML
- Cari Kode ]]></b:skin> (Gunakan tombol ctrl + f untuk memudahkan pencarian kode)

- Copy instruksi berikut dan letakan di Atas instruksi ]]></b:skin>

    #dafis-acc{
    font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#333;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO3aQPmxeYg2xAScpyFP3d-oI-Yl8nIsRNAaldA2Nkjfa-6GMSs70xNW5-RtYocZbOWMRQhy4ub23SW5BMYr3f0HBMzq_agXP9Me4na7a1l3Ewa4ZFx2vB293kXW8hg9ff3hQL8FZInh4/s320/bg5.gif) repeat-y scroll left center #E7F7FB;
    padding:2px 0;
    border:1px solid #339DC6;
    }
    .dafis-label{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKm_usJAzXJxrnjYRiyJd7hVthNqRWN3cvM6KdOE_pRlNqUBfgAl24Vv6yrtDInX3VZhxisWcbdL98wy6F_CHRb-h-2meLrV9wbb7lJfwv2AdiWwSfP1Y0kfpL5tW_KIUYf2yxgh_bxds/s1600/bg4.gif) repeat-x scroll 0 0 #E1F4FB;
    font-weight:bold;
    line-height:1.4em;
    overflow:hidden;
    white-space:nowrap;
    vertical-align: baseline;
    margin: 1px 3px;
    outline: none;
    cursor: pointer;
    text-decoration: none;
    padding: 2px 10px;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    border:1px solid #2F94BA;
    }
    .dafis-label:hover{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5gjjzExq2_x8fwFdxnBOwkvePdT0WD97z5PVzjDDotBNewp9XWNtejImqVr5NN1sD5KMVKk8DU7UMdc-tpofI4Np3IHWZeBqKfAoqkWzsyXOSwcubhBpnvEww3AGTUD56uL5phQSkfa8/s320/bg2.gif) repeat-x scroll 0 0 #E1F4FB;
    color:#003366;
    }
    .dafis-daf ol{
    margin:0 0 0 30px !important;
    padding:0 !important;
    }
    .dafis-daf ol li{
    background-color:#C9E9F4;
    line-height:1.5em;
    margin:1px 3px !important;
    white-space:nowrap;
    text-align:left;
    border:1px solid #339DC6;
    }
    .dafis-daf ol li a{
    text-decoration: none !important;
    color:#333 !important;
    display:block;
    padding-left:10px;
    }
    .dafis-daf ol li a:hover{
    background: #7BC4DF;
    border-left: 5px #333 solid;
    padding-left: 5px;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    }

- Sekarang Cari Kode </head>
- Copy dan paste instruksi berikut Diatas Kode </head>

<script src='http://dapurtutorial8.googlecode.com/files/Scriptdaftarisi1.js' type='text/javascript'/>

- Jika Sudah Klik Tombol Simpan Template
- belum tamat sobat, selanjutnya ikuti petunjuk dibawah ini:

Selanjutnya Letakkan di sidebar

- Sobat masuk dasbord blog teman pilih Tata Letak --> Add Gadget --> Pilih HTML/JavaScript.
- Masukkan instruksi dibawah ini kedalam kotak HTML/JavaScript.:

<script type="text/javascript" src="http://dapurtutorial9.googlecode.com/files/Scriptdaftarisi2.txt"></script><script src="http://softwaremaniapc.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Keterangan :
Perhatikan URL yang Berwarn BIRU ganti memakai URL blog Anda

- Jangan lupa Save
- tamat dan lihat hasilnya.

Sekian dulu sobat  Cara Praktis Membuat Menu Label Keren diblog, jangan lupa mampir lagi diblog

::Selamat Mencoba::

Share this post