Cara Menampilkan Widget Pada Home Page, Dekstop, Mobile, dan Halaman Tertentu
www.azid45.web.id- Cara Menampilkan Widget Pada Home Page, Dekstop, Mobile, dan Halaman Tertentu. Assalamualaikum.wr,wb. Mungkin sudah banyak kita jumpai cara menampilkan widget pada halaman tertentu, baik itu hanya home page, hanya dipostingan, hanya di halaman statik, hanya di dekstop bahkan ada pula yang hanya tampil di mobile. Kesmua itu, sudah banyak di tutorialnya. Namun saya disini akan mengulas dan menjadikan satu semua cara tersebut agar mudah diterapkan dan tentunya hal ini adalah sebagai file saya dikemudian hari jika saya perlukan.
Pada dasarnya untuk menampilkan widget pada halaman tertentu, kita harus memanggilnya dengan code if atau jika. Formula tersebut, selain digunakan pada excel juga digunakan pada code HTML. Namun ada penambahan huruf b dan titik dua (:) sebelum code if. Jadi secara keseluruhan adalah b:if. Itu adalah dasarnya, selanjutnya kita harus tau code pemanggil letak halaman, seperti untuk data:blog.url, data:blog.isMobileRequest dan data:blog.pageType. Sebelum code tersebut membutuhkan pemanggil cond=' code pemanggil halaman == "identitas"'. Jadi secara kesulurahan menjadi <b:if cond=' code pemanggil halaman == "identitas"'> ..... </b:if> sebagai penutup.
Keterangan: untuk code pemanggil halaman ada tiga yang telah saya sebutkan diatas, dengan fungsi
data:blog.url adalah kode pemanggil hanya untuk home page, dengan identitas di isi dengan data:blog.homepageUrl tanpa ".
data:blog.url adalah kode pemanggil hanya untuk home page, dengan identitas di isi dengan data:blog.homepageUrl tanpa ".
data:blog.isMobileRequest adalah kode pemanggil hanya untuk tampilan dekstop dan mobile, jika dekstop ganti kata identitas dengan kata false, dan untuk mobile ganti dengan kata true.
data:blog.pageType adalah kode pemanggil untuk menampilkan halaman tertentu. Jika hanya di postingan tinggal ganti kata identitas dengan kata item, untuk menampilkan hanya di halaman statis tinggal ganti kata identitas dengan kata static_page, dan jika untuk menampilkan hanya pada alamat tertentu tinggal ganti kata identitas dengan alamat Url yang diinginkan, serta jika ingin hanya menampilkan di page error tinggal ganti kata identitas dengan kata error_page.
Sebaliknya, jika kita bisa menampilkan widget pada Home page dan sebagainya, kita juga bisa tidak menampilkan widget pada halaman yang kita inginkan, yaitu dengan menambahkan tanda seru (!) sebelum tanda "=", Disana kita temukan 2 tanda =, untuk itu harus menghapusnya salah satu sehingga yang awalnya <b:if cond=' code pemanggil halaman == "identitas"'> menjadi seperti ini <b:if cond=' code pemanggil halaman != "identitas"'>.
Disamping itu kita juga dapat menambahkan kode tersebut dengan dua pemanggil misalnya hanya ingin tampil di versi mobile dan di home page saja, maka kita hanya menambahkan kata and atau tanda plus (+), Seperti <b:if cond=' code pemanggil halaman == "identitas" and code pemanggil halaman == "identitas"'> untuk jelasnya seperti
<b:if cond='data:blog.pageType == "item" and data:blog.url == data:blog.homepageUrl'>
Mudah atau sulit?. Pastinya mudah bukan, karena pada dasarnya semua ilmu dapat kita pelajari tanpa pendidikan formal, pahkan lest privat asal kita tekun untuk belajar dan mencari tahu. Banyak sekali para programer yang sangat dermawan untuk membagi ilmunya secara gratis.
Untuk lebih memudahkan teman-teman saya akan memberi contoh. saya akan menampilkan widget populer post hanya di versi mobile maka yang dilakukan adalah sebagai berikut
<b:widget cond='data:blog.isMobileRequest == "true"' id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>10</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>true</b:widget-setting>
<b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='!data:showThumbnails'>
<b:if cond='!data:showSnippets'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 300, "1:3") : data:post.thumbnail' var='image'>
<img class='center lazy' expr:alt='data:title' expr:data-src='data:image' expr:title='data:title' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
</b:with>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
Menjadi
<b:if cond='data:blog.isMobileRequest == "true"'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>10</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>true</b:widget-setting>
<b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='!data:showThumbnails'>
<b:if cond='!data:showSnippets'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 300, "1:3") : data:post.thumbnail' var='image'>
<img class='center lazy' expr:alt='data:title' expr:data-src='data:image' expr:title='data:title' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
</b:with>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:if>
Namun ada cara mudah dan lebih valid HTML 5 yaitu menghilangkan tanda kurung dan b:if sehingga menjadi cond='data:blog.isMobileRequest == "true"' saja. Namun perlu diingat kita harus meletakkannya setelah kata widget , seperti
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>10</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>true</b:widget-setting>
<b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='!data:showThumbnails'>
<b:if cond='!data:showSnippets'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 300, "1:3") : data:post.thumbnail' var='image'>
<img class='center lazy' expr:alt='data:title' expr:data-src='data:image' expr:title='data:title' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
</b:with>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
Menjadi
<b:widget cond='data:blog.isMobileRequest == "true"' id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>10</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>true</b:widget-setting>
<b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='!data:showThumbnails'>
<b:if cond='!data:showSnippets'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 300, "1:3") : data:post.thumbnail' var='image'>
<img class='center lazy' expr:alt='data:title' expr:data-src='data:image' expr:title='data:title' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
</b:with>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
Hal ini lebih efesian tentunya, dan tidak meragukan lagi karena kesalahan peleteakkan pentutup </b:if>
Apakah kode b:if bisa dibuat untu iklan adsense? Jawabannya tentunya sangat bisa sekali. Tapi pakai cara yang pertama. Jadi harus ada pembuka b:if dan penutupnya.
Misalnya;
<b:if cond='data:blog.isMobileRequest == "true" and data:blog.url == data:blog.homepageUrl'>
<div class='iklan-azid'>
<ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxxxxxxxxx' data-ad-format='fluid' data-ad-layout-key='-60+bx+9-1m+ky' data-ad-slot='xxxxxxxx style='display:block'/>
</div>
</b:if>
Simpulan:
1. Menampilkan widget pada home page
<b:if cond='data:blog.url == data:blog.homepageUrl'>
......................................................
</b:if>
2. Menampilkan widget selain home page
<b:if cond='data:blog.url != data:blog.homepageUrl'>
......................................................
</b:if>
3. Menampilkan widget hanya versi Mobile
<b:if cond='data:blog.isMobileRequest == "true"'>
......................................................
</b:if>
4. Menamilkan widget hanya versi dekstop
<b:if cond='data:blog.isMobileRequest == "false"'>
......................................................
</b:if>
5. Menampilkan widget hanya di postingan
<b:if cond='data:blog.pageType == "item"'>
......................................................
</b:if>
6. Menampilkan widget selain di postingan
<b:if cond='data:blog.pageType != "item"'>
......................................................
</b:if>
7. Menampilkan widget di laman static
<b:if cond='data:blog.pageType == "static_page"'>
......................................................
</b:if>
8. Menampilkan widget selain laman static
<b:if cond='data:blog.pageType != "static_page"'>
......................................................
</b:if>
9. Menampilkan widget pada halaman tertentu/ postingan tertentu
<b:if cond='data:blog.pageType == "alamat url"'>
......................................................
</b:if>
10. Menampilkan widget keculai pada halaman tertentu atau postingan tertentu
<b:if cond='data:blog.pageType != "alamat url"'>
......................................................
</b:if>
Demikianlah cara menampilkan widget pada hom page, Dekstop, Mobile, dan Halaman Tertentu. Semoga bermanfaat. Amin
PERHATIAN:Jika anda ingin bertanya atau bantuan bisa kontak kami
contact atau 089677337414 - Terima kasih.
contact atau 089677337414 - Terima kasih.