All About Software: related

Setelah kemaren ane share tentang Cara Membuat Link Download Share ke Facebook sekarang ane mau share Cara Membuat Related Post dengan Gambar / Thumbnail di blog. Fungsi related post ini untuk menyajikan Artikel Post terkaitdengan postingan yang sedang dibuka saat itu dan juga bisa menambah traffic karena menambah pageview pada blog. Sebelumnya ane pake Related Post dari linkwithin, tapi karena di linkwithin hanya me-redirect ke halaman post kita jadi ane untukMembuat Related Post Tanpa Linkwithin. Cara ini berbeda dengan yang biasanya orang pake, cara ini hasil dari otak ane dengan mencari berbagai sumber yang telah ane rangkum dan menjadikan Related Post Thumbnail Fast Load. Oke langsung aja masuk ke cara membuatnya berikut ini :

1. Login Akun Blogger > Back Up dulu Template kalian untuk jaga-jaga jika terjadi kesalahan.
2. Masuk ke Template > Pilih Edit HTML > centang pada Expand Template Widget
3. Cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat diatas kode ]]></b:skin> (copy ke notepad dulu biar lebih mudah)

#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
#related-posts h2{font-size: 1.6em;font-weight: bold;color: #585858;font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}
#related-posts a{color:#51432f; Border-left: 1px solid #eee8e1; Border-right: 1px solid #eee8e1; margin-right: 5px; margin-left: 5px;}
#related-posts a:hover{color:#000000;}
#related-posts a:hover {background-color:#d4eaf2;}

4. Kemudian cari kode <div class=post-footer-line post-footer-line-1> atau <p class=post-footer-line post-footer-line-1>
5. Paste kan kode dibawah ini tepat dibawah kode yang anda cari (copy ke notepad dulu biar lebih mudah)

<b:if cond=data:blog.pageType == "item">
<div id=related-posts>
<b:loop values=data:post.labels var=label>
<b:if cond=data:label.isLast != "true">
</b:if>
<b:if cond=data:blog.pageType == "item">
<script expr_src="/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12" type=text/javascript/></b:if></b:loop>
<b>Baca Juga Artikel Terkait Lainnya: </b>
<div style=background:#faf7f5; margin: 0px auto; padding: 5px;width:98%;float:left;height:100%>
<marquee align=center behavior=alternate direction=left onmouseout=this.start() onmouseover=this.stop() scrollamount=2 width=100%>
<script type=text/javascript>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div>
</div><div style=clear:both/>
</b:if>
<b:if cond=data:blog.url == data:blog.homepageUrl><b:if cond=data:post.isFirstPost>
</b:if>
</b:if>

6. Ganti tulisan yang warna merah "Baca Juga Artikel Terkait Lainnya:" sesuai selera anda, kode berwarna hijau tersebut adalah kode warna background Related Post, angka yang berwarna biru adalah jumlah related post yang ingin ditampilkan.

7. Oke Lanjut cari kode </body>, kenapa diletakkan di bagian bawah dan tidak diletakkan di bagian <head> yaitu agar blog kalian diakses tidak lambat karena mengandung Javascript yang membuat blog anda lambat diakses dan menjadikan iniRelated Post Thumbnail Fast Load.

8. Setelah ketemu kode </body> letakkan kode dibawah ini tepat diatas kode </body> (copy ke notepad dulu biar lebih mudah)

<b:if cond=data:blog.pageType == "item">
<script src=http://supercoolzz.googlecode.com/files/relatedpostwiththumbnails2.js type=text/javascript/>
</b:if>

Gimana sobat? Cukup rumit kan Cara Membuat Related Post Thumbnail yang ane berikan? Tapi lihat aja hasilnya pasti lebih Fast Load dan memuaskan.

Mempercantik Blog Dengan Tombol Share Keren - Tombol share di Blog sangat bermanfaat untuk Blog anda. Karena para pembaca bisa membagikan Artikel anda, tentu saja Traffik Blog anda bisa meningkat.

Kali ini kami akan coba untuk membagikan Tips untuk Mempercantik Blog anda. Caranya dengan Membuat Tombol Share di Blog, terutama yang sering digunakan yaitu Tombol Share Facebook.Twiter,RSS dll.

Tapi disini lengkap Tombol Sharenya, selain bisa memikat pengunjung. Tombol share ini juga bisa membuat Blog terlihat lebih cantik.

Oke langsung saja berikut cara Mempercantik Blog Dengan Tombol Share Keren
Tombol Share berikut ini akan lebih keren dari yang lainnya, karena Tombolnya bisa memutar jika tersentuh oleh Cursor. cekidot:

Pertama Login ke Blogger - klik Rancangan - Edit HTML - Centang Expand Widget ( Backup Template terlebih dahulu).

Cari kode dibawah ini:

<data:post.body/>

Biasanya kode tersebut ada 2 di dalam Template, silahkan anda taruh kode dibawah ini dibawah kode <data:post.body/> yang ke dua.

Jika sudah, Copy Kode dibawah ini dibawah kode ini:

<b:if cond=data:blog.pageType == "item">
<div class=spinning_icons>
<a class=twitter expr:data-text=data:post.title expr:data-url=data:post.url href=http://twitter.com/share rel=nofollow target=_blank title=Twitter>Twitter</a>
<a class=delicious expr_href="http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title target=_blank title=Delicious>Delicious</a>
<a class=digg expr_href="http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title target=_blank title=Digg>Digg</a>
<a class=facebook expr_href="http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title target=_blank title=Facebook>Facebook</a>
<a class=stumbleupon expr_href="http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title target=_blank title=Stumbleupon>Stumbleupon</a>
<a class=rss href=http://feeds.feedburner.com/pressbloggers target=_blank title=RSS>RSS</a>
</div>
</b:if>

Ganti URL Feed anda dengan RSS Feed Blog anda.
Terakhir Klik Simpan Template.
Lihat hasilnya.

Nah, demikian semoga artikel Mempercantik Blog Dengan Tombol Share Keren ini bisa bermanfaat dan berguna.

sumber. Terima kasih!

All About Software

Membuat Related Post Thumbnail

Mempercantik Blog Dengan Tombol Share Keren

Search

Archive