UNIK

Translate

Cara Membuat Tabel,kotak,kolom di Blog

Cara Membuat tabel atau kotak di blog atau di artikel postingan itu lah pembahasan kita hari ini. Untuk membuatnya sangat lah mudah. anda sedikit menambahkan atau menyisip kan kode script ke artikel yang ingin anda beri kotak atau tabel. Nah mungkin masih bingung yang saya maksudkan. Mari kita simak kode script di bawah ini.

Berikut langkah-langkah cara membuat tabel atau kotak di blog anda:
  • Tabel dengan satu (1) kolom

    Nama Sahabat

    <table border="1"><tr><td>Nama Sahabat></td></tr></table>
  • Tabel dengan dua (2) kolom

    Nama
    Hoby

    <table border="1" width="300">
    <tr><td>Nama Sahabat</td><td>Hoby</td></tr>
    </table>
  • Table tiga (3) kolom dengan empat (4) baris

    NamaKelasHobby
    A6Makan bakso
    A6Makan bakso
    A6Makan bakso
    A6Makan bakso

    <table border="1" width="300">
    <tr bg#3366ff">#E0F8E0">
    <td align="center">
    <b>Nama</b></td><td align="center"><b>Kelas</b></td><td align="center"><b>Hobby</b></td>
    </tr><tr><td align="center">A</td><td align="center">6</td><td align="left">Makan bakso</td></tr>
    <tr><td align="center">A</td><td align="center">6</td><td align="left">Makan bakso</td></tr>
    <tr><td align="center">A</td><td align="center">6</td><td align="left">Makan bakso</td></tr>
    <tr><td align="center">A</td><td align="center">6</td><td align="left">Makan bakso</td></tr>
    </table>
  • Dari contoh di atas saya rasa anda sudah mengerti, jika belum silahkan anda coba utak atik saja sendiri. jangan pernah takut untuk bisa.
Selamat mencoba.....

Cara membuat kotak iklan (Banner Box)

Cara membuat kotak iklan (Banner Box) - Kali ini Wan Bloggers akan menulis tentang Trik Blogspot, yaitucara membuat kotak iklan 125 x 125 atau banner box. Fungsinya tiada lain untuk menempatkan iklan yang akan dipasang di blog kita jika suatu saat blog kita visitornya sudah ramai. Saya sarankan penawaran kepada pemasang iklan pada blog kita jika blog kita sudah benar-benar ramai, percuma saja blog kita masih sepi ditawarin kepada orang buat pasang iklan merekapun akan berpikir dua kali dan mereka tidak akan sudi merogoh koceknya seandainya blog kita biasa-biasa saja. Baiklah untuk jelasnya lihat bentuknya dibawah ini.

Cara membuat kotak iklan (Banner Box):

Pertama, masuk pada halaman Edit HTML, kemudian masukan kode CSS dibawah ini dibawah kode <b:skin><![CDATA[

#Box-Banner-ads  {

margin: 0px;

padding: 5px;

text-align: center;
}
#Box-Banner-ads  img {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #c0c0c0;
}
#Box-Banner-ads  img:hover {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #333;
}
 

Kalau sudah, selanjutnya buat element halaman baru (caranya : Klik tata letak >> tambah gadget >> HTM/Javascript). 


Pastekan Kode dibawah ini untuk menampilkan iklannya :

<div id="Box-Banner-ads">
<a target="_blank" href="http://kokeykhia.blogspot.com"><img 
border="0" alt="ads" src="http://3.bp.blogspot.com/-Fu-O3NT0Inw/T88MeRRB4II/AAAAAAAABkQ/p9Hj1WUhDOI/s1600/125x125.gif"/></a>

<a target="_blank" href="http://kokeykhia.blogspot.com"><img 
border="0" alt="ads" src="http://3.bp.blogspot.com/-Fu-O3NT0Inw/T88MeRRB4II/AAAAAAAABkQ/p9Hj1WUhDOI/s1600/125x125.gif"/></a>

<a target="_blank" href="http:// kokeykhia .blogspot.com"><img 
border="0" alt="ads" src="http://3.bp.blogspot.com/-Fu-O3NT0Inw/T88MeRRB4II/AAAAAAAABkQ/p9Hj1WUhDOI/s1600/125x125.gif"/></a>

