Background blog bergaya slide show (2)

Karena buanyak yang masih bingung dan nanya seputar utak atik background blog bergaya slideshow, maka ana putuskan buat bikin posting selanjutnya yang ana rasa mungkin sedikit mudah dipahami dan semoga ngga bikin mumet lagi. sebelumnya, ana mohon maaf yang sebesar-besarnya karena baru sekarang sempat mengupdate dan nongol lagi ke blog ini, semoga bisa berkelanjutan nih. Okeh... ke TKP gan....

Seperti biasa backup dulu template anda, atau lebih amannya, buat experiment, buat blog baru aja deh. pake template minima saja. Disini kebetulan aku pake yang hitam. kalo pake yang putih, silahkan saja. sesuaikan saja antara template dengan backgroundnya. maksudku, kalo pake template minima putih, bakckgroundnye kudu yang bernuansa putih. begitu pula kalo hitam.

 kopi kode di bawah ini :

<style type="text/css">
{ background-color:transparent; }
body {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFigS3HBZgbxMprB9buLquouLPEKLfsQ-uKvfjcVCJD7xq12AvrBHzWzbBtmjlJMyA5DdYP0XcD00lT8u44a6zUQ1U8r3nfvRInYxYVVgehbNc08Fq5oKCI4p0gNr96SuUS2LGWmjdnRQ/s800/Fear%252520the%252520Dark%252520Wolf.jpg');
background-attachment: fixed;
background-position: right;
background-repeat:no-repeat;
</style>


lalu pastekan ke blogmu kayak masang widget yang lain. jangan lupa diberi nama, misalnya, CSS1. Ini akan mempermudah kita untuk mencari script yang kita pasang tadi guna kita selipkan beberapa kode lagi yang akan mengatur script background tadi untuk tapil di front page/halaman muka, halaman posting atau halaman-halaman yang lain.

Bentar, gwa jelasi dulu nih fungsi kodenya. Ganti kode yang berwarna merah dengan alamat url gambarmu. lalu kode yang berwarna biru bisa kamu gantri dengan scroll, artinya backgroundnya ikut bergerak apa bila kita bergerak ke bawah halaman. terus Kode right yang berwarna hijau adalah letak background tadi. perhatikan untuk penempatan gambar, jangan sampai mengganggu kenyamanan pengunjung blog anda. ganti tulisan raight tadi dengan, left, bottom, center, top left, top right, bottom left, bottom right. Selanjutya no-repeat, ini artinya ganbar yang kita tampilkan hanya satu, kalo tulisan no-repeat kita rubah menjadi repeat maka gambar akan ditampilkan beberapa buah. Ini lebih cocok kalau kita memakai background texture atau pattern... wah kepanjangannya????

Kalo udah, simpan templatemu kemudian masuk lagi ke menu edit HTML, centeng Kotak Expand Widget Template, cari nama kode yang tadi kita buat (dalam contoh CSS1) lalu selipkan kode seperti di bawah ini :


<b:widget id='HTML2' locked='false' title='css1' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Simpan template dan perhatikan hasilnya.

Kode <b:if cond='data:blog.url == data:blog.homepageUrl'> adalah kode yang mengatur agar background kita tadi hanya tampil di halaman depan saja dan akan menghilang bila anda menlanjutkan menbaca posting atau mengklik halaman lainnya. perharikan pula penempatan kode ; </b:if>


Selanjutnya, buat lagi css background yang kedua, beri nama CSS2 ganti url gambar dengan url gambar yang lain. kemudian simpan seperti biasa. Cari kode tadi di menu edit html lantas perhatikan penempatan kode seperti di bawah ini : 


<b:widget id='HTML6' locked='false' title='css2' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>


Demikian selanjutnya untuk halaman halaman yang lain. yang penting penempatan kodenya adalah dibaha kode : <b:includable id='main'> dan ditutup dengan kode : </b:if> 


Sebenarnya ini hanya akal-akalan saja. Ngga percaya, cari deh di internet, buanyak kok yang nulis soal gimana caranya menampilkan widget di halaman tertentu. nah, aku coba aplikasikan buat css backround, ternyata bisa. Yang penting, sekali lagi, perhatikan gambar yang akan anda pakai buat backround, jangan sampe mengganggu pengunjung blog, jangan sampe kegedean... yang wajar-wajar saja. yang penting, kita tunjukin, walau cuman pake template minima, kita bisa nampil narsis.... hehehehehehe...

By :Mohammad Haris
Selamat berpusing ria...