Headlines News :
Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts

Cara Menampilkan Widget Blog Pada Halaman Yang di Inginkan

Cara Menampilkan Widget Pada Halaman Yang di Inginkan ini maksudnya adalah mengkondisikan tampilan widget sesuai dengan yang diinginkan, misal saja kita mempunyai sebuah widget yang menurut kita hanya pantas untuk ditampilkan di halaman beranda/homepage maka kita kondisikan widget tersebut untuk tampil di halaman tersebut. contoh lain apabila blog kita mempunyai kecepatan loading yang berbeda antara saat pada halaman beranda dengan halaman postingan maka alangkah baiknya kita mengkondisikan beberapa widget agar tidak tampil pada halaman yang loadingnya berat. atau mungkin ada alasan lain sehingga kita ingin mengkondisikan widget pada halaman tertentu saja.
Nah untuk  Menampilkan Widget Pada Halaman Tertentu maka kita harus menambahkan kode pengondisian dibawah ini ikuti langkahnya:
  1. Login ke Blogger sebagaimana biasa
  2. Di halaman Dasbor, pilih Tata Letak.
  3. Kemudian pilih Edit HTML.
  4. Jangan lupa Backup Template anda agar mudah mengembalikan jika terjadi kesalahan.
  5. Centang pada “expand template widget”.
  6. Cari widget yang mau sobat ganti. Contoh di blog ini: 'Loading blog ini menurut Sobat?'.
  7. Setelah ketemu, tambahkan kode seperti dibawah ini :

Mengondisikan widget Hanya Tampil Diberanda/homepage :

Contoh Tampilan dari barisan kode widget "Loading blog ini menurut Sobat?"
<b:widget id='Poll1' locked='false' title='Loading blog ini menurut Sobat?' type='Poll'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h5 class='title'><data:title/></h5>
</b:if>
<div Style='text-align:center' class='widget-content' id='widget-content'>
<iframe allowtransparency='true' expr:height='data:iframeheight' expr:name='&quot;poll-widget&quot; + data:pollid' expr:src='data:iframeurl' frameborder='1' style='border:1px solid #ccc; width:99.5%;'/>
</div>
</b:includable>
</b:widget>
Lihat kode  <b:includable id='main'> yang berwarna merah, selanjutnya sobat tambahkan kode dibawah ini setelahnya/ dibawahnya:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Lihat lagi kode </b:includable> yang berwarna merah dibawahnya, selanjutnya sobat tambahkan kode dibawah ini sebelum/ diatas kode tersebut:
</b:if>
Sehingga tampilan akhir deretan kode tersebut menjadi seperti ini:
<b:widget id='Poll1' locked='false' title='Loading blog ini menurut Sobat?' type='Poll'>
<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 != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div Style='text-align:center' class='widget-content' id='widget-content'>
<iframe allowtransparency='true' expr:height='data:iframeheight' expr:name='&quot;poll-widget&quot; + data:pollid' expr:src='data:iframeurl' frameborder='1' style='border:1px solid #ccc; width:99.5%;'/>
</div>
</b:if>
</b:includable>
</b:widget>

Mengondisikan Widget Hanya Tampil pada postingan :

Untuk menampilkan widget hanya tampil di halaman postingan caranya sama seperti diatas hanya perlu mengganti kode <b:if cond='data:blog.url == data:blog.homepageUrl'> dengan kode dibawah ini:
<b:if cond='data:blog.pageType == &quot;item&quot;'>

sehingga tampilan akhir deretan kode menjadi:
<b:widget id='Poll1' locked='false' title='Loading blog ini menurut Sobat?' type='Poll'>
<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 != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div Style='text-align:center' class='widget-content' id='widget-content'>
<iframe allowtransparency='true' expr:height='data:iframeheight' expr:name='&quot;poll-widget&quot; + data:pollid' expr:src='data:iframeurl' frameborder='1' style='border:1px solid #ccc; width:99.5%;'/>
</div>
</b:if>
</b:includable>
</b:widget>

Mengondisikan Widget Hanya Tampil pada halaman static :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
----------
----------
</b:if> 

Mengondisikan Widget Hanya Tampil pada halaman archive :

<b:if cond='data:blog.pageType == &quot;archive&quot;'> 
----------
----------
</b:if> 

Mengondisikan Widget Hanya Tampil pada halaman postingan tertentu :

<b:if cond='data:blog.pageType == &quot;URL postingan&quot;'> 
----------
----------
</b:if> 
Kalau sobat mau memasang dari kebalikan kode diatas, maksudnya kode diatas kan hanya tampil pada halaman yang dimaksud sedangkan kebalikannya yaitu tampil pada semua halaman kecuali halaman yang dimaksud.
contoh:

Cara mengondisikan Widget Tampil pada semua halaman kecuali Diberanda/homepage :
kodenya seperti ini:
<b:if cond='data:blog.url != data:blog.homepageUrl'> 
Perhatikan dengan teliti untuk mengecualikan tampilan pada halaman tertentu pada kode pengkondisian tersebut tinggal mengganti tanda "==" dengan "!=" itu berlaku untuk semua kondisi diatas.

Cara Membuat Spoiler Widget CSS

Membuat Spoiler widget untuk meringankan blog, mungkin ini salah satu cara mengatasi beratnya loading blog yang dikarenakan banyaknya pemasangan widget. selain dapat sedikit meringankan loading dengan memasang spoiler pada widget ini akan meminimalkan ruang yang terpakai sehingga memudahkan pengunjung untuk mengetahui isi blog kita karena tidak usah jauh-jauh mengscroll halaman blog kita. seperti pada blog ini saya memasang kurang lebih 17 widget dengan menggunakan Tabview widget dan Spoiler ini maka tampilannya tidak begitu rame dan jauh sampai kebawah, coba sobat bayangkan kalau ke 17 widget diblog ini saya pasang secara default tanpa perubahan apapun sudah dipastikan bagaimana tingginya blog ini dan harus memutar scroll berapa kali ditambah bagaimana ramenya blog ini.
Ok. kita lanjut saja pada pokok bahasan, sebelum berlanjut sobat bisa lihat contoh dari tutorial ini pada sidebar:
Silahkan coba klik Lihat yang ada disisi kanan weidget itu, nah itulah yang saya maksudkan spoiler pada widget, dengan menggunakan spoiler maka kita dapat meminimalisir tampilan blog dan ini otomatis akan meringankan blog juga. ini saya rasakan bedanya dengan sebelum pakai spoiler meskipun jaringan juga yang menjadi peran utama dalam loading blog namun ini dapat sedikit membantu.

Langkah membuat spoiler pada widget:

  • Seperti biasa login ke blogger
  • Pilih tata letak kemudian tambah gadget
  • Selanjutnya pilih javascript/HTML kemudian beri judul utama widget tersebut. Contoh (aksesories) pada blog ini.
  • kemudian copy paste kode dibawah ini pada kotak dibawahnya.
<style type='text/css'>
#aks{background: #f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh71FU12KD5ssaC1RCJJwdzRAZBAKg7j7e76zUu_Rcv0DMRJqOjhK1nokhxt_KEDzWiZ6UhWqhgyNfOrAI_RlgFbr_Nhs8W2jdRS3GbLx0Bpg1fDDQGvmBqgJdN-SLPhp288oNCWon5Ho8b/h120/gradient2.php.png) repeat-x; border: 1px solid #ddd; padding: 3px;}
#jud{font-family: arial; font-size: 12px;color:#555; margin-bottom: 0px;font-weight:bold;text-align:left;}
</style>
<div id="aks"> <div id="jud">Judul Widget sobat<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = 'tutup'; this.value = 'tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = 'buka'; this.value = 'buka'; }" style="background: #f9f9f9; border: 0px solid #000; color: #8B4513; font-family: arial; font-size: 10px; margin: 0px;font-weight:bold;text-transform:uppercase;float:right;" type="button" value="LIHAT" /></div> <div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; text-align:center;padding: 0px;"> <div style="display: none;"> <br />Masukan Kode Widget sobat</div> </div> </div>
kalau sobat mau memasang lebih dari satu maka sobat tinggal menambahkannya lagi dibawah kode diatas secara berurutan. hasilnya seperti ini:
<style type='text/css'>
#aks{background: #f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh71FU12KD5ssaC1RCJJwdzRAZBAKg7j7e76zUu_Rcv0DMRJqOjhK1nokhxt_KEDzWiZ6UhWqhgyNfOrAI_RlgFbr_Nhs8W2jdRS3GbLx0Bpg1fDDQGvmBqgJdN-SLPhp288oNCWon5Ho8b/h120/gradient2.php.png) repeat-x; border: 1px solid #ddd; padding: 3px;}
#jud{font-family: arial; font-size: 12px;color:#555; margin-bottom: 0px;font-weight:bold;text-align:left;}
</style>
<div id="aks"> <div id="jud">Judul 1<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = 'tutup'; this.value = 'tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = 'buka'; this.value = 'buka'; }" style="background: #f9f9f9; border: 0px solid #000; color: #8B4513; font-family: arial; font-size: 10px; margin: 0px;font-weight:bold;text-transform:uppercase;float:right;" type="button" value="LIHAT" /></div> <div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; text-align:center;padding: 0px;"> <div style="display: none;"> <br />Kode Widget 1</div> </div> </div>

<div id="aks"> <div id="jud">Judul 2<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = 'tutup'; this.value = 'tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = 'buka'; this.value = 'buka'; }" style="background: #f9f9f9; border: 0px solid #000; color: #8B4513; font-family: arial; font-size: 10px; margin: 0px;font-weight:bold;text-transform:uppercase;float:right;" type="button" value="LIHAT" /></div> <div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; text-align:center;padding: 0px;"> <div style="display: none;"> <br />Kode Widget 2</div> </div> </div>

<div id="aks"> <div id="jud">Judul 3<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = 'tutup'; this.value = 'tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = 'buka'; this.value = 'buka'; }" style="background: #f9f9f9; border: 0px solid #000; color: #8B4513; font-family: arial; font-size: 10px; margin: 0px;font-weight:bold;text-transform:uppercase;float:right;" type="button" value="LIHAT" /></div> <div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; text-align:center;padding: 0px;"> <div style="display: none;"> <br />Kode Widget 3</div> </div> </div>
- Judul Widget sobat silahkan beri judul widget
- Masukan Kode Widget sobat Silahkan masukan kode widget sobat

Apabila sobat mau menambahkan lebih banyak lagi sobat tinggal menambahkannya seperti diatas.

Tips:
Untuk widget dengan ukuran kecil seperti statistik blog dan banner sobat bisa menyimpan kodenya secara berurutan dalam satu spoiler.