Rabu, 02 Agustus 2017

Cara Membuat Related Post Dengan Scroll

RAFANI.NET |

- Cara Membuat Related Post Dengan Scroll. Masih kelanjutan dari Membuat Related Post Pada Blog. Apa itu related post atau artikel terkait silahkan baca disini.

Kali ini kita akan membicarakan perihal Cara Membuat Related Post Dengan Scroll. Kenapa menggunakan Scroll? Agar mampu menghemat daerah , dengan begitu akan terlihat ramping.

Seperti yang saya paparkan sebelumnya , bahwa Cara Membuat Related Post Dengan Scroll akan menampilkan Label / Kategori sejumlah yang kita inginkan. Dan akan dibagi berdasarkan Label / Katergori. Misalnya dalam postingan anda ada 3 atau lebi kategori , maka Cara Membuat Related Post Dengan Scroll akan menampilkan maksimal 3 kategori. Anda mampu merombaknya sesuai harapan anda.
Contoh Cara Membuat Related Post Dengan Scroll - Sumber : Kumpulan Adsen Blogspot
Langsung saja yah , Inilah Cara Membuat Related Post Dengan Scroll
1. Seperti biasa , buka akun blogger kawan
2. Masuk ke Elemen Template , piluh Edit HTML
3. Carilah isyarat <div class='post-footer-line post-footer-line-1'> gunakan CTRL + F untuk mempermudah pencarian
4. Apabila anda menemukan 2 isyarat tersebut , anda pilih yang pertama.
5. Sudah ketemu belum nih , bila sudah Copy lah isyarat script dibawah ini.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Artikel Terkait:</H2>
<Div class='rbbox'>
<Div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<Div id='albri'/>
<Script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot; , &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query , label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39; , query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39; , &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3 , textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</Script>
</Div>
<script type="text/javascript">RelPost();</script>
</Div>
</b:if>
6. Lalu tempatkan (paste) isyarat tersebut sempurna di bawah kode <div class='post-footer-line post-footer-line-1'>.
7. Simpan template blog anda. Lalu lihat hasilnya.
8. Selesai.

Catatan :
  • <h2>Artikel Terkait:</h2> mampu anda ganti sesuai harapan anda ( misal : Related post , artikel yang berafiliasi dll ) atau anda juga mampu menghapusnya.
  • <div style="border: 1px solid #ccc; height: 200px; margin: 0; overflow: auto; padding: 10px;"> ialah tampilan kotak artikel terkait tsb. Margin : jarak antara kotak dengan main , Padding : jarak antara isi artikel terkait dengan kotak , border : batas , 1px tsb ialah tebal batasnya , solid ialah jenis batasnya dan #ccc ialah warna batasnya , Height : tinggi kotak artikel tekait ( kalau anda rubah isyarat 200px menjadi 0 maka kotak related post yang tampil akan menyesuaikan dengan jumlah artikel terkait. Sedangkan jikalau tetap 200px maka kotak tsb akan otomatis memberi tombol scrool apabila artikel terkait tsb sudah melebihi batas.
  • maxNumberOfPostsPerLabel = 100; ialah jumlah posting atau artikel terkait yang ingin di tampilkan maxNumberOfLabels = 3; ialah jumlah label terkait yang ingin ditampilkan
Demikianlah postingan mengenai Cara Membuat Related Post Dengan Scroll. Sama menyerupai yang ada di Kumpulan Adsen Blogspot. Silahkan lihat pola akibatnya disini.

Tambahan : Pilih salah satu yah Related Post yang anda suka. Jangan gunakan semuanya secara bersamaan , akan mensugesti loading blog.


EmoticonEmoticon