Cara Membuat Recent Coment Pada Blog

Pembahasan kita kali ini adalah Cara Membuat Recent Coment Pada Blog menggunakan java script sobat. Sudah membayangkan belom kira-kira seperti apa bentuknya. Coba dech lihat recent coment punya saya itu. nah seperti itulah sobat. menarik bukan. Oke sobat gak perlu berlama-lamalah ya ntar jadi bosen lagi.

Langsung saja ikuti cara berikut :

1. Pada menu Dashboard klik menu "Design - > Page Elements"

2. Lalu pilih area pada layout anda dan klik "Add a Gadget" dan pilih "HTML / JavaScript"

3. Dan taruh script dibawah ini kedalamnya, terserah dech mau diberi judul apaan.

scriptnya sebagai berikut :

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

4. Ganti namabloganda dengan nama blog anda sendiri.
5. Klik Save dan lihat hasilnya.

Moga bermanfaat dan berhasil ya sobat

readmore »»  

Cara Membuat Recent Post Berjalan Pada Blog

Halllo sobat negeri semua, hari ini enaknya kita bahas soal apa ya. Gimana kalo membahas soal Cara Membuat Recent Post Berjalan Pada Blog. Seperti yang sobat lihat di blog saya ini, menarik bukan. Tentu saja ini ada cara ngebuatnya. Gimana kalo langsung menuju ke tempat sasaran sobat negeri.

Cara ngebuatnya begini sobat :

1. Pada menu Dashboard klik menu "Design - > Page Elements"

2. Lalu pilih area pada layout anda dan klik "Add a Gadget" dan pilih "HTML / JavaScript"

3. Dan taruh script dibawah ini kedalamnya.

<script type='text/javascript'>
//<![CDATA[
function RecentPostsScrollerv2(json)
{
var sHeadLines;
var sPostURL;
var objPost;
var sMoqueeHTMLStart;
var sMoqueeHTMLEnd;
var sPoweredBy;
var sHeadlineTerminator;
var sPostLinkLocation;
try
{
sMoqueeHTMLStart = "\<MARQUEE onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";
if( nWidth)
{
sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
}
else
{
sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
}


if( nScrollDelay)
{
sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
}
if(sDirection)
{
sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"";
if(sDirection == "top" || sDirection =="bottom")
{
//For left and right directions seperate the headilnes by two spaces.
sHeadlineTerminator = "��";
}
else
{
//For down and up directions seperate headlines by new line
sHeadlineTerminator = "\<br/\>";
}
}
if(sOpenLinkLocation =="N")
{
sPostLinkLocation = " target= \"_blank\" ";
}
else
{
sPostLinkLocation = " ";
}
sMoqueeHTMLEnd = "\</MARQUEE\>"
sHeadLines = "";
for(var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++)
{
objPost = json.feed.entry[nFeedCounter];
for (var nCounter = 0; nCounter < objPost.link.length; nCounter++)
{
if (objPost.link[nCounter].rel == 'alternate')
{
sPostURL = objPost.link[nCounter].href;
break;
}
}


sHeadLines = sHeadLines + "\<b\>"+sBulletChar+"\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" + sHeadlineTerminator;
}
document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd )
}
catch(exception)
{
alert(exception);
}
}
//]]>
</script>


<script style="text/javascript"> var nMaxPosts = 20; var sBgColor; var nWidth; var nScrollDelay = 200; var sDirection="top"; var sOpenLinkLocation="Y"; var sBulletChar=">>**<<"; </script> <script style="text/javascript" src="http://ceriwis-boplo.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"></script>

Catatan :

*   Ganti kode yang berwarna Hijau dengan alamat blog sobat.

*   Var nMaxPosts = 20 adalah jumlah postingan terakhir.

*   Var nScrollDelay = 200 adalah kecepatan text.

*   Var sDirection="left" untuk text berjalan dari kanan ke kiri, ganti dengan "right" jika ingin text tersebut berjalan dari kiri ke kanan.

*   Var sOpenLinkLocation="Y" untuk link pada halaman yang sama, ganti dengan "N" untuk membuka link pada jendela baru (new tab).

*   Var sBulletChar=">>**<<" adalah icon kecil pada bagian depan setiap link, bisa diganti dengan apa saja sesuai selera.

4.   Save dan lihat hasilnya.

Semoga sukses ya sobat

readmore »»  

Cara Membuat Recent Post Dengan Tampilan Slide Show Pada Blog

Sobat negeri semua tak bosan-bosan penulis pengen berbagi artikel nich. Kali ini saya akan membahas tentanng Cara Membuat Recent Post Dengan Tampilan Slide Show Pad Blog. Tau gak sobat seperti apa itu Recent Post Dengan Tampilan Slide Show Pad Blog, nich saya kasih contohnya pada recent post punya saya yang ada gambar slide shownya itu. Gimana menarik bukan. gimana langsung saja kita praktekan saja yach.

Cara buatnya sebagai berikut :

1. Pada menu Dashboard klik menu "Design - > Page Elements"

2. Lalu pilih area pada layout anda dan klik "HTML / JavaScript"  Recent Post Denngan Thumbnail yang tadi sebelumnya dibuat dan dibahas pada Cara Membuat Recent Post Dengan Thumbnail atau Gambar

3. Dan edit script dibawah ini dengan memasukkan script tambahan di atasnya.

