Mempercantik Tampilan Judul Posting Ketika Label Diklik Dengan Background

hanya menampilkan judul posting ketika label diklik Panjang amat judulnya? Sebelumnya saya pernah posting trik cara hanya menampilkan judul posting ketika label atau category diklik, untuk trik kali ini cara memodifikasi tampilan judul posting tersebut dengan memberikan background pada judul postingnya seperti contoh pada gambar disamping. Tapi trik ini bisa dilakukan kalau sobat sudah melaksanakan trik sebelumnya.

Berikut langkah langkahnya:

 

Login ke Blogger kemudian Layout/Tata Letak terus Edit HTML

   1. Centang pada kotak kecil disamping Expand Template Widget
   2. Cari kode yang berwarna merah, ingat kode ini hanya terlihat jika trik sebelumnya sudah anda lakukan, jika belum lihat kembali disini

    <b:if cond='data:blog.homepageUrl !=
    data:blog.url'>
    <b:if cond='data:blog.pageType != "item"'>
    <a expr:href='data:post.url'>
    <data:post.title/></a><br/><br/>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>

   3.  Selanjutnya ganti kode yang berwarna merah tadi dengan kode berikut ini:

    <div style='padding:6px 0 6px 5px;border-right:1px solid #000;border-bottom:1px solid #000;margin-bottom:2px;background:#0099DD;color:#000000;'>
    <data:post.title/></div></a>

Note:
Ganti kode warna yang berwarna hijau dengan warna yang Anda sukai.Tapi jika ingin juga menambahkan icon di depan title postingan, sobat tinggal menambahkan kode gambar ke dalamnya kode diatas, selengkapnya, sobat dapat mengganti kode tadi dengan kode berikut:

    <div style='padding:6px 0 6px 5px;border-right:1px solid #000;border-bottom:1px solid #000;margin-bottom:2px;background:#0099DD;color:#000000;'>
    <img alt='>>>' border='0' src='alamat gambar icon anda letakkan disini'/>
    <data:post.title/></div></a>

  4. Oke, tinggal simpan template!!!

»»  READMORE...

Membuat Background Pada Teks Area

Anaa pernah posting cara membuat teks area, apa itu teks area? lihat aja lagi postingan itu disini.

Kali ini cara membuat agar teks areanya memiliki background dengan cara menambahkan kode berikut:

<div style="overflow: auto; width: 500px; height: 100px;
background-color: #FFCCFF; text-align: justify; padding: 5px;
border: 2px solid #FF3300;">Letakkan kalimat yang ingin ditampilkan pada teks area disini</div>

Note:

Kode diatas bisa diedit lagi
# width : lebar text area
# height : tinggi text area
# background-color : warna background text area
# text-align : perataan text
# padding : jarak antar tulisan
# border : tebal tipisnya garis tepi text area
# solid : warna garis tepi text area.

Nah berikut contohnya:

<div style="overflow: auto; width: 500px; height: 100px;
background-color: #FFCCFF; text-align: justify; padding: 5px;
border: 2px solid #FF3300;">

Pada setiap tempat engkau akan mendapatkan kegelapan dalam hidupmu, maka tidak ada yang mesti engkau lakukan kecuali menghidupkan lentera yang ada di dalam jiwamu.

Optimislah walaupun engkau berada dalam terpaan bencana.

Besok kita menanti pohon raihan akan berbunga, kesedihan akan sirna dan kebahagiaan akan menjelma.

Emasmu adalah agamamu, perhiasanmu adalah akhlakmu, dan hartamu adalah budi pekertimu.

Setiap manusia akan hidup; orang yang mempunyai istana dan orang yang hidup didalam gubuk…akan tetapi siapakah yang bahagia?

Biarkanlah orang yang zalim dihadapkan pada pengadilan akhirat, yang pada saat itu tidak ada hakim kecuali Allah.

Penyakit adalah berita yang membawa kabar gembira dan sehat adalah perhiasan yang berharga.

</div>

