Cara Menampilkan Widget pada Halaman tertentu pada Blog







Widget merupakan “kode portabel ( biasanya DHTML, JavaScript atau Adobe Flash ) yang dipasang diinstall, atau sederhananya, copy paste pada suatu halaman web, yang memiliki suatu fungsi tertentu dan menjadi suatu bagian dalam halaman web tersebut.”





istilah lain untuk widget : gadget, badge, module, webjit, capsule, snippet, mini, flake, application.





QYang ingn saya share kali ni adalah cara menampilkan widget pada halaman tertentu.


Untuk mengetahui kode widget dalam edit template,caranya:





1. Lgin blog


2. Masuk ke template


3. cari kode   <div id='sidebar-wrapper'>


dibawah kode tersebut  ada kode html dari widget yang sbat pasang




  <div id='sidebar-wrapper'>


            <b:section class='sidebar' id='sidebar' preferred='yes'>


    <b:widget id='HTML1' locked='false' title='ash blog='HTML'/>


    <b:widget id='HTML2' locked='false' title='Free Template' type='HTML'/>


    <b:widget id='HTML3' locked='false' title='Recent Comment' type='HTML'/>


    </b:section>


          </div>





yang saya tandai warna merah adalah kode html dan yang berwarna oranye adalah judul widgetnya.





sekarang di halaman mana widgetyang ingin sobat tampilkan?


berikut ini script kode lengkap kap..:D/








1. Menampilkan widget hanya di halaman depan saja (homepage).





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


......................................................


</b:if>





2. Menampilkan di semua halaman kecuali homepage.





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


......................................................


</b:if>





3. Menampilkan widget hanya di halaman Archive saja.





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


......................................................


</b:if>








4. Menampilkan widget di semua halaman kecuali halaman archive.





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


......................................................


</b:if>





5. Menampilkan widget hanya di halaman posting.





<b:if cond='data:blog.pageType == &quot;item&quot;'>


......................................................


</b:if>





6. Menampilkan widget di semua halaman, kecuali halaman posting.





<b:if cond='data:blog.pageType != &quot;item&quot;'>


......................................................


</b:if>





7. Menampilkan widget hanya di postingan tertentu saja.





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


......................................................


</b:if>





8. Menampilkan widget selain di postingan tertentu.





<b:if cond='data:blog.pageType != &quot;alamat-postingan&quot;'>


......................................................


</b:if>





9. Menampilkan widget hanya di halaman staticpages.





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


......................................................


</b:if>





10. Menampilkan widget di semua halaman,kecuali halaman staticpages.





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


......................................................


</b:if>













misal sobat ingin menamplkan widget recent comment dan ingin menampilkan pada seluruh halaman post kecuali homepage.





1. buka edit template sobat


2. Centang expand widget template


3. cari kode recent comment atau kode htmlnya "html3" yang saya contohkan di atas.


kode yang seperti ini:







<b:widget id='HTML3' locked='false' title='Recent Comments' type='HTML'>


<b:includable id='main'>


  <!-- only display title if it's non-empty -->


  <b:if cond='data:title != &quot;&quot;'>


    <h2 class='title'><data:title/></h2>


  </b:if>


  <div class='widget-content'>


    <data:content/>


  </div>


  <b:include name='quickedit'/>


</b:includable>


</b:widget>





sisipkan kode scriptnya dibawah <b:includable id='main'> dan tutup dengan </b:if> yang d letakkan dibawah </div>





sehingga kode nya menjadi seperti ini








<b:widget id='HTML3' locked='false' title='Recent Comments' 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 != &quot;&quot;'>


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





Langkah terakhir adalah save template dan selesai.


Mudheng atau Mubeng sob?:D


Semoga tutorial dari saya cukup jelas, jikalau sobat ada yang kurang mengerti dapat reply di kotak komentar.





Comments

Post a Comment