Welcome To 2n.net Gorontalo Mengucapkan Selamat Tahun Baru 2013 dan terimakasih telah mengunjungi blog ini tnks


Jumat, 15 Juni 2012

Cara membuat background berbeda sesuai kategori

Cara membuat background berbeda sesuai kategori, KRtutorplus.com – Sudah lama tidak posting mengenai blogger, biar sedikit mengobati rasa rindu mereka yang menantikan Kang Rohman posting lagi mengenai blogger, ini ada tutorial mengenai Cara membuat background berbeda sesuai kategori/label.

Bila anda sedikit memperhatikan, ada perbedaan tampilan background pada posting yang di beri kategori/label Panduan blogger dan Panduan Wordpress pada blog ini :

panduan blogger

panduan wordpress


Background tersebut memang akan secara otomatis berubah sesuai dengan kategori pada posting yang sedang anda baca. Rupanya ada yang tertarik dengan trik tersebut dan menanyakan bagaimana cara membuatnya.

Perlu diketahui bahwa blogger mempunyai if conditional label yang bisa mengontrol apapun sesuai dengan label, misal bisa mengubah-ubah tampilan blog anda secara keseluruhan (konsep blogazine), bisa mengontrol tampilan iklan (iklan ingin tampil/tidak ingin tampil pada kategori tertentu), menampilkan/tidak menampilkan sidebar dan lain-lain. Intinya, anda bisa berbuat banyak dengan label bila anda mengetahui triknya.

OK, biar tidak terlalu melebar kemana-mana sementara ini kita fokus membahas bagaimana membuat background berbeda sesuai kategori. Kode dasarnya seperti ini :


<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;nama kategori&quot;'>
<style type='text/css'>
Kode CSS
</style>
</b:if>
</b:loop>

Yang harus diperhatikan adalah dimana background tersebut ingin di tempatkan? Bila merujuk kepada blog kang Rohman, background ditempatkan pada bagian body posting, kode CSS nya kebetulan seperti ini :

.post-body{margin:0 0 .85em; line-height:1.6em; padding:0px;overflow: hidden;}

Secara default, setiap posting tidak akan mempunyai background. Nah, disinilah peran if conditional label bermain agar pada label tertentu mempunyai background. Misal pada nama label : Panduan blogger, kang rohman memasang kode seperti ini :

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;panduan blogger&quot;'>
<style type='text/css'>
.post-body{background: url(http://2.bp.blogspot.com/-nAqlXpAXheQ/T7O3qEW1fPI/AAAAAAAAAi4/_xPvtiBP7HQ/s1600/bg_blogger.png) no-repeat top right;}
</style>
</b:if>
</b:loop>

Gambar Background yang di pasang adalah seperti ini :

background blogger

Dan alamat gambar tersebut adalah :

http://2.bp.blogspot.com/-nAqlXpAXheQ/T7O3qEW1fPI/AAAAAAAAAi4/_xPvtiBP7HQ/s1600/bg_blogger.png


Pada nama label : Panduan Wordpress, kang rohman memasang kode seperti ini :

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;panduan wordpress&quot;'>
<style type='text/css'>
.post-body{background: url(http://4.bp.blogspot.com/-z6JJYF3kOX0/T7O2ZuAuHJI/AAAAAAAAAiw/Nx3hN607mtc/s1600/bg_wp.png) no-repeat top right;}
</style>
</b:if>
</b:loop>

Background yang di pasang adalah seperti ini :

background wordpress

Dan alamat gambar tersebut adalah :

http://4.bp.blogspot.com/-z6JJYF3kOX0/T7O2ZuAuHJI/AAAAAAAAAiw/Nx3hN607mtc/s1600/bg_wp.png

Sudah, itu saja magic nya. Setiap artikel yang di beri label : panduan blogger dan panduan wordpress akan secara otomatis mempunyai background sesuai gambar yang di pasang.


Demikian tutorial tentang Cara membuat background berbeda sesuai kategori semoga bermanfaat.

Note :

Panduan diatas tidak cocok untuk pemula, ini di tujukan untuk mereka yang sudah paham akan kode template blogger.

Bila anda tertarik dengan fitur diatas, namun merasa kesulitan menerapkannya di blog anda, silahkan hubungi kang Rohman. Namun, mohon maaf, ini tidak gratis. Kang Rohman hanya minta donasi $1 untuk setiap pengerjaan custom background kategori



Sumber : http://www.krtutorplus.com/

Tidak ada komentar:

Poskan Komentar

LinkWithin

Related Posts Plugin for WordPress, Blogger...
WELCOME TO BLOG 2N.NET............................................................................................................................................................................SEMOGA ISI BLOG INI BERGUNA BAGI KITA SEMUA
 

Tukeran Banner

2n.net Gorontalo
eXTReMe Tracker
Protected by Copyscape Original Content Checker Free Flash Cursors at www.totallyfreecursors.com

Map

Pengikut

Baner Sahabat

plaNETWORK TKJ GORONTALO83.CO.CC