Adsense Link 728 X 15;
Showing posts with label feature. Show all posts
Showing posts with label feature. Show all posts

Cara Meletakkan Iklan Di Sebelah Kiri@Kanan Posting

Posted by Tips Trick Blogger Saturday, April 30, 2011 0 comments

Anda ingin menampilkan iklan di kanan atau kiri artikel blog. Pastinya Anda  ingin tahu bagaimana cara meletakkannya? ok..Ikut jer cara dibawah ini.

1. Login ke Blogspot .

2. Klik Design - Edit HTML(Tandakan pada Expand Widget)
3.Cari kod dalam kotak nie...

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

4. Pastu copy kod dalam kotak dibawah ini .

<div style='display:block;float:left;margin: 0px 10px 0px 0px;'>
LETAK KOD IKLAN ANDA DISINI
</div>

5. Pastekan dibawahnya.

6. Preview dan Save template .

Note: Pada highlight biru adalah kedudukan iklan yang korang nak samada kiri atau kanan/yang merah tu korang letak kod iklan korang...

Cara pasang related post tanpa ada gambar

Posted by Tips Trick Blogger Wednesday, April 13, 2011 1 comments
Jika sebelumnya saya pernah posting tentang cara membuat related posts with thumbnails dan untuk kali ini saya akan posting serupa tapi tak sama iaitu "pasang related post tanpa gambar".Okey sambung kembali tutorial ini dan inilah "Widget Related Posts"

Setelah anda login pada blogger .com cari kode dibawah ini : </head>

Kemudian gantikan dengan kode di ini :

<!--Related Posts Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;

}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj40Bw0FcvAcVMhdh2UpWtJ-91BZO8Y659QAQ-22ElMJWOoenUU2yuCQnlhW6U5HwNKdMgLUUcX563SZKraHKb11lV6phiJpPs0AacTVmiyjElX_noKMg8q4vMoJZYQDA2551ew6-kIp8M/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>

<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://mastergomaster.googlecode.com/files/related.js' type='text/javascript'/>

</b:if>
<!--Related Posts Scripts and Styles End-->
</head>

**Tulisan Related Posts boleh anda ganti mengikut kesesuaian dan keinginan anda.


Sekarang cari kode  ini :  <div class='post-footer-line post-footer-line-1'>

Kalau tak jumpa,cuba yang satu ini :<p class='post-footer-line post-footer-line-1'>

Letakkan kode dibawah ini dibawah kode di atas :

<!-- Related Posts Code Start-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.mastergomaster.com/2010/03/related-posts-tanpa-gambar-atau-image.html' style='display:none'>Related Posts Widget</a>

<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;


var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>

</b:if>
<!-- Related Posts Code End-->

**Pada var maxresults=5; gantilah angka 5 jika anda mahu atau lebih mengikut kesesuian anda inginkan.

Simpan dan klik Save Template,
Sekian, dan terima kasih kerana sudi mencuba tutorial yang tak seberapa ini.

Cara Meletakkan Save Energy Mode Di Dalam Blogspot

Posted by Tips Trick Blogger Monday, April 11, 2011 0 comments


Marilah ikuti tutorial nak jimatkan tenaga..atau pun energy save mode kat blog korang

1-buka blog
2-reka bentuk
3-add gadjet
4-pilih html link dan jawa script
5-copy dan pastekan kod bawah ni.

<script src=’http://www.vincentcheung.ca/jsencryption/jsencryption.js’ type=’text/javascript’></script><script type=”text/javascript”>if (window.jstiming) window.jstiming.load.tick(‘headEnd’);</script>
<!– save your energy –><script language=’javascript’ src=’http://www.onlineleaf.com/savetheenvironment.js’ type=’text/javascript’></script><!– save your energy end –><script type=’text/javascript’></script><script type=’text/javascript’>

Related Post bergambar yang boleh bergerak

Posted by Tips Trick Blogger Wednesday, March 16, 2011 0 comments
Kali ini kita belajar pulak buat Related Post bergambar yang boleh bergerak,Anda boleh melihat contoh Related Post DISINI? banyak dan kelebihannya pula dapat memaparkan seberapa banyak posting yang berkaitan dan ditambah pula dengan elemen bergerak dan sudah tentu ia akan menarik para pembaca anda.
 Dan sekarang kita akan cuba untuk membuat " Moving Related Thumnail Post " dan caranya mudah sahaja Seperti posting saya sebelum ini DISINI:Sila ikuti langkah dibawah ini.

 * Klik Dashboard - Layout - Page Elements - edit HTML -Tandakan Expand Widget Templates

 Seterusnya cari kod </head> setelah anda menjumpainya sila Copy dan Pastekan Kod dibawah ini diatas kod </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Dan sekarang Cari Kod ini:

