Alhamdulillah, masih diberi kesempatan buat sharing/berbagi lagi.. setelah beberapa minggu gak bikin postingan.. semoga pengunjung/sahabat
Blog Kang Rian pada sehat wal afiat. aamiin
Pernah ada sahabat blogger yang menanyakan "
Bagaimana Cara membuat informasi postingan seperti pada Blog saya ini?" , nah kali ini saya akan memberitahukan bagaimana cara nya ..
Cara-nya :
Langkah 1 : Masuk Blogger, klik menu
Template → Edit HTML 
Langkah 2 : Setelah itu, cari kode
<div class='comments' id='comments'> lalu simpan kode di bawah ini tepat di atas nya :
<!-- Info Postingan Awal -->
<b:if cond='data:blog.pageType == "item"'>
<div id='info-postingan'>
<div class='post_byfix radius shadow'>
<div class='post_by'>
<div class='post_byimz'>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail radius' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
<b:else/>
<img alt='no image' class='post-thumbnail radius' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtFTbfhFiJb8IzmtMmkp0ADkvxlU6pSagWsXnUEHYZgjRAIHQu2T2Bz-YlRIXjGfpxPcv8R29UF_VALMCe8vPj9FuOSxCwe-6VqhNPoRjrTXO2aZYWBj_nrChwDyv_wwP4LHzmJYOdpde3/s1600/no_image.jpg'/>
</b:if>
</div>
<ul>
<li><b>Judul :</b> <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></li>
<li><b>Penulis :</b> <span class='post-author vcard'> <span class='fn'><a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' target='_blank'><data:post.author/></a></span></span></li>
<li><b>Kategori :</b> <span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> <i class='icon-angle-right'/> </b:if>
</b:loop>
</b:if>
</span></li>
<li>
<div itemscope='' itemtype='http://data-vocabulary.org/Review-aggregate'>
<b>Rating :</b> <span itemprop='rating' itemscope='' itemtype='http://data-vocabulary.org/Rating'>
<span itemprop='average'>100%</span>
</span>
based on <span itemprop='votes'>10</span> ratings.
<span itemprop='count'>5</span> user reviews.
</div>
</li>
</ul>
</div>
</div>
<div itemscope='' itemtype='http://data-vocabulary.org/Review'>
<div style='position:fixed;z-index:-500;opacity:0;top:0px;left:0px;'>
<div itemscope='' itemtype='http://data-vocabulary.org/Review-aggregate'>
Item Reviewed: <span itemprop='itemreviewed'><data:post.title/></span>
<span itemprop='rating' itemscope='' itemtype='http://data-vocabulary.org/Rating'> <span itemprop='average'>9</span> out of <span itemprop='best'>10</span> based on <span itemprop='votes'>10</span> ratings. <span itemprop='count'>9</span> user reviews.
</span>
</div>
</div>
</div>
</div>
<div class='clear'/>
</b:if>
<!-- Info Postingan Akhir -->
Langkah 3 - Terakhir simpan kode CSS dibawah ini tepat sebelum/di atas kode
</head> :
<style>
.post_byfix {
float: left;
background: #fff;
width: 100%;
overflow: hidden;
clear: both;
margin-bottom: 10px;
}
.post_byimz {
display: block;
float: left;
padding: 4px!important;
margin-left: 2px!important;
padding-right: 10px!important;
margin-top: 5px!important;
overflow: hidden;
}
.post_byimz img {
width: 80px;
height: 80px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.post_by {
float: right;
color: #423119;
width: 100%;
font-family: arial,Helvetica,san-serif;
font-weight: 400;
font-size: 11px;
}
.post_by ul {
margin: 0;
padding: 0;
margin-top: 9px;
}
.post_by li {
list-style: none;
padding: 3px 10px!important;
}
</style>
Selesai ..
Semoga postingan tentang
Cara Membuat Informasi Postingan SEO Friendly [ Valid HTML5 ] ini bermanfaat untuk sobat yang membutuhkan .. :)
Sudah lama tak berbagi, seiring berjalannya waktu .. setelah booming lahir nya windows 8, tak lama saya mencoba untuk menginstall OS tersebut di pc pribadi saya tentu-nya, namun kendala yang saya hadapi yaitu serial dari CD/DVD Installer Windows Versi 8.1 saya ini tidak berfungsi sebagaimana mestinya..
Komentar Terbaru