Scriptt pertama :

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image1.gif";
imgr[1] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image2.gif";
imgr[2] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image3.gif";
imgr[3] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image4.gif";
imgr[4] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image5.gif";
showRandomImg = true;
boxwidth = 230;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "transparent";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://ceriwis-boplo.blogspot.com/";
</script>
<script src="https://sites.google.com/site/anasceria/recentposts_thumbnail.js" type="text/javascript"></script>

Diedit menjadi :

Script Kedua

<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">
<!--


#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:345px;
}
#spylist ul{
width:240px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:230px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}


#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image1.gif";
imgr[1] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image2.gif";
imgr[2] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image3.gif";
imgr[3] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image4.gif";
imgr[4] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image5.gif";
showRandomImg = true;
boxwidth = 230;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "transparent";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://ceriwis-boplo.blogspot.com/";
</script>
<script src="https://sites.google.com/site/anasceria/recentposts_thumbnail.js" type="text/javascript"></script>

Cattatan : * Untuk text yang berwarna hijau silahkan sobat ganti dengan nama atau link blog sobat ya.

4.   Simpah dech dan lihat hasilnya

Contohnya seperti punya saya sobat dan semoga berhasil dech

readmore »»  

Cara Membuat Recent Post Dengan Thumbnail atau Gambar

Hallo sobat negeri semua masih ingat gak dengan Cara Membuat Recent Post dan Coments Post Pada Blog gak. nah kali ini penulis akan membuat Recent Post Dengan Thumbnail atau Gambar. Heeem yang kali ini lebih menarik sobat negeri semua. Karena untuk Recent Post Dengan Thumbnail atau Gambar ini sangat menarik sobat. Mau tau caranya. Mari kita langsung saja ikuti langkah-langkah berikut ini.

Caranya sebagai berikut sobat negeri :

1. Pada menu Dashboard klik menu "Design - > Page Elements"

2. Lalu pilih area pada layout anda dan klik "Add a Gadget" dan pilih "HTML / JavaScript"

3. Dan taruh script dibawah ini kedalamnya.

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image1.gif";
imgr[1] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image2.gif";
imgr[2] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image3.gif";
imgr[3] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image4.gif";
imgr[4] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image5.gif";
showRandomImg = true;
boxwidth = 230;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "transparent";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://ceriwis-boplo.blogspot.com/";
</script>
<script src="https://sites.google.com/site/anasceria/recentposts_thumbnail.js" type="text/javascript"></script>

Catatan :

boxwidth = 230; untuk menentukan lebar dari widget yang harus Anda sesuaikan dengan lebar Layout Anda.
Ganti URL "http://ceriwis-boplo.blogspot.com/" dengan alamat blog Anda.
Dan untuk modifikasi yang lain silahkan ubah keterangan-keterangan yang ada diatas.

4.   Nah kalau sudah tinggal SAVE

Contoh hasilnya sobat :

Semoga sukses ya sobat

readmore »»  

Cara Membuat Recent Post dan Recent Comments Pada Blog

Hallo sobat negeri semua, apa kabarnya hari ini. Sudah beberapa hari gak ngeblog kangen nich. Oke sobat negeri, kali ini mari kita membahas tentang Cara Membuat Recent Post dan Recent Comments Pada Blog. Ada beberapa cara untuk membuat widget ini dari mulai menggunakan widget creator, alamat feed, maupun java script. tutorial blogspot kali ini akan menggunakan alamat feed, untuk menghindari loading page yang terlalu berat jika menggunakan javascript. Langsung saja sobat ya kita pelajari caranya dengan mudah. Mari menuju ke bawah.

Pertama Yaitu Cara membuat Recent Comments atau Komentar Terbaru

1. Login ke akun blogger anda dan pilih blog mana yang akan anda buat recent comments

2. Pilih Layout (tata letak) >> Add Page Gadget (tambah elemen halaman) pada sidebar atau dimana saja sesuai keinginan anda.

3. Pilih Feed dan masukkan alamat url feed berikut, http://namabloganda.blogspot.com/feeds/comments/full, kemudian pilih continue/lanjutkan, jangan lupa mengganti tulisan yang dicetak tebal dengan nama blog anda.

4. Jika Muncul pop up window, Isikan title/judul : label widget anda (misal : komentar terbaru, recent comments dll,) Show : jumlah komentar yang akan ditunjukkan (max 5 item), anda bisa menampilkan atau tidak tanggal dan pembuat komen dengan mencentang kotak item date dan item source/author.

5. Klik Save dan lihat hasilnya.

Kedua Yaitu Cara membuat Recent Post atau Artikel/Posting Terbaru

1. Login ke akun blogger anda dan pilih blog mana yang akan anda buat recent comments

2. Pilih Layout (tata letak) >> Add Page Gadget (tambah elemen halaman) pada sidebar atau dimana saja sesuai keinginan anda.

3. Pilih Feed dan masukkan alamat url feed berikut, http://bloganda.blogspot.com/atom.xml, kemudian pilih continue/lanjutkan, jangan lupa mengganti tulisan yang dicetak tebal dengan nama blog anda.

4. Jika Muncul pop up window, Isikan title/judul : label widget anda (posting terbaru, recent post dll,) Show: jumlah posting yang akan ditunjukkan (max 5 item), anda bisa menampilkan atau tidak tanggal dan pembuat komen dengan mencentang kotak item date dan item source/author.

5. Klik Save dan lihat hasilnya.

readmore »»