Tutorial Membuat Post-Info Di Blogger

Tutorial Membuat Post-Info Di Blogger

CodePelajar.com -  Untuk membuatnya SEO dalam sebuat blog harusnya berisi informasi yang jelas dengan tata letak visual yang tentunya human friendly. Salah satunya dengan menambahkan Post info.

Di tutorial kali ini saya akan mulai dengan Tutorial Membuat Post Info di Blogger. Fungsi Post Info sendiri yaitu untuk mencantumkan Informasi tentang Postingan/artikel tersebut. Selain itu juga post info bisa untuk menambah nilai/score On-Page SEO.

Lalu Apa saja yang ada dalam Post info biasanya?


Nama Penulis 


Pada bagian post info, Mencantumkan nama penulis sangatlah penting. Kenapa begitu penting? karena di dalam Post-Info harusnya menampilakn siapa, kapan, dan kategori apa artikel yang kita buat. Jika dalam 1 Artikel tidak di cantumkan Nama Penulis, Postingan/Artikel tersebut tidak terlihat jelas siapa penulis dan siapa yang memposting artikel tersebut. maka dari itu sangat penting untuk menuliskan nama penulis seperti pada tutorial ini.


<div class='post-inf'>
<div class='area-info'>
<i class='fa fa-user'/><b>Posted By</b><i>:</i>
<span class='author' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><a expr:href='data:post.authorProfileUrl' itemprop='url' rel='publisher' title='author profile'><img class='avatar-photo1' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' expr:title='data:post.author' height='32' itemprop='image' width='32'/>
<span class='post-author vcard'><span class='fd' itemprop='name'><data:post.author/></span>
</span></a></span></div>

ELEMEN DATAFUNGSI TAMPILAN
data:post.authorElemen ini akan Menghasilakan Nama Penulis Artikel
data:post.authorPhoto.urlElemen ini akan menghasilkan URL gambar foto profil penulis
data:post.authorProfileUrlElemen ini akan menghasilkan URL profil penulis

Category/ Label Postingan


Category/Label Postingan, ini juga sangatlah penting di letakkan di dalam Post-Info, Fungsinya adalah untuk mengelompokan sebuah postingan agar lebih teratur.

<div class='area-info'>
<i class="fa fa-tag" aria-hidden="true"></i>
<b>Category</b><i>:</i><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=5&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='name headline'><data:label.name/></span></a>, </b:loop>
</div>

ELEMEN DATAFUNGSI TAMPILAN
data:label.nameElemen ini akan Menghasilakan Nama LABEL/Category
<b:loop values='data:post.labels' var='label'>Elemen ini akan menghasilkan Perulangan pada Label
data:label.urlElemen ini akan menghasilkan URL pada label/Category Post
"?max-results=5"Elemen ini akan membatasi label/Category Post

Tanggal & Waktu

Tanggal & Waktu, ini dia selain Nama Penulis dan Category/Label , Tanggal & Waktu juga sangatlah penting, untuk menandakan kapan postingan tersebut di publish. kamu bisa mencoba dengan kode di bawah ini.

<div class='area-info'>
<i class='fa fa-calendar'/><b>Released On</b><i>:</i><span itemprop='dateModified'><a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'> <data:post.timestamp/></abbr></a></span>
</div>

ELEMEN DATA FUNGSI TAMPILAN
data:post.timestamp Elemen ini akan menampilkan waktu penerbitan dalam format timestamp
data:post.timestampISO8601 menampilkan data waktu postingan, ISO8601 nomor layer untuk mengakses webservernya biar singkron waktunya

Penghitung Jumlah Komentar

Penghitung Jumlah Komentar/Comments Count, adalah fungsi untuk menampilkan berapa banyak komentar yang sudah tampil pada sebuah postingan. Sebenarnya fungsi ini jarang sekali di pakai, tapi untuk menambah refrensi2 Sobat.

<div class='area-info'><i class="fa fa-comments-o" aria-hidden="true"></i><b>Comments</b>: <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='Comments'> <b:if cond='data:post.numComments == 0'> 0 </b:if> <b:if cond='data:post.numComments == 1'> 1 </b:if> <b:if cond='data:post.numComments &gt; 1'> <data:post.numComments/> </b:if></a></b:if></div>

ELEMEN DATA FUNGSI TAMPILAN
data:post.addCommentUrl Elemen ini akan menampilkan URL postingan dengan tambahan hash [#comment-form]
data:post.numComments menampilkan jumlah komentar yang sudah terbit di dalam postingan tersebut

Full Script HTML Post Info


<div class='post-inf'>
<div class='area-info'>
<i class='fa fa-user'/><b>Posted By</b><i>:</i>
<span class='author' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><a expr:href='data:post.authorProfileUrl' itemprop='url' rel='publisher' title='author profile'>
<img class='avatar-photo1' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' expr:title='data:post.author' height='32' itemprop='image' width='32'/>
<span class='post-author vcard'><span class='fd' itemprop='name'><data:post.author/></span>
</span></a></span></div>

<div class='area-info'>
<i class='fa fa-calendar'/><b>Released On</b><i>:</i><span itemprop='dateModified'><a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'> <data:post.timestamp/></abbr></a></span>
</div>
<div class='area-info'>
<i class="fa fa-tag" aria-hidden="true"></i><b>Category</b>:<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=5&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='name headline'><data:label.name/></span></a>, </b:loop>
</div>

<div class='area-info'><i class="fa fa-comments-o" aria-hidden="true"></i><b>Comments</b>:<b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='Comments'> <b:if cond='data:post.numComments == 0'> 0 </b:if> <b:if cond='data:post.numComments == 1'> 1 </b:if> <b:if cond='data:post.numComments &gt; 1'> <data:post.numComments/> </b:if></a></b:if></div>
</div>


Tambahkan Juga CSS ini untuk sedikit mempercantik tampilan Post Info


/*CSS POST INFO - hCodePelajar.com*/
.post-inf a{color:#777}.area-info{padding:0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.post-inf b{width:90px;display:inline-block;font-weight:700}.post-inf .fa{padding-right:5px;width:20px}.post-inf i{font-style:normal;padding-right:7px}span.fa.fa-check,.post-view{float:right}span.author{background:#0e0e0e26;padding:1px 8px 1px 0;border-radius:11px}img.avatar-photo1{background:rgba(0,0,0,.1);height:28px;width:28px;border-radius:100%;transition:all .3s}img.avatar-photo1:hover{transform:rotate(360deg)}
Demikian uraian tentang Tutorial Membuat Post-Info Di Blogger, semoga bermanfaat sebagai tambahan pengetahuan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel