Cara Memasang Fungsi Scroll di Blog

TNC. Memasang fungsi scroll untu popular post/archive post adalah trik yang “kacangan”. Kalau itu kita tanyakan kepada blogger yang sudah profesional dan sering utak atik blog. Tapi bagaimana dengan blogger newbie.? pasti jawabannya “sulit”. Ini dia cara membuat fungsi scroll pada popular post/archive post.

Di Blok ini, saya sudah menggunakan trik fungsi scroll untuk popular post dan archive post. Tentu shobat blogger tidak ingin, popular post ataupun archive blog berantai panjang kebawah. Tentu itu akan makan tempat dan “Kelihatan tidak bagus”. Jika shobat blogger ingin menggunakan trik ini (contohnya di bagian paling bawah blog Tembe Nggoli), langsung saja ini dia caranya:

• Login ke akun blog shobat

• Jika shobat blogger belum memasang widget popular post ataupun archive post di blog shobat, bisa dipasang dengan memilih menu:

Tata letak – tambah gadget – popular post/archive post

Setelah widget tersebut sudah terpasang, barulah kita memasang fungsi scrollnya. Caranya:

• Pilih menu rancangan – edit html – lanjutkan

• Setelah itu centang kotak Expand Template Widget

• Kemudian tekan Ctrl+F (untuk memudahkan pencarian)

• Ketik Popular pada kotak pencarian (biasanya terletak di kiri bawah)

• Klik next sampai menemukan kode seperti berikut ini.

<b:widget id='PopularPosts1' locked='false' title='Entri Populer' 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>

• Letakkan Kode berikut dibawah kode <div class='widget-content popular-posts'>.

<div style='height:250px;overflow:auto;background:#ffffff;font:arial11px;textcolor:#06450A'>

• Kemudian letakkan kode berikut di atas kode </b:includable>

                   </div>

• Klik pratinjau untuk melihat contoh hasil dari langkah-langkah diatas, jika hasilnya sesuai keinginan kita, tinggal klik simpan untuk menyimpan hasil kerja shobat blogger.

Trik ini sudah saya lakukan dan berhasil. Walaupun sederhana, tapi cukup mempercantik dan merapikan tata letak widget di blog. Semoga bermanfaat.