Belajar internet

Pasang widget recent comments di blogger

Pasang widget recent comments di blogger itulah judul artikel yang akan saya bahas pada kesempatan kali ini.Komentar terbaru atau biasa disebut recent comments merupakan widget yang sebagian blog penting karena untuk mengetahui komentar-komentar yang baru masuk dari para pengunjung blog.untuk memasang recents comments kita bisa menggunakan kode di bawah ini

1. untuk widget Recent comments javascript.

login blogger >> rancangan/design >> page elements >> tambah gadget >> tambah HTML/javaScript dan masukkan kode di bawah ini kedalam content gadget.

<script style="text/javascript" src="http://www.geocities.com/oom_directory/recentcomments.txt"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://sahrul-belajar.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

jangan lupa mengganti URL yang berwarna merah dengan URL blog sobat dan sobat juga bisa mengganti jumlah komentar yang akan tampil.

2. Untuk widget recent comments default blog

untuk cara ini sobat tidak perlu otak-atik kode-kode yang buat pusing karena sobat hanya perlu
login blogger >> rancangan/design kemudian pilih page element >> tambah gadget maka akan muncul form pilihan gadget sobat pilih menu Featured lihat gambar di bawah.

setelah pilih menu featured scroll kebawah dan temukan widget recent comments.

sobat bisa mengatur mulai dari jumlah komentar yang tampil dll dan jangan lupa di save.

3. untuk widget recent comments menggunakan feed

untuk cara yang ketiga kurang lebih sama dengan cara yang kedua hanya saja widget ini menggunakan alamat feed.untuk cara membuatnya sobat login blogger >> rancangan/design kemudian pilih page element >> tambah gadget maka akan muncul form pilihan gadget sobat pilih menu Basics lihat gambar.

kemudian temukan gadget feed.

maka akan keluar form untuk memasukkan alamat feed sobat.copy paste kode di bawah ini untuk URL feednya.

http://www.namablogsobat.blogspot.com/feeds/comments/default

kemudian pilih lanjut/continue dan akan muncul form untuk mengatur tampilan dari recent comments tersebut dan setelah selesai mengatur maka pilih save

Itulah pilihan tiga cara membuat widget recent comments sobat bisa pilih sendiri sesuai kebutuhan blog sobat.mungkin hanya ini yang dapat saya sampaikan untuk artikel pasang widget recent comments di blogger dan semoga bermanfaat bagi yang membutuhkannya.selamat mencoba.

Pasang widget artikel terkait di blogger

Pasang widget artikel terkait di blogger begitulah judul pada artikel kali ini karena selain dari widget recent post dll widget artikel terkait juga sangat perlu untuk blog karena dengan adanya widget artikel terkait bisa merangsang rasa penasaran pengunjung blog untuk melihat artikel yang lainnya.biasanya artikel terkait ini di letakkan di bawah postingan walaupun ada juga yang meletakkannya di sidebar.untuk memasang widget artikel terkait sobat bisa ikuti langkah-langkah di bawah ini.

1. widget artikel terkait di bawah postingan blog

Caranya cukup mudah untuk memasang widget artikel terkait di bawah postingan.
login blog >> rancangan/design >> edit html >> Expand template widget.bila perlu download template lengkap terlebih dahulu untuk menjaga terjadinya kesalahan.kemudian cari kode <data:post.body/>.untuk mempermudah pencarian sobat bisa menggunakan tombol F3 di keyboard dan meletakkan kata kuncinya.setelah ketemu copy dan pastekan kode di bawah ini setelah kode <data:post.body/>,apabila sobat menggunakan fasilitas read more otomatis maka letakkan kode <data:post.body/> yang kedua.

<b:if cond='data:blog.pageType == "item"'>
<div id='rel-posts'>
<div style='padding-top:10px;'>
<h4>baca artikel yang lain : </h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
</div>
</b:if>

Sobat bisa ganti kata-kata yang bercetak merah dengan yang sobat inginkan.

sampai sini belum selesai karena masih ada kode uang harus sobat copas yaitu di bawah ini dan letakkan sebelum tag </head>.

