Membuat Artikel Terkait dengan Border Melengkung dengan Fungsi Scroll

Artikel terkait sangat diperlukan dalam suatu blog. Karena selain untuk memperbanyak pageview juga untuk meningkatkan SEO. Dengan menggunakan artikel terkait (related post) seorang pengunjung blog akan melihat dan mengeklik artikel-artikel berkaitan yang sedang ia cari. Selain itu juga akan meningkatkan persahabatan dengan search engine.
Nah, kali ini Mas Kentir akan membagikan tutorial membuat artikel terkait yang keren untuk dipasang di blog kamu.


Berikut Cara Membuat Artikel Terkait dengan Border Melengkung dengan Fungsi Scroll
1. Log in dulu ke akun blogger kamu.
2. Pada halaman dasbor, pilih menu "Template"
3. Klik "Cadangkan" dulu kemudian download template sobat, hal ini dimaksudkan agar kamu tidak kehilangan template kamu kalau nantinya kamu gagal dalam mengedit html.
4. Kalau sudah klik "Edit HTML". Pilih "Lanjutkan".
5. Ceklist kotak kecil diatas kode html yang ada tulisan "Expand Widget".
6. Cari kode ]]></b:skin> (gunakan tombol ctrl+F untuk melakukan pencarian cepat)
7. Copy kode dibawah ini, lalu paste DI ATAS kode ]]><b/:skin> berikut kodenya :

.rbbox{-moz-box-shadow: inset 0 0 20px #f10c0c;
-webkit-box-shadow: inset 0 0 20px #f10c0c;
box-shadow: inset 0 0 20px #f10c0c;
.rbbox:hover{background-color:#000000);}

8. Selanjutnya cari kode <data:post.body/>,
9. Copy kode berikut, kemudian paste tepat dibawah <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<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 = 10;
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>

10. Kemudian klik "Pratinjau", hal ini dimaksudkan agar kalau terjadi kegagalan dalam pengeditan template kamu bisa mengetahuinya dan bisa mengosongkan kembali pengeditan kamu agar template kamu tidak rusak.
11. Kalau sudah bisa dipratinjau, klik "Simpan Template" / "Save Template".

Jika ingin mengganti warna background kotaknya, ganti kode warna ( #f10c0c; ) Dengan warna yang di ingin kan silakan ke SINI untuk melihat kode warna nya, kamu juga bisa mengedit jumlah postingan dan label yang akan ditampilkan dengan mengubah angka-angka yang berwarna hijau.
Saya kira sekian postingan tentang Cara membuat artikel terkait yang boleh dibilang keren ini. Bila kamu menyukai postingan ini, mohon keikhlasan untuk follow blog ini atau sekedar berkomentar dibawah.
Share artikel ke: Facebook Google+ Twitter Digg Lintaskan
Label:

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)