Purba My ID

Membuat "Recent Post", "Recent Comment" dan "Related Post"

Untuk membuat Recent Post dengan thumbnails (ada gambarnya)
  1. Seperti biasa, loginlah ke blogger terlebih dahulu.
  2. Klik Tata Letak.
  3. Klik Elemen Halaman.
  4. Kemudian klik Tambah Gadget.
  5. Pilih yang HTML / Javascript, lalu masukkan kode scriptnya berikut ini : 
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#FFFFFF";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://adidolok.blogspot.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

Yang harus di ganti / edit :
boxwidth = 298  -–> lebar kotak widget
cellspacing = 8  -–> ruang di antara sel
borderColor = "#FFFFFF"  -–> warna border / garis pada kotak
thumbwidth = 40  --> lebar thumbnails
thumbheight = 40  --> tinggi thumbnails
fntsize = 12  --> ukuran font (huruf)
acolor = "#666"  --> warna Judul
aBold = true  --> tebal huruf pada judul post (true or false)
numposts = 5  --> jumlah judul post yang ingin ditampilkan
home_page = http://adidolok.blogspot.com/ -–> ganti dengan alamat url blog anda.
Kemudian Simpan.

Dan untuk membuat Recent Comment :
  1. Loginlah ke blogger terlebih dahulu.
  2. Klik Tata Letak.
  3. Klik Elemen Halaman.
  4. Kemudian klik Tambah Gadget.
  5. Pilih yang HTML / Javascript, lalu masukkan kode scriptnya berikut ini : 
<script style="text/javascript" src="http://anas.ku93.googlepages.com/comments.js"></script><script style="text/javascript">var numcomments = 10;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://adidolok.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

angka 10 adalah jumlah recent comment yg ditampilkan.

Dan untuk membuat artikel yg berhubungan atau "related post" ikuti cara ini:
Copy kode dibawah ini :
<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/><br/><br/>
<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;data2007&#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>

</div>
</b:if>

Cari kode seperti di bawah ini pada kolom edit template.
<data:post.body/>
letakkan kode yg dicopy tadi dibawahnya.
kemudian simpan.
selamat berkreasi....Photobucket

Posting Komentar

0 Komentar