<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(){var b=Math.floor((relatedTitles.length-1)*Math.random());var a=0;document.write("<ul>");while(a<relatedTitles.length&&a<20){document.write('<li><a href="'+relatedUrls[b]+'">'+relatedTitles[b]+"</a></li>");if(b<relatedTitles.length-1){b++}else{b=0}a++}document.write("</ul>")};
//]]>
</script>

Setelah selesai jangan lupa save template dan lihat hasilnya.

2. widget artikel terkait simple di bawah postingan blog

widget yang kedua ini sama caranya yaitu letakkan kode di bawah ini setelah kode <data:post.body/> hanya saja widget ini judul kategori akan ikut tampil lain hanya widget yang nomer satu judul kategorinya tidak tampil.

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Post</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
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 < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
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 = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

jangan lupa simpan template.

3. Widget artikel terkait di sidebar blog

Yang terakhir ini yaitu memasang artikel terkait di sidebar blog dan untuk caranya ikuti langkahnya di bawah ini.

login blog >> rancangan/design >> edit html >> Expand template widget.bila perlu download template lengkap terlebih dahulu untuk menjaga terjadinya kesalahan.kemudian cari kode </head> dan letakkan kode di bawah ini sebelum tag/kode </head>.

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>
');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>
');
}
//]]>
</script>

kemudian lakukan pencarian kode di bawah ini yaitu tekan tombol F3 di keybord dan letakkan kata kuncinya.

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

setelah ketemu letakkan kode yang berwarna merah setelah kode di atas dan menjadi seperti di bawah ini.

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><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=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

kemudian save template tetapi sampai sini belum selesai.
Untuk memanggil widget related post tampil di sedebar maka sobat perlu menambah gadget baru/elemen baru dan beri nama " Related Post " kemudian letakkan kode di bawah ini ke dalam conten.

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

setelah selesai pilih save.
untuk menampilkan hanya di single post saja maka lakukan cara di bawah ini.
login blogger >> rancangan/design >> edit HTML >> Expand template widget.lakukan pencarian widget yang sudah kita buat tadi yaitu " Related Post ".contoh yang mirip seperti ini.

<b:widget id='HTML7' locked='false' title='Related Post' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

dan tambahkan kode yang berwarna merah seperti pada contoh di atas.

cukup melelahkan...sampai disini dulu pertemuan kali ini lagi pula tangan saya sudah terlalu kriting tidak bisa untuk mengetik.semoga tiga pilihan untuk cara memasang widget artikel terkait bermanfaat bagi yang membutuhkannya.selamat mencoba apabila ada yang tidak dimengerti bisa meninggalkan pesan.wassalam..

pasang widget follower di blogger

Pasang widget labels di blogger

Pasang widget labels di blogger artikel pada kali ini.labels atau kategori pasti sangat perlu untuk suatu blog ataupun website agar pengunjung dapat dengan mudah mencari artikel yang ada di blog.artikel ini akan menjelaskan cara memasang widget labels dengan 2(dua ) tampilan yaitu bisa berdasarkan alfabet yaitu berurutan dari a-z maupun frequensi dan juga kita bisa memilih salah beberapa labels saja yang tampil kemudian untuk penataan daftarnya bisa menggunakan list ataupun cloud,gadget labels ini juga bisa kita atur untuk menampilkan jumlah perlabels ataupun tidak ditampilkan jumlahnya.mungkin kita langsung bahas ubtuk caranya.

1. Widget labels default blogger

login blogger >> rancangan/design >> page elements >> add gadget kemudian pilih gadget labels.

setelah tambah gadget labels maka akan keluar form seperti di bawah ini.

sobat bisa mengatur sesuai keinginan sobat.
setelah selesai jangan lupa di save dan lihat hasilnya.

1. Widget labels animasi untuk blogger klasik

untuk cara yang kedua ini yaitu cara memasang widget labels animasi hanya saja kode disini hanya untuk template klasik atau tepatnya berpatokan pada template minima.tetapi apabila sobat memakai template klasik di bawah ini contoh dan caranya.

dan untuk caranya yaitu login blogger >> rancangan/design >> edit HTMl >> Expand template widget dan cari kode

<b:section class='sidebar' id='sidebar' preferred='yes'>