<div class='post-footer-line post-footer-line-1'>

atau (jika kod diatas tidak dijumpai sila cari kod yang dibawah ini)

<p class='post-footer-line post-footer-line-1'>

Dan setelah itu Copy dan Paste kod dibawah ini. (Dibawah <p class='post-footer-line post-footer-line-1'>)

<!-- Marquee Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if>
</b:if>
<!-- Marquee Related Posts with Thumbnails Code End-->
*gantikan nombor berwarna merah kepada seberapa banyak yang anda inginkan.
 contoh 20 untuk 20 related post.
 dah kemudian save kan,simple ajer..

Cara Membuat Auto Lightbox untuk semua gambar

Posted by Tips Trick Blogger Tuesday, March 8, 2011 0 comments
Contoh:: Klik Gambar Untuk Demo


Bagaimana memasang script ini?

1. Pergi ke Dashboard Blogger, Teruskan ke tab Design, kemudian Edit HTML.
2, Tambah kod ini sebelum kod :- <body>
 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<style type="text/css">
    /* jQuery lightBox plugin - Gallery style */
    #gallery {
        background-color: #444;
        padding: 10px;
        width: 520px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #fff;
        border-width: 5px 5px 20px;
        color: #fff;
    }
    #gallery ul a:hover { color: #fff; }
    </style>


<script src="http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.js" type="text/javascript"/>
<link href="http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.css" media="screen" rel="stylesheet" type="text/css"/>

<script type="text/javascript">
$(function() {
$('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightBox();
});
</script>

3.Klik save

p/s:- Gambar hanya support,JPG,jpeg,png,gif ////Sila refer disini jka ada masalah
Sumber:-simplexdesign

Buat Auto Redirect Pada Blog

Posted by Tips Trick Blogger Saturday, February 26, 2011 0 comments
Auto redirect adalah satu ciri di mana ciri-ciri tersebut boleh meredirect atau mengarahkan suatu halaman website ke halaman lain. ciri-ciri ini berguna apabila anda memiliki blog utama dan blog penyokong.

Apabila anda ingin mendapatkan traffic untuk kedua blog kamu, kamu boleh menggunakan script redirect ini. jadi, anda boleh memapasang script ini dalam blog penyokong anda dengan mengarahkan script ini untuk me redirect ke blog utama anda.

Jadi, apabila ada pengunjung blog yang membuka blog penyokong anda, maka pengunjung tersebut akan di reidrect atau di arahkan ke blog utama anda secara automatik. dengan begini, kedua-dua blog anda akan mendapatkan traffik.

Cara memasang auto redirect pada blog cukup mudah,pasang script ini pada sidebar blog anda....? jom ikut tutorial dibawah ini:

Tutorial memasang auto redirect pada blog :
 1. Menu Dashboard, klik Tata Letak, klik Edit html.
 2. Cari kode </head> dan copy paste kode berikut ini diatasnya :


<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

3. Klik simpan.
4. Klik Tata Letak, Elemen Halaman, Tambah Gadget, HTML/Javascript, lalu masukkan script auto redirect berikut ini :


<form name="redirect">
<center>
<font face="Arial"><b>You will be redirected to the script in<br/><br/>
<form>
<input name="redirect2" size="3" type="text"/>
</form>
seconds</b></font>
</center>

<script>

var targetURL="http://bloggertubev8.blogspot.com/"
var countdownfrom=5

var currentsecond=document.redirect.redirect2.value=countdownfrom+1
function countredirect(){
if (currentsecond!=1){
currentsecond-=1
document.redirect.redirect2.value=currentsecond
}
else{
window.location=targetURL
return
}
setTimeout("countredirect()",1000)
}

countredirect()
//-->
</script>
</form>

5. klik simpan.
 
   Info Script :
 - anda boleh tukar script yang berwarna hijau (dengan format kode HTML)
 - script yang berwarna merah adalah URL yang hendak dituju.
 - script yang berwarna biru adalah waktu countdown untuk me redirect.
   Semoga bermanfaat untuk anda!

Cara Nak Buat Gambar Bergerak?

Posted by Tips Trick Blogger Wednesday, February 16, 2011 0 comments
Cara nak buat gambar bergerak,adaptasi dari cara buat tulisan bergerak saya sebelum ini.Ikut sahaja langkah-langkah dibawah ini untuk berjaya,jika tak faham sila rujuk disini.


Nie Kode Dia:
<marquee direction="right"><img src="http://i420.photobucket.com/albums/pp281/goldenphoto_2009/Iconulum.jpg" /></marquee>

Tanda merah tersebut adalah kode yang harus anda letak sebelum link gambar,jika anda ingin mengubah haluan gambar sila rujuk disini

Cara Letak Facebook Button Like Untuk Blog

Posted by Tips Trick Blogger Saturday, February 5, 2011 0 comments
Bagaimana anda hendak menentukan secara rawak berapa ramai yang suka blog anda.?.Salah satu daripadanya adalah dengan meletakkan button 'like' untuk blog.

Jika tutorial meletakkan button 'like' dalam entri merujuk kepada pengunjung yang suka pada entri anda, meletakkan button 'like' ini pula akan merujuk kepada bilangan pengunjung yang suka blog anda secara keseluruhannya.Anda boleh menggunakan kod yang diberi untuk diletakkan di sidebar blog anda
1. Login akaun blogger, dari dashboard > design > add a gadget > HTML javascript

2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript


<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border: medium none; overflow: hidden; width: 280px; height: 40px;" src="http://www.facebook.com/plugins/like.php?href=http://URL-ANDA.blogspot.com&layout=standard&show_faces=false&width=280&action=like&font=arial&colorscheme=light&height=40"></iframe>


note: Gantikan URL-ANDA dengan url blog anda

3. Save dan lihat hasilnya.:)
 
