Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

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

Kolom Posting dg BackgroundTransparan

Untuk menciptakan dinamisasi halaman blog, mungkin kolom/boks transparan bisa menjadi salah satu alternatif. Boks dengan effek transparansi mempunyai sebuah background image yang tertutup oleh background color transparan hingga background image tetap terlihat secara samar-samar. Anda bisa memanfaatkan boks dengan background-nya sebagai boks posting. Akan lebih cantik jika setiap materi posting disesuaikan dengan background image yang digunakan. Sebagai contoh saat anda menuliskan sebuah artikel tentang mobil maka yang ditampilkan sebagai background dengan effek transparansi adalah sebuah gambar mobil atau sesuatu yang berkaitan dengan artikel tersebut.

D E M O

Kode CSS :
#GRkolomku{
        background: url(https://lh6.googleusercontent.com/-8zXzDhV-sx0/TyVe8t4qFLI/AAAAAAAAASY/3kppL9_quOk/img_gubhugreyot-macan-ciblon.jpg);
        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%;
        margin:-10px;  /* dapat disusuaikan dengan halaman posting */
        padding:10px;  /* dapat disusuaikan dengan halaman posting */
}
.GRoverlayku{
        position:absolute;
        top:0; 
        left:0;
        height:100%;
        width:100%;
        background:#000;  /* sesuaikan background color dengan warna teks */
        opacity:0.5;
        filter:alpha(opacity=50);
}
.GRartikelku{
        position:relative; 
        color:#eee;  /* sesuaikan warna teks dengan background-color */
}

xHTML :
<div id="GRkolomku">
<div class="GRoverlayku"></div>
<div  class="GRartikelku">
Letakkan Artikel di sini!
</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;
    - Selain dengan cara di atas, dapat juga dilakukan dengan menghapus:
    - background-position:top center;, background-size:100% auto; dan background-repeat:repeat-y;
  3. Warna background dan warna teks dapat diganti dengan merubah :
    - background-color:#000;
    - color:#eee;

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



Update » Jemuah LEGI, Maret, 23, 2012

» Happy Blogging - gubhugreyot «

1 komentar:

  1. nuwun kang tutorialnya.....sangat membantu,,,kpan" mampir mneh ra po" yoo

    BalasHapus

 
GR | Edited by | gubhug reyot