jika sudah ketemu maka letakkan kode di bawah ini persis di bawahnya.

<b:widget id='Label88' locked='false' title='Tag Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.hermanblog.com'>Herman Blog</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "180", "180", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

silahkan sobat ganti untuk tinggi dan lebar labels cloudnya yang berwarna merah.
dan jangan lupa pilih simpan template dan lihat hasilnya.

semoga bermanfaat untuk artikel Pasang widget labels di blogger dan selamat mencoba..

pasang widget recent posts di blogger

pasang widget recent posts di blogger yang akan kita bahas pada artikel kali ini.mungkin sobat blogger sudah banyak yang sharing maupun telah memasang widget recent posts atau yang biasa di sebut artikel terbaru dari suatu blog yang berguna agar pengunjung blog tahu artikel apa saja yang baru di tulis oleh admin blog.di bawah ini ada beberapa pilihan untuk membuat widget recent posts di blogger.langsung saja kita bahas untuk membuat widget recent post di blogger.

1. Pasang widget recent post default blogger

widget Recent post ini di peruntukkan bagi blogger yang tidak ingin mengotak-atik kode javascript.mungkin karena tidak suka mengotak-atik kode javascript (tidak mau ribet)atau mungkin tidak tahu sama sekali tentang javascript oleh karena itu widget ini cocok untuk tipe pengguna blogger yang seperti itu.
Login blogger >> rancangan/design >> page elements >> add gadget >> pilih menu featuredtambah gadget recent post.

ada dua gadget untuk recent posts default blogger yaitu recent post tanpa thumbnail atau tanpa gambar dan recent post with thumbnail.

untuk recent post tanpa thumbnail sobat pilih yang seperti gambar di bawah ini.

setelah pilih tambah gadget recent posts maka akan muncul form seperti di bawah ini.

setelah selesain mengatur gadgetnya jangan lupa pilih save.

Untuk recent post with thumnail atau artikel terbaru dengan gambar sobat bisa lihat gambar di bawah ini.

kemudian akan muncul form pengaturannya.

setelah selesai jangan lupa simpan gadget dan lihat hasilnya.

2. Pasang widget recent post di lengkapi thumbnail

recent post serta thumbnail ini sangat cocok untuk blogger yang ingin blognya di percantik dengan thumbnail atau gambar tentang artikel terbarunya.caranya cukup mudah.
Login blogger terlebih dahulu kemudian pilih menu rancangan/design setelah itu pilih sub menu page elements dan pilih tambah/add gadget kemudian tambahkan gadget HTML/javaScript.setelah menambahkan gadget HTML/javaScript maka letakkan kode di bawah ini ke dalam content.

<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 = 300;
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://NAMABLOGKAMU.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

kemudian apabila sobat ingin mengedit kode javascriptnya di bawah ini adalah kode yang sobat edit/sesuaikan dengan blog sobat.

boxwidth = Ukuran dari kotak Widget
cellspacing = Spasi diantara cells
thumbwidth dan thumbheight = Ukuran lebar dan tinggi kotak gambar
numposts = Jumlah recent post yang akan sobat tampilkan..
home_page = http://NAMABLOGKAMU.com/ (ganti alamat blog sobat)
setelah selesai mengedit jangan lupa pilih save/simpan dan lihat hasilnya.

3. Pasang widget recent post with slideshow

Untuk widget recent posts yang ketiga ini menggunakan fasilitas slideshow agar blog lebih indah di pandang.caranya cukup mudah yaitu login blogger >> rancangan/design >> page elements >> add gadget >> tambahkan gadget HTML/javaScript kemudian masukkan kode di bawah ini ke dalam content.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">

</style>

<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 = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://www.blog-sobat.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

kemudian pilih simpan gadget dan lihat hasilnya.

Mungkin untuk sementara hanya itu pilihan cara memasang widget recent poats di blogger apabila ada terdapat kesalahan kami mohon bantuan sobat blogger untuk sama-sama memperbaikinya dengan cara berkomentar.untuk artikel pasang widget recent posts di blogger saya cukupkan sampai disini semoga bermanfaat dan selamat mencoba.