Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Rollover List

Rollover List merupakan sebuah variasi dari css list yang didesain untuk mendapatkan sebuah bentuk list dengan penampilan baru yang menjadi sangat berbeda dari list apa adanya yang menjadi bawaan sebuah template. Tentu saja penampilan baru ini sengaja diciptakan untuk memberi penampilan yang lebih "modis dan bergaya" sehingga penampilan blogpun akan semakin terlihat atraktif dan menarik. Cukup sederhana cara membuatnya tetapi mampu memberikan penampilan baru yang sungguh jauh berbeda.

Kode CSS :
ul.GRlisting{
        margin:0;
        padding:0;
        list-style-type:none;
        font-family:Arial, Helvetica, sans-serif;
}
ul.GRlisting li{
        display:block;
        padding:2px !important;
        background:#444;
        border-bottom:1px dotted #5f5f5f;
}
ul.GRlisting li:hover{
        background:#555;
}
ul.GRlisting a:link, ul.GRlisting a:visited{ 
        background:transparent  url(https://lh4.googleusercontent.com/-u0XPRqFBfNU/T1uNTOOsV-I/AAAAAAAAAVQ/t1rX8b1tAwU/s128/gubhugreyot-bullet.png) no-repeat; 
        background-position:4px 0;
        padding:0 10px 0 22px;
        font-size:11px;
        color:#eee;
        text-decoration:none;
}
ul.GRlisting a:hover{
        color:#00ff00;
        background:transparent url(https://lh5.googleusercontent.com/-4wAdPsc5c4c/T2ob3bmxxzI/AAAAAAAAAd0/QuOgPQACoZw/s128/GRred-arrow-anima-9x6.gif) no-repeat;
        background-position:6px 4px;
}

xHTML :
<ul class="GRlisting">
<li id="active"><a href="URL_List-Item-1" id="current">List Item-1</a></li>
<li><a href="URL_List-Item-2">List Item-2</a></li>
<li><a href="URL_List-Item-3">List Item-3</a></li>
<li><a href="URL_List-Item-4">List Item-4</a></li>
<li><a href="URL_List-Item-5">List Item-5</a></li>
<li><a href="URL_List-Item-6">List Item-6</a></li>
<li><a href="URL_List-Item-7">List Item-7</a></li>
<li><a href="URL_List-Item-8">List Item-8</a></li>
<li><a href="URL_List-Item-9">List Item-9</a></li>
<li><a href="URL_List-Item-10">List Item-10</a></li> 
</ul>

Cara Membuat Rollover List
  1. Login ke Blogger.
    • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
    • Tuliskan Password.
    • Klik "Sign in"
  2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
    Klik "Rancangan (Design)".
  3. Kembali halaman baru akan terbuka, klik "Edit HTML".
  4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
    • Backup/Restore Template » berisi fitur untuk melakukan backup template.
      Lakukan Backup Template sebagai langkah preventif sebelum melakukan berbagai perubahan kode html baik berupa penambahan ataupun pengurangan kode css, javascript dan xHTML.
    • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
    • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
  5. Cari kode ]]></b:skin> pada "Box Edit Template".
  6. Copy kode CSS dan letakkan di atas ]]></b:skin>
  7. Klik "Simpan Template (Save Template)".
  8. Gunakan xHTML di box posting atau "Add a Gadget".
  9. Selesai! Buka blog dan lihat hasilnya!
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :



Update » Rebo   WAGE,Maret,20,2012

» Happy Blogging - gubhugreyot «

1 komentar:

 
GR | Edited by | gubhug reyot