Maka hasilnya akan seperti ini:
Pada setiap tempat engkau akan mendapatkan kegelapan dalam hidupmu, maka tidak ada yang mesti engkau lakukan kecuali menghidupkan lentera yang ada di dalam jiwamu. Optimislah walaupun engkau berada dalam terpaan bencana. Besok kita menanti pohon raihan akan berbunga, kesedihan akan sirna dan kebahagiaan akan menjelma. Emasmu adalah agamamu, perhiasanmu adalah akhlakmu, dan hartamu adalah budi pekertimu. Setiap manusia akan hidup; orang yang mempunyai istana dan orang yang hidup didalam gubuk…akan tetapi siapakah yang bahagia? Biarkanlah orang yang zalim dihadapkan pada pengadilan akhirat, yang pada saat itu tidak ada hakim kecuali Allah. Penyakit adalah berita yang membawa kabar gembira dan sehat adalah perhiasan yang berharga.

Selamat mencoba, semoga bermanfaat!

»»  READMORE...

Cara Membuat Background Pada Titel Footer

Melengkapi postingan sebelumnya. Berikut langkah langkah membuat background pada titel atau judul footer seperti pada contoh gambar berikut atau lihat
disini dan disini

membuat background titel footer

membuat background titel footer

Membuat background pada titel atau judul footer

    * Log in ke blogger=> pada dasbor=> klik tata letak=> edit HTML=> cari kode berikut:

    #bottom h2 {
    padding:7px 0 2px 0;
    margin:0 0 10px 0;
    border-bottom:1px dotted #cccccc;
    font-size:12px;
    font-weight:bold;
    color:#0000FF;
    text-align:center;
    line-height:1.4em;
    text-transform:uppercase;
    }

    * kalau sudah dapat sisipkan kode berikut

    background: url(alamat image anda)repeat-x;

    * Sehingga keselurahannya menjadi seperti ini:

    #bottom h2 {
    padding:7px 0 2px 0;
    margin:0 0 10px 0;
    border-bottom:1px dotted #cccccc;
    font-size:12px;
    font-weight:bold;
    color:#0000FF;
    text-align:center;
    line-height:1.4em;
    text-transform:uppercase;
    background:url(alamat image anda)repeat-x;
    }

    * Terakhir klik save/ simpan.

Nah benar mudah bukan? Kalau hanya ingin mengganti background judul footer dengan warna cukup sisipkan kode warna pada background seperti contoh berikut:

    background: #5FB404;

Untuk melihat macam macam kode warna klik disini

»»  READMORE...

Membuat background Pada Judul Sidebar

Ingin mengganti background pada judul atau titel sidebar seperti contoh dibawah ini?
mengganti background pada judul atau titel sidebar< mengganti background pada judul atau titel sidebar<






