Beda-beda Background di tiap postingan !

Sebuah background di tiap postingan akan menimbulkan efek profesional di blog sampeyan pade ! Contohnye,jika elu punya blog yang mbahas tentang piknik, terus latar belakang postingan bergambar gerojogan sewu pasti akan mengena sekali, istilahe cocok karo regane ndhog ! Elu juga bisa bikin gambar latar belakang transparan di belakang teks, dimana yang akan berputar cumak teksnya doang !

Tus gimana dong kalo topik postingna kita beda2 ? Pake yang gw saranin tadi, bikin background yang beda-beda tiap postingan sesuai dengan tema.......

Ayo kita bahas deh atu-atu...

SUMBER GAMBAR
Langkah pertama jelas nyari gambar yang cocok sama tema postingan elu pade. Untuk amannya gunain mbah Google buat nyari gambar yang bebas hak cipta.


SIMPAN GAMBAR DI TEMPAT PENYIMPANAN GRATIS
Langkah selanjutnya adalah menyimpan gambar tadi ke tempat penyimpanan gratisan dan segera lu copy code link-nya. Paling bagus adalah http://www.imageshack.us Kalo lu nggunain Googlepages atau Photobucket.com lu bakalan nyesel, karena bandwith mereka sangat terbatas....

TARO KODE TADI DI POST TEMPLATE
1. Login ke Blogger.com.
2. Klik di Settings link di Dashboard.
3. Klik di Formatting subtab di bagian Settings tab.
4. Lihat ke bawah di Formatting tab ke Post Template di bagian terbawah.
5. Paste kode ini di atas kotak :

<div style="background:url(LINK_OF_PICTURE) no-repeat;">

dan paste kode ini di bawah kotak :

</div>

6. Save Setting.
7. Klik di Posting tab di bagian atas.
8. Post Editor bakal kebuka dan kode elu tadi udah ada tuh didalemnya.
9. Ganti 'LINK_OF_PICTURE' dengan link beneran gambar elu tadi. Kalo lu pengen gambar itu berulang terus tinggal lu hapus "no-repeat" di barisan kode itu.

Ketik postingan elu sebelum tag di bagian bawah, kasih judul dan Publish.

Coba sono gih, manyun aje !!

Seneng dan merasa terbantu dengan artikel di atas ? Langganan lewat email deh disini biar selalu uptodate !

Courtesy of Dummies Guide for Blogger Beta , translated into Indonesian by Bikinblogger !

Postingan super-peek-a-boo

Elu bisa manjangin post dari mode summarry ke full post, bikin collapse juga bisa, dan kalo elu nggak punya post summary di pos-an elu, maka link "Read More..." dan "Collapse" enggak muncul juga,pokoknya asyik deh....

Kayak lu bisa lihat di pos ini, dimulai cuman summary doang, terus diembel-embeli link 'Read more...'. Kalo lu ngeklik link itu maka akan terhampar full post. Sekarang coba lihat dipalign bawah disitu ada link 'Summary only...', yang meng-collapse pos kembali ke bentuk summary.

Hack ini pertamakali dibikin sama Ramani di Hackosphere. Cuman ditambahin dikit biar bisa di collaps-kan.

Caranya begini nih :

Langkah 0:
Back-up template lu seblum lu utak-atik lebih lanjut!

Langkah 1:
Tambahin kode javascript berikut di bagian head template lu. Tarok tepat diatas tag </head>.


<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />


Langkah 2:

Cari includable yang bernama 'post' di template elu, dan ubah tepat seperti koding dibawah (kode yang berwarna merah yang harus ditambahin):


<b:includable id='post' var='post'>
<div class='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>

<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Summary only...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
.... rest of template code ....

Sekarang, save template elu !

Langkah 3:
Di bagian tab Settings - Formatting ,lihat dibagian paling bawah dan masukin post-template berikut ini :

Type your summary here.
<span id="fullpost">
Type the rest of your post here.
</span>


nah sekarang tiap post baru yang elu bikin akan berbentuk fullpost-span secara default. Jika postingan elu pendek, lu tinggal ndelete tag <span>
dari postingan eluh. ostingan elu bakal tampil penuh, dannggak ada link "Read more..." atau "Summary only".

Bagaimana cara kerjanya (skip bagian ini jika elu gak suka yang rumit-rumit).
Perubahan yang elu buat membikin setiap post-body terdiri setidaknya 3 span: fullpost-span that yang udah lu masukin di post-template, sebuah span untuk link 'Read more', dan sebuah span untuk link 'Summary only'. Karena mungkin ada span yag lain di postingan elu, maka setiap masing-masing 3 span punya id unik ('fullpost', 'showlink' dan 'hidelink' secara berurutan).
Pas elu buka blog elu di halaman utama, maka postingan elu bakal tampil kayak gini:


* Summary ditampilin (selalu)

* Full text disembunyiin (pertama div, lalu diset ke display:none)

* Read more terlihat (div kedua)

* Summary only disembunyiin(div ketiga, diset ke display:none)


Poatingan elu selalu punya id khusus, dan jika id akan nglewatin fungsi javascript showFull dan hideFull berurutan. Funsi tersebut menggunakan metode getElementsByTagName buat nanganin span itu, dan kemudian men-toggle cara mereka ditampilin.sebuah fungsi ketiga, checkFull, mmeriksa apakah sapn Fullpost itu ada. Jika nggada, kedua link itu bakal disembunyikan.