p/s: Apabila seseorang 'like', akan keluar di wall orang yang like tentang blog anda dan secara tidak langsung dapat meningkatkan trafik blog anda.:)  sumber:::::tutorialuntukblog

Cara Mempercepatkan Loading Blog Menggunakan Google Chrome Frame

Posted by Tips Trick Blogger Saturday, January 29, 2011 1 comments
1.Log ke dashboard anda - desing-> ->Edit HTML

2.Click pada "Expand Template Widget"

3.Scroll turun ke mana anda melihat ini  <head>

4.Copy kod di bawah ini dan paste tepat dibawah kod <head>



                   <meta http-equiv='X-UA-Compatible' content='chrome=1'/>

5.Kemudian cari kod  </head>

6.Copy kod di bawah ini dan paste tepat setelah kod </head> 

<!--[if IE]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<style type='text/css'>
.chromeFrameOverlayContent{top:10px;margin-top:10px;}
</style>
<script>
window.attachEvent("onload", function() {
CFInstall.check({
mode: "overlay"
});
});
</script>
<![endif]-->


7.Sekarang Simpan Template anda.

Kira time loading blog anda .. Nikmat!!!

Cara Buat Kotak Iklan 125 x125 di Blog

Posted by Tips Trick Blogger Monday, January 24, 2011 0 comments

Cara Buat Kotak Iklan 125 x125 di Blog

* Log in ke account blogger anda


* Pada dasbord --> Design --> Edit HTML

* Cari kode berikut ini  ]]></b:skin>

* Kemudian taruh kode CSS dibawah ini diatasnya


#Johan-ads {

margin: 0px;

padding: 5px;

text-align: center;

}

#Johan-ads img {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #c0c0c0;

}

#Johan-ads img:hover {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #333;

}

* Klik Simpan

* Selanjutnya Pada Elemen Laman --> Pilih Tambah Gadget --> Pilih HTML/Javascipt

* Kemudian anda  memasukan kode dibawah ini.

<div id="Johan-ads">
<a target="_blank" href="http://johanrakyat.blogspot.com/"><img alt="ads" src="http://penyamun.fileave.com/iklan%20125.jpg" border="0" /></a>

<a target="_blank" href="http://johanrakyat.blogspot.com/"><img alt="ads" src="http://penyamun.fileave.com/iklan%20125.jpg" border="0" /></a>

<a target="_blank" href="http://johanrakyat.blogspot.com/"><img alt="ads" src="http://penyamun.fileave.com/iklan%20125.jpg" border="0" /></a>

