Alhamdulillah, masih diberi kesempatan buat sharing/berbagi lagi...
Kali Ini saya akan memberi Tau Cara membuat informasi postingan? , 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 :
<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/AVvXsEiDY4cJ9RXB6So0ndazzxuJxvCmPVJVD72qSA5BK6CAwQtdAi2HQYtrUmrSCTI2W7rzf2vw-fO9sI4WMWeI1FGBvTjl8lgCNmKslSa-YJdQDYbJ18VnKbGdLZxjze_mcJ6tWySqTQ46bm6i/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>
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 Bermanfaat ^_^
