Jendela Indonesia

Kamis, 16 Desember 2010

Cara membuat link berkelip disertai dengan kerlipan bintang

Cara ini membolehkan link berkelip bila dihalakan cursor padanya.Disamping berkelip ia kan mengeluarkan kerlipan bintang disekeliling.Tidak menggunakan javascript,hanya gabungan css dan imej sahaja.Contohnya boleh dilihat pada blog ini.Kalau berminat hendak membuatnya,berikut adalah langkahnya:

Klik pada Design
Edit HTML
Cari kod:

</head>

Dan letak kod ini diatasnya:

atau gunakan yang dibawah ini:

bintang berkelip

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt1Ch6trzW8SFkazGSgxdz1VbOWky8q9_Ma54_g_pFb8sGSjpcU5z0x_5AhX2HI0hg6BAf_h-dWBdIadt0ARrOhc3JwwSqrEUO14a2wwR2z4GXuLFT3aEAMN5vMggY65FYlK8wAZSxV3o/s1600/str4.gif
cuma tukarkan tulisan merah pada diatas dengan url bagi kerlipan seperti diatas
#sesuai hanya untuk template berwarna gelap.

Simpan template…selesai..

Rabu, 15 Desember 2010

Cara meletakkan butang Twitter (Retweet) pada posting blog

Ada berbagai cara bagi mendapatkan trafik pada blog kita,salah satunya adalah artikel blog itu sendiri.Butang social bookmarking boleh diletakkan pada posting bagi membolehkan pengunjung berkongsi dengan rakan artikel yang diminati.salah satu nya yg boleh diletakkan adalah butang like facebook.Untuk artikel kali ini saya akan tunjukan cara memasang butang ~~retweet~~.butang ini boleh digunakan untuk mempromosi blog kita.selain dari boleh mendapatkan followers kita juga boleh mendapatkan traffic darinya.Butang ini terdapat dua bentuk iaitu biasa dan compact.

Cara meletakkan pada posting blog

Masuk ke design
Klik pada edit HTML >> Expand Widget Templates
Cari kod:

<data:post.body/>

Dan letakkan kod selepas atau sebelumnya.jika diletakkann diatas akan terpapar dibahagian atas posting,sebalik jika dibawah akan terpapar pada bahagian bawah posting

Atau boleh juga diletakkan pada kod ini:

<div class='post-header-line-1'/>

Kod bagi butang full size:

<div style='float:right; margin-left:10px;'>
<script type="text/javascript"> tweetmeme_url = '<data:post.url/>'; </script> <script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript"> </script>

</div>

kod bagi butang compact size:

<div style='float:right; margin-left:10px;'>
<script type="text/javascript"> tweetmeme_style = "compact"; </script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

ubahkan pada kod teks hijau jika hendak diletakkan disebelah kiri(left) atau kanan(right)

Selasa, 14 Desember 2010

Cara letak background disekeliling kotak komen

Mungkin korang hendakkan sedikit kelainan pada kotak komen.Apa kata kalau kita letakkan background disekelingnya.Background ini boleh kita letakkan warna sahaja atau pun imej.Cara membuatnya agak mudah cuma masukkan kod dibawah ini sebelum kod ]]></b:skin>

Masuk ke design
Edit HTML

dan masukkan kod dibawah ini:

Background warna:

