Skip to main content

follow us


www.azid.web.id - Cara memunculkan widget pada halaman tertentu dengan tag conditional Pada Blogger. Adakah yang penasaran mengapa kadang disetiap blog tampilan antara home page, posting, laman, bahkan pada versi mobile dan dekstop berbeda?. Ya, semua itu karena efek dari tag conditional. apakah itu tag conditional?, tag conditional adalah sebuah tag blogger yang berguna untuk memungkinkan kamu untuk menentukan script atau widget mana saja yang ingin ditampilkan dihalaman tertentu, baik itu home page, label, postingan, maupun halaman static.

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 == &quot;identitas&quot;'. Jadi secara kesulurahan menjadi <b:if cond=' code pemanggil halaman == &quot;identitas&quot;'> ..... </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 &quot;.

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 == &quot;identitas&quot;'> menjadi seperti ini <b:if cond=' code pemanggil halaman != &quot;identitas&quot;'>.

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 == &quot;identitas&quot; and code pemanggil halaman == &quot;identitas&quot;'> untuk jelasnya seperti

<b:if cond='data:blog.pageType == &quot;item&quot; 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 == &quot;true&quot;' 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 != &quot;&quot;'><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 ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
            <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, &quot;1:3&quot;)                                  : 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 == &quot;true&quot;'>

<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 != &quot;&quot;'><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 ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
            <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, &quot;1:3&quot;)                                  : 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>

Mudah bukan?. Untuk tag conditional yang lebih jelasnya, bisa kalian lihat berikut ini;

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 == &quot;true&quot;'>
......................................................
</b:if>

4. Menamilkan widget hanya versi dekstop

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
......................................................
</b:if>

5. Menampilkan widget hanya di postingan

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

6. Menampilkan widget selain di postingan

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

7. Menampilkan widget di laman static

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

8. Menampilkan widget selain laman static

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

9. Menampilkan widget pada halaman tertentu/ postingan tertentu

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

10. Menampilkan widget keculai pada halaman tertentu atau postingan tertentu

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

11. Menampilkan pada halaman home page dan label
<b:if cond='data:view.isMultipleItems'>
......................................................
</b:if>
PERHATIAN!: setiap link template pada blog ini di direct 5 -7 kali jadi harap bersabar.

You Might Also Like:

Oldest Post
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar