Rahasia Perubahan Posisi Widget di Blog Kang Rohman dan Detik.com

Menampilkan widget hanya pada halaman home berarti widget tersebut hanya akan tampil pada halaman depan, jadi saat kita melihat/membaca artikel widget tersebut akan hilang tersembunyi dan akan muncul kembali pada halaman awal atau home.

Hari ini Kang salman mau berbagi tips bagaimana cara membuat widget berpindah-pindah seperti blognya kang rohman

Pernah main ke blognya kang rohman? disana kamu bisa liat bagaimana perubahan widget banner yang pindah ke kiri dan ke kanan

Tutorial ini baru saya temukan setelah perjuangan yang berat selama 2 bulan bertanya sana-sini, ke suhu kang rohmanpun saya layangkan walaupun sampai sekarang masih belum di konfirmasi, tapi perjuangan kang salman tidak berhenti disitu demi melampiaskan rsa penasaran saya dan akhirnya sudah saya temukan jawabannya.

Dulu saya beranggapan perubahan posisi banner itu disebabkan oleh jumlah halaman yang lebih dari satu. saya merasa aneh, kok bisa posisi widgetnya beubah-rubah? seolah-olah memiliki 2 domain  atau memiliki 2 halaman yang berbeda, padahal setelah di perhatikan alamat urlnya masih sama.Mua tau caranya? kita bongkar yuk rahasia mereka! ^_^

1.  Login ke Blogger
2.  Langsung menuju ke Design/Rancangan
3,  Klik Edit HTML
4.  centang tulisan "Expand Widget Template"
5.  Cari kode berikut :

]]></b:skin>

Letakkan kode berikut ini setelah kode diatas

<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#main-wrapper{float:right;}
#sidebar-wrapper{float:left;}
</b:if>
</style>

---

Nah kalau yang di bawah ini cara menampilkan widget di halaman Home atau Posting saja :
Untuk membuatnya cukuplah mudah tapi pertama-tama kamu harus tahu nama dari widget tersebut misalnya : Shoutbox, Pengikut, Dll. biar ga pusing  lihat dulu deh.

Tipe dari setiap halaman dan kode id dari tiap widget pada Blogger.Widget HTML Code

Kode id widget biasanya dimulai dengan kode <b:widget id=

   1. Contoh kode widget label:

          <b:widget id='Label1' locked='false' title='Title' type='Label'>


   2. Contoh kode widget html:

          <b:widget id='HTML1' locked='false' title='' type='HTML'>


   3. Contoh kode widget link list:

          <b:widget id='LinkList2' locked='false' title='Title' type='LinkList'>

Nah  di atas tadi adalah kode-kode dasar dari widget yang ada di blog kita, kita bisa memanipulasinya, bisa di sembunyikan.. bisa juga di munculkan. sebagi contoh saya akan menampilakan widget di home saja.dan saat anda membaca artikel widget itu hilang

Yuk kita lihat caranya :

    * Masuk ke blogger

    * Klik Tata Letak dan ingat nama widget apa yang ingin  anda tampilkan pada halaman depan

    * Klik Edit Html

    * Lalu cari nama widget tersebut misalnya : widget saya


Huruf yang berwarna merah itu adalah judul widget kamu dan huruf berkedip yang berwarna biru adalah kode untuk menyembunyikan widget.


1. Untuk membuat widget hanya tampil di Home Page (dan hilang di halaman posting):

-   Tentukan/pilih widget yang ingin di sembunyikan.
-   Catat judul widget tersebut.
-   Cari judul widget tersebut di template kamu (gunakan ctrl+f atau f3)


Strukturnya seperti di bawah ini:

<b:widget id='HTML14' locked='false' title='widget saya' 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 != """>

<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> 

Huruf yang berwarna merah adalah judul widget anda. Huruf yang berwarna Hijau adalah kode yang akan menyembunyikan widget di saat pengunjung sedang membaca artikel.
Setelah selesai, Simpan template.

2. Untuk membuat Widget tampil di halaman posting (dan hilang di home):

-   Tentukan/pilih widget yang ingin di sembunyikan.
-   Catat judul widget tersebut.
-   Cari judul widget tersebut di template kamu (gunakan ctrl+f atau f3)

Maka secara keseluruhan widget tersebu memiliki struktur seperti di bawah ini:

    <b:widget id='HTML14' locked='false' title='widget saya' 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 != """>
    <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>

Huruf yang berwarna merah adalah judul widget anda. Huruf yang berwarna Hijau adalah kode yang akan menyembunyikan widget di homepage.

Setelah selesai, Simpan template

    * Kode warna hijau adalah kode yang harus ditambahkan !

Ada tambahan lagi, jika anda tidak memberi nama judul widget,  maka blogger akan menamai widget tersebut dengan Html1, Html2, Dst untuk widget Html/javascript. Text1, Text2, Dst untuk widget text. Kang Salman sarankan agar anda memberi judul pada setiap widget, alasannya biar ga pusing.. ^_^.

    * Jika sudah Klik Simpan


Catatan :

Di bawah kode id pada setiap widget, biasanya terdapat kode b:includable seperti ini

    <b:includable id='main'>

Jika anda ingin menampilkan widget hanya pada halaman homepage, letakkan kode ini (conditions) setelah kode diatas

    <b:if cond='data:blog.url == data:blog.homepageUrl'>


Jangan lupa untuk memberikan tag penutup kode diatas

    </b:if>

Setelah disimpan sekarang coba anda lihat hasilnya pada saat pada awal halaman, dan coba lihat artikel anda sendiri dan widget tersebut akan hilang tersembunyi hihi ^_^

Refrensi : corpita95.blogspot.com

                b-spot.info

                blog.yudhaime.co.cc


Edited by  http://asksalman19.blogspot.com