.comment-form { background:#BE81F7; border:3px solid #74DF00; margin:0 10px 20px 10px; padding:0 0 0 15px; }

background imej:

.comment-form { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDjd8JCxXHW2_kB6sV8BCoLth6qNKUMOAWPLZLuojVVTzP11b_z8EQNnZLVGhyqrxFdztZ6M6LQgk7RBkHXG37-UmnVLNH6jTdmMeP4MxLWSCaCuYRZEPlZbpNTaebucYX-8KeMlE5GsE/s1600/animated_50.gif); border:3px solid #74DF00; margin:0 10px 20px 10px; padding:0 0 0 15px; }

Bahagian teks berwarna hijau boleh diubah dengan warna yang dingini dan juga imej dengan meletakkan url bagi imej.
kemudian save template.

Selasa, 07 Desember 2010

Cara pasang widget animated recent post

Blogger ada menyediakan widget recent post yang memaparkan posting posting terkini.Recent post ini memaparkan thumbnail juga jumlah komen pada posting.Tapi kekurangan nya adalah bersifat statik.Recent post ini bergerak ini lebih menarik perhatian pengunjung untuk melihat artikel artikel lain yang ada pada blog kita

Caranya:
untuk dashboard lama:
Masuk ke Design:
Pada Page Element-Pilih Add Gadget
HTML/Javascript

Untuk dashboard baru:
pilih Layout--add a gadget -- HTML/Javascript

Dan masukkan kod dibawah ini:

width:220px;

overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {

width:208px;

padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhphst2m-VI8x3FoNKSEst8fWcp4Q-1lpjVRo8py-9r4Ok-j7SCnGz2onnoMr2vRj3MjVncCnQ4rBJIhwfwJxY9WBJMDd95wsbfHonQCXW6_HzPJE_cxt_foeCbMlH6p12I77DRFmvkk24/s1600/jendela-idblogspot-com.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:#A9A9F5;
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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
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://jendela-id.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='https://sites.google.com/site/jendela-id/tbb/tbb.js?attredirects=0&d=1' type='text/javascript'></script>
</div><a href="http://jendela-id.blogspot.com/2010/12/cara-pasang-widget-animated-recent-post.html">
<font size="1">get this widget</font></a></center>

Dibawah ini adalah kod bagi anda yang inginkan widget ini dalam bentuk yang lebih kecil untuk disesuaikan untuk sidebar yang ruangnya agak terhad.

<center>
<script src="https://sites.google.com/site/jendela-id/tbb/jquerry.js?attredirects=0&d=1" type="text/javascript"></script>
<style type="text/css" media="screen">

</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbGLw-Ku15oNqM2pNfJT_nt7kML8DUZjgqZz_lzMQlaLkEF0Ar47xy0ePMRvnA64xcoK4r6xHsk8FbzmDi0mTKwfZ9lCfDv7Dr4dzG2DFzW0pseiRtefrHB01zbyk0ngr2Ni3l2OdRnw/s1600/no_image+.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 5;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 8;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://jendela-id.blogspot.com/";
limitspy=5
intervalspy=4000
</script>
<div id="spylist">
<script src='https://sites.google.com/site/jendela-id/tbb/tbb.js?attredirects=0&d=1' type='text/javascript'></script>
</div><a href="http://jendela-id.blogspot.com/2010/12/cara-pasang-widget-animated-recent-post.html">
<font size="1">get this widget</font></a></center>

#Jangan lupa gantikan url blog saya,teks berwarna merah diatas dengan alamat blog sendiri.Kalau nak kecilkan size ubah pada kod warna hijau

Minggu, 05 Desember 2010

Cara membuat scrolling bloglist pada blog

Scrolling bloglist adalah seperti mana terdapat pada sidebar blog ini.Mempunyai butang untuk memasukkan link ,memaparkan hanya senarai blog, mengikut update dan tidak menggunakan banyak ruangan .Kebanyakan blog list yang ada adalah panjang jadi dengan menggunakan cara ini adalah lebih mudah untuk menguruskan kannya.

Untuk membuatnya:

Mula mula masukkan bloglist dahulu.
Pada design pilih --page elements-add a gadget--bloglist

Sebelum itu backup template terlebih dahulu.

Kemudian :
masuk ke design—edit html-expand template widget
Kemudian cari kod yg dibawah,yg bertanda dengan warna merah adalah berbeza mengikut tajuk yg diberi pada widget.

<b:widget id='BlogList1' locked='false' title='Blog List' type='BlogList'>
<b:includable id='main'>

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

<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Kemudian tambahkan kod berwarna hijau seperti dibawah ini.

<b:widget id='LinkList1' locked='false' title='Blog Roll' type='LinkList'>
<b:includable id='main'>

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

<div class='blog-list-container' expr:id='data:widget.instanceId + "_container"' style='overflow: auto; display: block; overflow-x: no; overflow-y: scroll; height: 300px; width: 160px;'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div> </div>
</b:includable>
</b:widget>

Kemudian save template

#Lebar dan tinggi widget boleh diubah pada bahagian teks warna oren.
Kemudian save template

Topik berkaitan: Cara letak border,background dan scroll pada widget

Sabtu, 04 Desember 2010

Cara mengelakkan read more automatik pada halaman statik

Memasang read more secara automatik memang menyenangkan kita kerana tidak perlu lagi memasukkan apa apa kod dan memilih bahagian mana teks yang hendak dipotong.Tetapi masaalahnya bila kita membuat halaman statik pada blog pun ada read more juga.Halaman static untuk meletakkan sitemap dan tukar link tenyunya kita nak paparan penuhkan?Jadi tutorial ini adalah bagi rakan rakan ingin mengatasi masaalah dengan read more automatic ini.

Masuk kedesign—edit HTML
Tandakan pada expand template widget
Cari kod dibawah ini:

<b:if cond='data:blog.pageType == "static_page"'><br/>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>

</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

</b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

</b:if>

</div>

Apa yang perlu kita buat ialah tambahkan kod warna hijau padanya.Cara ini telah saya gunakan pada read more automatic dengan thumbnail yang ada pada blog ini.

Jika kod diatas tiada gunakan cara ini:
cari kod dibawah ini:

<div class='post-body entry-content'>

kemudian letakkan kod ini dibawahnya:

<b:if cond='data:blog.pageType == "static_page"'><br/>
<data:post.body/>
<b:else/>

kemudian cari pula kod ini:

<div style='clear: both;'/> 

dan letakkan kod ini diatasnya:

</b:if>

Selamat mencuba

Kamis, 02 Desember 2010

cara membuat menu dengan menggunakan gambar

Sebelum ini dalam entri yg lepas ada saya tunjukan cara membuat berbagai bentuk menu seperti menu bar tanpa hack,menu horizontal dan kali ini mengunakan gambar pula sebagai menu.Bila menggunakan gambar sebagai menu tentu nya kita mempunyai pilihan membuat berbagai bagai bentuk yang disukai ,tak semestinya asyik bentuk empat segi,bujur.Bagi yg belum tahu apa yang dimaksud menu,menu biasanya terdapat pada bahagian bawah header dengan perkataan yg biasa terdapat padanya seperti home,contact,site map dan sebagainya.

Untuk membuat menu ini kita perlu sediakan gambar dan diupload ke photobucket,imageshack dan sebagainya.Kemudian kita ambil url imej tersebut:

Contohya seperti ini:

http://i219.photobucket.com/albums/cc282/garam63/49Ccopy.jpg

kemudian tambah kod jadi seperti dibawah ini:

<img src="http://i219.photobucket.com/albums/cc282/home.jpg">

Kemudian masuk ke design-page elements
Pilih add gadget-HTML/Javascript

Masuk kod tadi padanya:

Kemudian klik pada edit html
Gambar yg dimasukkan akan muncul..klik pada gambar untuk mengubah saiznya dengan menarik bingkai yg ada pada gambar

Untuk memasukkan link pada button tadi..klik pada gambar kemudian klik ikon create link dan masukkan link yang dikendakki padanya:

Masukkan link pada ruangan enter a url.
Untuk button yang seterusnya ulang semula langkah diatas dengan memasukkan link gambar kedua .
Untuk memastikan saiz adalah sama klik semula pada edit html untuk masuk pada kod tadi
Dan perhatikan pada width dan height pada kod tersebut

Kemudian klik pada save..selamat mencuba