Cara Membuat Icon Info/Post Info di Blog

Hai sobat Erik Shared ? Apa kabar ? Sekian lama admin gak update artikel lagi , sekarang admin mau update lagi nih. Tentang "Cara Membuat Icon Info di Blog". Gambar/Demo bisa dilihat diatas.
Sedikit penjelasan, Icon Info/Post Info itu apa sih min ? Post info itu untuk memberi tahu kepada pengunjung bahwa : Penulis , Tanggal postingan , dan Komentar yang telah di publikasikan. Oke langsung ke tutorialnya aja.

1. Login ke blog kalian.
2. Pada Dashboard kalian pilih template. Lalu Edit Html.
3. Pertama simpan CSS dulu . Simpan dibawah ]]></b:skin> atau bisa di </style>

.post-info {
background:transparent;
margin:0 0 12px;
color:#666666;
font-size:11px;
margin-top:10px;
}
.post-info a {
display:inline-block;
color:#666666;
}
.author-info, .time-info, .comment-info, .review-info {
margin-right:12px;
display:inline;
}

4. Selanjutnya HTML taro aja nih HTML di tempat yang agan mau pasang Post-info, biasanya sih
ditaro di tempat <div class='post-outer'>.

<div class='post-info'>
                <b:if cond='data:top.showAuthor'>
                    <b:if cond='data:post.authorProfileUrl'>
                    <span class='author-info'>
                    <i class='fa fa-user'/>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                        <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                        <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                        </a>
                    </span>
                    </span>
                    <b:else/>
                    <span class='author-info'>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                        <span itemprop='name'><data:post.author/></span>
                    </span>
                    </span>
                    </b:if>
                </b:if>
                <b:if cond='data:top.showTimestamp'>
                <b:if cond='data:post.url'>
                <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
                <span class='time-info'>
                <i class='fa fa-calendar'/> <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published updated' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
                </span>
                </b:if>
                </b:if>
                <b:if cond='data:blog.pageType != "item"'>
                <b:if cond='data:blog.pageType != "static_page"'>
                    <b:if cond='data:post.allowComments'>
                    <span class='comment-info'>
                    <i class='fa fa-comments'/> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 0'> Add Comment </b:if> <b:if cond='data:post.numComments == 1'> 1 Comment </b:if> <b:if cond='data:post.numComments > 1'> <data:post.numComments/> Comments </b:if>
                    </a>
                    </span>
                    </b:if>
                </b:if>
                </b:if>
            </div>

5. Simpan Template.
Dan segitulah ulasan saya kali ini. Semoga Bermanfaat.

Author : Ngasal

Saya hanya Anak SMP Yang baru Mengenal Dunia Komputer. Saya Newbie. Belum Terlalu Mahir dengan Komputer. Namun Saya Mencoba mengenal Dunia Blogging. Saya Cuma Script Kiddie dan masih pada tahap Pembelajaran :)