Warna Background Otomatis dengan Button CSS 3

Written on 2:27 AM by Unknown


 بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Langsung ajah yaa Sob..
Tampilan blog yang cantik dan menarik merupakan tujuan utama bagi para pembuat blog, karena dengan tampilan yang bagus akan membuat banyak orang yang akan singgah ke blog kita untuk melihat dan ingin mengikutinya.
Dalam ksempatan ini saya akan coba membagi tips untuk membuat blog yang cantik dan menarik, yaitu membuat Background Otomatis dengan  Button CSS3
Oke bro dari pada panjang kalam, lebih baik kita langsung ke TKP saja. Untuk membuat kategori seperti contoh di bawah ini sangatlah mudah.
Langkah-langkah untuk membuat Blog warna-warni adalah sebagai berikut :
 
1. Login ke blog anda
2. Buka Dasbord/Desain  lalu klik Tata Letak.
3. Tambah widget dengan cara  mengklik Add Gadget (Tambah Gadget)
4. Cari dan klik HTML JavaScript.



KODE HTML
<table border="0" width="200">
<script type='text/javascript'>
function bgChange(bg)
{document.body.style.background=bg;}
</script>
<button onclick="bgChange('#ffffff')" value=('putih') onclick="bgchange('http://adaraghassani.blogspot.com/search/label/artikel%20komputer'" style="width: 100px;height:font-family: arial, helvetica, sans-serif;    font-size: 12px;        text-align: center;color: #ffffff;padding: 10px 15px;background: -moz-linear-gradient(
        top,
        #ffffff 0%,
        #ebebeb 50%,
        #dbdbdb 50%,
        #b5b5b5);
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(#ffffff),
        color-stop(0.50, #ebebeb),
        color-stop(0.50, #dbdbdb),
        to(#b5b5b5));
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border: 0px solid #949494;
    -moz-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 2px rgba(255,255,255,0.7);
    -webkit-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 2px rgba(255,255,255,0.7);
    text-shadow:
        0px -1px 0px rgba(000,000,000,0.9),
        0px 0px 1px rgba(255,255,255,1);margin: 0 0 .5em;
" /><b>Poetih</b></button>
<button onclick="bgChange('#8B0000')" value=('merah')onclick="bgchange('http://adaraghassani.blogspot.com/search/label/artikel%20komputer'" style="width: 100px;height:font-family: arial, helvetica, sans-serif;    font-size: 12px;        text-align: center;color: #ffffff;padding: 10px 15px;background: -moz-linear-gradient(
        top,
        #ff0000 0%,
        #660000);
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(#ff0000),
        to(#660000));
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border: 1px solid #660000;
    -moz-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(255,255,255,0.5);
    -webkit-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(255,255,255,0.5);
    text-shadow:
        0px 2px 1px rgba(000,000,000,1),
        0px 1px 0px rgba(255,255,255,0.3)margin: 0 0 .5em;
" /><b>Merah</b></button>
<button onclick="bgChange('#0000ff')" value=('biroe')onclick="bgchange('http://adaraghassani.blogspot.com/search/label/artikel%20komputer'" style="width: 100px;height:font-family: arial, helvetica, sans-serif;    font-size: 12px;        text-align: center;color: #ffffff;padding: 10px 15px;background: -moz-linear-gradient(
        top,
        #fff3db 0%,
        #2014cc 25%,
        #0088ff);
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(#fff3db),
        color-stop(0.25, #2014cc),
        to(#0088ff));
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border: 1px solid #f7eb6c;
    -moz-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px -1px 0px rgba(255,255,255,0.7);
    -webkit-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px -1px 0px rgba(255,255,255,0.7);
    text-shadow:
        0px -1px 1px rgba(000,000,000,0.2),
        0px 1px 0px rgba(255,255,255,0.3);margin: 0 0 .5em;
" /><b>Biroe</b></button>
<button onclick="bgChange('#ffd000')" value=('orange') onclick="bgchange('http://adaraghassani.blogspot.com/search/label/artikel%20komputer'" style="width: 100px;height:font-family: arial, helvetica, sans-serif;    font-size: 12px;        text-align: center;color: #ffffff;padding: 10px 15px;background: -moz-linear-gradient(
        top,
        #fff3db 0%,
        #ffc821 25%,
        #ff3c00);
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(#fff3db),
        color-stop(0.25, #ffc821),
        to(#ff3c00));
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border: 1px solid #b85f00;
    -moz-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px -1px 0px rgba(255,255,255,0.7);
    -webkit-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px -1px 0px rgba(255,255,255,0.7);
    text-shadow:
        0px -1px 1px rgba(000,000,000,0.2),
        0px 1px 0px rgba(255,255,255,0.3);margin: 0 0 .5em;
" /><b>Orange</b></button>
<button onclick="bgChange('#006400')"  value=('hijau tua') onclick="bgchange('http://adaraghassani.blogspot.com/search/label/artikel%20komputer'" style="width: 100px;height:font-family: arial, helvetica, sans-serif;    font-size: 12px;        text-align: center;color: #ffffff;padding: 10px 15px;background: -moz-linear-gradient(
        top,
        #25a723 0%,
        #1d631c);
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(#25a723),
        to(#1d631c));
    border-radius: 17px;
    -moz-border-radius: 17px;
    -webkit-border-radius: 17px;
    border: 1px solid #012c56;
    -moz-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(255,255,255,1);
    -webkit-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(255,255,255,1);
    text-shadow:
        0px -1px 0px rgba(000,000,000,0.2),
        0px 1px 0px rgba(255,255,255,0);margin: 0 0 .5em;
" /><b>Hijau</b></button>
<button onclick="bgChange('#000000')" value=('hitam') onclick="bgchange('http://adaraghassani.blogspot.com/search/label/artikel%20komputer'" style="width: 100px;height:font-family: arial, helvetica, sans-serif;    font-size: 12px;        text-align: center;color: #ffffff;padding: 10px 15px;background: -moz-linear-gradient(
        top,
        #fafafa 0%,
        #999999 25%,
        #474747);
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(#fafafa),
        color-stop(0.25, #999999),
        to(#474747));
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border: 1px solid #a6a6a6;
    -moz-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px -1px 0px rgba(255,255,255,0.7);
    -webkit-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px -1px 0px rgba(255,255,255,0.7);
    text-shadow:
        0px -1px 1px rgba(000,000,000,0.2),
        0px 1px 0px rgba(255,255,255,0.3);margin: 0 0 .5em;
" /><b>Hitam</b></button>
<button onclick="bgChange('#D2691E')"  value=('coklat') onclick="bgchange('http://adaraghassani.blogspot.com/search/label/artikel%20komputer'" style="width: 100px;height:font-family: arial, helvetica, sans-serif;    font-size: 12px;        text-align: center;color: #ffffff;padding: 10px 15px;background: -moz-linear-gradient(
        top,
        #ffffff 0%,
        #c9ab34 50%,
        #57461c 50%,
        #755b1a 65%,
        #a38923);
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(#ffffff),
        color-stop(0.50, #c9ab34),
        color-stop(0.50, #57461c),
        color-stop(0.65, #755b1a),
        to(#a38923));
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border: 1px solid #000000;
    -moz-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 5px rgba(161,142,016,0.6);
    -webkit-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 5px rgba(161,142,016,0.6);
    text-shadow:
        0px -1px 3px rgba(255,255,255,0.8),
        0px 1px 0px rgba(255,255,255,0.3);margin: 0 0 .5em;
" /><b>Coklat</b></button>
<button onclick="bgChange('#FFC0CB')"  value=('pink') onclick="bgchange('http://adaraghassani.blogspot.com/search/label/artikel%20komputer'" style="width: 100px;height:font-family: arial, helv etica, sans-serif;    font-size: 12px;        text-align: center;color: #ffffff;padding: 10px 15px;background: -moz-linear-gradient(
        top,
        #2ea6d2 0%,
        #b1a8f7 18%,
        #2b85a6 50%,
        #235a6e 75%,
        #7c81d6);
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(#2ea6d2),
        color-stop(0.18, #b1a8f7),
        color-stop(0.50, #2b85a6),
        color-stop(0.75, #235a6e),
        to(#7c81d6));
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border: 1px solid #0079d6;
    -moz-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 2px rgba(255,255,255,1);
    -webkit-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 2px rgba(255,255,255,1);
    text-shadow:
        0px -1px 0px rgba(206,231,240,0.2),
        0px 1px 0px rgba(026,052,061,0.4);margin: 0 0 .5em;
" /><b>Pink</b></button></table>
5. Masukan Kode Script diatas ke dalam Konten. dan berikan judul sesuai keinginan anda.
 6. Selesai..

NB :
  • Kode yang berwarna Merah adalah kode untuk warna. anda bisa merubah kode tersebut sesuai dengan warna yang anda inginkan. Untuk mencari warna silahkan klik disini 
  • Ganti Kode yang berwarna Biru dengan URL blog anda.
  • Jika ingin mengganti bentuk Button silahkan anda ganti kode yang berwarna Kuning dengan kode button yang anda inginkan. Untuk mencari bentuk Tombol Button CSS3 silahkan klik disini
  • Cara memakai Tombol Button CSS3 adalah tinggal klik saja Button yang kamu inginkan lalu akan muncul kode script disampingnya, lalu kamu copy seperti kode yang berwarna kuning di atas.

Semoga artikel ini bermanfaat buat anda, Jangan lupa kasih komentarnya yah Gan ^_^

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين



>> Baca Selanjutnya

Posted in | 0 komentar

Animated CSS 3 Multilevel Drop Down Menu

Written on 2:14 AM by Unknown

 

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Kita Mulai ajah Sob..
Multilevel Drop Down Menu dengan beberapa bentuk animasi tidak hanya dapat tercipta menggunakan javascript. Berkat pengembangan yang terjadi pada kode CSS yang saat ini lebih dikenal sebagai CSS3, beberapa animasi cantik layaknya menggunakan javascript dapat kita buat. Animated CSS3 Multilevel Drop Down Menu yang coba kita buat ini adalah salah satu contohnya.
Meskipun hingga detik ini baru beberapa browser yang support secara penuh, seperti halnya Opera, Safari dan Google Chrome, serta Mozilla sekalipun tidak penuh, namun kita boleh yakin bahwa di masa ke depan, perkembangan yang terjadi pada css3 ini menjadi sesuatu yang wajib untuk diikuti secara total oleh browser manapun.
Satu keuntungan penggunaan kode css secara total tentunya sangat jelas terasakan pada beban yang harus ditanggung sebuah blog. Banyaknya posting, baik berupa teks ataupun gambar yang disertai beberapa bentuk fungsi sebagai pelengkap blog dengan memanfaatkan javascript, semakin lama akan terasakan bagaimana loading blog menjadi semakin bertambah berat. Kalau hal seperti ini dibiarkan bertumpuk dan selalu terus bertumpuk,... lama kelamaan tentunya loading blog menjadi semakin tidak terkendalikan hingga pada suatu titik tertentu akan kita dapatkan betapa loading blog menjadi seperti layaknya lari seekor siput yang menderita kelumpuhan.
Membuat Multilevel Drop Down Menu tidaklah sulit, hanya mungkin yang terasakan agak "njelimet" ketika menyusun "urutan/bagan setiap menu-nya", dimana di sini dibutuhkan sedikit ketelitian hingga output yang dihasilkan sesuai dengan apa yang diharapkan. Persoalan klasik yang hampir selalu di alami oleh setiap blogger ketika menyusun sebuah urutan/bagan sebuah menu. Jadi pada intinya bukan sebuah kesulitan teknis, akan tetapi hanya butuh ketelatena dan kesabaran dalam manata bagian menu saja.




Kode CSS Multilevel Drop Down Menu
<style type="text/css">
#bgsGR_HzMenu {
 margin: -10px 0 0 0;
 padding: 7px 6px 0;
 background: #222 url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 -99px;
 line-height: 100%;
 border-radius: 0.2em;
 -webkit-border-radius: 0.2em;
 -moz-border-radius: 0.2em;
 box-shadow: 1px 1px 15px rgba(0,0,0, .4);
 -moz-box-shadow:1px 1px 15px rgba(0,0,0, .4);
 -webkit-box-shadow: 1px 1px 15px rgba(0,0,0, .4);
 }
#bgsGR_HzMenu:hover {
 box-shadow: 1px 3px 10px rgba(0,0,0, .5);
 -moz-box-shadow:  1px 1px 15px rgba(0,0,0, .5);
 -webkit-box-shadow:  1px 2px 15px rgba(0,0,0, .5);
 }
#bgsGR_HzMenu li {
 margin: 0 5px;
 padding: 0 0 8px;
 float: left;
 position: relative;
 list-style: none;
 }
#bgsGR_HzMenu a {
 font-weight: bold;
 color: #e7e5e5;
 text-decoration: none;
 display: block;
 padding:5px 12px;
 margin:0;
 border-radius:0.7em;
 -moz-border-radius: 0.7em;
 -webkit-border-radius: 0.7em;
 text-shadow: 2px 2px 4px #000;
 }
#bgsGR_HzMenu a:hover {
 background:#000;
 color: #fff;
 }
#bgsGR_HzMenu a#satu{
 transition:2s ease-in-out;
 -o-transition:2s ease-in-out;
 -moz-transition:2s ease-in-out;
 -webkit-transition:2s ease-in-out;
 transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
 -moz-transition: all 1s ease-in-out;
 -webkit-transition: all 1s ease-in-out;
 border:1px solid #444;
 box shadow:0px -1px 4px #999;
 background:#333 url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 -100px;
 }
#bgsGR_HzMenu a#satu:hover{
 transform: scale(1.3);
 -o-transform: scale(1.3);
 -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
 text-shadow:2px 3px 4px #000;
 border:1px solid #fff;
 }
#bgsGR_HzMenu .current a, #bgsGR_HzMenu li:hover > a {
 background: blue url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 -40px;
 border-top: solid 1px #f8f8f8;
 box-shadow: 0 1px 1px rgba(0,0,0, .2);
 -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
 -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
 text-shadow: 0 1px 0 rgba(156,156,156, 1);
 }
#bgsGR_HzMenu .current a{color:#3399FF;}
#bgsGR_HzMenu li:hover > a {color:red;}
#bgsGR_HzMenu ul li:hover a, #bgsGR_HzMenu li:hover li a {
 background: none;
 border: none;
 color: #666;
 box-shadow:none;
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
 transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -webkit-transition: all 0.5s ease-in-out;
 }
#bgsGR_HzMenu ul li:hover a, #bgsGR_HzMenu li:hover li a{
    border-radius:0.1em;
 -moz-border-radius: 0.1em;
 -webkit-border-radius: 0.1em;
 }
#bgsGR_HzMenu ul a:hover {
 background: #000 url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 -100px !important;
 color: #fff !important;
 text-shadow: 0 1px 1px rgba(0,0,0, .1);
 }
#bgsGR_HzMenu li:hover > ul {
 display: block;
 }
#bgsGR_HzMenu ul {
 display: none;
 margin: 0;
 padding: 0;
 width: 185px;
 position: absolute;
 top: 28px;
 left: 0;
 background: #444 url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 0;
 border: solid 1px #b4b4b4;
 border-radius: 10px;-moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 box-shadow: 0 2px 13px #777;
 -webkit-box-shadow: 0 2px 13px #777;
 -moz-box-shadow:  0 2px 13px #777;
 transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
 -moz-transition: all 1s ease-in-out;
 -webkit-transition: all 1s ease-in-out;
 }
#bgsGR_HzMenu ul:hover {
 margin-top:10px;
 transform: scale(1.1);
 -o-transform: scale(1.1);
 -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
 box-shadow: 0 2px 13px #000;
 -webkit-box-shadow: 0 2px 13px #000;
 -moz-box-shadow:  0 2px 13px #000;
 }
#bgsGR_HzMenu ul li {
 float: none;
 margin: 0;
 padding: 0;
 border-radius:none;
 -moz-border-radius:none;
 -webkit-border-radius:none;
 }
#bgsGR_HzMenu ul a {
 font-weight: normal;
 text-shadow: 0 1px 0 #fff;
 border-radius: 0px;
 -moz-border-radius: 0x;
 -webkit-border-radius: 0px;
 }
#bgsGR_HzMenu ul ul {
 left: 181px;
 top: -3px;
 }
#bgsGR_HzMenu ul li:first-child > a {
 background: #222 url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 -40px;
 border-top-left-radius:9px;
 border-top-right-radius:9px;
 -moz-border-radius-topleft: 9px;
 -moz-border-radius-topright: 9px;
 -webkit-border-top-left-radius: 9px;
 -webkit-border-top-right-radius: 9px;
 text-shadow:0px 1px 1px #000;color:white;
 }  
#bgsGR_HzMenu ul li:last-child > a {
 border-bottom-left-radius:9px;
 border-bottom-right-radius:9px;
 -moz-border-radius-bottomleft: 9px;
 -moz-border-radius-bottomright: 9px;
 -webkit-border-bottom-left-radius: 9px;
 -webkit-border-bottom-right-radius: 9px;
 text-shadow:0px 1px 1px #000;color :white;
 }
#bgsGR_HzMenu:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
 }
#bgsGR_HzMenu {
 display: inline-block;
 }
html[xmlns] #bgsGR_HzMenu {
 display: block;
 }
* html #bgsGR_HzMenu {
 height: 1%;
 }
</style>




Kode HTML CSS3 Multilevel Drop Down Menu
<ul id="bgsGR_HzMenu">

  <li class="current"><a id="satu" href="Link-1">Nama Link-1    </a></li>
    <li><a id="satu" href="Link-2">Nama Link-2</a>
      <ul>
        <li><a href="Link-2a">Nama Link-2a</a>
          <ul>
            <li><a href="Link-2a-1">Nama Link-2a-1</a></li>
            <li><a href="Link-2a-2">Nama Link-2a-2</a>
              <ul>
                <li><a href="Link-2a-2.1">Nama Link-2a-2.1</a></li>
                <li><a href="Link-2a-2.2">Nama Link-2a-2.2</a></li>
                <li><a href="Link-2a-2.3">Nama Link-2a-2.3</a></li>
              </ul>
            </li>
            <li><a href="Link-2a-3">Nama Link-2a-3</a></li>
          </ul>
        </li>
      <li><a href="Link-2b">Nama Link-2b</a></li>
      <li><a href="Link-2c">Nama Link-2c</a></li>
      <li><a href="Link-2d">Nama Link-2d</a>
        <ul>
          <li><a href="Link-2d-1">Nama Link-2d-1</a></li>
          <li><a href="Link-2d-2">Nama Link-2d-2</a></li>
          <li><a href="Link-2d-3">Nama Link-2d-3</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li><a id="satu" href="Link-3">Nama Link-3</a>
    <ul>
      <li><a href="Link-3a">Nama Link-3a</a>
        <ul>
          <li><a href="Link-3a-1">Nama Link-3a-1</a></li>
          <li><a href="Link-3a-2">Nama Link-3a-2</a></li>
          <li><a href="Link-3a-3">Nama Link-3a-3</a></li>
          <li><a href="Link-3a-4">Nama Link-3a-4</a></li>
        </ul>
      </li>
      <li><a href="Link-3c">Nama Link-3c</a></li>
      <li><a href="Link-3d">Nama Link-3d</a></li>
    </ul>
  </li>
 
  <li><a id="satu" href="Link-4">Nama Link-4</a>
    <ul>
      <li><a href="Link-4a">Nama Link-4a</a></li>
      <li><a href="Link-4b">Nama Link-4b</a></li>
    </ul>
  </li>
 
  <li><a id="satu" href="Link-5">Nama Link-5</a></li>
 
  <li><a id="satu" href="Link-5">Nama Link-6</a></li>

</ul>
Cara Menggunakan CSS3 Multilevel Drop Down Menu
  1. Login to Blogger (Login ke Blogger), dengan menggunakan User Name/Nama Pengguna atau Email Address serta Password.
  2. Setelah masuk ke Dasbor, KLIK link "Design (Rancangan)".
  3. KLIK Add Gadget (Tambah Gadget) yang terdapat di "Page Elemen (Elemen Laman) yang di tandai dengan box bergaris putus-putus. Pilihlah di atas header atau di bawah header. Apabila elemen di bagian tersebut belum ada (ditambahkan) silahkan KLIK link di bawah ini untuk membaca tutorial tentang cara menambahkan elemen baru di bagian header.
  4. Beberapa saat setelah KLIK "Add Gadget (Tambah Gadget)", maka akan ada beberapa pilihan penambahan widget yang tersedia.
  5. KLIK HTML/Javascript, kemudian simpan seluruh kode (CSS dan HTML) di box yang tersedia.
  6. KLIKSAVE/Simpan dan buka hasilnya dengan membuka blog.
  7. Selain dengan cara tersebut di atas, sampeyan dapat juga menyimpan kode CSS-nya di atas kode ]]></b:skin> . Apabila hendak di simpan di sini, silahkan buang kode <style type="text/css> dan tag penutupnya </style>
  8. Cobalah membuka menu ini di opera atau di Safari dan Google Chrome untuk melihat tampilan menu dengan bentuk animasinya.
Semoga artikel ini bermanfaat buat anda, Jangan lupa kasih komentarnya yah Gan ^_^
 
 

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

>> Baca Selanjutnya

Posted in | 0 komentar