Home » Posts filed under Koleksi Tab Menu
Showing posts with label Koleksi Tab Menu. Show all posts
Showing posts with label Koleksi Tab Menu. Show all posts

Cara Membuat Menu Dropdown + Jam Digital

Kategori : Artikel / Blogging / Koleksi Tab Menu / Membuat Menu blog / Menu Vertikal / Tab menu / Tutorial / Tutorial Dasar Blogger
Posted : Unknown / Tuesday, November 20 , Tulis Komentar
Nah... Pada kali ini Rips Way melakukan aksi lagi, setelah kemaren belajar cara membuat Power Saving dengan kalimat kita sendiri... Sekarang akan berbagi Cara Membuat Menu Dropdown + Jam Digital ala sporty magazine, buat yang belum tau template sport magazine, silahkan langsung lihat pada demo ini di http://sportymagazine2.blogspot.com , bagaimana? Cantik kah?...

Yah... Memang cantik, apakah anda berminat untuk menerapkanya pada blog anda? Silahkan anda bisa mendownloadnya ditempat sumbernya...

Gimana dengan saya??? Yah saya juga tertarik, tapi saya lebih tertarik dengan Tab Menu Dropdownya, plus jam digital yang ada diatas menu tersebut, ini saya lakukan karena saya ingin mengurangi beban blog, yang saya rasa terlalu lama loading saat akan menampilkan jam analog ataupun digital yang kita pasang dari situs lain, yah... Cukup lama saat kita memanggil widget itu, apalagi saat server penyedia lagi sibuk, jam digital inilah solusinya... Walau agak ribet pemasanganya, tapi ringan saat kita membukanya...

Oke langsung saja kita ke pokok bahasan, gimana Cara Membuat Menu Dropdown + Jam Digital ala sport magazine? Gimana, apakah ingin membahas cara mencuri script blog orang lain, atau langsung menerapkan
script Cara Membuat Menu Dropdown + Jam Digital? Kalo mau ambil script, gampang, anda tinggal buka blog/website orang lain, lalu tekan CONTROL+U, ambilah mana2 yang perlu anda ambil, gimana? Pening ya? apa yang mau diambil? Iya... Saya juga pening... Tapi ini bisa juga koq buat obat... Hehe...

Langsung aja sob... Kembali ke topik, Cara Membuat Menu Dropdown + Jam Digital,
1. Masuk ke halaman Dasbor blog anda.
2. Klik Template.
3. Klik Edit HTML
4. Cari ]]></b:skin> dan letakan kode CSS ini tepat diatasnya,
Kode :
5. Cari kode <head> dan letakan kode script ini tepat di bawahnya
Kode :

6. Cari kode
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>
lalu hapus dan ganti dengan kode HTML berikut,

7. Simpan template.

Note : untuk menyesuaikan dengan lebar template anda, silahkan lakukan perubahan pada kode CSS.

Cara Membuat Menu Vertikal Pada Sidebar Blog

Kategori : Artikel / Blogging / Kode CSS / Koleksi Tab Menu / Menu Vertikal / Tab menu / Template
Posted : Unknown / Sunday, November 11 , 4 Ulasan
Jika Kemaren saya posting bagamina cara membuat tab menu horizontal Sekarang kita bahas cara membuat menu vertikal pada sidebar
Coba lihat gambar berikut ini
Apakah Menu seperti itu yang anda maksud? Jika iya mari kita ikuti caranya seperti berikut ini
Kalo Memang Itu yang dimaksud, ikuti langkah2 berikut ini
1. Log In ke blogger anda, Masuk ke dasbor
2. Masuk ke Tab Template> Edit HTML
3. Cari Kode ]]></b:skin> Dan Letakan kode CSS berikut ini Tepat diatas kode ]]></b:skin>
 Kode CSS:


Untuk Menyesuaikan Lebar, atur pada kode ini  width: 15em; pada kode CSS diatas, Semua perubahan warna pun ada pada kode CSS ini, Silahkan lakukan perubahan untuk menyesuaikan dengan blog anda.
4. Klik Simpan
5. Tetap Pada Dasbor, Kemudian Klik Tata Letak
6. Add Gadget/Elemen baru, Pilih HTML/Javascript
Masukan Kode Berikut ini


7. Klik Simpan.
Selamat, Anda sudah memiliki tab menu vertikal.... Happy Blogging

Membuat Tab Menu Sendiri Dan Menerapkan Di Blog

Kategori : Koleksi Tab Menu / Membuat Menu blog / Tab menu
Posted : Unknown / Sunday, November 11 , Tulis Komentar
Baiklah Bozzz.... Kali ini saya akan share bagaimana cara membuat Tab menu pada blog dengan kreasi kita sendiri, Bahan2 Cuma ada tiga macam.
1. Kode Css
2. Kode HTML
3. Button Menu (Tab Button)
Lihat dulu gambar ini, apakah seperti demikian Menu yang anda maksud?
 

Atau Lihat Demo Berikut ini 
DEMO

Kalo Memang Itu yang dimaksud, ikuti langkah2 berikut ini
1. Log In ke blogger anda, Masuk ke dasbor
2. Masuk ke Tab Template> Edit HTML
3. Cari Kode ]]></b:skin> Dan Letakan kode CSS berikut ini Tepat diatas kode ]]></b:skin>
 Kode CSS:
    body {
        margin:0;
        padding:0;
        font: normal 11px/1.5em Verdana;
}
h2 {
        font: normal 14px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
}
/*- Menu ripswaytabs--------------------------- */
    #ripswaytabs {
      float:left;
      width:100%;
      background:red;
      font-size:12px;
      line-height:normal;
      }
    #ripswaytabs ul {
        margin:0;
        padding:10px 10px 0 50px;
        list-style:none;
      }
    #ripswaytabs li {
      display:inline;
      margin:0;
      padding:0;
      }
    #ripswaytabs a {
      float:left;
      background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbiFL9D1NcoHg19QymG5zMlNPDB0ldKB_kKS9qcAFUJGyEOuEqYAcV7W82A4I9y6n7QjXiEhP4ss-ZPeyXVxdh1tE4kSyGEdb6GaGLVApTiFssol2yWEH910Wgu0EToblIufwK7zR-Xu0/s1600/ripswaytabsleft.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #ripswaytabs a span {
      float:left;
      display:block;
      background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidQ122PRBeBQcChpLgsRhBN-bcDH2atwNKXu0q1-GV0MnDN42nxa-5jB1K5feL2e_vfgcentFYMLR4TGk1iO50sR2U9uLpoFZDFTVLZdZ5GBjdsCmy-Qeax4582oGjBocHaDfcZk79EJM/s1600/ripswaytabsright.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #ripswaytabs a span {float:none;}
    /* End IE5-Mac hack */
    #ripswaytabs a:hover span {
      color:#FFF;
      }
    #ripswaytabs a:hover {
      background-position:0% -42px;
      }
    #ripswaytabs a:hover span {
      background-position:100% -42px;
      }
        #ripswaytabs #current a {
                background-position:0% -42px;
        }
        #ripswaytabs #current a span {
                background-position:100% -42px;
        }

4. Klik Simpan
5. Tetap Pada Dasbor, Kemudian Klik Tata Letak
6. Add Gadget/Elemen baru, Pilih HTML/Javascript
Masukan Kode Berikut ini
<div id="ripswaytabs">
<ul>
<li><a href="http://ripsway1.blogspot.com/"><span>Home</span></a></li>
<li><a href="http://ripsway1.blogspot.com/"><span>Artikel</span></a></li>
<li><a href="http://ripsway1.blogspot.com/"><span>Tutorial</span></a></li>
<li><a href="http://ripsway1.blogspot.com/"><span>Nasional</span></a></li>
<li><a href="http://ripsway1.blogspot.com/"><span>Trik &amp; Tips</span></a></li>
<li><a href="http://ripsway1.blogspot.com/"><span>Kontak Kami</span></a></li>
<li><a href="http://ripsway1.blogspot.com/"><span>Tentang Kami</span></a></li>
</ul>
</div>


7. Klik Simpan
Subscribe to: Posts (Atom)