Cara Menampilkan Deskripsi Halaman Web Di Bawah Post Title

Jelas! deskripsi dari halaman sebuah web sangat membantu para pembaca dalam memberikan gambaran singkat dari isi halaman web.

Benarkah demikian..? Kalau boleh jujur... setiap pembaca saat ditanya "apakah deskripsi dari halaman web yang sedang dia baca" mungkin banyak dari mereka yang kebingungan. Dan rata-rata mereka akan menjawab judul dari halaman yang sedang mereka baca.

Yang benar-benar tahu lebih dulu tentang deskripsi dari halaman website ini justru google search engine. Memang sepintas, antara judul halaman (post title) dengan gambaran singkat dari isi halaman web (description) adalah sama. Namun, di mata search engin ini merupakan dua hal yang berbeda.

Judul sebuah halaman akan tampak pada tabulasi dari sebuah peramban, tetapi deskripsi tidak. Oleh karena itu, pada postingaan seharisilam.blog akan berbagi tentang bagaimana cara menampilkan deskripsi halaman web di bawah post title atau judul halaman.

Sekalipun kemunculan deskripsi dari halaman web ini tidak memberikan pengaruh terhadap seo ataupun performa dari website, akan tetapi ini dapat membantu kepada para user, pembaca untuk memahami obyek apa yang sedang dibahas dari halaman web yang sedang mereka baca.

Selain itu, keberadaan dari menampilkan deskripsi dari halaman web tepat di bawah post title ini akan menambah menarik tampilan dari website yang kalian pinya. Sebagai gambaran, anda bisa lihat image di atas. Lantas.. bagaimana caranya?

●   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'> lalu tambahkan pula html nya hingga menjadi seperti ini :

 <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>    
<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... tersebut yang berada di bawah <b:includable id='post' var='post'> .

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

<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>
    </h2>    
  </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>

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.