Related Post | Artikel Terkait adalah tampilan menu yang biasanya berada di bawah postingan kita yang biasanya Related Post | Artikel Terkait tersebut secara tidak langsung berhubungan dengan artikel yang sedang kita baca ,Related Post | Artikel Terkait terbentuk dari kesamaan judul label yang kita buat sebagai contoh : judul artikel ini adalah Cara membuat Related Post | Artikel Terkait dan label nya kita beri judul tutorial blog maka semua Artikel yang kita beri judul tutorial blog selalu akan tampil menjadi Related Post | Artikel Terkait ,gimana masih kurang jelas oke sebagai contoh kang mahfid akan tampilkan contoh gambar nya di bawah ini:
Saya yakin setelah melihat Contoh di atas shobat blogger sudah menjadi lebih jelas contoh di atas sama dengan Related Post | Artikel Terkait yang ada di bawah postingan ini .
Nah Untuk cara membuat nya ikuti tutorial nya seperti di bawah ini.
PERLU DI PERHATIKAN : untuk teks yang berwarna merah sebagian template ada yang tidak bisa menggunakan kode tersebut sebagai gantinya ganti kode <div class='post-footer'> dengan kode <data:post.body/> apa bila menggunakan kode <data:post.body/> maka kode xHTML di atas harus diletak kan di bawah kode <data:post.body/>
Semoga Artikel tentang Cara membuat Related Post | Artikel Terkait ini bermanfaat ...dan dengan lapang dada kami menerima kritikan ,saran maka dari itu sudilah memberi komentar di bawah postingan ini Wassalam
Saya yakin setelah melihat Contoh di atas shobat blogger sudah menjadi lebih jelas contoh di atas sama dengan Related Post | Artikel Terkait yang ada di bawah postingan ini .
Nah Untuk cara membuat nya ikuti tutorial nya seperti di bawah ini.
- Login ke blogger
- Edit HTML jangan lupa ini yang penting Download Lengkap dulu template untuk menjaga kemungkinan gagal dalam menempatkan script
- Centag kotak Expand template widget
- Lalu Cari kode</head> gunakan Ctrl+F untuk mempermudah pencarian lau letakkan kode di bawah ini tepat di bawah kode </head> berikut kode nya :
<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://jvascript1.googlecode.com/svn/trunk/relatedposts.js' type='text/javascript'/>
- Nah selanjut nya cari kode <div class='post-footer'> Kode ini ada 2 (dua). Gunakan yang posisinya di atas.
- Copy dan paste-kan xHTML berikut di antara tepat di atas kode <div class='post-footer'> berikut kode nya :
- Lalu save Template dan lihat hasil nya
<b:if cond='data:blog.pageType == "item"'> <div id="related-posts"> <font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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&max-results=5"' type='text/javascript'/></b:if></b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div></b:if>
PERLU DI PERHATIKAN : untuk teks yang berwarna merah sebagian template ada yang tidak bisa menggunakan kode tersebut sebagai gantinya ganti kode <div class='post-footer'> dengan kode <data:post.body/> apa bila menggunakan kode <data:post.body/> maka kode xHTML di atas harus diletak kan di bawah kode <data:post.body/>
Semoga Artikel tentang Cara membuat Related Post | Artikel Terkait ini bermanfaat ...dan dengan lapang dada kami menerima kritikan ,saran maka dari itu sudilah memberi komentar di bawah postingan ini Wassalam
0 komentar:
Post a Comment