Cara Membuat Recent Comment Scroll Pada Blog

Monday, February 6, 2012

Banyak cara untuk membuat recent comment atau komentar terbaru di blogger. Baik melalui menu widget bawaan blogger maupun memasukkan sendiri kode html. Kalau menurut saya ...sich paling bagus kode html. Sebab menu bisa di kustomisasi sendiri. Widget Recent Comment / komentar terbaru sangat berguna untuk admin blog untuk memantau komentar - komentar terbaru di blog. Daripada anda pusing membuka satu - persatu komentar yang ada di postingan.

Untuk membuat recent comment scroll , ikuti langkah - langkah berikut :

1. Login ke account Blogger anda.

2. Masuk ke menu Rancangan. Tambahkan widget baru dengan memilih HTML/Javascript

3. Masukkan script berikut :

<div style="border: 0px solid rgb(204, 204, 204); font-size:x-small;font-family: &quot;Trebuchet MS&quot;padding: 5px; overflow: auto; width: 200px; height: 200px; background-color: #ffffff;"> 

<div style="overflow: auto;width: 200px;height: 300px;text-align: left; "><script style="text/javascript"> function showrecentcomments(json) { var numcomments = 20; var showcommentdate = true; var showposttitle = true; var numchars = 100; 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, ""); 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> berkomentar'); if (showposttitle == true) document.write(' di ' + posttitle); document.write('<br/>'); if (comment.length < numchars) { document.write('<i>'); document.write(comment); document.write('</i>');} else { document.write('<i>'); comment = comment.substring(0, numchars); var quoteEnd = comment.lastIndexOf(" "); comment = comment.substring(0, quoteEnd); document.write(comment + '...<a href="' + alturl + '">(selanjutnya)</a>'); document.write('</i>');} document.write('<br/>'); } document.write('<br/>'); } </script> <script src="http://saharacreatingwebsite.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"> </script></div>

5. Simpan widget kamu dan silakan lihat hasilnya


PESAN :

- Dalam teks warna biru, masukkan url blog anda
- Dalam teks warna merah, masukkan banyaknya komentar yang anda inginkan.
- Kode warna  #ffffff, bisa anda ganti warnanya di kode warna di blog ini


Anda bisa melihat contoh dalam daftar komentar saya. Banyaknya komentar yang saya tampilkan sebanyak 20 dan dilengkapi dengan menu scroll.

Semoga bermanfaat.

Read More | komentar

Memasang Translate Gadget Google.com

Translator Gadget yang dirilis dengan menggunakan engine dari Google Translate.

Kini, saat ada pengunjung masuk ke situs anda dan saat bahasa mereka (yang ditentukan dari bahasa yang dipake di browser mereka) berbeda dengan bahasa di situs anda, maka mereka akan secara otomatis diberikan banner notifikasi untuk mentranslate bahasa situs anda ke bahasa mereka. Namun jika bahasa mereka sama dengan bahasa di halaman situs anda, maka Website translator Gadget ini tidak akan memunculkan banner atau notifikasi untuk mentranslate situs anda.

Saat Mereka memilih mentranslate situs anda, maka mereka bisa membaca situs anda dalam bahasa yang mereka inginkan.

Anda ingin memasang fitur Google translator di situs anda? berikut ini saya beri tutorialnya happy

1. Klik disini untuk masuk ke Homepage Website Translator Gadget.

2. Pada “Select the language of your webpage” isikan bahasa asli website anda

3. Pada “Choose optional settings” pilih bahasa yang anda inginkan untuk bisa ditranslate dari website anda, lebih baik pilih semua bahasa atau “All Languages”

4. Copy kode yang ada di kotak “Copy and paste this snippet of code into your webpage” dan paste di halaman kode website anda. jika anda menggunakan blog wordpress, bisa anda paste di widget anda.

Read More | komentar

LinkWithin Untuk Membuat Artikel Terkait

LinkWithin adalah sebuah website penyedia widget blog untuk menampilkan artikel terkait atau related post pada blog anda. Dengan tool ini kita tidak perlu susah payah memasukkan kode html dalam blog anda. Anda bisa langsung memasukkan widget tanpa perlu registrasi segala. Dan prosesnya pun cepat dan mudah sekali. Widget ini berfungsi pada beberapa platform blog dan website.

