Cara Membuat Post Info dengan Efek Hover

Assalamu'alaikum ^.^ , Admin mau share tentang Cara Membuat Post Info dengan Efek Hover, karena ada yang minta tutorialnya :) ,, ok tanpa basa basi langsung saja karena sudah malam mata sudah pudar :v , inilah penampakanya :v

berikut tutorialnya dan langkah-langkahnya :

• pertama kamu harus login ke blogger.com  terlebih dahulu
• masuk ke dashboard pilih page template disamping kiri
• klik Edit Html
• letakan kode berikut tepat diatas code </b:skin>

.infox {
position: absolute;
background: #0e0e0e;
background-color: #0e0e0e;
background-position: 6px 4px;
background-repeat: no-repeat;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA3SV72GDZ0R7YTdLcPOmnXnLoBYa_HAqEflyJeeuwX54Q59Xuk2HxTnzGGqmYsHvfIxacuizx75-zme1bNO8FeoFju6h_BWUtwB3MS7nK3aiqoGAXV-9DWZqA-Hf3QktVMRxfDKhs6nc/s16/24_info.png);
top: 3px;
width: 25px;
height: 6px;
min-height: 26px;
left: 6px;
text-indent: -9999px;
overflow: hidden;
padding: 0;
color: white;
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 8px 3px 3px 0;
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.63);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.63);
-o-box-shadow: 0 1px 1px rgba(0,0,0,0.63);
box-shadow: 0 1px 1px rgba(0,0,0,0.63);
cursor: help;
font-size: 0;
border-top: 2px solid #222;
border-bottom: 2px solid #222;
border-right: 2px solid #222;
}
.infox div{font-size:10px}
.infox:hover{background-position:-20px 4px;width:115px;height:auto;text-indent:0;padding:5px}
.infox a{display:block;padding:2px;margin:2px 0;font-size:100%}
.post-author.vcard span,.d-header span{cursor:default}
.infox a:hover{background-color:rgba(0,0,0,0.35)}
.post-author.vcard,.d-header,.d-kmtr{padding:2px 0 2px 16px}
.infox:hover .post-author.vcard{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo_CDSzP1N6NL6w2HZmD8FEtxyGFr9z2xMWMCzpCDE7rI3B4iBb0F9DvJ2jkEiviMvc3ZhBU9_54wLA8LDly-4vsYXK31QdFeK6dMkRohDbleLOhhOb2QaYDEs26DNEbEra-IA8KFAz6E/s14/user.png);background-position:0 50%;background-repeat:no-repeat}
.infox:hover .d-header{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhedYn_gqT5kkTHFTsPFio-k6e2w6HxVLhkiYfTZ08M2_VSlexBKcnlwb4TE979SxlelTXs5Xe9fnqWQiYOGuBWkCkOjS7mr1FBvTlH6ngdNq0iAWMlbGgFY5GZy_jjhSv9LkSRuhcO_0c/s14/calender.png);background-position:0 50%;background-repeat:no-repeat}
.infox:hover .d-kmtr{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoVHcJzOUAL-HB8wDyfRXbc85fthWE0y484dFYymQ6HcbDNJtOs8OxZ1i9Ztqg7Q258LD-ljQjt7nprBV0RzBJaqWexSvy_0QU974QVWRcUQwgc3TEGSr8ThFJbsDn5ukPZSr1lO9kRrY/s16/komentar-putih.png);background-position:0 3px;background-repeat:no-repeat} .infox{-webkit-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s}

• dan cari kode  <article class='post hentry'> dan letakan kode berikut tepat dibawah kode <article class='post hentry'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='infox'>
<div class='post-author vcard'>
             <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>      
</div>
<div class='d-header'><span class='timestamp-link'><abbr class='published updated' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></span></div>
<div class='d-kmtr'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></div>
<div class='labelnyatas'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name != &quot;Guest Posts&quot;'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
</div>
</div>
</b:if> 

• sebelum disave pritinjau dulu ya :) , kalau tidak eror , bila ada yang eror tolong tanyakan di komentar

oke semoga bermanfaat ,sekian dari saya Wassalamu'alaikum ^0^