29 Okt 2012

Senaraikan Entri Blog Dalam Sidebar Secara Manual

Cara ini merupakan cara ganti Archive. Archive mempunyai kelemahan kerana hanya memaparkan pos yang dibuat dalam bulan tertentu sahaja. Dengan cara ini pengunjung dapat melihat senarai pos yang di senaraikan.

1. Log in Blog > Dashboard > Layout > Add A Gadget > HTML / Javascript.
2. Copy kod di bawah dan paste HTML/ Javascript.

<div class="widget-content">
<ol style="width: 260px; height: 190px; background-color: 000080; color: ffa000; font-family: verdana; font-size: 10px; font-weight: bold; text-align: left; border: 0px; overflow: auto;">

<li><a href="http://alamat-URL-blog.blogspot.com/"target="_blank">Laman Utama</a></li>

<li><a href="http://alamat-URL-blog.blogspot.com/2012/08/post-satu.html"target="_blank">Tajuk Pos Satu</a></li>

<li><a href="http://alamat-URL-blog.blogspot.com/2010/09/post-dua.html"target="_blank">Tajuk Pos Dua</a></li>

<li><a href="http://alamat-URL-blog.blogspot.com/2010/10/post-tiga.html"target="_blank">Tajuk Pos Tiga</a></li>

 </ol></div>

3. Kod Merah ialah kod url pos blog.


4.Kod Kuning ialah tajuk pos.

5.Kod Oren ialah kod saiz kotak skrol. Anda boleh ubah ikut blog anda.

6.Copy kod ini setiap kali ingin menambah senarai pos.Letakkan sebelum kod </ol></div>

 <li><a href="Link Pos" style="text-decoration: none;">Tajuk Pos</a></li>

7.Dah siap edit.Boleh save.






25 Okt 2012

Pasang Sidebar Social Widget


1. Dapat ID untuk Facebook Page, Twitter, dan juga Rss feed anda.

contoh:
Facebook page:  http://www.facebook.com/pages/PanduanBerblog/157412223674771
Twitter:  https://twitter.com/PanduanBerblog
Feedburner:  http://feeds.feedburner.com/panduanberblog1

2. Salin dan edit kod di bold dengan menggantikan dengan ID Facebook page, Twitter dan Feedburner dan juga nama blog anda.

<style>
#sidesocial{
border:0 solid #;
}
.sideg{
background:#00FFBF url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png) repeat-x 0 -100px!important;
font-size:0.85em;
color:#000;
line-height:1px;
border-top:1px solid #FFF;
border-bottom:1px solid #EBEBEB;
padding:5px 11px
}
.sideg span{
vertical-align:text-top;
color:#333;
margin:2px;
}
.sidetw{
background:#0DF url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png) repeat-x 0 -100px!important;
line-height:1px;
border-top:1px solid #FFF;
border-bottom:1px solid #EBEBEB;
padding:4px 11px;
}
.sidefb{
background:#82CDFC url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png) repeat-x 0 -100px!important;
}
.sidesub{
line-height:1px;
background:#FFB86D url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png) repeat-x 0 -100px!important;
border-top:1px solid #FFF;
padding:3px 10px;
}
.sidesub span{
width:115px;
}
</style>
<div id="sidesocial">
<div class="sidefb">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FPanduanBerblog%2F157412223674771&amp;width=300&amp;height=183&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%2382CDFC&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:183px;" allowtransparency="true"></iframe>
</div>

<div class="sideg">
<div class="g-plusone" data-size="medium" data-href="http://panduanberblog.blogspot.com"></div><span>Recommend on Google</span>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</div>

<div class="sidetw">
<a href="https://twitter.com/PanduanBerblog" class="twitter-follow-button">Follow @YOU</a>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>