<a target="_blank" href="http://johanrakyat.blogspot.com/"><img alt="ads" src="http://penyamun.fileave.com/iklan%20125.jpg" border="0" /></a>

</div>

Klik Save Selesai

Cara Buat Scroll Box untuk Widget

Posted by Tips Trick Blogger Sunday, January 23, 2011 0 comments


Meletakkan sesuatu widget adalah bagus untuk blog. Walau bagaimanapun, adakalanya widget tersebut boleh 'menggangu' pandangan jika mengambil ruang yang agak besar untuk blog.


Salah satu penyelesaianya adalah dengan menjadikan widget tersebut boleh scroll. Ini secara tidak langsung dapat mengurangkan ruang yang digunakan dan menjadikan blog anda nampak lebih kemas.

Scroll box ini juga sesuai dengan apa sahaja widget yang anda mahu.Secara ringkasnya, apa sahaja widget yang guna kod HTML boleh guna cara ini untuk jadikannya scroll.:)

Tutorial untuk membuat scroll box adalah seperti berikut..

1. Dari dashboard > design > add a gadget > HTML/javascript(Jika anda sudah letakkan widget hanya buka HTML/javascript widget yang anda telah letak di blog)

2. Kemudian masukkan/ubah kod widget seperti berikut.


<div style="width:426px;height:100px;overflow:auto; ">

Letakkan kod widget anda disini

</div>

Note :width: ubah mengikut lebar yang anda kehendaki
           height: ubah mengikut tinggi yang anda kehendaki

3. Apabila selesai, save dan lihat hasilnya..

Cara Nak Tukar "Older Posts", "Newer Posts", dan "Home" Dengan Image Icon

Posted by Tips Trick Blogger Thursday, January 20, 2011 0 comments

TAJUK GAMBAR ANDA
Hi,friend! Sekarang kita belajar cara nak tukar "Older Posts", "Newer Posts", dan "Home" dengan image icon. Usually "Older Posts", "Newer Posts", and "Home"terletak di bawah blog kita.

Fungsi ini mengarahkan kita untuk pergi ke laman lain, baik posting lama halaman atau baru laman posting. Biasanya, arahan ("Older Posts", "Baru Posts", "Home") adalah hanya sebuah kata, maka kita akan mengubah kata itu menjadi sebuah ikon.jika anda ingin trik ini,ikuti langkah-langkah dibawah:

1. Log in to your blogger icon
2. Go to Design>>>Edit HTML
3. Thick "Expand Widget Templates"
4. Then find this code :


<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>


<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>


<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>


</div>


5. Tukarkan link yang berwarna biru dengan link image anda

                               <img border='0' src='ICON URL'/>

Contoh :


<img border='0' src='https://sites.google.com/site/genkitemplate/olderpage/home.png'/>
                <img border='0' src='https://sites.google.com/site/genkitemplate/olderpage/previous.png'/>


                <img border='0' src='https://sites.google.com/site/genkitemplate/olderpage/Newer.png'/>


Akan jadi macam nie:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img border='0' src='
https://sites.google.com/site/genkitemplate/olderpage/Newer.png'/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img border='0' src='
'https://sites.google.com/site/genkitemplate/olderpage/previous.png'/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img border='0' src='
https://sites.google.com/site/genkitemplate/olderpage/home.png'/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img border='0' src='
https://sites.google.com/site/genkitemplate/olderpage/home.png'/></a>
</b:if>
</b:if>

</div>


 6.Jika sudah,Save dan lihat hasilnyer...

Note: Anda boleh menukar link image anda sendiri

Cara Pasang Auto Read More Dengan Gambar

Posted by Tips Trick Blogger Sunday, January 16, 2011 0 comments

Pasang Read More Auto With Title and Thumbnail





Mahu pasang Readmore button? xsusah mana pun...Jom try buat...

Caranya mudah,Hanya ikuti langkah-langkah di bawah ini:

1. Masuk ke Design lalu EDIT HTML
2. Centang Expand Widget Templates
3. Cari kode </head>
4. Tambahkan kode berwarna biru berikut dibawah kode </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</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>



5.Lalu cari kode <data:post.body/>

6.Ganti kode tersebut dengan kode berwarna hijau di bawah ini.
<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:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Yang berwarna merah gantikan ayat sesuai dengan keinginan Anda...

7. Save Template.

8.View Blog..!!!

