Memindah Sidebar Blogger Template Random

Jumat, Januari 06, 2012

Sidebar blogger template biasanya berada disisi kiri ataupun kanan artikel. Kadang pada posisi ini digunakan untuk pemasangan iklan bagi blogger matre seperti saya wkwk. Nah tadi sesudah saya share tentang kesalahan blogger pengguna blogspot di facebook ada pertanyaan untuk saya yaitu random sidebar.

Sebenarnya requestnya ini lebih ke random sidebar, dan tepatnya adalah ketika di homepage sidebar berada di posisi kanan, akan tetapi ketika dibuka post menjadi random, sidebar bisa berada di kiri atau dikanan. Nah sekarang yang perlu kita pelajari adalah JavaScript random() Method, JavaScript Math Object, HTML DOM Style Object.

Tidak begitu banyak kan :D, memang sedikit kok xi3 kalau mau juga pelajari juga CSS Positioning. Jika semua sudah di pelajari (kayaknya ndak mungkin :p) dan merasa sudah bisa melanjutkan ke tahap selanjutnya silahkan. Tahap selanjutnya kita analisa dulu ID sidebar yang akan kita pindah itu apa. Sebagai contoh adalah blog ini saja. Biar belajar pada blognya sendiri sendiri :)).

Terdeteksi untuk id sidebar di template blog saya adalah content-left dan untuk container contentnya content-main ada juga content-right. Ini adalah div yang sejajar. Namun bukan ketiganya yang akan kita rubah posisinya hanya ada 2 yaitu untuk content-left dan content-main. Untuk mempermudah anda menganalisa gunakan Inspect Element pada browser opera. kalau untuk browser lain saya lupa plug innya apa.

Sudah bisa menentukan di templatenya masing masing? Kalau sudah saya akan share sedikit kode.

  1. <script type="text/javascript">
  2. var Posisi = Math.floor(Math.random()*2);
  3. if (Posisi==1)
  4. {
  5. document.getElementById("content-main").style.cssFloat="left";
  6. document.getElementById("content-main").style.marginLeft="5px";
  7. document.getElementById("content-main").style.marginRight="0";
  8. document.getElementById("content-left").style.cssFloat="right";
  9. document.getElementById("content-left").style.marginLeft="0";
  10. document.getElementById("content-left").style.marginRight="5px";
  11. }
  12. else
  13. {
  14. document.getElementById("content-main").style.cssFloat="right";
  15. document.getElementById("content-main").style.marginLeft="0";
  16. document.getElementById("content-main").style.marginRight="5px";
  17. document.getElementById("content-left").style.cssFloat="left";
  18. document.getElementById("content-left").style.marginLeft="5px";
  19. document.getElementById("content-left").style.marginRight="0";
  20. }
  21. </script>

Kalau coding saya ada yang salah mohon benarkan. Karena memang belum sempat saya coba, tapi intinya memang begitu. Kita kupas sedikit. Point 2 menandakan proses random yang di kalikan 2 jadi posisi hasilnya antara 0 - 2 nah kan nanti jadi aneh jika nilai yang didapat misalnya 1.003743274 makanya kita memerlukan nilai absolut / integer. Jadi saya menggunakan math object floor. Masih bingung? pelajari lagi tentang poin poin yang saya tunjukkan diatas. Untuk kode yang lain sepertinya sudah sangat mudah dipahami.

Setelah code selesai dan anda rasa benar sekarang dilihat requestnya baca kembali paragraf 2. Untuk memulainya bisa di atur dulu sesuai homepage. Yaitu untuk content di kiri dan sidebar dikanan. Ini pakai CSS float saja. Dan sekarang menentukan untuk random di pageType item jadi bisa dengan code sebagai berikut

  1. <b:if cond='data:blog.pageType == &quot;item&quot;'>
  2. Masukkan kode disini
  3. </b:if>

Tempatkan kode tersebut pada template di atas penutup tag head

  1. </head>

Sebenarnya bisa juga tanpa menggunakan javascript style object. Kita bisa menggunakan script style yang di write langsung dari javascript. Contohnya ada di status FB saya. Sengaja kali ini dibedakan supaya lebih beragam saja. Untuk pemasangan codenya bisa dibagian mana saja asal dibawah style masing elemen yang di atur. Sekarang waktunya mencoba dulu jika ada pertanyaan akan kita bahas untuk selanjutnya.

Komentar Memindah Sidebar Blogger Template Random

Jangan menaruh live link dikomentar dan sampai saat ini baru 6 komentar untuk update Memindah Sidebar Blogger Template Random dengan id 5197086723669946989.

Film Korea Terbaru

Mumet om :D

Penak moco FTV ne..

6/1/12 16:23
coconias

keren gan.. langsung di coba :D

6/1/12 16:46
berita terbaru

mantapppppppppp.. ini yang ane cari2 mas. feature premium yang hanya ada di WP, sekarang bisa di oprek dalam Blogcepot. siiiipp !! mantep

6/1/12 16:49
Sragen ASRI

wkwkkwkkw, nek u kie ilmune terlalu duwur jew dadi ilmu krocok krocok ngene kie ra mudeng,

Silahkan semoga sukses

xi3, jadi ndak enak hati kalau ini bener2 fitur premium :D

6/1/12 17:31
Unknown

nggk ada demo nya to mas bowo?

13/1/12 21:35
Unknown

woh, ternyata dah diterapin di blog ini ya mas. keren

13/1/12 21:37