Minal 'Aidin wal Faizin
Mampukah setiap tahun bertambah baik?
Sebuah tantangan bagi siapapun. Jadikan Idul fitri sebagai mement yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama.

Cara Membuat CSS3 Full Animated Show Hidden Content Onmouseover

Seolah-olah tiada habinya ilmu orang yang sepektakuler satu ini, siapa lagi kalau bukan juragan sito gimin, nih ilmunya yang patut sobat blogger ikutin "Cara Membuat CSS3 Full Animated Show Hidden Content OnmouseoverUntuk membuat CSS3 Full Animated Show Hidden Content Onmouseover cukup mudah karena semua kode tinggal simpan di template, kemudian xHTML-nya gunakan saat posting atau di widget blog, maka segalanya akan selesai dengan teramat cepat. nah bila sobat blogger mania ingin mempraktekanya silahkan ikuti langkah langkah dibawah ini:
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.
    • 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>, kemudian simpan kode CSS dengan posisi seperti yang terlihat di kode CSS yang tertulis dibawah.". KLIK "SAVE/Simpan Template".  
          
  6. xHTML bisa digunakan untuk posting ataupun digunakan di widget blog. Jika untuk posting, susunlah
           kode secara rapat, sedang apabila di widget blog, lakukan penyimpanan dengan membuka terlebih
          dahulu "Page Elemen (Elemen Laman)", kemudian KLIK "Add Gadget", KLIK
          "HTML/Javascript". Setelah box penyimpanan widget terlihat, masukkan kode dengan
          copy-paste. KLIK SAVE/Simpan.
  7.   Baik gambar atau link dan teks sesuaikan dengan apa yang dibutuhkan.
  8. Kode CSS Show Hidden Content
    .bgsGR_onmos {
    height: 32px;
    width: 260px;
    border: 2px solid #666666;
    background: #CCCCCC;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    -o-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    padding: 5px 5px;
    margin: 15px auto;
    font: 11px Arial;
    color: #003366;
    overflow: hidden;
    box-shadow: 0 1px 8px #000;
    -moz-box-shadow: 0 1px 8px #000;
    -webkit-box-shadow: 0 1px 8px #000;
    }
    .bgsGR_onmos:hover {
    min-height: 250px;
    border: 2px solid #333333;
    background: #111;
    box-shadow: 0 1px 15px #000;
    -moz-box-shadow: 0 1px 15px #000;
    -webkit-box-shadow: 0 1px 15px #000;
    color: #000; text-shadow: 0 1px 1px #888;
    }
    .bgsGR_onmos h3, .jerohan h3 {
    font-size: 14px;
    font-family: Droid Serif;
    font-weight: bold;
    color: #000;
    text-align: center;
    text-shadow: 0px 1px 1px #fff; margin: 3px 5px;
    padding: 3px 10px;
    background: #bbb;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #999;
    -o-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    }
    .bgsGR_onmos h3:hover {
    box-shadow: 0 1px 8px #000;
    -moz-box-shadow: 0 1px 8px #000;
    -webkit-box-shadow: 0 1px 8px #000;
    }
    .bgsGR_onmos img.mini, .bgsGR_onmos img.minianima {
    width: 70px;
    border: 4px solid #666;
    padding: 3px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    float: left; margin: 0 10px 5px 0;
    background: #222;
    -o-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -webkit-transition: all 1.5s;
    }
    .bgsGR_onmos img.mini:hover, .bgsGR_onmos img.minianima:hover {
    box-shadow: 1px 1px 15px #000;
    -moz-box-shadow: 1px 1px 15px #000;
    -webkit-box-shadow: 1px 1px 15px #000;
    border: 4px solid #CCCCCC;
    background :#666;
    -o-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    margin-top: 20px;
    margin-left: 15px;
    }
    .bgsGR_onmos img.minianima:hover {
    -o-transform: scale(1.4) rotate(360deg) translate(0px);
    -moz-transform: scale(1.4) rotate(360deg) translate(0px);
    -webkit-transform: scale(1.4) rotate(360deg) translate(0px);
    }
    .jerohan {
    margin-top: 15px;
    height: 200px;
    overflow: auto;
    padding: 0 5px;
    -o-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out; background: #CFE7E9;
    }
    .jerohan:hover {
    background: #333;
    color: #eee;
    text-shadow: 0 0px 1px #fe0303;
    }
    .jerohan h3 {
    margin: 20px 0;
    max-width: 204px;
    background: #66CCFF;
    box-shadow: 0 1px 12px #eee;
    -moz-box-shadow: 0 1px 12px #eee;
    -webkit-box-shadow: 0 1px 12px #eee;
    }
    .jerohan h3:hover {
    background: #888;
    border: 1px solid #666;
    box-shadow: 0 1px 12px #fff;
    -moz-box-shadow: 0 1px 12px #fff;
    -webkit-box-shadow: 0 1px 12px #fff;
    }
    .jerohan ul {
    padding: 0;
    margin: 0;
    list-style: none;
    }
    .jerohan li {
    padding: 0;
    margin: 0;
    list-style: none;
    border-bottom:1px dotted #777;
    }
    .jerohan li a{
    color: #03d8fe;
    padding: 0;
    margin: 0;
    text-decoration:none;
    font-size: 12px;
    -o-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -webkit-transition: all 1.5s;
    }
    .jerohan li a:hover {
    -o-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    color: red;
    text-shadow: 0 1px 1px #000;
    margin-left: 20px;
    }

    ]]></b:skin>

    <!--[if IE]>
    <style type="text/css">
    .bgsGR_onmos {height: 30px; }
    .bgsGR_onmos h3, .jerohan h3 {font-size: 13px; }
    </style>
    <![endif]-->
    xHTML Animated Show Hidden Content
    <div class="bgsGR_onmos"> <h3>CSS3 Show Hidden Content</h3> <div class="jerohan"> <h3>CSS3 Show Hidden Content</h3> <img class="mini" src="http://img.theomegaproject.org/thumbs/2009/11/121.jpg" />Mau gunakan untuk apapun silahkan! Muat gambar? Penuhi dengan berbagai teks? <h3>New Post</h3> <ul> <li><a href="Link-1">Tuliskan disini : Link Title-1</a></li> <li><a href="Link-2">Tuliskan disini : Link Title-2</a></li> <li><a href="Link-3">Tuliskan disini : Link Title-3</a></li> <li><a href="Link-4">Tuliskan disini : Link Title-4</a></li> <li><a href="Link-5">Tuliskan disini : Link Title-5</a></li> <li><a href="Link-6">Tuliskan disini : Link Title-6</a></li> <li><a href="Link-7">Tuliskan disini : Link Title-7</a></li> <li><a href="Link-8">Tuliskan disini : Link Title-8</a></li> <li><a href="Link-9">Tuliskan disini : Link Title-9</a></li> <li><a href="Link-10">Tuliskan disini : Link Title-10</a></li> </ul> <h3>No Image and Script</h3> <img class="minianima" src="http://img.theomegaproject.org/thumbs/2010/06/517.jpg" />Mau gunakan untuk apapun silahkan! Muat gambar? </div> </div> </div> <div class="bgsGR_onmos"> <h3>CSS3 Show Hidden Content</h3> <div class="jerohan"> <h3>CSS3 Show Hidden Content</h3> <img class="mini" src="http://img.theomegaproject.org/thumbs/2009/11/121.jpg" />Mau gunakan untuk apapun silahkan! Muat gambar? Penuhi dengan berbagai teks? Atau mungkin deretan menu dan link lain mo ditampilkan di collapsible ini? <h3>New Post</h3> <ul> <li><a href="Link-1">Tuliskan disini : Link Title-1</a></li> <li><a href="Link-2">Tuliskan disini : Link Title-2</a></li> <li><a href="Link-3">Tuliskan disini : Link Title-3</a></li> <li><a href="Link-4">Tuliskan disini : Link Title-4</a></li> <li><a href="Link-5">Tuliskan disini : Link Title-5</a></li> <li><a href="Link-6">Tuliskan disini : Link Title-6</a></li> <li><a href="Link-7">Tuliskan disini : Link Title-7</a></li> <li><a href="Link-8">Tuliskan disini : Link Title-8</a></li> <li><a href="Link-9">Tuliskan disini : Link Title-9</a></li> <li><a href="Link-10">Tuliskan disini : Link Title-10</a></li> </ul> <h3>No Image and Script</h3> <img class="minianima" src="http://img.theomegaproject.org/thumbs/2010/06/517.jpg" />Mau gunakan untuk apapun silahkan! Muat gambar? Penuhi dengan berbagai teks? </div> </div> </div>
Selamat Mencoba dan tetap terus berkarya.................
Salam Bloggerrrrrrrrrr

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :





» Selamat Berkreasi - E F A «


1comments:

  1. hahaha
    makasi ya bos..
    dah mw nge share cara na
    kapan2 gw coba dech..
    agy sibuk bgt nech,,
    agy ada TTS(test tengah semester)..

    thxs bgt y..

    ReplyDelete

Terimakasih Atas Komentar Anda dan EFA akan segera menuju Blog anda...

NextPrev