Bagi yang ingin mengganti tulisan 'Readmore' atau 'Baca Selanjutnya' dengan image atau gambar seperti dibawah ini:
Pasang Read More Auto With Title and Thumbnail





1. Cari kode berikut
READ MORE - <data:post.title/>


2. Ganti dengan kode berikut
<img border='0' src='URLGAMBAR' alt='Read More' />

Ganti tulisan warna merah dengan url gambar / image readmore anda,
kalau tidak ada,cuma copy code image readmore berikut:

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtbXa4FJ4QtZyDLnn5WB9swRlPFrogy4m_RyLRuYOV65Ivoesy03iXJrrdWyEgRS01cbkF9rEUDXS-WCUWxs7_ba-i44UZybMiCYRu-r0cidYZsLKVA6OJ1O6z-QHxe6z7HVCntIS8ytV-/s320/read+more_thumb%5B1%5D.png' alt='Read More' />

Cara Sembunyikan Tulisan Di Posting Blog Guna Spoiler

Posted by Tips Trick Blogger Thursday, January 6, 2011 0 comments
Spoiler adalah teknik untuk menyembunyikan seluruh atau sebagian isi dari Content posting, dengan tujuan untuk mengjimatkan space halaman posting dan mengurangi lamanya waktu loading web/blog, dimana misalnya posting tanpa spoiler loading memakan waktu 45 saat, maka jika dengan Spoiler cukup dengan 30 saat dan mungkin kurang dari itu (tergantung isi content).

Fungsi Spoiler adalah selain untuk menyembunyikan content berupa text dan kode juga boleh sembunyikan gambar dalam ukuran besar serta video.Cara Kerja Spoiler adalah, content yang ditaruh di dalam spoiler hanya boleh dilihat keseluruhnya oleh pembaca apabila buttonnya diklik.

Untuk membuktikannya silahkan Anda klik tombol spoiler di bawah ini:
Contoh Spoiler
disinilah tempat untuk meletak content dalam spoiler
<div><div style="margin: 10px;">
<div class="smallfont" style="margin-bottom: 2px;"><span style="font-weight: bold;"> Contoh Spoiler</span><input value=" please buka!!!" style=" margin:5px;padding: 0px; width: 80px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = ' Tutup Jer...'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = ' please buka!!!'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
disinilah tempat untuk meletak content dalam spoiler
</div></div></div></div>

Keterangan: 
Copy kod diatas,letak di new post anda....

1. Teks warna Biru adalah Judul Content dan boleh diganti sesuai dengan selera anda, Namun jika tidak ingin menampilkan judul content pada spoiler, silahkan dihapus saja dan nilai margin saya kasih warna biru silahkan diganti menjadi 0 (nol);

2. Teks warna Merah adalah kata perintah tombol spoiler dan boleh diganti sesuai selera Anda.

3. Teks warna Pink adalah tempat menaruh isi content postingan Anda.

Submit Blog Anda Guna Sitemap Generator

Posted by Tips Trick Blogger Monday, January 3, 2011 0 comments
Sitemap Generator Untuk Submit BlogPostingan ini kadang ada juga gunanya buat yang baru belajar buat blog, sama seperti saya kadang rada bingung juga cara buat sitemaps, sama seperti buku kalo tidak ada daftar isi dan alamat halamannya dimana susah juga bacanya,karena susah pasti males bukanya boro boro mau tau isinya, gua sudaj 4 bulan ngo Blog kadang juga masih bingung..Ini sedikit solusi untuk submit sitemap blog.Salah satu cara agar postingan blog anda cepat terindek oleh mesin pencari seperti Google, Yahoo, atau Bing adalah dengan mengirimkan alamat sitemap blog anda.





Idealnya, file sitemap harus mengandung semua URL dari sebuah situs, tetapi jika blog kita di-host di blogspot.com (atau jika kita menggunakan custom domain), kita akan terkejut kalau tahu bahwa sitemap default file hanya berisi 26 halaman terbaru saja yang terindex dari blog. Lalu bagaimana cara mengatasinya? sebenarnya masalah ini sudah dijelaskan sangat lengkap diblognya Amit Agarwal yaitu seorang blogger populer asal India, jadi silahkan pelajari saja langsung diblognya dialamat ini labnol.org (jangan lupa di translate) Ada satu masalah yang biasanya dipunyai oleh para blogger yang menggunakan mesin blogger atau blogspot adalah URL yang terindek oleh google hanya sedikit, walaupun postingan yang dimiliki sudah mencapai ratusan. Contoh salah satu blog kang Rohman http://blogtemplate4u.com telah mempunyai 121 posting, namun dalam data yang ada pada webmater, URL yang terindeks hanyalah sebanyak 20

 