<a target="_blank" href="http:// kokeykhia .blogspot.com"><img 
border="0" alt="ads" src="http://3.bp.blogspot.com/-Fu-O3NT0Inw/T88MeRRB4II/AAAAAAAABkQ/p9Hj1WUhDOI/s1600/125x125.gif"/></a>
</div>


Untuk jumlah iklan anda tinggal menambahkan atau mengurangi sesuai kode dibawah ini. Jangan lupa mengganti warna Merah dengan alamat URL target iklan mau diarahkan kemana, dan warna Hijau untuk alamat gambarnya. 

<a target="_blank" href="http:// kokeykhia .blogspot.com"><img 
border="0" alt="ads" src="http://3.bp.blogspot.com/-Fu-O3NT0Inw/T88MeRRB4II/AAAAAAAABkQ/p9Hj1WUhDOI/s1600/125x125.gif"/></a>

Semoga tutorial ini bermanfaat buat anda, jangan lupa setelah praktek !!!




GABUNG Halaman Facebook saya Kokeykhia.com ,


dengan mengklik Tombol SUKA dibawah ini
www.facebook.com/kokeykhia

Membuat Recent Post by Label Thumbnail Saja


Kemaren saya sudah menuliskan Cara Bikin Recent Post by Label With Thumbnai.
Nah sekarang saya akan menuliskan cara membuat Membuat Recent Post by Label Thumbnail Saja tanpa tulisan.

Pada dasarnya cara membuat recent post by label dengan thumnail saja ini hampir sama dengan cara bikin recent post by label with thumnail, cuma ada sedikit pembedaan


Ok langsung saja ...
Cara Pasang Recent Post by Label With Thumbnail di Blogger
Seperti biasa langkah yang harus di lakukan adalah :
  1. Login ke Dashboard Blogger
  2. Klik Rancangan/Design/Tata Letak
Jika bingung gimana caranya silakan baca Panduan Cara Menghias Blog Blogger.


Jika teman sudah berada di halaman Rancangan silakan pilih widget HTML/JavaScript kemudian
 masukkan script berikut:



Keterangan:
numposts = 6 (Angka 6 adalah jumlah recent post yang akan di tampilakn, silakan ganti sesuai keinginan teman)
Nama Label = Isi dengan Nama Label yang artikelnya ingin di tampilkan ( contoh blogger%20template) biasanya label yang pakai spasi di pisahkan dengan %20.

Cara Membuat Menu Navigasi Horisontal Bercabang / Drop Down


Template default bawaan blogger biasanya minim sekali dengan widget-widget termasuk menu navigasi. Terkecuali jika kita mendownload sendiri template dari blog lain. Menu navigasi penting artinya untuk meningkatkan kunjungan ke blog kita, walaupun masih ada cara lain seperti menambahkan label, recent posts, related posts ataupun popular posts di blog kita. Menu navigasi biasanya terdiri dua macam; vertikal dan horisontal. Menu navigasi Vertikal atau menu navigasi lurus ke atas biasanya diletakkan di sidebar, sedangkan menu navigasi horisontal kita letakkan di atas judul posting atau di bawah header/judul blog.

menu navigasi horizontal bercabang

Membuat menu navigasi bisa dilakukan dengan berbagai cara, bisa memasukkan kode css ke dalam template, ini permanen tentunya, dan cara yang kedua cukup menambahkan widget dengan memasukkan kode tertentu ke dalam widget/gadget tersebut. Pada tutorial ini saya akan membuat menu navigasi horizontal dengan cara yang cukup mudah yang letaknya di bawah header.

Oke langsung saja bagaimana cara membuat menu navigasi horisontal bercabang,
Masuk ke akun blogger> Rancangan > tata letak > add gadget pilih HTML/Javascript, kemudian masukkan kode berikut ini. (Jangan lupa saat menambahkan gadget, pilih gadget yang di bawah header.)

