Cara Menampilkan Deskripsi Halaman Web Di Bawah Post Title

Deskripsi dari halaman sebuah web sangatlah membantu bagi pembaca dalam memberikan gambaran singkat dari isi halaman web. Dari sini pula, banyak pembaca akan tertarik untuk tetap terus mengikuti halaman yang sedang mereka baca.

Namun bagaimana mungkin pembaca bisa membaca deskripsi dari halaman yang sedang mereka baca, deskripsi halaman sendiri merupakan salahsatu meta tag yang hanya bisa terlihat saat pembaca atau user melakukan atau mengintip sumber halaman (view page source).

Bisakah Menampilkan Deskripsi Halaman Web

Jika ditanya 'Apakah Deskripsi Halaman bisa dilihat oleh pembaca atau user saat mereka membuka halaman web?' Jawabnya tentu saja bisa! Namun perlu diperhatikan, di manakah deskripsi halaman tersebut diletakkan agar penempatannya tepat sasaran. Tempat yang pas dan ideal dalam menempatkan cuplikan deskripsi ini adalah di bawah judul (post-tile).

Bagaimana Cara Menampilkan Deskripsi Halaman Web Di Bawah Post Title

Sekalipun kemunculan deskripsi dari halaman web ini tidak memberikan pengaruh terhadap seo ataupun performa dari website, akan tetapi ini dapat membantu kepada pembaca memberikan gambaran singkat dari halaman web yang sedang mereka baca.

Selain itu, keberadaan dari menampilkan deskripsi dari halaman web tepat di bawah post title ini akan menambah tampilan web menjadi lebih menarik. Sebagai gambaran, Anda bisa lihat gambar di atas. Lantas, bagaimana cara menampilkan cuplikan deskripsi ini:

●   Tambahkan css ini diatas </style> atau ]]></b:skin> :

.postdescription{
   font-family:Georgia,Serif;
   color:#666;
   margin:15px 0 45px;
   font-style:italic;
   font-size:95%
 }

●   Cari :

 <h3 class='post-title entry-title'>
      <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
        <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
         <b:else/>
        <data:post.title/>
      </b:if>
      </h3>
    </b:if> 

Lalu tambahkan script ini, tepat di bawahnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:blog.metaDescription'>
      <div class='postdescription'>&#8220; <data:blog.metaDescription/> &#8220;</div>
      </b:if>
    </b:if>

Untuk template simple mungkin ada lebih dari satu <h3 class='post-title entry-title'> , tapi pilih <h3 class='post-title entry-title'>  tersebut yang berada di bawah <b:includable id='post' var='post'>  atau yang ke-2.

Jika kalian menggunakan blogger template Contempo, Soho, Emporio, Notable dan Essential, anda bisa meletakkannya seperti berikut:

Cari :

<b:includable id='postTitle' var='post'>
  <a expr:name='data:post.id'/>
  <b:if cond='data:post.title != &quot;&quot;'>
    <h3 class='post-title entry-title'>
      <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
        <a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    </h3>    
  </b:if>
</b:includable>

Lalu pasang script di bawahini diantara :
</b:if>
</b:includable>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:blog.metaDescription'>
       <div class='postdescription'>&#8220; <data:blog.metaDescription/> &#8220;</div>
      </b:if>
     </b:if>

Hingga menjadi seperti ini:

<b:includable id='postTitle' var='post'>
  <a expr:name='data:post.id'/>
  <b:if cond='data:post.title != &quot;&quot;'>
    <h3 class='post-title entry-title'>
      <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
        <a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
          <b:else/>
        <data:post.title/>
      </b:if>
    </h3>    
  </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:blog.metaDescription'>
       <div class='postdescription'>&#8220; <data:blog.metaDescription/> &#8220;</div>
      </b:if>
     </b:if>
</b:includable>

Untuk jarak ke post-title atau jarak ke bawah (postingan), kalian bisa mengatur dengan merubah margin atas dan bawah pada css nya. 

--- Done...! ---

Semoga bermanfaat....!

Share :