bikin tooltip title pada widget popular post

29 Jan 2015

Modifikasi tootip title popular post

Pada widget bawaan blogger terdapat widget popular post dimana widget ini berfungsi untuk mengetahui artikel atau postingan yang banyak di baca sesuai setingan yaitu:

• Setiap Saat
• 30 hari terakhir
• 7 hari terakhir

Untuk setingan tersebut terserah mau pilih yang mana (sesuai kebutuhan), karena skarang ini saya bukan membahas hal tersebut. Melainkan bahas tentang bagaimana cara nya memunculkan tooltip title pada widget popular post

Entah mengapa pada widget popular post bawaan blogger tidak ada tooltip title, saya sendiri tidak tahu alasan nya, tapi disini saya akan memodifikasi popular post supaya ada tootip title nya

Kode HTML popular post asli, kurang lebih seperti ini

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
    <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 == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (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/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
  </b:widget>

Di sini saya menambahkan beberapa kata sesuai kebutuhan pada selektor link di setiap jenis tampilan popular post

" paling sering dibaca: "

Sehingga kode lengkap HTML seperti di bawah ini:

<b:widget id='PopularPosts1' locked='false' mobile='yes' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
  <b:if cond='data:title'><h3><data:title/></h3></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href' expr:title='&quot; paling sering dibaca: &quot; + data:post.title'><data:post.title/></a>
      <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'>
<a expr:href='data:post.href' expr:title='&quot; paling sering dibaca: &quot; + data:post.title'>
<data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' itemprop='url'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' itemprop='url'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
          </b:if>
      </li>
      </b:loop>
    </ul>
  </div>
</b:includable>
  </b:widget>

Selesai penggantian popular post asli dengan popular posts hasil modifikasi, silahkan save templat... dan lihat hasil nya

Ini saya pelajari dari template yang ada di DTE dengan nama: B1:A - Template Blogger Minimalis Responsif yang terdapat pada kode read more atau jumplink.

Dari sini timbul ide untuk bisa di terapkan pada title popular posts, itulah cara Memberi Title Tags Pada Link Popular posts. Sekaligus memodifikasi Title Tags Pada Link Popular posts (tooltip), Ternyata berhasil

Karena saya terbiasa dengan tampilan popular post hanya title saja, maka bila mana ada selektor yang belum di taruh tooltip title nya. dipersilahkan tambahkan sendiri

html - widget

Taufik 19.59