Ngajieun Image Edun Sadayana

Image Edun Sadayana nyaeta hiji gallery anu didamel ngan ngagunakeun kode css. Aya 2 versi ti Image Edun Sadayana:

1. Ngan saukur ngagunakeun kode CSS.
2. Ngagunakeun kode css sarta kode css3.

Dina demo pintonan bade ku kuring di tampilkaeunn dua macem versi Image Edun Sadayana sarta mangga alo bandingkeun diantara duanana.

IMAGE EDUN SADAYANA KU KODE CSS :

• Image-1
• Image-2
• Image-3
• Image-4
• Image-5

IMAGE EDUN SADAYANA KU KODE CSS3 :

• Image-1
• Image-2
• Image-3
• Image-4
• Image-5

Kanggo midamel Image Edun Sadayana anu ngan ngagunakeun kode css (versi kahiji),mangga anggo wae ku alo kode anu aya di mitrabarayaonline, Eukeur midamel versi kadua (kalawan kode css3) alo tiasa copy kode cssna di handap ieu.

Kode CSS Image Edun Sadayana CSS3 :

#MBedun_sadayana { 
        border:3px solid #333;
        position:relative;
        padding:0;
        margin:20px auto;
        width:412px;
        height:285px;
        background:#ccc url(https://lh5.googleusercontent.com/-zkgC9SP8HFc/U1wFLy8rdcI/AAAAAAAAF2o/EE04ZXqKFh4/h400/Kaos-Angklung-Merah.png) 6px 83% no-repeat;
        background-size:400px 230px;
        border-radius:3px;
        border-bottom-left-radius:9px;
        border-bottom-right-radius:9px;
        box-shadow:0 0 6px #000;
}
#MBedun_sadayana li{
        margin:0; /* original code by : mitrabarayaonline */
        float:left;
        margin-left:1px;
        text-align:center;
        list-style: none; 
        padding:0;
}
#MBedun_sadayana li a{
        display:inline-block;
        padding:9px 0;
        width:78px; /* original code by : http://mitrabarayaonline.blogspot.com  */
        background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Fbhsms01qaekFv32MmqLjZEVXYHpjIxxHl5WYsemdcJR0i94Ia6WfSez-HieGeiy3xZKdPmbd6eaE3KR0Yxr7UwcD1Nr5lxF5lAjKvBgB5BD4YoYePVl-tuxinra-hfEYaTxroC9KZ7A/s128/MB_hideung-beureum-8x41.gif) 0 100%  repeat-x;
        border:1px solid #666;
        color: #33CCFF;
        margin:2px 0 2px 1px;
        font-size:11px;
        font-family:Arial;
        font-weight:700;
        text-decoration:none;
}
#MBedun_sadayana li a,#MBedun_sadayana li a img{
        transition:1.8s ease;
        -o-transition:1.8s ease;
        -moz-transition:1.8s ease;
        -webkit-transition:1.8s ease;
        -ms-transition:1.8s ease;
}
#MBedun_sadayana li a:hover {
        background:#fff  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Fbhsms01qaekFv32MmqLjZEVXYHpjIxxHl5WYsemdcJR0i94Ia6WfSez-HieGeiy3xZKdPmbd6eaE3KR0Yxr7UwcD1Nr5lxF5lAjKvBgB5BD4YoYePVl-tuxinra-hfEYaTxroC9KZ7A/s128/MB_hideung-beureum-8x41.gif) 0 -35px  repeat-x;text-shadow:2px 2px 2px #888;
        color:red;  /* original code by : http://mitrabarayaonline.blogdetik.com  */
        border-bottom:5px solid red;
        opacity:1.0;
        filter:alpha(opacity=100);
        padding:9px 0 4px;
}
li#MBedun_img a, li#MBedun_img a:hover {
        background:#aaa;
        color: #FF9900; 
}
#MBedun_sadayana li a img{
        position:absolute;
        left:3px;
        top:38px;
        width:400px;
        height:230px;
        clear:left;
        padding:2px;
        border:1px solid #444; 
        border-bottom:5px solid #444;
        border-top:5px solid #222;
        border-bottom-left-radius:8px;
        border-bottom-right-radius:8px;
        opacity:0.0;
}
li#MBedun_img1 a img, #MBedun_sadayana li a:hover img {
        display:block; 
        opacity:0.35;
        filter:alpha(opacity=35);
}
li#MBedun_img1 a:hover img, li#MBedun_img2 a:hover img, li#MBedun_img3 a:hover img, li#MBedun_img4 a:hover img, li#MBedun_img5 a:hover img {
        border-color:#888; 
        opacity:1.0;
        filter:alpha(opacity=100);
}