add menu navigasi

    <style>
    #menunavigasihorisontal {
        background: #848484;
        width: 100%;
   
        color: #FFF;
            margin: 10px 0;
            padding: 0;
            position: relative;
            border-top:0px solid #960100;
            height:35px; }

    #bb2nav {
        margin: 0;
        padding: 0;}
    #bb2nav ul {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2navli {
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
        color: #FFF;
        display: block;
       font:bold 12px Helvetica, sans-serif;
       margin: 0;
        padding: 9px 12px 11px 12px;
            text-decoration: none;
            border-right:0px solid #627AAD;}
    #bb2nav li a:hover, #bb2nav li a:active {
        background: #2E9AFE;
        color: #FFF;
        display: block;
        text-decoration: none;
            margin: 0;
        padding: 9px 12px 11px 12px;}

    #bb2nav li {
        float: left;
        padding: 0;}
    #bb2nav li ul {
        z-index: 9999;
        position: absolute;
        left: -999em;
        height: auto;
        width: 160px;
        margin: 0;
        padding: 0;}
    #bb2nav li ul a {
        width: 140px;}
    #bb2nav li ul ul {
        margin: -25px 0 0 161px;}

    #bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav

li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
        left: -999em;}
    #bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li

li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav

li li li.sfhover ul {
        left: auto;}
    #bb2nav li:hover, #bb2nav li.sfhover {
        position: static;}
    #bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        margin: 1px 0 0 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;}
    #bb2nav li li a:hover, #bb2nav li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}
    #bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li

a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;
        margin: 1px 0 0  -14px;}
    #bb2nav li li li a:hover, #bb2nav li li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}

    </style>
    <div id='menunavigasihorisontal'>
              <ul id='bb2nav'>
                <li>
                  <a href='#'>Home</a>
                </li>
                <li>
                  <a href='#'>Tentang Saya</a>
                </li>
                <li>
                  <a href='#'>Contact</a>
                     <ul>
                        <li><a href='#'>Sub Halaman 1</a></li>
                        <li><a href='#'>Sub Halaman 2</a></li>
                        <li><a href='#'>Sub Halaman 3</a></li>
                      </ul>
                </li>
                <li>
                  <a href='#'>Daftar Isi ▼</a>                 <ul>
                    <li><a href='#'>
Sub Halaman 1</a></li>
                    <li><a href='
#'>Sub Halaman 2</a></li>
                    <li><a href='
#'>Sub Halaman 3</a> 
                
   <ul>
                    <li><a href='#'>Sub 
Sub Halaman 1</a></li>
                    <li><a href='#'>Sub 
Sub Halaman 2</a></li>
                    <li><a href='#'>Sub 
Sub Halaman 3</a></li>
                  </ul>

                  </li>
                  </ul>             </li>
          </ul>
        </div>
Pengaturan dan modifikasi;

