Memasang Widget Jumlah Artikel dan Jumlah Komentar

Dengan memasang Widget Jumlah Artikel dan Jumlah Komentar, kita dapat mengetahui berapa banyak artikel yang telah ditulis, dan berapa banyak Komentar yang telah masuk sebagi respon atau umpan balik terhadap artikel yang kita buat

Untuk memasang Widget Jumlah Artikel dan Jumlah Komentar langkahnya adalah sebagai berikut :

Kopi dan salin kode berikut ini pada notepad

<script style="text/javascript"><br />function showpostcount(json) {<br />document.write('Jumlah Artikel      : <b>' + parseInt(json.feed.openSearch$totalResults.$t,10) + '</b><br>');}</script><br /><script src="http://al-ridwan.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script><br /><br /><script style="text/javascript"></script><br /><script style="text/javascript"><br />function numberOfComments(json) {<br />document.write('Jumlah Komentar : <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}</script><br /><script src="http://al-ridwan.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>

Keterangan :
Cari kode sebagai berikut :

<script src="http://al-ridwan.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"> </script>

Ganti kode yang berwarna merah dengan URL Web / Blog anda.

Cari kode sebagai berikut :

<script src="http://al-ridwan.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>

Ganti kode yang berwarna merah dengan URL Web / Blog anda


Langkah selanjutnya adalah :
1. Login ke blogger dengan ID anda
2. Klik tab Tata Letak
3. Tambah Elemen Halaman dengan mengklik Tambah Gadget
4. Pilih HTML/JavaScript
5. Kopi dan pastekan kode HTML yang anda simpan pada notepad tadi     disini
6. Kemudian klik SIMPAN dan selesai

Selamat mencoba !!!!!

Semoga bermanfaat

Memasang Widget Recent Comment / Komentar Terbaru

Widget Recent Comment adalah sebagai sarana untuk mengetahui komentar mana yang paling baru yang ditulis oleh pengunjung yang masuk ke blog kita. Bagi pengunjung blog kita hal ini untuk mengetahui komentar terbaru yang masuk ke blog kita.

Untuk memasang Widget Recent Comment / Komentar Terbaru langkahnya adalah sebagai berikut :

Kopi dan salin kode berikut ini pada notepad

