Bikin Background berbeda di setiap halaman

Trik ini pernah ku ulas sebelumnya. Namun ketika blogspot menambahkan fitur halaman, aku jadi kepikiran buat bikin background yang berbeda-beda pada setiap halamannya. Akhirnya setelah browsing kenana kemari, aku ketemu cara untuk menempatkan script background pada halaman tertentu. Bukan Cuma buat backround sob, buat widget juga bisa, jadi kita bisa memilah dan memilih backround mana yang akan di tampilkan di halaman depan, dihalaman selajutnya ataupada halaman-halaman tertentu sesuai keinginan kita.

Memasang Recent Post ke dalam Kotak Blogroll

Andai kata, umpama, misalnya... rekan bloggers bikin recent post kayak yang aku paparkan pada postingan kemaren dan ingin menampilkan 10 atau lebih postingan sekaligus, sudah barang tentu akan memakan banyak tempat karena recent post yang kita pasang bakal tampil amat sangat pannnjjjjjaaaaannnggggg..... ke bawah, sementara misalnya recent post tersebut sobat taruh pada sidebar yang berukuran kecil. Tenang... gwa punya sedikit trik untuk mengatasi masalah tersebut yaitu dengan menaruh recent post tadi ke dalam sebuah kotak blogroll. Gimana, masuk akal ngga kira-kira???..

Related Posts dengan Thumbnail untuk Blogger

Satu lagi trik yang lumayan asik bagiku adalah memasang related post dengan thumbanils yang aku dapet dari si Amanda. Cara pemasangannya sangatlah mudah. Anda tinggal megkopi  kode yang diberikan  lalu mempastekannya ke tempat yang tepat. Jadi deh. Seperti gambar di samping. Lumayanlah buat ngeramein tampilan sekaligus memudahkan pengunjung untuk melihat apa apa saja tulisan kita dengan kategori yang bersangkutan.

Yang tertarik, silahkan langsung ke TKP. Tancap bro ....

kembali ke atas

Tips dan Trik Memasang Widget di sudut blog

Setelah meminta izin ke yang empunya posting, kembali Kojek menulis tentang sebuah ide sederhana untuk mempercatik tampilan blog. Adapun trik kali ini adalah bagaimana caranya kita memasang sebuah widget/aksesoris,image atau banner ke salah satu sudut blog seolah olah widget/aksesoris,image atau banner itu tadi seakan-akan melayang-layang di blog kita. Bukan cuma satu sudut saja yg bisa kita hias dengan trik ini, keempat sudut blog bisa kita pasangi berbagai gadget atau widge/aksesoris. Namun pertimbangkanlah dari segi estetika (ceaellah ... ). Jangan malah membuat pengunjung bingung dan yang pasti perhatikan loading pagenya. Jadi Inga' .. Inga' ....

Cara membuat backround berbeda pada setiap halaman blog

Bikin background yang berbeda untuk setiap halaman blog? kenapa tidak. Lumayan dech buat tampil agak lain dari yang lain. Narsis gitu ..., dan pengunjung ngga bakalan bosan menjelajah blog kita karena bisa tampil dengan background yang berbeda-beda di setiap halamannya.

Ngehack Template Minima Youk ….

Sumpek, bosan, jenuh dan BT gara-gara PR yang kemaren melorot, Akhirnya terobati juga. Berkat support dan dukungan sohib-sohib yang keurennn abissss ...., Makasih ya. Dan aku jadi semangat nih blogwalking kesana kemari, ehh ... ketemu sama trik yang juga asik, yaitu trik bikin 3 kolom footer. Gua utak-atik dan coba mengaplikasikannya, eh ...ternyata berhasil. Lalu ide nyeleneh kembali muncul, ...Gimana kalo 3 kolom footernya kita letakkan di bawah header... Atau kita coba pasang kedua-duanya sekalian, bisa ngga ya????...

Akhirnya ... berhasil juga jerih payahku meskipun sebetulnya aku buta akan apa itu css, java/script, html, xml dll , Plong dech ... Seneng banget. Biarpun Cuma di minima klasik doank, gak apa-apa dech. Akhirnya aku berhasil menambah 3 kolom di bawah header dan 3 kolom lagi di bawah footer (sebetulnya ada empat kolom hi hi hi ...) Untuk demonya, klik aja di sini. atau di sini sedangkan contoh elemen yang berhasil aku tambah kayak gambar di bawah ini nih :

Ide lain yang tiba tiba nongol adalah "gimana caranya ngumpetin/nyembunyiin 3 kolom footer dan 3 kolom di bawah header tadi bila kita bergerak ke halaman selanjutnya". Maksudnya, biar loading page ke halaman selanjutnya bisa lebih ringan, Khan ngga semua widget harus kita tampilkan di depan. Nah untuk trik ini (Menampilkan dan menyembunyikan elemen halaman) kebetulan telah aku kuasai sedikit, jadi tinggal memadukan antara kode 3 kolom footer dan 3 kolom di bawah header tadi dengan kode nyembunyiin widget tadi. Dan ternyata .... Bisa bro .... Asik ....