Pertanyaan ini adalah pertanyaan yang sering sekali ditanyakan oleh para blogger yang menggunakan mesin blogspotCara untuk mengatasi error sitemap di gogle webmaster adalah dengan menggunakan Blogger Sitemap Generator. Dengan menggunakan Blogger Sitemap Generator kita dapat membuat sitemap untuk blog kita dan terbukti bisa mengatasi masalah tidak terindek nya postingan kita.

 




Berikut cara menggunakan Blogger Sitemap Generator :
 1. Silahkan klik butoon START dibawah untuk ke Sitemap Generator :




DOWNLOAD NOW


Masukan alamat blog anda pada kolom yang tersedia, jangan lupa untuk menuliskan secara lengkap alamat blog anda ( misal : http://joharakyat.blogspot.com ), lalu Klik tombol Create Blogger Sitemap.

 





4. Catat alamat sitemap yang telah dibuat atau copy paste pada notepad atau yang lainnya,
     contoh :atom.xml?redirect=false&start-index=1&max-results=500

 





5. Masukkan alamat sitemap di google webmasters tools, Buat rekan yang sudah mengerti cara submit blogger sitemap digoogle webmaster tools bisa langsung mengunakan Blogger sitemap generator, sebenarnya tidak hanya untuk google saja, rakan juga dapat mengirim dengan melakukan ping Sitemap langsung ke Yahoo dan Bing.

Untuk anda yang mempunyai postingan lebih dari 500, maka alamat sitemap yang harus disubmit adalah lebih dari satu alamat sitemap, 
contoh :
 * atom.xml?redirect=false&start-index=1&max-results=500 
 * atom.xml?redirect=false&start-index=501&max-results=500 
 * atom.xml?redirect=false&start-index=1001&max-results=500 
 * atom.xml?redirect=false&start-index=1501&max-results=500 
 * atom.xml?redirect=false&start-index=2001&max-results=500 

 Mudah-mudahan dengan cara ini membuat sitemap blog anda lebih cepat di index oleh google, dan mudah-mudahan pengunjung blog anda bisa lebih meningkat dari search engine.

Auto Backlink Generator-Tutorial SEO

Posted by Tips Trick Blogger 0 comments




Saya ingin kongsikan dengan anda semua salah satu cara saya mendapat Backlink sesuatu Blog dengan cepat.

1.Auto Backlink Generator 

DOWNLOAD NOW

Dan yang ini juga 

2. Auto Backlink Feed Generator 

DOWNLOAD NOW
 
Yang ini ada perlu letakkan RSS Feed blog anda.Selesai!

Posting Kod HTML/Javascript di Blogspot

Posted by Tips Trick Blogger 0 comments



Tips pendek kali ini adalah berkenaan kod html/javascript diposting blog anda. Mungkin pernah anda menulis di artikel untuk highlight kod html. Bila anda posting, hilang pula kod html itu... Dan ada juga yang tertanya-tanya bagaimana wak paparkan kod html di blog ini.Sebenarnya ada tools internet yang ada untuk convert html untuk dipaparkan diposting blog anda. salah satunya gadjet dari pakcik google ini pun boleh digunakan.. Tak silap ada beratus tools sebegini.. Anda pilih dan gunakanlah mengikut kesesuaian anda ya..

Posting Kod HTML/Javascript di Blogspot

Posted by Tips Trick Blogger 0 comments



Tips pendek kali ini adalah berkenaan kod html/javascript diposting blog anda. Mungkin pernah anda menulis di artikel untuk highlight kod html. Bila anda posting, hilang pula kod html itu... Dan ada juga yang tertanya-tanya bagaimana wak paparkan kod html di blog ini.Sebenarnya ada tools internet yang ada untuk convert html untuk dipaparkan diposting blog anda. salah satunya gadjet dari pakcik google ini pun boleh digunakan.. Tak silap ada beratus tools sebegini.. Anda pilih dan gunakanlah mengikut kesesuaian anda ya..

Jquery Tab Menu Accordion versi 2!

Posted by Tips Trick Blogger 0 comments
Jika anda ingin menjimatkan ruang dibahagian sidebar, anda boleh mencuba Jquery Tab Menu Accordion seperti yang boleh dilihat pada demo di sini(sila klik). Pada Jquery Tab Menu Accordion tersebut, anda boleh masukkan berbagai jenis widget seperti Shout box, Top Post,Recent Post, Recent Comment, Top Commentator dan sebagainya mengikut citarasa anda sendiri. Jquery tab menu accordion ini semamangnya sangat menarik dan mudah kerana anda hanya perlu meletakkan cursor mouse pada title tab menu tersebut.

Untuk memasang Jquery tab menu accordion sila ikut beberapa langkah yang mudah dibawah.

Langkah 1

Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.

Copy dan paste kod di bawah pada content HTML/Javascript.
 <style type="text/css">
h5 {
font-family: trebuchet-ms, arial, tahoma;
font-size: 13px;
padding: 0 0 1em;
font-weight:bold;
color: #ffffff;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#F80680;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#F4F4F8;
}
</style>


<script type="text/javascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>

<div class="msg_list" id="secondpane">
<h5 class="msg_head">Tajuk 1</h5>
<div class="msg_body">

Masukkan kod disini.

</div>

<h5 class="msg_head">Tajuk 2</h5>
<div class="msg_body">

Masukkan kod disini.

<h5 class="msg_head">Tajuk 3</h5>
<div class="msg_body">

Masukkan kod disini.

</div>
</div>


Untuk mengubah warna background title box, title font dan background accordion box, sila edit kod yang di bold dengan warna biru.

color: #ffffff;  ( title font )
background-color:#F80680; ( background title box )
background-color:#F4F4F8; ( background accordion box )

Untuk memasukkan widget seperti Shout box,Top Post,Recent Post, Recent Comment, Top Commentator dan sebagainya, gantikan teks Masukkan kod disini. dengan kod widget yang anda inginkan.

Edit teks Tajuk, 1 Tajuk 2, dan Tajuk 3 dengan title yang anda inginkan.

Langkah 2

Akhir sekali, klik Save

Sumber: maribinablog

Jquery Tab Menu Accordion versi 2!

Posted by Tips Trick Blogger 0 comments
Jika anda ingin menjimatkan ruang dibahagian sidebar, anda boleh mencuba Jquery Tab Menu Accordion seperti yang boleh dilihat pada demo di sini(sila klik). Pada Jquery Tab Menu Accordion tersebut, anda boleh masukkan berbagai jenis widget seperti Shout box, Top Post,Recent Post, Recent Comment, Top Commentator dan sebagainya mengikut citarasa anda sendiri. Jquery tab menu accordion ini semamangnya sangat menarik dan mudah kerana anda hanya perlu meletakkan cursor mouse pada title tab menu tersebut.

Untuk memasang Jquery tab menu accordion sila ikut beberapa langkah yang mudah dibawah.

Langkah 1

Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.

Copy dan paste kod di bawah pada content HTML/Javascript.
 <style type="text/css">
h5 {
font-family: trebuchet-ms, arial, tahoma;
font-size: 13px;
padding: 0 0 1em;
font-weight:bold;
color: #ffffff;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#F80680;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#F4F4F8;
}
</style>


<script type="text/javascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>

<div class="msg_list" id="secondpane">
<h5 class="msg_head">Tajuk 1</h5>
<div class="msg_body">

Masukkan kod disini.

</div>

<h5 class="msg_head">Tajuk 2</h5>
<div class="msg_body">

Masukkan kod disini.

<h5 class="msg_head">Tajuk 3</h5>
<div class="msg_body">

Masukkan kod disini.

</div>
</div>


Untuk mengubah warna background title box, title font dan background accordion box, sila edit kod yang di bold dengan warna biru.

color: #ffffff;  ( title font )
background-color:#F80680; ( background title box )
background-color:#F4F4F8; ( background accordion box )

Untuk memasukkan widget seperti Shout box,Top Post,Recent Post, Recent Comment, Top Commentator dan sebagainya, gantikan teks Masukkan kod disini. dengan kod widget yang anda inginkan.

Edit teks Tajuk, 1 Tajuk 2, dan Tajuk 3 dengan title yang anda inginkan.

Langkah 2

Akhir sekali, klik Save

Sumber: maribinablog