<script language="JavaScript">
function showrecentcomments(json) {
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;

if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
alturl = alturl.replace("#", "#comment-");
var postlink = alturl.split("#");
postlink = postlink[0];
var linktext = postlink.split("/");
linktext = linktext[5];
linktext = linktext.split(".html");
linktext = linktext[0];
var posttitle = linktext.replace(/-/g," ");
posttitle = posttitle.link(postlink);
var commentdate = entry.published.$t;
var cdyear = commentdate.substring(0,4);
var cdmonth = commentdate.substring(5,7);
var cdday = commentdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");
if (!standardstyling) document.write('<div class="bbrecpost">');
if (standardstyling) document.write('<br/>');
if (showcommentdate == true) document.write('On ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ' ');
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented');
if (showposttitle == true) document.write(' on ' + posttitle);
if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
if (standardstyling) document.write('<br/>');
if (comment.length < numchars) {
if (standardstyling) document.write('<i>');
document.write(comment);
if (standardstyling) document.write('</i>');}
else
{
if (standardstyling) document.write('<i>');
comment = comment.substring(0, numchars);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + alturl + '">(more)</a>');
if (standardstyling) document.write('</i>');}
if (!standardstyling) document.write('</div>');
if (standardstyling) document.write('<br/>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
}
</script>

<script style="text/javascript">var numcomments = 2;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://al-ridwan.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Keterangan :
Cari kode sebagai berikut :

<script>var numcomments = 2; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>

Var numcomments=2; artinya artikel terkini yang akan dimunculkan sebanyak dua artikel terakhir, hal ini dapat anda ubah jumlahnya sesuai dengan keinginan anda

Cari kode sebagai berikut :

<script src="http://al-ridwan.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Ganti kode yang berwarna merah dengan URL Web / Blog anda


Langkah selanjutnya adalah :
1. Login ke blogger dengan ID anda
2. Klik tab Tata Letak
3. Tambah Elemen Halaman dengan mengklik Tambah Gadget
4. Pilih HTML/JavaScript
5. Kopi dan pastekan kode HTML yang anda simpan pada notepad tadi     disini
6. Kemudian klik SIMPAN dan selesai

Selamat mencoba !!!!!

Semoga bermanfaat

Memasang Widget Recent Post / Artikel Terkini

Widget Recent Post adalah sebagai sarana untuk mengetahui artikel mana yang paling baru kita tulis atau postingkan. Bagi pengunjung blog kita hal ini sangat penting untuk mengetahui artikel terbaru dari blog kita.

Untuk memasang Widget Recent Post / Artikel Terkini langkahnya adalah sebagai berikut :

Kopi dan salin kode berikut ini pada notepad

<script language="JavaScript"><br />function posbaru(json) {<br /> document.write('<ul>');<br /> <br /> for (var i = 0; i < numposts; i++) {<br /> document.write('<li>');<br /> var entry = json.feed.entry[i];<br /> var posttitle = entry.title.$t;<br /> var posturl;<br /><br /> if (i == json.feed.entry.length) break;<br /><br /> for (var k = 0; k < entry.link.length; k++) {<br /> if (entry.link[k].rel == 'alternate') {<br /> posturl = entry.link[k].href;<br /> break;<br /> }<br /> }<br /> <br /> posttitle = posttitle.link(posturl);<br /> var readmorelink = "(more)";<br /> readmorelink = readmorelink.link(posturl);<br /> var postdate = entry.published.$t;<br /> var cdyear = postdate.substring(0,4);<br /> var cdmonth = postdate.substring(5,7);<br /> var cdday = postdate.substring(8,10);<br /> var monthnames = new Array();<br /> monthnames[1] = "Jan";<br /> monthnames[2] = "Feb";<br /> monthnames[3] = "Mar";<br /> monthnames[4] = "Apr";<br /> monthnames[5] = "May";<br /> monthnames[6] = "Jun";<br /> monthnames[7] = "Jul";<br /> monthnames[8] = "Aug";<br /> monthnames[9] = "Sep";<br /> monthnames[10] = "Oct";<br /> monthnames[11] = "Nov";<br /> monthnames[12] = "Dec";<br /><br /> if ("content" in entry) {<br /> var postcontent = entry.content.$t;<br /> } else if ("summary" in entry) {<br /> var postcontent = entry.summary.$t;<br /> } else <br /> var postcontent = "";<br /> var re = /<\S[^>]*>/g; <br /> postcontent = postcontent.replace(re, "");<br /> document.write(posttitle);<br /> <br /> if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);<br /> <br /> if (showpostsummary == true) {<br /> if (postcontent.length < numchars) {<br /> document.write(postcontent);<br /> } else {<br /> postcontent = postcontent.substring(0, numchars);<br /> var quoteEnd = postcontent.lastIndexOf(" ");<br /> postcontent = postcontent.substring(0,quoteEnd);<br /> document.write(postcontent + '...' + readmorelink);<br /> }<br /> }<br /> document.write('</li>');<br /> }<br /> document.write('</ul>');<br /> <br />}</script><br /><script>var numposts = 2; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script><br /><script src="http://al-ridwan.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=posbaru"><br /></script>

Keterangan :
Cari kode sebagai berikut :

<script>var numposts = 2; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>

Var numposts=2; artinya artikel terkini yang akan dimunculkan sebanyak dua artikel terakhir, hal ini dapat anda ubah jumlahnya sesuai dengan keinginan anda

Cari kode sebagai berikut :

<script src="http://al-ridwan.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=posbaru"></script>

Ganti kode yang berwarna merah dengan URL Web / Blog anda

Langkah selanjutnya adalah :
1. Login ke blogger dengan ID anda
2. Klik tab Tata Letak
3. Tambah Elemen Halaman dengan mengklik Tambah Gadget
4. Pilih HTML/JavaScript
5. Kopi dan pastekan kode HTML yang anda simpan pada notepad tadi     disini
6. Kemudian klik SIMPAN dan selesai

Selamat mencoba !!!!!

Semoga bermanfaat

Membuat Tulisan Berkedip Kedip

Mungkin anda adalah seorang blogger yang suka akan tulisan / kata berkedip-kedip, untuk menambah blog anda menjadi lebih cantik.

Anda dapat lihat contohnya pada judul artikel ini. Artikel ini saya tulis bagi pemula yang belum mengetahui caranya membuat efek Kedip Kedip (blink) pada sebuah tulisan / kata.

Sebenarnya cara membuat tulisan / kata yang berkedip kedip adalah sangat sederhana.

Adapaun caranya adalah bahwa di depan tulisan / kata yang akan anda buat berkedip kedip anda harus letakkan tag <blink> dan pada akhir dari tulisan / kata tersebut harus anda tutup dengan </blink>

Contoh :

<blink>TERPANAH</blink>

Kala sepasang mata itu memandang
Aku terseret dalam kecantikannya
Aku terpanah bukan hanya melihat sepasang mata
Akan tetapi oleh wajahnya yang indah menyatu

Hasil :

TERPANAH

