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

Background Image dengan Efek Transparansi dan Animasi di Profil Blogger-Blogspot dengan CSS3

"Making a Background Image with Transparency Effects and Animation on Blogger Profiles with CSS3 Transition". He ... he ... nih .... gubhug reyot berlagak pintar. Nulis pakai bahasa Inggris, he ....! Benar nggak, ya, teks di atas?! He ... eh ... biar saja,dah. Kata orang gila: "Orang yang takut berbuat maka tak akan pernah bisa! Orang yang takut berbuat salah, maka berarti orang tersebut tak pernah mau mencoba dan melakukan." He ... he ... itu cuma kata orang gila. Jadi bagi yang waras dan sehat jangan pernah ikutan. 'ntar jadi ikutan gila!

Menampilkan sebuah background image dengan efek transparansi disertai animasi di widget Profile blogger-blogspot pasti akan jadi sesuatu yang menarik untuk di buat. Sesuatu yang baru dan sepertinya belum pernah ada dan di coba. Hayo .... siapa yang berani mencoba (biar ikutan gila!)? Sampeyan bisa melihat tampilan baru widget profile dengan backckground-image yang menggunakan efek transparansi dan animasi CSS3 di sini (After the demo page open, move the cursor on "si gubhug reyot" in the right sidebar):

Cara membuat Background Image dengan Efek Transparansi dan Animasi di Profil Blogger

  • Login ke blogger.
  • Setelah halaman dasbor terbuka, silahkan, KLIK link "Design/Rancangan". Tunggu beberapa saat hingga halaman baru terbuka.
  • Lanjutkan dengan KLIK link "Edit/HTML".
  • Setelah sampeyan melihat kode html di template blog, cari kode CSS yang seperti di bawah ini :
  • /* Profile 
    ----------------------------------------------- */

    .profile-datablock {
    margin-top: 3px;
    margin-$endSide: 0;
    margin-bottom: 5px;
    margin-$startSide: 0;
    line-height: 140%;
    }
    .profile-textblock {
    margin-$startSide: 0;
    }
    .profile-img {
    float: $startSide;
    margin-top: 0;
    margin-$endSide: 10px;
    margin-bottom: 5px;
    margin-$startSide: 0;
    border:4px solid #e8b;
    }
    Tentu saja kode di atas mungkin tidak sama dengan kode CSS di template sampeyan. Yang terpenting, yang perlu dihapus dan diganti dengan kode CSS yang baru adalah semua kode CSS yang berupa syntax dengan bentuk seperti ini :
    .profile {
    .....
    .... dst
    }
    Jika sampeyan menemukan kode yang di awali dengan .profile { ...., maka silahkan hapus saja. Jika ragu untuk melakukannya, sampeyan bisa buat sebuah blog baru untuk melakukan percobaan. Gunakan saja ID yang sudah ada untuk membuat blog percobaan melalui halaman dasbor. Di sini ada link "Buat blog". KLIK untuk membuat blog baru sebagai tempat melakukan segala eksperimen desain!
  • Ganti kode-kode CSS di atas dengan Kode CSS berikut ini.
  • #Profile .widget-content {
    position: relative;
    margin: 20px auto;
    width: 200px;
    height: 245px;
    padding: 5px;
    background: #666666;
    background: -moz-linear-gradient(top, #111, #eee);
    background: -webkit-gradient(linear, left top, right bottom, from(#111), to(#eee));
    text-align: center;
    border: 2px solid #888;
    text-shadow: 1px 1px 1px #000;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    }
    #Profile .widget-content img.profile-img {
    display: block;
    float: none;
    margin: 10px auto;
    opacity: 1.0;
    -o-transition: 2s ease-out;
    -moz-transition: 2s ease-out;
    -webkit-transition: 2s ease-out;
    }
    #Profile .widget-content span {
    position: absolute;
    top: 15px;
    left: 0px;
    width: 210px;
    height: 265px;
    background: url(http://2.bp.blogspot.com/_550XeJhg_o8/TKYkWLX5u4I/AAAAAAAAApk/qkCpyyHx7ME/s400/Pemandangan-3.jpg) center center no-repeat;
    opacity: 0.4;
    -o-transition: all 0.7s ease-in 1s;
    -moz-transition: all 0.7s ease-in 1s;
    -webkit-transition: all 0.7s ease-in 1s;
    }
    #Profile .widget-content:hover span {
    opacity: 1.0;
    height: 1px; /* original code by: gubhugreyot.blogspot.com */
    border-bottom: 6px solid #888;
    -o-transition: height 2s ease-out 1.4s, opacity 1s ease-in;
    -moz-transition: height 2s ease-out 1.4s, opacity 1s ease-in;
    -webkit-transition: height 2s ease-out 1.4s, opacity 1s ease-in;
    }
    #Profile .widget-content dl.profile-datablock {clear: both; margin: 10px auto;font-size: 11px;font-family: Arial;color: white;}
    #Profile .widget-content dt.profile-data {font: 16px Tahoma; font-weight: bold;color: orange; text-transform:capitalize;}
    #Profile .widget-content a.profile-link {color: #99CCFF; font-size: 14px;}
    #Profile .widget-content a.profile-link:hover {color: red;}
  • KLIK"SAVE/Simpan Template", kemudian buka blog untuk melihat hasil perubahan pada profil sampeyan.



Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :








» Happy Blogging - gubhugreyot «


5 komentar:

  1. Met malm sob.., aq prnah pke tmlpat yg mirip dg blog ini ato di blog Nngeblog Lewat HP, kode sidebarnya bukan sidebar-wrapper, ga sama dgn yg aq pake skrng kdenya main-wrap. Tlong ya sob, aq mo gnti tmlpat, sbelumnya makasih boanyak ya..

    BalasHapus
  2. Met malm sob.., aq prnah pke tmlpat yg mirip dg blog ini ato di blog Nngeblog Lewat HP, kode sidebarnya bukan sidebar-wrapper, ga sama dgn yg aq pake skrng kdenya main-wrap. Tlong ya sob, aq mo gnti tmlpat, sbelumnya makasih boanyak ya..

    BalasHapus
  3. kok di HTML blog saya , ga ada /*profile ??
    mohon penjelasannya kk ..

    BalasHapus
  4. boss.. sirahku muzmet..kepingin nduwe blog koyo we'e njenengan ra klakon boss...

    BalasHapus
  5. Oke sob, boleh dijajal ne di blog, maklum belum paham amt denga yang beginian..
    kalau ada waktu silahlkan berkunjung blog saya

    Tutorial Blogger

    BalasHapus

 
GR | Edited by | gubhug reyot