xHTML :

<ul id="MBedun_sadayana">
<li id="MBedun_img1"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2_qn-R4GfB2Yrtp369WRwwU1tcn5PDoLicUlBUKf83MjQoDx8munhLIVZTvBv0OdAUc5k_krLE2guiw4Rjyax8wDKrHPAMepmv1pRiA0UU7evm_C-DS8f3L69PkZeXhR4ElhCR6ilL6dF/s500/banyolan.jpg">Image-1<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje3yc4SMPdP-Ytb1cNeJV9H3aMTLD1M7CiJeZ51cLugJmH19FTd1P160PP7LArcH11_iZAFXuAnMoJdH0Al-no1qn9Kaqunvzrkh0uXd0zc_B1QkJQk8Wrj0j8Dp866YFkB8FbQcFhmD5f/h300/Persib4.jpg" /></a></li>
<li id="MBedun_img2"><a href="http://mitrabarayaonline.blogspot.com">Image-2<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCBl4BL-oTfWeGO521-HUXn3YqIR5e-WxX10Ru4RlJze8B5w4b9zE8yBZaZ2X-m3Z4hHZ17kNbp49qgZqaClV0SxD1_wxcnRLlWCYqYugS3EoHL9fov-8t6Q74c7cAkC-FIeLM96U4_Os/h300/Majalah+Cakakak+edisi+III.jpg"/></a></li>
<li id="MBedun_img3"><a href="https://lh5.googleusercontent.com/-zkgC9SP8HFc/U1wFLy8rdcI/AAAAAAAAF2o/EE04ZXqKFh4/h400/Kaos-Angklung-Merah.png">Image-3<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfdaa5eRTIcbAJN7coQjdRpY4lIL2TlBGFOIwBXLvnm2x-yzx_pM1ovPHiEYjV_pkzJrWEwGzVgurUGqu12obqehksNhWT4aAXMuroH5Q2S84jI65WzRoHXAzJh_6XtT8AjwFEKz8f7AXH/h300/rancamaya-a.jpg"/></a></li>
<li id="MBedun_img4"><a href="URL-4">Image-4<img src="https://lh4.googleusercontent.com/-7Fzb-m8xyvA/T2JvMlvXX7I/AAAAAAAAAZ0/vkGaArh4kME/h300/th_suryokontho.jpg"/></a></li>
<li id="MBedun_img5"><a href="http://mitrabarayaonline.blogdetik.com/">Image-5<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7gMzK6qFY8_a3V15VSFuR6G4EM0yT1BfOwF79B1S5Ip5r15FXWfb5EdxRT1fQFm3Gyz8DAERfvY_vEwGesnHu1Gg4JlmiRlJ00PViXFtINCyvIMHiTecYYpzR9L7mnq3nMQoaMLcLRQo/h300/21brides600.1.jpg"/></a></li>
</ul>

1. Login ka Blogger.
2. Sanggeus halaman "Dasbor (Dasboard)" kabuka, teangan jeung klik "Rancangan (Design)".
3. Lajengkeun klik "Edit HTML".
4. Alo pasti ningali hiji box edit template anu pinuh ku kode html.
   Lakukan "Backup Template" saencana mimitian alo kudu nyimpen heula kode CSS.
5. Teangan kode ]]></b:skin> jeung teuneun kode CSS di luhurna.
6. Klik "Simpen Template (Save Template)".
7. Gunakeun xHTML di halaman posting atawa dina Add a Gadget.

Catetan Atanapi Katerangan :

• Ukuran anu ditetepkeun dina image atawa gambar anu dipake dina Image Edun Sadayana ukuranana 400px (width) sarta 230px (height),nanging kitu alo-alo tiasa oge ngagunakeun ukuran anu benten,ngan wae angger dipidangkeun sapertos ukuran kasebat di luhur tea.
• Link dina xHTML (conto: URL-4) ganti wae ku alamat image, alamat blog atawa alamat posting.
• Parobahan ukuran Image Edun Sadayana kedah dibarengan ku sababaraha parobahan width,padding,sae dina box,tab controll atawa tab gambar.