Kala sepasang mata itu memandang
Aku terseret dalam kecantikannya
Aku terpanah bukan hanya melihat sepasang mata
Akan tetapi oleh wajahnya yang indah menyatu

Selamat mencoba !!!!!

Semoga bermanfaat

Mengganti Template Blog

Artikel seperti ini memang sudah banyak tersedia dan sudah lama ada, namun karena permintaan, maka saya tuliskan kembali artikel ini. Semoga bermanfaat bagi blogger pemula.

Template blog bawaan dari blogger kadang tidak sesuai dengan keinginan kita. Anda dapat mengganti template ini dengan download template yang banyak disediakan secara gratis oleh penyedia template gratis, yang tersedia dalam berbagai macam gaya dan warna.

Bila anda menginginkan hal tersebut anda dapat membuaka situs-situs di bawah ini :
Blogger-templates.blogspot.com
Blogskins.com
Btemplates.com
Dan masih banyak yang lainnya

Agar tidak terlalu lama, langsung aja kita masuk saja ke situs Blogger-templates.blogspot.com
Bila sudah masuk pilih template yang anda sukai misal : anda memilih Florascent seperti gambar di bawah ini :

Kemudian klik tulisan Download yang berwarna biru dan bergaris bawah
Kemudian akan muncul tulisan script/kode.
Kopi semua tulisan (script)/kode tersebut ke dalam Notepad

Langkah selanjutnya adalah
1. Masuk ke Blogger dengan ID anda
2. Bila sudah masuk Dashboard klik tab Tata Letak
3. Klik tab Edit HTML
4. Backup template anda dengn mengklik Download Template Lengkap

5. Bila anda sudah mendownloadnya, kemudian kopi seluruh kode yang     anda simpan pada notepad anda dan letakkan pada kotak HTML,     dengan cara hapus semua kode lama yang ada atau ditimpa saja     dengan kode baru dari kode notepad anda tadi.
6. Kemudian klik tombol Simpan Template yang berwarna merah dan     selesai

Catatan :
Bila yang anda download adalah file yang bertype XML Document, maka setelah langkah No 4 kemudian unggah file anda tersebut dengan cara klik tombol Choose (lihat gambar di atas cari dan pilih file XML anda, kemudian klik tombol Unggah, selanjutnya klik tombol Simpan Template yang berwarna merah dan selesai

Silahkan dilihat hasilnya, selamat mencoba !!!!

Semoga bermanfaat

Memasang Gambar yang Selalu Berada di Pojok

Ada yang bertanya bagaimana cara memasang gambar pada blog yang selalu berada di pojok kiri bawah, pojok kanan bawah, pojok kiri atas, pojok kanan atas dan sebagainya.
Contoh :
Dapat anda lihat di blog ini gambar dengan tulisan Home yang berada dipojok kiri bawah.
Gambar seorang laki-laki mengacungkan jempol yang berada di kanan bawah

Bila anda menginginkan memasang suatu gambar yang selalu berada di pojok ikuti langkah-langkah berikut ini :

Langkah 1
1. Siapkan gambar yang akan dipasang, kalau anda belum punya anda bias     membuatnya dengan Aplikasi Grafis misalnya : Macromedia Free Hand,     Corel Draw, Photoshop dan aplikasi grafis lainnya
2. Bila gambar anda suda siap upload gambar anda pada penyedia Image     Hosting. Ada Imade Hosting yang gratis misalnya Photobucket.com
3. Bila sudah, kopi URL Image addressnya dan simpan di notepad

Langkah 2.
1. Masuk ke Blogger dengan ID anda
2. Bila sudah masuk Dashboard klik tab Tata Letak
3. Klik tab Edit HTML
4. Cari kode seperti di bawah ini

]]></b:skin>

5. Letakkan kode berikut ini di atas kode tadi

#bawah {position:fixed;_position:absolute; bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Perhatikan kode yang berwarna merah dan biru. Kode ini untuk gambar yang akan dipasang pada pojok kiri bawah, bila anda menginginkan pada pojok kanan bawah maka kata left dapat anda ganti dengan right. Demikian juga bila anda menginginkan gambar diletakkan di atas maka kata bottom harus anda ganti dengan top

6. Kemudian cari kode seperti di bawah ini

</body>

7. Letakkan kode berikut ini di atas kode tadi

<div id='bawah'>
<a href='http://al-ridwan.blogspot.com'>
<img border='0' src='http://i711.photobucket.com/albums/ww116/john_rodw/Home02.gif'/></a>
</div>

8. Ganti kode yang berwarna merah dengan URL atau alamat blog anda.     Ganti kode yang berwarna biru dengan URL gambar yang akan anda     pasang yang mana kode URLnya telah anda simpan di notepad.
9. Kemudian klik SIMPAN TEMPLATE dan selesai