Berikut cara mengganti background pada judul sidebar, tutorial ini sudah anaa praktekan diblog anaa disini dan disini

    * Loggin ke Blogger => Layout =>Edit HTML dan cari kode dibawah.

    .sidebar h2 {

    * Tambah kode berikut dibawah kode tadi

    background:url(alamat image anda disini)repeat-x;

    * Isi tulisan berwarna merah diatas dengan alamat gambar anda
    * Kalau ditemplate anda tidak menemukan kode .sidebar h2 {
    * Tambahkan saja kode berikut pada sidebar content

    .sidebar h2 {
    background:url(alamat image anda disini)repeat-x;
    color: #FFFF66;
    font-size: 11px;
    font-family: Georgia;
    font-weight: strong;
    margin: 0px 0px 5px 0px;
    padding: 3px 0px 3px 10px;
    text-align:center;
    }

    * Note edit tulisan berwarna merah dengan alamat image/ gambar anda, warna ungu warna tulisan, warna biru ukuran tulisan, warna hijau kedudukan tulisan!

Untuk mengedit warna font anda bisa lihat kode warna disini

    * Simpan template!

Semoga bermanfaat!

»»  READMORE...

Membuat Background Pada Judul Postingan

Postingan anaa kali ini masih tentang modifikasi background pada template kalau sebelumnya trik membuat background pada judul sidebar sekarang anaa ingin berbagi trik sederhana lagi, bagaimana membuat background pada judul atau titel posts yang contohnya bisa dilihat pada gambar berikut atau aplikasi nyatanya disini
background pada titel posts
Mudah saja, berikut langkah langkah membuat background pada titel posts:

    * Log in ke blogger=> pada dasbor=> klik tata letak=> edit HTML=> cari kode berikut:

    .post h3 {
      margin:.25em 0 0;
      padding:0 0 4px;
      font-size:140%;
      font-weight:normal;
      line-height:1.4em;
    text-align:center;
    }

    * kalau sudah dapat sisipkan kode berikut

    background: url(alamat image anda)repeat-x;

    * Sehingga keselurahannya menjadi seperti ini:

    .post h3 {
      background: url(alamat image anda)repeat-x;
      margin:.25em 0 0;
      padding:0 0 4px;
      font-size:140%;
      font-weight:normal;
      line-height:1.4em;
    text-align:center;
    }

    * Terakhir klik save/ simpan.

Nah benar mudah bukan? Kalau hanya ingin mengganti background judul postingan dengan warna cukup sisipkan kode warna pada background seperti contoh berikut:

    background: #5FB404;

Untuk melihat macam macam kode warna klik disini

»»  READMORE...

Membuat Efek Stabilo/ Background Tulisan

Kalau sebelumnya anaa pernah membuat postingan cara membuat background pada postingan, kali ini anaa ingin sharing lagi cara membuat efek stabilo atau cara membuat background pada tulisan. Seperti ini:
Contoh tulisan Dengan Efek Stabilo

Contoh tulisan Dengan Efek Stabilo
Bagaimana cara membuatnya? Mudah saja hanya dengan menambahkan code berikut

    <span style="background-color:#FFFFB3;"> Disini letak tulisan yang ingin diberi efek stabilo </span>

Untuk menambahkan code tersebut anda harus dalam edit HTML.
Untuk melihat code warna dapat merujuk disini

»»  READMORE...

Merubah Background Postingan

Suatu waktu mungkin kita bosan dengan background postingan kita yang warnanya putih atau hitam polos, atau mungkin sekedar ingin mencoba bereksperimen kecil maka kita boleh mencoba merubah backgroun postingan dengan cara-cara berikut ini, karena pengetahuaan yang baru pasti sangat menyenangkan. Nah cara membuat backgroun postingan yang saya tahu saat ini baru dua cara...

    * Yang Pertama untuk membuat background warna, caranya...

Letakkan kode berikut pada awal postingan

<div style="background:kode warnanya disini">

Dan diakhir postingan, harus di tutup dengan kode seperti ini :

</div>

Tulisan kode warnanya disini anda ganti dengan kode warna yang anda inginkan. Bisa lihat macam-macam kode warnanya disini. Yang perlu diperhatikan saat anda meletakkan kode tersebut, anda harus memilih tab edit HTML, jangan Compose.

Sebagai contoh backgroun dengan warna pink...

<div style="background:#FFCCFF">

Pada setiap tempat engkau akan mendapatkan kegelapan dalam hidupmu, maka tidak ada yang mesti engkau lakukan kecuali menghidupkan lentera yang ada di dalam jiwamu.

Optimislah walaupun engkau berada dalam terpaan bencana.

Besok kita menanti pohon raihan akan berbunga, kesedihan akan sirna dan kebahagiaan akan menjelma.

Emasmu adalah agamamu, perhiasanmu adalah akhlakmu, dan hartamu adalah budi pekertimu.

Setiap manusia akan hidup; orang yang mempunyai istana dan orang yang hidup didalam gubuk…akan tetapi siapakah yang bahagia?

Biarkanlah orang yang zalim dihadapkan pada pengadilan akhirat, yang pada saat itu tidak ada hakim kecuali Allah.

Penyakit adalah berita yang membawa kabar gembira dan sehat adalah perhiasan yang berharga.

</div>

Hasilnya akan seperti ini :

Pada setiap tempat engkau akan mendapatkan kegelapan dalam hidupmu, maka tidak ada yang mesti engkau lakukan kecuali menghidupkan lentera yang ada di dalam jiwamu.

Optimislah walaupun engkau berada dalam terpaan bencana.

Besok kita menanti pohon raihan akan berbunga, kesedihan akan sirna dan kebahagiaan akan menjelma.

Emasmu adalah agamamu, perhiasanmu adalah akhlakmu, dan hartamu adalah budi pekertimu.

Setiap manusia akan hidup; orang yang mempunyai istana dan orang yang hidup didalam gubuk…akan tetapi siapakah yang bahagia?

Biarkanlah orang yang zalim dihadapkan pada pengadilan akhirat, yang pada saat itu tidak ada hakim kecuali Allah.

Penyakit adalah berita yang membawa kabar gembira dan sehat adalah perhiasan yang berharga.

    * Yang kedua Membuat background dengan Gambar

Jika anda memiliki gambar khusus untuk dijadikan backgroud uploud dulu ke website hosting seperti photobucket atau tempat hosting lainnya untuk memperoleh URL addresnya.

Yang harus diperhatikan anda harus berada pada posisi edit HTML, berikut kode diawal postingan:

<div style="background:url(alamat gambarnya disini) no-repeat;">

Diakhir postingan tutup dengan kode berikut:

</div>

Ganti tulisan alamat gambarnya disini dengan alamat gambar yang ingin anda tampilkan.

Seperti halnya pada background dengan warna, kode inipun bisa anda tambah-tambahin sesuai dengan keinginan.

Contoh, saya ingin membuat posting dengan background yang beralamat di http://i685.photobucket.com/albums/vv220/amatullah_sy/713599gidcqc66ex.gif, background ingin di simpan di sebelah kanan atas posting tanpa repeat, padding sebesar 10 pixel, besar hurup 90% :

<div style="background:url(http://i685.photobucket.com/albums/vv220/amatullah_sy/713599gidcqc66ex.gif) no-repeat center top; text-align:justify; font-size:90%; padding:10px">

Pada setiap tempat engkau akan mendapatkan kegelapan dalam hidupmu, maka tidak ada yang mesti engkau lakukan kecuali menghidupkan lentera yang ada di dalam jiwamu.

Optimislah walaupun engkau berada dalam terpaan bencana.

Besok kita menanti pohon raihan akan berbunga, kesedihan akan sirna dan kebahagiaan akan menjelma.

Emasmu adalah agamamu, perhiasanmu adalah akhlakmu, dan hartamu adalah budi pekertimu.

Setiap manusia akan hidup; orang yang mempunyai istana dan orang yang hidup didalam gubuk…akan tetapi siapakah yang bahagia?

Biarkanlah orang yang zalim dihadapkan pada pengadilan akhirat, yang pada saat itu tidak ada hakim kecuali Allah.

Penyakit adalah berita yang membawa kabar gembira dan sehat adalah perhiasan yang berharga.

 </div>

Maka hasilnya seperti ini:

Pada setiap tempat engkau akan mendapatkan kegelapan dalam hidupmu, maka tidak ada yang mesti engkau lakukan kecuali menghidupkan lentera yang ada di dalam jiwamu.

Optimislah walaupun engkau berada dalam terpaan bencana.

Besok kita menanti pohon raihan akan berbunga, kesedihan akan sirna dan kebahagiaan akan menjelma.

Emasmu adalah agamamu, perhiasanmu adalah akhlakmu, dan hartamu adalah budi pekertimu.

Setiap manusia akan hidup; orang yang mempunyai istana dan orang yang hidup didalam gubuk…akan tetapi siapakah yang bahagia?

Biarkanlah orang yang zalim dihadapkan pada pengadilan akhirat, yang pada saat itu tidak ada hakim kecuali Allah.

Penyakit adalah berita yang membawa kabar gembira dan sehat adalah perhiasan yang berharga.

Nah jika kita ingin mempatenkan background tersebut sebagai backgroud pada setiap postingan kita agar tak capek mengeditnya, caranya masuk menu pengaturan/ settinf =>klik tab format=>pada bagian akhir kolom format letakkan kode diatas

Nah selamat mencoba, semoga bermanfaat! Untuk melihat postingan saya lainnya yang memiliki background klik  disini

»»  READMORE...

Mengganti Background Blog

Lansung aja ya!

    * Mengganti Warna Background
      Untuk template minima klasik :

   1. Sign in
   2. Klik menu Template
   3. Klik menu Edit HTML
   4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data
   5. Rubahlah kode warna asli template dengan kode warna yang sobat sukai (yang warna merah adalah kode yang harus di rubah) :


    body {
    background:#fff;
    margin:0;
    padding:40px 20px;
    font:x-small Georgia,Serif;
    text-align:center;
    color:#333;
    font-size/* */:/**/small;
    font-size: /**/small;
    }

Misalkan jika ingin menjadi warna abu-abu terang, kodenya jadi seperti ini :


    body {
    background:#E7E3E3;
    margin:0;
    padding:40px 20px;
    font:x-small Georgia,Serif;
    text-align:center;
    color:#333;
    font-size/* */:/**/small;
    font-size: /**/small;
    }

   1. Klik tombol Pratinjau untuk melihat perubahan
   2. Jika sudah OK, klik tombol Simpan Perubahan Template
   3. Selesai.


Jika ingin melihat macam macam kode warna disini

Untuk template minima baru :

   1. sign in
   2. Klik menu Layout
   3. Klik menu Fon dan Warna mengganti background blog
   4. Pada gambar teks area sebelah kiri, pilih yang Warna latar Belakang Halaman (biasanya yg pertama sih langsung ini, jadi tidak usah di pilih lagi)
   5. Klik warna yang sobat sukai pada gambar warna-warna yang di tampilkan, lalu lihat perubahannya pada gambar di sebelah bawah
   6. Jika merasa sudah cocok, klik tombol SIMPAN PERUBAHAN
   7. Selesai.


Mudah bukan?
# Mengganti Background Dengan Image
Hal yang pertama tentu saja sobat harus mempunyai file image. Image ini bisa berbentuk imaage biasa, photo, bahkan animasi pun bisa. hal yang kedua adalah menguploadnya ke situs untuk menyimpan gambar, gambarnya seperti ini :
709894xsc89dco6t
gambarnya sangat kecil bukan? tapi gambar tersebut akan tampil memenuhi layar karena akan di tampilkan dalam jumlah yang sangat banyak.
Untuk cara instalasinya, silahkan ikuti langkah-langkah berikut !
Untuk template minima klasik :

   1. Sign in
   2. Klik menu Template
   3. Klik menu Edit HTML
   4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data
   5. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :


    body {
    background:#fff url('alamat gambar anda');
    margin:0;
    padding:40px 20px;
    font:x-small Georgia,Serif;
    text-align:center;
    color:#333;
    font-size/* */:/**/small;
    font-size: /**/small;
    }

   1. Klik tombol Pratinjau untuk melihat perubahan
   2. Jika sudah OK, klik tombol Simpan Perubahan Template
   3. Selesai.


Kode warna background sengaja tidak saya hilangkan, ini di maksudkan agar apabila background image yang kita pakai gagal di loading oleh komputer pengunjung blog, maka yang bekerja duluan warna background.
Untuk template minima baru :

   1. Sign in
   2. Klik menu Layout
   3. Klik menu Edit HTML
   4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
   5. Klik kotak kecil di samping tulisan Expand Template Widget
   6. Tunggu beberapa saat sampai proses selesai
   7. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :


    body {
    background:$bgcolor url('alamat gambar anda disini');
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }

   1. Klik tombol Pratinjau untuk melihat perubahan
   2. Bila sudah OK, klik tombol SIMPAN TEMPLATE
   3. Selesai.

Selamat mencoba !

»»  READMORE...