<div class="sidesub"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=panduanberblog1', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input type="submit" value="Subscribe" /><span><input type="text" style="width: 165px;
padding: 0px 0px 0px 0px;
vertical-align: middle;
font-size: 0.85em;
margin-top: -1px;
margin-left: 15px;" name="Masukkan email" value="        Masukkan Email"       onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/><input type="hidden" value="panduanberblog1" name="uri"/><input type="hidden" name="loc" value="en_US"/></span></form>
</div>
</div>

3. Log In Blog > Dashboard > Layout > Add A Gadget > HTML / Javascript

4.Salin kod yang siap di edit pada langkah 2 dan paste pada content HTML / Javascript

5.SAVE.

p/s
Anda boleh ubah dan edit nilai angka jika  kotak facebook terlalu besar atau kecil.
Kod  panduanberblog  di tukar dengan url blog anda.

13 Jun 2011

Buat Background Shoutmix

Assalamualaikum dan salam sejahtera semua.Mohon maaf kerana lama menyepikan diri.Hari ni aku mahu kongsi pasal nak buat backgound untuk shoutmix.Langkahnya senang je.
1.Anda mestilah mempunyai akaun shoutmix.Kalau xde boleh daftar sini.
2.Copy kod di bawah.
<center>
<div id="edited" style="width:250px; height:400px; background:url(http://www.soiphone.com/uploads/200902/f/1235098340.jpg) no-repeat left top; padding-top:-5px; padding-left:0px; position:relative" align="center">
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe frameborder="0" title="PANDUANBERBLOG" height="400" src="http://www.shoutmix.com/?jinaljamal" id="r" style="filter:alpha(opacity=50);opacity:0.55;-moz-opacity:0.55; display:block; " scrolling="auto" width="250">
<a style="" href="http://www.shoutmix.com/?jinaljamal">View shoutbox</a>
</iframe>></div>
<!-- End ShoutMix --></center>
3.Paste kod diatas kat add a gadget =>HTML/Javascript..
4.Kod Hitam ialah saiz shoutmix korang.Jadi ubah ikut citarasa sendiri.
5.Kod Hijau tu ialah link gambar untuk dijadikan background.Korang boleh letak gambar sendiri ikut saiz shoutmix.
6.Kod Merah ialah untuk tajuk blog.
7.Kod Oren ialah link shoutmix korang.Jadi kena ubah.
8.Dah ubah semua.korang boleh save..

Korang boleh try link gambar kat bawah ni jgk.
-http://www.bestiphonewallpapers.com/bulkupload/081109/Cartoon/PinkHelloKitty.jpg
-http://www.dreamstime.com/blue-background-thumb2315107.jpg
-http://www.dreamstime.com/floral-background-thumb4863792.jpg

kredit to http://chekguisza.blogspot.com

12 Apr 2011

Buat Auto Read More pada setiap post

1.Log in blog => Dashboard => Layout => Edit HTML=> tick pada kotak Expand Widget Templates.
2.Cari kod </head>.Untuk mudahkan pencarian tekan CTRL+F.Letak kod tersebut kat ruang find yang akan muncul.
</head>
3. Copy kod dibawah.
<script type='text/javascript'>

var thumbnail_mode = "float" ;

summary_noimg = 350;

summary_img = 450;

img_thumb_height = 140;

img_thumb_width = 140;

</script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>
4.Paste kod diatas atau sebelum kod </head>.
5.Kemudian cari kod <data:post.body/>.Cari kat ruang find k.
6.Dah jumpa?ok.Copy kod dibawah pulak.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='http://1.bp.blogspot.com/_LZtXSNcp76A/SxuOVTvCKgI/AAAAAAAAAr8/rFJNAYKSomY/s320/read+more_thumb%5B1%5D.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

7.Gantikan@paste kod <data:post.body/> dengan kod diatas.Ini bermakna korang kena buang kod <data:post.body/> dan ganti dengan kod yang korang copy diatas.
8.Sebelum SAVE korang preview terlebih dahulu k.
9.Tak ada mesej Error bolehlah korang save.