1. Silahkan ubah warna background menu sesuai selera ditandai dengan kode seperti #2E9AFE
2. Untuk membuang cabang yang tidak dibutuhkan (mungkin terlalu banyak lihat kode berwarna biru 
                  <ul> 
                    <li><a href='#'>Sub Sub Halaman 1</a></li> 
                    <li><a href='#'>Sub Sub Halaman 2</a></li> 
                    <li><a href='#'>Sub Sub Halaman 3</a></li> 
                  </ul>
bisa juga sobat tambahkan di item menu lainnya jika ingin.
3.  Masukkan alamat halaman atau postingan blog yang dikehendaki pada kode # .
4.  Perhatikan kode-kode yang sudah diberi warna saat menambah atau membuang item menu tertentu agar tidak error.


Oke saya kira sudah cukup jelas dan mudah, untuk live  demo silahkan buka di sini

Selamat mencoba.  


Read more: http://blogbelajar2.blogspot.com/2012/04/cara-membuat-menu-navigasi-horisontal.html#ixzz1uk8ezUjU

CopyGator | Menemukan Penggemar Situs Anda


Pernahkan Anda berselancar di dunia maya, lalu secara tidak sengaja menemukan tulisan dari suatu blog yang sangat mirip sekali dengan tulisan yang pernah Anda buat publikasikan di blog Anda sendiri? Lantas apa yang ada dalam benak Anda? Kaget, marah, senang, bangga, atau jika Anda cukup percaya diri mungkin Anda juga akan berpikir adanya kemungkinkan adanya penggemar lain di internet yang menyukai tulisan dan menyalin tulisan Anda. Kemudian Anda berusaha mencarinya ke seluruh jagat maya, proses tersebut tentunya sangat melelahkan dan memakan banyak waktu, lantas bagaimana cara yang mudah untuk menemukan penggemar rahasia Anda tersebut?
CopyGator - Menemukan Penggemar Situs Anda
Kini Anda akan merasa sangat beruntung karena dapat dipertemukan dengan penggemar Anda melalui layanan berlambang buaya yang berbau teknologi ini. CopyGator akan membantu menemukan berbagai situs, blog bahkan forum yang memajang tulisan Anda, baik secara parsial maupun keseluruhan.

Bagaimana cara kerja CopyGator? Layanan ini mengumpulkan data dari lebih dari 2 juta blog atau situs yang memiliki sindikasi RSS dan menjaring lebih dari setengah juta artikel baru setiap harinya. Server milik CopyGator kemudian memanfaatkan seluruh data yang didapat untuk kemudian memeriksa dan mengevaluasi satu postingan dengan postingan lainnya untuk menetapkan apakah ada dua postingan yang memiliki beberapa kesamaan atau memang 100% sama.
Cara penggunaannya sangat mudah, Anda tinggal memasukkan URL situs/blog yang ingin Anda lacak kontennya (tidak harus situs yang Anda miliki). Tekan “Enter” atau klik Show me, kemudian CopyGator akan menampilkan daftar situs yang memiliki konten yang sama dengan yang Anda tulis, jika tidak muncul berarti ada beberapa kemungkinan:
  • URL feed untuk situs Anda tidak ditemukan oleh CopyGator, maka solusinya adalah dengan memasukkan link sindikasi RSS ke situs CopyGator atau bisa juga dengan menanamkan badge CopyGator ke situs yang Anda miliki
  • Situs Anda atau tidak mempublikasikan konten melalui sindikasi RSS
  • Tidak ada yang menyalin konten dari situs Anda
Jika Anda menemukan beberapa situs yang mirip, klik link Compare untuk melihat perbandingannya secara lebih detil. CopyGator akan memperlihatkan waktu publikasi, URL postingan, alamat situs, URL feed dan menampilkan isi teks yang sama antara dua situs tersebut dan ditentukan berapa persen tingkat kesamaannya.


Cara membuat status loading blog


Cara membuat status loading di blog / website.
Status loading keren ini akan muncul sementara blog kamu sedang memuat halaman sampai 100%, silahkan lihat contoh tampilan status loading (preload page) pada demo dibawah ini.
Demo tampilan status loading:

Memuat halaman…
Langkah-langkah membuat status loading:
1) Pasang kode javascript dibawah ini pada bagian <head> blog kamu:
<script src='http://tc.comze.com/js/preloadpage.js' type='text/javascript'/>

2) Kemudian cari baris <body>, ganti baris kode tersebut dengan kode html dibawah ini:

<body onLoad='PreloadPage();'>
<div id='prepage' style='position: fixed; _position: absolute; top: 0px; right: 0px; clip: inherit; _top: expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-offsetHeight); _left: expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth-offsetWidth); width: 100%; height: 100%; background-color: #000; padding: 0px; border: 0px; text-align: center; filter: alpha(opacity=75); -moz-opacity: .75; opacity: .75; font-family: verdana; font-weight: bold; color: #ccc;'>
<script type='text/javascript'>PreLoading();</script>
</div>
Selamat mencoba!!

cara membagi elemen gadget menjadi dua kolom



Yak Setelah saya Share tentang bagaimana Teknik Melukis Dalam Air, kali ini saya akan share tentang tutorial Blog kepada anda yaitu bagaimana cara membagi elemen gadget menjadi dua kolom versi Kertas Kecil Kita. Mungkin sobat mempunyai template yang cocok untuk sobat tetapi kurang pas di hati sobat.