Memang...sich terkadang widget ini membebani waktu loading blog kita. Karena widget ini berusaha mencari artikel terkait dan gambar terkait yang ada. Tapi asyiknya...widget ini akan terload sendiri dan mencari sendiri artikel terkait yang ada. Dan kecanggihan widget ini adalah mampu menampilkan dan mencari thumbnail gambar atau video yang ada di artikel. Kenapa saya putuskan memakai widget ini. Karena saya tipe orang yang senang gonta ganti template blog. Dan terkadang script untuk menampilkan artikel terkait tidak akan berfungsi di template blog tertentu. Jadi saya putuskan untuk memakai widget ini karena kepraktisannya. Tanpa perlu coding dan widget akan bekerja sendiri. Jika sobat tertarik silakan memakai widget ini dengan mengklik link LinkWithin pada artikel terkait dibawah blog ini.

Untuk membuat artikel terkait di Blog silahkan masuk ke linkwithin.com

Semoga membantu mempercantik blog anda

Read More | komentar

Membuat Script Anti Bajak - Anti Copy Paste

Anda mau memproteksi tulisan anda  (Anti Copy Paste) dari orang iseng? Oke disini saya akan sedikit share ilmu, mudah-mudahan bermanfaat untuk anda.

Silakan Login » Rancangan » Edit HTML »

Cari kode <head> untuk memudahkan mencari tekan ctrl F atau F3. Kemudian kamu copy paste kode di bawah ini persis dibawah kode <head>

<SCRIPT type="text/javascript">  if (typeof document.onselectstart!="undefined") {  document.onselectstart=new Function ("return false");  }  else{  document.onmousedown=new Function ("return false");  document.onmouseup=new Function ("return true");  }  </SCRIPT>

Jika mau normal seperti semula lagi dan anda mengizinkan orang lain untuk mengcopy artikel anda, silakan hapus kode tadi.

Oke Selamat mencoba.

Read More | komentar

Membuat Pesan Ketika Blog Dibuka atau Ketika Blog Ditutup

Membuat Pesan Ketika Blog Dibuka atau Ketika Blog Ditutup  ~ Saya akan membuat pilihan membuat pesan Pesan ketika blog dibuka atau ketika Blog ditutup yang biasanya banyak digunakan para Blogger, baik untuk pesan pribadi, ataupun link Bisnis online.

1. Membuat Pesan ketika blog dibuka

1.Masuk Dasbor
2.Tataletak
3.Tambah gadget pilih HTML/JavaScript
4.Copy dan Paste Code berikut

<script language='javascript'>alert("Selamat datang di blog Situs kami");</script>  <script language='javascript'>alert("Semoga anda senang");</script>

<script language='javascript'>alert("tolong beri komentarya");</script> <script language='javascript'>alert("tekan ok atau cancel untuk masuk ");</script>

Teks berwarna merah dapat diganti sesuai dengan Keinginan  Anda.

Lalu Save

2. Membuat Pesan Penutup Saat Blog ditutup

Langkah-langkahnya adalah sebagai berikut :
Log-in ke blog>>Rancangan/Tata letak>>Edit HTML, jangan lupa centang expand, lalu
Cari kode </head> gunakan tombol (ctrl + F atau F3) untuk mencari kode.  Setelah ketemu Copy

Kode berikut :
    <script type='text/javascript'> // goodbye alert function goodbye(){ alert('Tulis pesan penutp disini'); } parent.window.onunload=goodbye; </script>

Letakan/Paste kode tersebut dibawah Kode </head>
klik simpan dan selesai

SEMOGA BERMANFAAT

Read More | komentar

Cara Membuat Chatbox Show - Hide (Muncul dari Atas)

Cara Membuat Chatbox Show - Hide (Muncul dari Atas) ~ Seperti yang telah diposting sebelumnya buku tamu membuat Shoutmix/Chatbox/Shoutbox Tersembunyi dibuka-tutup kali ini saya posting buku tamu model baru lagi yaitu membuat Chatbox/Shoutbox yang muncul dari atas (show/hide)

Cara membuatnya :
Login blogger
Rancangan, Tambah Gadget,  Html/Java Script
Dan Simpan kode berikut :

