4 Jul 2012

Trik menampilkan Widget Blogger di Halaman TertentuClick here to get more tutorials!

Untuk menampilkan widget agar hanya ditampilkan di halaman tertentu kita perlu menambahkan kode html baru. Kode ini digunakan blogger untuk melakukan pengaturan tampilan blog sehingga beberapa bagian dari blog dapat ditampilkan hanya dibagian yang ditentukan. Banyak yang dapat kita manfaatkan dari kode ini, diantaranya bisa untuk membuat sebuah widget hanya terlihat di homepage, post page, halaman static, diposting tertentu (menggunakan URL posting). Selain untuk hal seperti di atas, kode html ini juga bisa digunakan untuk sesuatu yang lebih ekstrim seperti misalnya menyembunyikan sidebar blog, menyembunyikan header blog atau footer blog di halaman tertentu. Sebagai contoh misalnya membuat homepage dalam bentuk tanpa sidebar sementara di halaman posting ditampilkan sidebar blog.

Menampilkan Widget & DIV hanya di homepage (halaman utama)


Jika kode ini digunakan maka widget hanya akan terlihat di homepage (halaman utama blog).
Menampilkan tag div hanya di homepage
Anda bisa sebuah fungsi yang dibentuk melalui tag DIV agar hanya terlihat di homepage.
Sebagai contoh, misalnya akan menampilkan fungsi loading blog hanya di halaman utama. Dibawah ini sebuah contoh tag DIV yang berfungsi sebagi loading blog.
<div id="loading">
<img src="http://.....img/loading.gif" />
</div>
Bentuk kode yang digunakan :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="loading">
<img src="http://.....img/loading.gif" />
</div>
</b:if>
Menampilkan widget hanya di homepage
Untuk penerapan pada widget, penambahan kode html dilakukan di box Edit HTML. Sebagai contoh kita akan membuat Widget Profil agar hanya terlihat di homepage. Klik pada Expand Template Widget agar kode widget profile dapat ditemukan.

Setelah penambahan kode html dengan fungsi "hanya menampilkan profile blogger hanya di homepage", maka hasilnya akan seperti berikut.
<b:widget id='Profile1' locked='false' title='About me' type='Profile'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <b:if cond='data:team == &quot;true&quot;'> <!-- team blog profile -->
      <ul>
        <b:loop values='data:authors' var='i'>
          <li><a class='profile-name-link' expr:href='data:i.userUrl' expr:style='&quot;background-image: url(&quot; + data:i.profileLogo + &quot;);&quot;'><data:i.display-name/></a></li>
        </b:loop>
      </ul>
    <b:else/> <!-- normal blog profile -->
      <b:if cond='data:photo.url != &quot;&quot;'>
        <a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
      </b:if>
      <dl class='profile-datablock'>
        <dt class='profile-data'>
          <a class='profile-name-link' expr:href='data:userUrl' expr:style='&quot;background-image: url(&quot; + data:profileLogo + &quot;);&quot;' rel='author'>
            <data:displayname/>
          </a>
        </dt>
        <b:if cond='data:showlocation == &quot;true&quot;'>
          <dd class='profile-data'><data:location/></dd>
        </b:if>
        <b:if cond='data:aboutme != &quot;&quot;'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
      </dl>
      <a class='profile-link' expr:href='data:userUrl' rel='author'><data:viewProfileMsg/></a>
    </b:if>
     <b:include name='quickedit'/>
    </div>
</b:if>
  </b:includable>
</b:widget>
Bentuk dasar dari kode di atas adalah sbb:
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
.......
.......
    </b:if>
     <b:include name='quickedit'/>
    </div>
</b:if>
</b:includable>

Menampilkan Widget hanya di posting blog (post-item-page/halaman posting)

Kode dasar yang digunakan sbb:
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
.......
.......
    </b:if>
     <b:include name='quickedit'/>
    </div>
</b:if>
</b:includable>

Menampilkan widget hanya di halaman tertentu (URL tertentu)

Widget hanya akan ditampilkan dihalaman tertentu berdasarkan URL. Ganti URL dengan alamat sebuah posting, misalnya.
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;URL&quot;'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
.......
.......
    </b:if>
     <b:include name='quickedit'/>
    </div>
</b:if>
</b:includable>
Contoh di bawah ini adalah bentuk kode yang telah menyertakan URL.
<b:if cond='data:blog.url == &quot;http://bestbloggerhack.blogspot.com/2012/07/readmore-otomatis-tanpa-thumbnail.html&quot;'>

Menampilkan Widget hanya di Index Page

Index Page meliputi homepage, labels page dan yearly archive page.
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
.......
.......
    </b:if>
     <b:include name='quickedit'/>
    </div>
</b:if>
</b:includable>

Menampilkan Widget hanya di Static Page

<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;Static Page&quot;'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
.......
.......
    </b:if>
     <b:include name='quickedit'/>
    </div>
</b:if>
</b:includable>

Menampilkan Widget hanya di Archive (month) Page (Halaman Arsip-bulan)

<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
.......
.......
    </b:if>
     <b:include name='quickedit'/>
    </div>
</b:if>
</b:includable>

Menampilkan Widget hanya di Semua Bagian Blog

<b:includable id='main'>
<b:if cond='data:blog.url != data:post.url'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
.......
.......
    </b:if>
     <b:include name='quickedit'/>
    </div>
</b:if>
</b:includable>

Menampilkan Widget hanya di Label Search Page

<b:includable id='main'>
<b:if cond='data:blog.searchLabel'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
.......
.......
    </b:if>
     <b:include name='quickedit'/>
    </div>
</b:if>
</b:includable>

Menampilkan Widget hanya di First Post (Posting Pertama)

Hanya berlaku pada sekumpulan data/widget.
<b:includable id='main'>
<b:if cond='data:post.isFirstPost'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
.......
.......
    </b:if>
     <b:include name='quickedit'/>
    </div>
</b:if>
</b:includable>

No comments:

Post a Comment

Terima kasih atas kunjungan dan komentar anda!Klik disini dan dapatkan lebih banyak tutorial menarik lainnya!