Disini akan dijelaskan trik untuk membagi gadget di blogspot menjadi dua kolom sehingga blog sobat akan terlihat lebih rame. Dengan membagi gadget menjadi dua kolom atau lebih, sobat juga bisa memanfaatkannya untuk meletakkan iklan


Langsung saja ini scrip Cara Membagi Elemen Gadget menjadi dua kolom :
  • Login Ke Blogger sobat
  • Klik Rancangan > Pilih Edit HTML dan jangan lupa download template/backup untuk jaga jaga.
  • Cari Kode ]]></b:skin>
  • Copy paste kode berikut letakkan di atas kode ]]></b:skin>
#kolom-kiri {
width: 49%;
float: left;
}
#kolom-kanan {
width: 49%;
float: right;
}

  • Dalam tutorial ini menambahkan gadget di sidebar so cari dahulu kode sidebar misalnya seperti ini
<div id='sidebar-wrapper'>


<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label99' locked='false' title='Labels' type='Label'/>
</b:section>

  • Catatan : Tidak semua template sama dan label di atas hanyalah contoh
  • Setelah itu kita sisipkan kode CSS yang sudah di buat tadi di antara </b:section> dan </div>
</div>


<b:section class='sidebar' id='kolom-kiri' showaddelement='yes'/>


<b:section class='sidebar' id='kolom-kanan' showaddelement='yes'/>


<div style='clear: both;'/>

  • Save dan Lihat di Page elemen

Membuat Rocking Rolling Rounded Menu dengan JQuery dan CSS3

Asalamualaikum.Wr.Wb. Kali ini saya akan share Tips dan trik NgeBlog. Kali ini saya akan membahas bagaimana cara Membuat Menu Navigasi Rocking Rolling Rounded – Pertama kali melihat tampilan Rocking Rolling Rounded Menu dengan JQuery dan CSS3 ini langsung membuat saya Tertarik. 
Dalam versi yang saya share kali ini efek animasi icon menu yang berputar menggunakan jquery sehingga tampilannya menjadi lebih bagus dan menarik. Selanjutnya tinggal pilih tempat terbaik untuk meletakkan menu ini, misalnya diatas header atau dibawah header. Sudah pasti tampilan blog sobat akan menjadi tambah keren dah !!


Membuat Rocking and Rolling Rounded Menu dengan Jquery dan CSS3 :

1.  Pastikan dalam template sobat sudah dilengkapi dengan JQuery 1.3.2 ya. Kalau belum pasang aja script dibawah ini dan letakkan diatas kode </head>..
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

2.  Kemudian letakkan juga kode dibawah ini sesudah atau tepat dibawah kode JQuery 1.3.2 tadi.
<script src='http://raihanun.googlecode.com/files/jquery-animate-css-rotate-scale.js' type='text/javascript'/>

<script src='http://raihanun.googlecode.com/files/jquery-css-transform.js' type='text/javascript'/>

3.  Selanjutnya copy kode CSS dibawah ini dan paste tepat di atas kode ]]></b:skin>  dalam template.

#rocking-rolling{
width:auto;
height:52px;
text-align:left;
font-family:"Trebuchet MS",sans-serif;
font-size:16px;
font-style:normal;
font-weight:bold;
text-transform:uppercase;
}

#rocking-rolling h2,#rocking-rolling p, #rocking-rolling form{
/* netralisasi tampilan elemen heading, paragraf dan formulir */
margin:0 0 0 0;
pading:0 0 0 0;
border:none;
background:transparent;
}

#rocking-rolling .item{
position:relative;
background-color:#f0f0f0;
float:right;
width:52px;
margin:0px 5px; height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;
}

#rocking-rolling .link{
left:2px; top:2px;
position:absolute;
width:48px;
height:48px;
}

#rocking-rolling .icon_home{
background:transparent url(http://3.bp.blogspot.com/-fuX8vT6cIzs/TlXFJXROx2I/AAAAAAAAAxE/D1kiRmSFBy4/s1600/home.png) no-repeat top left;
}

#rocking-rolling .icon_mail{
background:transparent url(http://2.bp.blogspot.com/-FaTjV0LsMXQ/TlXFJ_5vpxI/AAAAAAAAAxc/JRPFgDCZ6lg/s1600/mail.png) no-repeat top left;
}
#rocking-rolling .icon_help{
background:transparent url(http://4.bp.blogspot.com/-l7M2zGOJAQo/TlXFJ0YZR6I/AAAAAAAAAxM/32acLuLn_r8/s320/help.png) no-repeat top left;
}

#rocking-rolling .icon_find{
background:transparent url(http://4.bp.blogspot.com/-ZIEGzN0LZCg/TlXFJ8WVzEI/AAAAAAAAAxU/2-oDKLYjsKw/s1600/find.png) no-repeat top left;
}

#rocking-rolling .icon_photos{
background:transparent url(http://4.bp.blogspot.com/-IwFEevO-np8/TlXFKFu47FI/AAAAAAAAAxk/aejG1YmQumc/s1600/photos.png) no-repeat top left;
}

#rocking-rolling .item_content{
position:absolute;
height:52px;
width:220px;
overflow:hidden;
left:56px;
top:7px; background:transparent; display:none;
}

#rocking-rolling .item_content h2{
color:#aaa;
text-shadow:1px 1px 1px #fff;
background-color:transparent;
font-size:14px;
}

#rocking-rolling .item_content a{
background-color:transparent;
float:left;
margin-right:7px;
margin-top:3px;
color:#bbb;
text-shadow:1px 1px 1px #fff;
text-decoration:none;
font-size:12px;
}

#rocking-rolling .item_content a:hover{
color:#0b965b;
}

#rocking-rolling .item_content p{
background-color:transparent;
text-transform:none;
font-weight:normal !important;
display:none;
}

#rocking-rolling .item_content p input{
border:1px solid #ccc;
padding:1px;
width:155px; float:left;
margin-right:5px;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}

4.  Terakhir adalah tag HTML untuk memanggil menu navigasi Rocking Rolling Rounded yang dapat diletakkan dimana sobat menginginkan menu ini tampil, misalnya dibawah header atau di atas header. Posisi header dalam template biasanya ditandai dengan kode <div id='header-wrapper'>

<div id='rocking-rolling'>
<div class='item'>
<a class='link icon_mail'></a>
<div class='item_content'>
<h2>KONTAK SAYA</h2>
<p>
<a href='#'>Email</a>
<a href='#'>Twitter</a>
<a href='#'>Facebook</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_help'></a>
<div class='item_content'>
<h2>BANTUAN</h2>
<p>
<a href='#'>Buku Tamu</a>
<a href='#'>Lapor</a>
<a href='#'>Kritik dan Saran</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_find'></a>
<div class='item_content'>
<h2>TELUSURI</h2>
<p>
<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' method='get'><input name='q' type='text'/></form>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_photos'></a>
<div class='item_content'>
<h2>GALERI FOTO</h2>
<p>
<a href='#'>Kategori</a>
<a href='#'>Arsip</a>
<a href='#'>Daftar Isi</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_home'></a>
<div class='item_content'>
<h2>MULAI DARI SINI</h2>
<p>
<a href='#'>Pelayanan</a>
<a href='#'>Portfolio</a>
<a href='#'>Pembayaran</a>
</p>
</div>
</div>

<div style='clear:both;'></div>
</div>

<script type='text/javascript'>  function collapse(a){var b=1440;var c=setInterval(function(){if(b==0){clearInterval(c);return}b-=40;$('.link',a).stop().animate({rotate:'+=40deg'},0)},10);a.stop().animate({width:'52px'},1e3).find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut()}function expand(a){var b=0;var c=setInterval(function(){if(b==1440){clearInterval(c);return}b+=40;$('.link',a).stop().animate({rotate:'+=-40deg'},0)},10);a.stop().animate({width:'268px'},1e3).find('.item_content').fadeIn(400,function(){$(this).find('p').stop(true,true).fadeIn(600)})}$('.item').hover(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)})  </script>

5.  Silahkan diedit JUDUL MENU, NAMA MENU serta Link Referensi # sesuai keinginan sobat.
6.  Save template anda.
Related Posts Plugin for WordPress, Blogger...