Cara Midamel List Dua Lajur (2 Kolom)

List 2 (dua) lajur mangrupa hiji usaha kanggo nyiptakeun effisiensi rohang,ku kituna lamun biasana dina hiji rohang ngan aya hiji lajur list,kalawan padika ieu mangka urang tiasa memaksimalkeun tanagi tande hiji rohang blog barobah kaayaan kabagi dina 2 buah lajur. Tangtos wae kanggo memaksimalkeun usaha ieu teks saban list haruslah didamel sependek manawi luyu rohang anu sadia. Wangun List 2 lajur nyaeta sepertos dihandap iyeu:

D E M O:

• Item 1a
• Item 1b
• Item 2a
• Item 2b
• Item 3a
• Item 3b
• Item 4a
• Item 4b
• Item 5a
• Item 5b
• Item 6a
• Item 6b

Kode CSS:

#ItemA{
       padding:10px;
       width :auto;
       background:#ddd;
       border:1px dotted #333366;
       margin:20px 0;
}
#ItemA ul{padding:0;margin:0;list-style-type:none !important;}    
#ItemA li{
       height:16px;
       color:#333;
       list-style-type:none !important;
       background:#555;
       padding:5px 8px;
       font-size:0.9em;
       text-decoration:none;border-bottom:1px dotted #888;
}
#ItemA li.ItemA2{
       margin-left:50%;
       margin-top:-27px;
       padding:5px 6px;
       text-decoration:none;background:#666;
}  
.ItemA_alt{
       background:#666;
}
#ItemA a:link{text-decoration:none;color:#eee;}
#ItemA a:hover{color:#0CF;}
* html #ItemA li.ItemA2{
       margin-top:-19px;
}

xHTML :

<div id="ItemA">
<ul>
    <li><a href="URL">Item 1a</a></li>
    <li class="ItemA2"><a href="URL">Item 1b</a></li>
    <li class="ItemA_alt"><a href="URL">Item 2a</a></li>
    <li class="ItemA2"><a href="URL">Item 2b</a></li>
    <li><a href="URL">Item 3a</a></li>
    <li class="ItemA2"><a href="URL">Item 3b</a></li>
    <li class="ItemA_alt"><a href="URL">Item 4a</a></li>
    <li class="ItemA2"><a href="URL">Item 4b</a></li>
    <li><a href="URL">Item 5a</a></li>
    <li class="ItemA2"><a href="URL">Item 5b</a></li>
    <li class="ItemA_alt"><a href="URL">Item 6a</a></li>
    <li class="ItemA2"><a href="URL">Item 6b</a></li> 
</ul>
</div>

Cara Midamel List Dua Lajur (2 Kolom) :

1. Login ka Blogger.
   
   • Tuliskeun "User Name" (gmail) atawa tuliskeun "Email Address" (non gmail).
   • Tuliskeun Password.
   • Klik "Sign in"
2. Sababaraha wanci sanggeus klik sign in anjeun bade nepungan halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Balik halaman anyar bade kabuka , klik "Edit HTML".
4. Hiji halaman anyar balik urang jumpai. Halaman ieu eusina 3 (tilu) haturan:
   
   • Backup/Restore Template » eusina fitur kanggo ngalakukeun backup template.
     Pigawe Backup Template minangka lengkah preventif sateuacan ngalakukeun sagala rupa parobahan kode html melali penambahan ataupun pengurangan kode css, javascript jeung xHTML.
   • Edit Template » eusina hiji box ageung anu di jerona berisikan kode html penyusun blog.
   • Old Templates » eusina template lami blogger (Template Tata Lokasi & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS sarta letakkan di luhur ]]></b:skin>
7. Klik "Simpen Template (Save Template)".
8. Gunakeun xHTML waktos posting..

Catetan/Katerangan :

Panduan backup template,cara pilari kode sarta sagala rupa cara nunda kode di template tiasa dibuka di Special Tutorials dina menu palebah kenca.

Mangga oge buka Tutorial sanes anu metot pisan sarta patut di turutan sampeyan sadaya. Akses ngaliwatan link handap ieu :

Update » Rebo   WAGE,Juni,10,2012

» BEWARA SUNDA - mitrabewarasunda «

Ngarobah tampilan hover link

Hover anu sering dipake dina hiji blog,umumna ngan mangrupi parobahan kelir teks sabot cursor nyabak link. Kalawan ngalakukeun modifikasi dina KODE css anu aya dina template,hover tiasa urang robih ku kituna sabot cursor nyabak link,mangka henteu ngan kelir teks wae anu robih. Sababaraha KODE tambahan,sepertos background,border,style teks sarta ukuran font sanggem mikeun nuansa anu benten sabot hiji link tersentuh ku cursor.

Hiji demo handap ieu tiasa contona wangun hover link anu cobi urang kanggo.
Lamun dina conto ieu background dina link langsung didamel tanpa dumasar kadudukan hover dimargikeun ngan didamel anggo kode html tanpa bantuan kode css sarta css3. Yanga bade urang kanggo antos hasilna bade tebih langkung metot dibandingkeun conto handap ieu.

D E M O

Link baru akan terlihat seperti ini!

Cara ngarobah tampilan hover dina link:

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML.
5. Lakukeun Backup template jeung klik Download Template Lengkep (Download Full Template).
6. Simpen file template di folder PC.
7. Tetep di Edit HTML
8. Teangan kode css sapertos anu katingali di handap iyeu.
   

   Kode CSS ieu kedah di robih:

   a:hover {
     text-decoration:underline;
     color: $(link.hover.color);
   }

Kode CSS di luhur manawi moal sami persis kalawan anu aya di blog nanging anu utamana peryogi diperhatikeun nyaeta dina syntax-na (a:hover).
9. Gentos kode di luhur kalawan kode css katut:
   

   Kode CSS gentosna

   a:hover {
          background: url(https://sites.google.com/site/mitrabewara/images/mitrabewarasunda-bghover-link-anima.gif);
          padding:2px 4px;
          color:#f00;
          tansition:1s;
          -o-tansition:1s;
          -moz-tansition:1s;
          -webkit-tansition:1s;
          -ms-tansition:1s;
          text-decoration:none;
          font-style:oblique; 
   }

10. Klik Simpen Template (Save Template).

Katerangan/Catetan :

• KODE a:hover cinekna saeutik di handapeun KODE <head>
• Lamun mikahayang background-image anu benten,ganti wae URL kalawan URL ti gambar anu sanes.
• color = warna font.
• obligue bisa digantikan dengan normal, italic atawa inherit.

Mangga oge buka Tutorial sejen nu narik pisan sarta pantes di turutan kabeh. Akses ngaliwatan link handap ieu :

Update » Senin PAHING, January, 09, 2012

» BEWARA SUNDA - mitrabewarasunda «