<style type="text/css">
#gb{
position:fixed;
right:450px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.gbcontent{
float:left;
border:2px solid  #0F0;
background:#ffffff;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<!--  Script Chatbox nya disini -->

<center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Close" class="close" /></a>

</center></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.top = (-400-gb.offsetWidth).toString() + "px";
</script></div>

<a class="west" href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu"><img alt="Buku Tamu" heigth="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIZ-W-orawyn5xVufrXry0b3FoyOGOmBAtOFQkJ66nLixjP0RFcDHLcAw49rVY55kCao_Z-XT2zmD5GGaiiGemn5PcrZ94ovAAotAdFFXGowWs5JodVrMR8g-a362MogZ-C4BhQuuMI6I/s1600/Guestbook.png" border="0" /></a>

4. Simpan dan lihat hasilnya


Jika kawan-kawan ingin Tab Image Guestbooknya melayang disamping Blog gunakan Script 
yang ini  :

<style type="text/css">
#gb{
position:fixed;
right:450px;
z-index:+1000;
}
#tabGb {
position:fixed;_position:relative;top:50px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollright+ document.documentElement.clientWidth - offsetWidth); }
* html #gb{position:relative;}

.gbcontent{
float:left;
border:2px solid  #4173af;
background:#ffffff;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbcontent">


<TARUH CHATTBOXNYA DISINI>



<center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Close" class="close" /></a>

</center></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.top = (-400-gb.offsetWidth).toString() + "px";
</script>

<div id="tabGb"><a href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu">
<img alt="Buku Tamu" heigth="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbynVU0SzbWQk73zr59KZR_kxGeKhdTO2eaHDHp1GRk1HEA_RaTEcXaLoU_-0CU87Gi9tVwH0Zyf7dUGTU2ckuk__saWhnFBUd9e4OOgwvuiNltwesJ9uRzEarEb3bf6P0JC5GgaPjmd4/s1600/Guestbook.png" border="0" /></a></div>

Update : Sekarang Shoutmix sudah tidak Free Lagi jadi gunakan Chattbox saja.
Selamat mencoba

Read More | komentar

Membuat Chatbox Tersembunyi Yang Dapat dibuka-ditutup

Nah pada tutorial ini aku mau sharing lagiccara masang chatbox/buku tamu di blog. Sebenarnya sudah banyak yang buat tentang tutorial ini. Tapi ya sebagai penambah daftar di google, aku buat lagi aja. Oks , tanpa banyak basa basi kita mulai sekarang.

Pertama-tama, kamu harus punya chatbox account dulu...

Pasang Chatbox Tersembunyi/dibuka-tutup Versi  1

Langkah-langkah :

1. Login Blogger.com.
2. Masuk ke Design ~> Elemen Laman
3. Tambeh Gadget
4. Pilih HTML/Javascript.
5. Masukkan kode berikut pada gadget Anda.

<style type="text/css">
.gb_fixed{
position:fixed;
top:0px;
right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid #000;
background:#ffffff;
padding:10px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style="color:red">[ Tutup ]</b></a></div>

Masukan Kode Chatbox  anda di sini

<script src="http://www.geocities.ws/alprablog/user/js/hiddengb2.js"></script>
</td></tr></table>
</div>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" style="border:0px" src="http://i1202.photobucket.com/albums/bb372/alprablog/others/buku-tamu.png"/>
</a>
</div>

<body>

6. Simpan dan liat hasilnya.


Pasang Chatbox Tersembunyi/dibuka-tutup Versi 2

Seperti biasa :

1. Login Blogger.com
2. Masuk ke Rancangan ~> Elemen Laman.
3. Tambah Gadget ~> HTML/Javascript
4. Masukan kode di bawah ini.
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:125px;
width:30px;
float:left;
cursor: url(http://cur.cursors-4u.net/games/gam-13/gam1251.cur), progress;
background:url('http://i1202.photobucket.com/albums/bb372/alprablog/others/buku-tamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #40d1fe;
background:#000000 repeat-y center;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

Masukan Kode Chatbox  anda di sini

<br />
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
<span ><a href="http://alprablog.blogspot.com/2011/06/pasang-chatbox-tersembunyi-versi-2.html" target='blank'><div style="color: rgb(68, 68, 68);">
<span style="font-size:xx-small;">Get This Gadget</span></div></a></span>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Keterangan : Ganti text yang berwarna Biru  dengan kode  Kode Chatbox Anda.

Read More | komentar (1)