Membuat Info Post Di Home Page

Halo semuanya,Saya update lagi nih.Et tapi ini updatenya tentang Tutorial Blogger...
Sudah lama saya gak update tutorial sekarang saya update lagi...
Kali ini kita akan membahas tutorial Membuat Info Post Di Home Page..

Nah dari pada basa basi kita mulai yuk tutorialnya,Disimak dengan bagus ya agar hasil maksimal Hehehehe
1.Login ke blogger dahulu
2.Jika sudah login masuk ke template-Edit html
3.Copy CSS berikut tepat di bawah ]]></b:skin>

<style type='text/css'>
.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:slategray; background-position:6px 4px; background-repeat:no-repeat; background-image:url(&quot;data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAj9JREFUOI1lUzFrVEEQ/mb3vb3LXYrTEK5Jp02qoKYQrUQICaT1T6QWW63TGisrbW0lKEHRLiBiSCUBUQwoKWICyb137+3OfBa5e9wls3zFMt98zDc7C1wKkhsk35jqmZlSVakpRY3xnWp8cpk/WThH8q2pkqYclgXLYsBYVxyWBVOsGOuKdVV+Irk4rpNxMYA9AAtlcQ4QEOdA8kyA9wQeisg1ksjzHJpSrcS9brf71Y2EXgFYGJyfwwwwAt5nIPhypjv7qNVufxcRmBFVVcN5HwTcAgAhuWGqL8piAIg0lrz3SCn96XRnvwBYL4uBn7QcQkCs47MMwAOSMAIgL3yJIKVUE/hRDYc9M6tIdDjKA0BKCqOuO1VdLcoSJBtAADP+/rn7a22m09nI8vwfwSlOjBEifjkDMKuapl7EwYFgtbSyNCB5C+B1M8NkBwBgyeBIwzjZwAgaqxHvRgiho6rTnBEyEglENqXuAVM9HN06mhQgrnTgvYdT1Q9ZnoETR5wADt8AwMxuDorCCF7hxBQPnHPuIyAgCbMLXOwXd0cCt0XkdZ7nTd6MCCGAxLZrtVqbAD57nzW+zAwx2rWRwJqZabs908zKe4fBoNgXkc3xKi8eHx/viUhIKcI5BzMe9nq95yGE+yml1ZOTk5aZIcsy5HmOlIYrc3P9nWb1Tk9P79R1veW9vzueeAgB3nsURQERQavVQlmW+865x/1+f6f5TJNxdHT0VFXXvffLqtpM28wOSG7neb45Pz//d8z/Dx+AujAbXgdkAAAAAElFTkSuQmCC&quot;); 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(&quot;data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAALpJREFUOI3FkMsRwjAMRFeOcaiJ4U4DdACVQQu0wIVyuCSyPVouOJPwCSEHeBdpRr9dAf9GStK27UZEdgDSh5kFgENd16fBAjOjiIDk+EWREgUAfL8QY5wkO4TQ5f6x6L1HUfIqpjR02FkgSTNDzvlYvDrnopnVABTA0jl3rapqLyKdhcGCGOMkBSGE5x8Ucs6T/lBwX3WPoapn3lFVqirfoaqX0WW9xu0sNSTZNM161jAApJRWs4d/zg3EqIeiKZ3YfwAAAABJRU5ErkJggg==&quot;); background-position:-1px 50%; background-repeat:no-repeat}
.d-kmtr a{padding:0; margin:0}
</style>

4.Jika sudah,cari code yang mirip dengan 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."

Jika sudah ketemu code yang seperti itu,Copy code berikut tepat di atas code
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<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>

5.Jika sudah semua,Klik Simpan
6.Selamat Kalian Telah Berhasil Membuat Info Post Di Home Page
Jika kurang jelas bisa comment dibawah

Share Ke :