Ok, sekarang gua mau bagi nih jurusnya, buat yang mau sedikit repot dan mumet silahkan dech pelajari pelan-pelan. Dan buat para master yang udah kawakan, tolong jagan diketawaiin ya ..., kritik dan sarannya ditunggu nih... biar jampi-jampi gua makin majur...

A. Tiga Kolom Footer

Blogger yang terhormat, sebelum menerapkan trik di bawah ini, sedikit saran yang bisa saya berikan adalah, agar anda selalu membackup template. Untuk langkah antisipasi, takut jampi-jampinya gagal. Atau lebih aman sebaiknya buat blog baru aja dech. Terserah mau dikasih nama apa, yang penting pake template minima dulu. Kalo udah berhasil, boleh dech coba ke tempale-tempale yang lain, atau terapkan ke blog utamamu. Ok Coy ... Tarik ...

1. Login ke blogspot
2. Klik Customize
3. Klik layout
4. Klik edit html, ingat !!! , Expand teks Widgetnya jangan di conteng, ntar bingung dech.
5. Cari kode seperti di bawah ini :

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

6. Ganti kode yang berwana biru dengan kode seperti di bawah ini :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
</p>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
</b:if>

7. Sampe di sini, save dulu dech. Lalu cari kode ini : </b:skin> Kalo udah ketemu, letakkan kode seperti di bawah ini di atas kode </b:skin> tadi.

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

Kalo udah beres, save dech. Klik layout untuk melihat elemen baru yang kita tambahkan


B. Tiga kolom di bawah header

Nah, sekarang kita tiba di bagian yang agak merepotkan nih. Biar lebih gampang, kita edit pake worpad atau document.txt

1. Copy kode di bawah ini lalu edit dengan worpad atau document txt :

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

2. Ganti kode yang berwarna hijau dengan tulisan header

3. Kalau sudah selesai, tempatkan kode hasil editing kamu tadi ke atas kode </b:skin>

4. Lalu kopi kode di bawah ini lantas edit dengan worpad atau document txt

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
</p>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
</b:if>

5. Ganti semua tulisan footer yang berwarna biru dengan tulisan header.

6. Ganti tulisan (semua tulisan yang berwarna merah) yaitu col1 menjadi col4, col2 menjadi col5 dan col3 menjadi col6

7. Dan terakhir, kode yang berwarna coklat, yaitu : col-bottom rubah menjadi col7-bottom

8. Kalo udah selesai kamu edit, copy kode yg tadi telah diedit lalu tempatkan di atas kode ini : <div id='content-wrapper'> yang ada pada templatemu.

8. Save lalu klik layout untuk melihat apakah elemen halaman yang kamu buat udah nongol di bawah elemen header.

Silahkan isi elemen halaman yang baru anda buat tadi dengan berbagai aksesoris, misalnya logo, follower atau profil. Setelah semuanya selesai, kamu bisa melihat tampilan blogmu sekarang, lalu klik judul postinganmu atau readmore-nya untuk melihat apakah 3 kolom header dan 3 kolom footer tadi menghilang.

Jika ingin 3 kolom footer nya tetap nongol, kamu tinggal hapus aja kode yang tebal, yaitu :
<b:if cond='data:blog.url == data:blog.homepageUrl'> dan </b:if> Kedua kode inilah yang bikin 3 kolom header maupun 3 kolom footer tadi disembunyikan bila kita bergerak ke halaman selanjutnya.

Ok blogger .... selamat berpusing ria ...



kembali ke atas

Tips dan Trik membuat Read More

Bikin readmore di blog emang kayaknya wajib nih. Biar tampilan blog jadi rapi. Dan kita bisa nampilkan beberapa postingan untuk kita taruh di halaman depan sekaligus bikin browser gak kelamaan membuka front page atau halaman depan blog kita. Namun, terkadang kita kesulitan saat mau bikin posting dimana kode-kode saling bertabrakan, misanya kode untuk meratakan paragraf atau kode untuk menapilkan huruf gontol-gontokan dengan kode <span class="fullpost"> dan kode </span>

Nah, berikut aku mau berbagi jurus bikin Readmore yang ngga ngerepotin, Readmorenya bekerja secara otomatis bro. Langsung aja ngetik di ruang posting pada mode compose. Atur warna huruf, tebal, miring atau perataan parangrafnya sesuka hati, tanpa khawatir readmorenya ngga bekerja.

Ok blogger, ... youk ngilikin template sebentar ...

1. Back up dulu templatemu
2. Login ke blogspot.com
3. Klik Customize
4. Klik Layout
5. Klik Edit HTML
6. Conteng kotak Expand Widget Templates
7. Cari kode seperti di bawah ini :

</head>

Selanjutnya, kopi kode di bawah ini lalu letakkan di bawah kode </head> tadi

<script type="text/javascript"> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src="http://syahenimkojek.googlepages.com/readmore_keren_bro.js" type="text/javascript"></script>

Selanjutnya, cari kode seperti di bawah ini :

<data:post.body/>

Ganti kode tersebut dengan kode seperti di bawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more &#8220;<data:post.title/>&#8221;</a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Klik save. Dan mulailah memposting

Selamat mencoba