Lihat hasilnya !!!!!!

Selamat mencoba !!!!! Semoga bermanfaat

Mengganti Tanggal Posting dengan Icon Kalender

Untuk mempercantik tampilan blog anda, salah satunya adalah mengganti tampilan tanggal posting dengan tanggal yang menggunakan Icon (gambar) Kalender. Anda dapat melihat contohnya pada tanggal posting yang ada di bog ini. Cantik bukan ?????

Penasaran ingin mencoba menggantinya ?????

Adapun cara menghilangkan atau menyembunyikan Tulisan Label di bawah posting adalah sebagai berikut :
1. Masuk ke Blogger dengan ID anda
2. Bila sudah masuk Dashboard klik tab Tata Letak
3. Klik tab Edit HTML
4. Backup template anda dengn mengklik Download Template Lengkap
5. Beri  centang  pada "Expand Template Widget" seperti  gambar  di     bawah ini

6. Cari kode seperti di bawah ini

<TITLE><data:blog.pageTitle/></TITLE>

7. Kopi dan pastekan kode berikut ini di bawah kode tersebut

<SCRIPT type='text/javascript'>
//<! [CDATA[
/*********************************/
/* http://al-ridwan.blogspot.com */
/*********************************/
function date_replace(date) {
var bul = date.split('.');
var hari = bul[1], bulan1 = bul[0], tahun = bul[2];
var bulan =
['0','Jan','Peb','Mar','Apr','Mei','Jun','Jul','Ags','Sep','Okt','Nop','Des'];
document.write("<div class='bulan'>"+bulan[bulan1]+" </div> <div class='hari'>"+hari+"</div> <div class='tahun'>"+tahun+"</div>");
}
//]]>
</SCRIPT>

8. Kemudian cari kode ini seperti di bawah ini:

.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}

Kalau tidak ketemu coba cari kode seperti di bawah ini

h2.date-header {
margin:1.5em 0 .5em;
}

9. Letakkan kode berikut ini di bawah kode tadi

.tanggal {
background: url("http://i711.photobucket.com/albums/ww116/john_rodw/KalenderBiru.gif")no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.bulan {
font-size: 9px;
width: 37px;
margin: -3px 3px 0 0;
text-transform: uppercase;
color: #fff;
}

.hari {
color:#3366CC;
font-size: 17px;
width: 37px;
margin: -3px 3px 0 0;
;
}
.tahun {
color:#3366CC;
font-size: 9px;
width: 37px;
margin: -6px 4px 0 0;
}

10. Langkah selanjutnya cari kode seperti ini ini

<data:post.dateHeader/>

11. Ubah menjadi seperti di bawah ini

<DIV class='tanggal'>
<SCRIPT>date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>

12. Kemudian klik tombol SIMPAN TEMPLATE
13. Langlah selanjutnya adalah klik tab Pengaturan
14. Kemudian klik tab Format
15. Pada Format Header Tanggal ubah menjadi (mm.dd.yyyy) atau bulan.tanggal.tahun.
16. Kemudian klik tombol SIMPAN SETELAH dan selesai

PENJELASAN :
Pada kode :

.tanggal {
background: url("http://i711.photobucket.com/albums/ww116/john_rodw/KalenderBiru.gif")no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

http://i711.photobucket.com/albums/ww116/john_rodw/KalenderBiru.gif bisa anda ganti dengan URL Image Address anda
width : 55px : bahwa lebar dari gambar 55px bisa anda sesuaian dengan lebar gambar anda
Height: 50px : bahwa tinggi dari gambar 50px bisa anda sesuaian dengan tinggi gambar anda

Pada kode :

.bulan {
font-size: 9px; --------------------------- Ukuran Font untuk bulan
width: 37px; ----------------------------- Lebar
margin: -3px 3px 0 0; -------------------- Batas
text-transform: uppercase;
color: #fff; ------------------------------ Warna font
}

Anda dapat menyesuaikan dengan gambar dan kebutuhan anda. Pada hari dan tahun demikian juga

Pilihan Icon untk Kalender dan URLnya seperti dibawah ini
http://i711.photobucket.com/albums/ww116/john_rodw/KalenderBiru.gif, anda hanya mengganti kode yang berwarna biru untuk URLnya
TanggalanBiru.png
TanggalanMerah.png
TanggalanCoklat.png
TanggalanHijau.png
TanggalanHijauMuda.png
TanggalanUngu.png
TanggalanOrange.png
TanggalanKuning.png
TanggalanHitam.png
TanggalanPink.png

Selamat mencoba !!!!!

Semoga berhasil