Membuat Info Post di Hompage

Mbah Siyam - Akhirnya update lagi, sebelumnya saya share sebuah widget yaitu social network di kanan header. Dan sekarang saya mau share widget lagi. Widget ini sudah saya terapkan di blog jelek ini, juga ada di blog master MDF Blog. Widget ini sering di sebut InfoX, entahlah kenapa bisa disebut kayak gitu, tapi widget ini patut untuk kamu coba

Membuat Info Post di Hompage

Kode CSS
Sisipkan di atas ]]></b:skin>

 /* Info Post Hompage Start */
.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 }
.infox{ position:absolute; background-color:#2980b9; background-position:6px 4px; background-repeat:no-repeat; background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAj9JREFUOI1lUzFrVEEQ/mb3vb3LXYrTEK5Jp02qoKYQrUQICaT1T6QWW63TGisrbW0lKEHRLiBiSCUBUQwoKWICyb137+3OfBa5e9wls3zFMt98zDc7C1wKkhsk35jqmZlSVakpRY3xnWp8cpk/WThH8q2pkqYclgXLYsBYVxyWBVOsGOuKdVV+Irk4rpNxMYA9AAtlcQ4QEOdA8kyA9wQeisg1ksjzHJpSrcS9brf71Y2EXgFYGJyfwwwwAt5nIPhypjv7qNVufxcRmBFVVcN5HwTcAgAhuWGqL8piAIg0lrz3SCn96XRnvwBYL4uBn7QcQkCs47MMwAOSMAIgL3yJIKVUE/hRDYc9M6tIdDjKA0BKCqOuO1VdLcoSJBtAADP+/rn7a22m09nI8vwfwSlOjBEifjkDMKuapl7EwYFgtbSyNCB5C+B1M8NkBwBgyeBIwzjZwAgaqxHvRgiho6rTnBEyEglENqXuAVM9HN06mhQgrnTgvYdT1Q9ZnoETR5wADt8AwMxuDorCCF7hxBQPnHPuIyAgCbMLXOwXd0cCt0XkdZ7nTd6MCCGAxLZrtVqbAD57nzW+zAwx2rWRwJqZabs908zKe4fBoNgXkc3xKi8eHx/viUhIKcI5BzMe9nq95yGE+yml1ZOTk5aZIcsy5HmOlIYrc3P9nWb1Tk9P79R1veW9vzueeAgB3nsURQERQavVQlmW+865x/1+f6f5TJNxdHT0VFXXvffLqtpM28wOSG7neb45Pz//d8z/Dx+AujAbXgdkAAAAAElFTkSuQmCC"); width:30px; height:24px; min-height:24px;margin-top:17px; margin-left:0; text-indent:-9999px; z-index:10; overflow:hidden; padding:0; color:white; -moz-border-radius:0 3px 3px 0; -webkit-border-radius:0 3px 3px 0; border-radius:0 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 }
.infox div{font-size:11px}
.infox:hover{background-position:-20px 4px;width:100px;height:auto;text-indent:0;padding:5px}
.infox a{display:block;color:white;padding:2px;margin:2px 0;font-size:100%;text-shadow:none}
.post-author.vcard span,.d-header span{cursor:default}
.infox a:hover{color:gold}
.post-author.vcard,.d-header,.d-kmtr{padding:2px 0 2px 16px}
.infox:hover .post-author.vcard{ background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAVhJREFUKJGtkTFrVUEQhb+z7+6+gJLKVkQi6V6KSLAyYBobIdj6LwT/h70/IJ2FvWUKK4vYBUHB0lZ4e2ff22Nzr0R5hYKnmt35ZnZmD/xv1VrPaq1P/qmotXYaEW6tudb6dBeTdl323h/Zvuy9X0o62sUIICJWKaX7vfcvwGvgbs75cHr9GvgGvJyZUsonrdfreymlz6WUISIugENJzfYWQNLCdgauSykvImLTe3+giFjlnK9aa9jeAGtJARiQbUmy7X1JOedMa+0oTQCSAL7bfmP7dkrpju1bkpLtQdIP2zGt6GFedhgGWmsXy+Xy1TiOp4vF4mS73X7svX8AhmmK58ABwK/CSc9qre+B1XRepJTKzGka6zc7IuJqHMfHkk6AhxExAtn2nqQlsHeTH2ZLJO2XUt5O8ZntTSnlGDjeZePs4zvbB38kN/PH3VCS9LWUcr6j2d/pJ2TZqOiL/ugWAAAAAElFTkSuQmCC); background-position:0 50%; background-repeat:no-repeat }
.infox:hover .d-header{ background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAVtJREFUKJGVkDFrFFEUhb87M/sei6YRwSDY2oRokUawUxCxsDD/IX9BUMtUYv6ApYK9ta12FiJsI2ijblIljWb33nkzx8Igw8SNeLp37vle8cEgkjIrMpvN0qobEfHd3d+Oe3d/7+5fhl0jqY6Id8AnSZfN7Ke7vwGuA5jZB0mXgItt277o+/5qSummRcTmZDL5GBGHwB5QAY/qup4CdF23AJ4Cx8DDlNKFtm2vEREb+s9ExEYDpIg4AnbM7PxKAb/l/QCem1kiIrbcfX4WMBI1j4it5kTA0OwusC3plaRDM9sBXuacnw23zfjHlNKT5XL5raqqOznnBxFxV9K58e4UWEq53ff9/ZTSvZPqs5lt/hPsuu6xma1HxJ6kI0k3gNenwFJKVdf1nyLnfGu02R0+JNF1XdUA+8Cau8+Hkv4WSQBrwL4BLBaLK5LWm6bpzwJLKZWZHUyn06+/AJMu26P2Y5ymAAAAAElFTkSuQmCC); background-position:0 50%; background-repeat:no-repeat }
.infox:hover .d-kmtr{ background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAALpJREFUOI3FkMsRwjAMRFeOcaiJ4U4DdACVQQu0wIVyuCSyPVouOJPwCSEHeBdpRr9dAf9GStK27UZEdgDSh5kFgENd16fBAjOjiIDk+EWREgUAfL8QY5wkO4TQ5f6x6L1HUfIqpjR02FkgSTNDzvlYvDrnopnVABTA0jl3rapqLyKdhcGCGOMkBSGE5x8Ucs6T/lBwX3WPoapn3lFVqirfoaqX0WW9xu0sNSTZNM161jAApJRWs4d/zg3EqIeiKZ3YfwAAAABJRU5ErkJggg=="); background-position:-1px 50%; background-repeat:no-repeat }
.d-kmtr a{padding:0;margin:0}

Setelah kode di atas tersimpan cari kode yang kira kira mirip seperti ini

<b:includable id='post' var='post'>
  <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.thumbnailUrl'>

"Biasanya kode diatas berada di atas kode Auto Readmore pada umumnya. Dan setiap template strukturnya mungkin berbeda."

Setelah ketemu, kamu letakkan kode ini di bawah kode berwarna merah

 <!-- Infox yang di homepage -->
<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='Admin'>
                  <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></b:if>
<!-- Infox yang di homepage Selesai --> 

Klik simpan dan selesai. Untuk demo bisa di lihat di hompage blog ini