mitrabaraya online
Mitra Baraya Online Mode Using CSS3

Blogger jaringan pemberdayaan usaha sosial dan Pendidikan!
Geolkeun mouse alo-alo jeung sok..lah wilujeng!

Copyright 2010 mitrabarayaonline.blogspot.com - All rights reserved

Rabu, 02 Juli 2014

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 EDUN SADAYANA KU KODE CSS3 :

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.


Daptar menu ngaleungit

Daptar menu ngaleungit anu didamel kalawan kode css ieu ngagaduhan sababaraha efek berkat pamakean kode css3. Menu ditempatkeun si sisi kiwa halaman blog sarta ngan nempokeun " hiji sensor " anu dipake " minangka pentriger " menu supados sabot disentuh cursor sakumna haturan menu katembong. Margi ngagunakeun css3 mangka ngan kompatibel di browser anu atos ngarojong css3.

D E M O

Tingali menu palebah kenca sarta arahkeun cursor di luhurna.

Cara midamel katut kode na tiasa anjeun buka di mitrabarayaonline.

Hover tabs css3

Transparency Effect dina hover tabs css3 ieu didamel kalawan ngamangpaatkeun rgba color anu dikadudukankeun minangka background content tab kahiji sarta tab kadua. Hiji image dipasang minangka background box ku kituna efek transparansi beuki nampak. Sababaraha background image oge ditambahkeun dina sewang-sewang tab kanggo masihan efek benten .


First Tab

Second Tab



Box Posting kalawan Background Transparan

Anjeun tiasa ngagunakeun sagala rupa ukuran image minangka background. Pangaturan dipigawe ngaliwatan properti css background position sarta background repeat sarta background size. Kalawan dibarengan properti background size,sumawonten anjeun tiasa ememaksa hiji image kalawan ukuran anu tak luyu kalawan box tiasa barobah kaayaan selebar box.

Box Posting kalawan Background Transparan,midamelna ngagunakeun 3 buah tag DIV dina posisi relatif sarta absolute sarta menyisipkeun opacity effect kanggo meghasilkeun transparansi. Anjeun tiasa mengatur tingkat transparansi kalawan mengatur peunteun opacity. Kelir background oge tiasa anjeun robih , di manten parobahan oge kedah dibarung kalawan parobahan kelir font. Parobahan kelir font boga tujuan midamel teks tiasa terbaca kalawan gampil.

Kode CSS :
#MBboxpost{
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9QnUCYeeq1Bep6n9uucG2pA8x7jXJ-Rp2sSUQqOSmQfp5fvgCqmTSZdtJ0pPmRVecfqvuBCrLUYL4k4K05ymRHpzYCF9mFEvf4N20qatjRMY9LuwReZPsqFBQvDznkjL6hVnx1Ii2Yzoq/);
        background-position:top center; /* posisi background horizontal-vertical */
        background-repeat:repeat-y; /* berulang secara vertikal */
        background-size:100% auto; /* mengatur ukuran background */
        position:relative;
        width:100%; 
        padding:10px;
        margin:-10px;
}
.MBhoveruing{
        position:absolute;
        top:0; 
        left:0;
        height:100%;
        width:100%;
        background-color:#000; /* sesuaikan background color dengan warna teks */
        opacity:0.5;
        filter:alpha(opacity=50);
}
.MBtulisandw{
        position:relative; 
        color:#eee; /* sesuaikan warna teks dengan background-color */
}

xHTML :
<div id="MBboxpost">
<div class="MBhoveruing"></div>
<div  class="MBtulisandw">
Content here!
</div>
</div>
</div>

Cara Membuat :
  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 setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
    • 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. Buat posting dengan xHTML di atas kemudian buka blog untuk melihat hasilnya.

Catatan/Keterangan :
  1. Sebagian keterangan sudah tertulis dalam kode CSS.
  2. Jika menggunakan background image dengan ukuran kecil, rubah :
    - background-size:100% auto; menjadi » background-size:(image-width)px auto;
    - background-repeat:repeat-y; menjadi » background-repeat:repeat;
  3. Warna background dan warna teks dapat diganti dengan merubah :
    - background-color:#000;
    - color:#eee;