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

Read More

Cara Buat Scroll Box untuk Widget

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..

Read More

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

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

Read More

Related Posts Selain LinkWithin (Cara Advance)

1. Pertama, masuk dulu ke halaman Edit HTML,
    Jangan lupa memberi tanda centang pada "Expand Widget Templates"

2. Cari kode ini </head> 

3. Kemudian ganti dengan kode dibawah ini

<!--Related Posts with thumbnails Scripts and Styles Start-->
<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'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

4. Sekarang cari lagi kode dibawah

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

Jika tidak jumpa kode diatas, cuba cari kode seperti ini pulak

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

Kalau sudah jumpa,cuma masukan semua kode dibawah ini dibawah salah satu dari kode diatas yang anda jumpa tadi.

<!-- 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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

5. Klik Save dan lihat hasilnya.

Untuk menampilkan seberapa banyak jumlah related posts anda boleh mengedit kode dibawah ini:

var maxresults=5;

Untuk mengganti title, anda boleh mengedit kode ini:

var relatedpoststitle="Related Posts";

Selamat Mencuba

Read More

Cara Pasang Auto Read More Dengan Gambar

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:

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/AVvXsEhJal9qrFgSO8naKeKJX0gMCxSS9TOGhhsX2WEjvJRa9K0Q4A5UMC7VTb9C5xNxFLHxZDTjuVuNcyNggczBu_9tF1sZB97JrRsWFDIb-e2ov31Bg4o9w515Zw1MxDxIadd-x9bcVZcKJJCB/s320/read+more_thumb%5B1%5D.png' alt='Read More' />

Read More

Cara Sembunyikan Tulisan Di Posting Blog Guna Spoiler

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.

Read More

Submit Blog Anda Guna Sitemap Generator

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 :

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.

Read More

Auto Backlink Generator-Tutorial SEO

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

1.Auto Backlink Generator 

Dan yang ini juga 

2. Auto Backlink Feed Generator 

 

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

Read More

Posting Kod HTML/Javascript di Blogspot

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..

Read More

Jquery Tab Menu Accordion versi 2!

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

Read More

Cara buat Kotak Scrollbar Pada Posting Blog-Tutorial

Kotak ini bisa di scroll kekanan dan kebawah untuk menemukan teks lain yang tersembunyi sehingga boleh menjimatkan ruang pada blog kita.Untuk membuat kotak ini caranya sangat mudah:
1. Buka Blogger. Klik menu Design -> Page Elements 
2. Klik Add a Gadget lalu klik HTML/Javascript 

3. Masukkan kode yang dibawah ini:

<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Kotak scrollbar adalah sebuah kotak yang boleh digulung kekanan atau kebawah sehingga bisa menjimatkan ruang pada blog</div>

Maka hasilnya akan seperti ini: 

Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog

Jika Anda ingin menambahan gambar kedalam kotak scrollbar maka ganti tulisan yang dicetak tebal diatas dengan <img src="alamat url gambar Anda" />Catatan:Ganti teks biru yang dicetak tebal dengan alamat alamat gambar anda contoh http://lh4.ggpht.com/_15FopxVONSo/SSlTogZcU-I/AAAAAAAAA18/EqRgvye_cNU/herman%20blog%20headline%20v6.gif 


Sebagai contoh saya memasukkan:

<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 300px; height: 80px; background-color: rgb(255, 255, 255);"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSpQjWxf9JWIa6lPDzxAeTOb-39QRUN1_XXQbwvSSoqu8XW6hQ1X_-6sP1i8wlytrnFxtwOekiL-lozJOoomTqNxVWT9yGDR8t6KClIGHehynz3Ty5OYtPGZ-9cM8H78XAf1rg85YzCVhY/s320/cuti-cuti+cinta.jpg" /></div>

Maka hasilnya akan seperti ini

4. Kalau sudah. Klik Save lalu klik View Blog untuk melihat hasil tampilannya

Kode Terbaru Cara Auto 
Tukar tulisan warna merah dengan tulisan anda

 <div style="border: 1px inset rgb(108, 122, 125); margin-left: 20px; margin-right: 70px; padding-left: 30px; padding-right: 30px;">
<span class="fullpost"><blockquote>Letak tulisan anda disini Letak tulisan anda disini Letak tulisan anda disini Letak tulisan anda disini </blockquote>
</span></div>

 

Selamat Mencuba!!?

Read More

Buat Scroll Box Untuk Blog Archive-Tutorial

Bagi yang rajin update. Blog Arhieve akan jadi panjang. So eloknya buat jenis scroll bagi jimatkan ruang blog dan juga nampak lebih kemas.

STEP 1

DASHBOARD>DESIGN>EDIT HTML>tick kotak EXPAND WIDGET TEMPLATES>DOWNLOAD FULL TEMPLATE 

*Apa-apa pun sebelum edit html, korang mestilah buat backup sebagai langkah berjaga-jaga.

STEP 2
Tekan keyboard, CTRL+F secara serentak.Cari code; <div id='ArchiveList'>

STEP 3

Di atas coding step 2,
Sila copy dan paste coding; <div style='overflow:auto; width:ancho; height:100px;'>

*height=korang boleh ubah berapa panjang kotak scroll yang korang nak.

STEP 4

Di akhir coding step 2 tue, korang kena masukkan penutup coding bagi step 3 iaitu </div>

Contoh coding;

<div style='overflow:auto; width:ancho; height:300px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div> </div>
<b:include name='quickedit'/>

**hint masukkan code </div> sebelum coding <b:include name='quickedit'/>

STEP 5Klik
Preview dan Save jika tiada sebarang error serta berpuashati.

Selamat mencuba ye...

Read More

Cara Membuat Multi Kolum Footer Widgets - Terbaru!

Widget baru ini boleh menjadi tiga medan, empat medan atau berapa banyak medan yang anda inginkan. Selanjutnya widget  footer yang baru mempunyai beberapa kesan CSS yang besar ditambah ke dalamnya yang membuatnya lebih baik. Pertama melihat demo untuk mengetahui apa yang sangat berbeza tentang hal itu.Lihat widget di bahagian bawah blog Demo berikut,

Cara Tambah Multi Kolum Footer Widgets Untuk Blogger ?Pertama kita akan menambah kod CSS untuk anda blogger template dan kemudian HTML. Jadi tanpa membuang masa membolehkan melompat terus ke langkah-langkah berikut,
1. Go To Blogger> Design> Edit HTML
2. Backup Template anda
3. Search for ]]></b:skin>
4. Tepat di atas ]]></b:skin> paste kod di bawah ini,

  /*----- MBT MULTI COLUMN FOOTER WIDGET -----*/

    #lower {
    margin:auto;
    padding: 0px 0px 10px 0px;
    width: 100%;
    background:#333333;
    }
    #lower-wrapper {
    background:#333333;
    margin:auto;
    padding: 20px 0px 20px 0px;
    width: 960px;
    border:0;
    }
    #lowerbar-wrapper {
    background:#333333;
    float: left;
    margin: 0px 5px auto;
    padding-bottom: 20px;
    width: 23%;
    text-align: justify;
    color:#ddd;
    font: bold 12px Arial, Tahoma, Verdana;
    line-height: 1.6em;
    word-wrap: break-word;
    overflow: hidden;
    }
    .lowerbar {margin: 0; padding: 0;}
    .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
    .lowerbar h2 {
    margin: 0px 0px 10px 0px;
    padding: 3px 0px 3px 0px;
    text-align: left;
    border:0;
    color:#ddd;
    text-transform:uppercase;
    font: bold 14px Arial, Tahoma, Verdana;
    }
    .lowerbar ul {
    color:#fff;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    }
    .lowerbar li {
    display:block;
    color:#fff;
    line-height: 1.6em;
    margin-left: 0 !important;
    padding: 6px;
    border-bottom: 1px solid #222;
    border-top: 1px solid #444;
    list-style-type: none;
    }
    .lowerbar li a {
    text-decoration:none; color: #DBDBDB;
    }
    .lowerbar li a:hover {
    text-decoration:underline;
    }
    .lowerbar li:hover {
    display:block;
    background: #222;
    }

5 Sekarang cari. </body> dan paste kod berikut persis di atas </body>

<div id='lower'>
<div id='lower-wrapper'>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'> </b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

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

</div> </div>

6. Simpan template anda dan anda selesai!
Sekarang, masuklah ke Elemen Laman dan menambah widget anda ke Footer Widgets baru ditambah bahawa akan kelihatan seperti ini,

Anda boleh mengamati bahawa ada empat medan secara lalai dan anda boleh menambah widget yang anda inginkan untuk setiap medan. Jika anda ingin menambah atau mengurangkan jumlah medan menegak kemudian ikuti langkah-langkah di bawah ini.

Cara Customize Widget itu?

Simple jer...Saya fikir warna dan keseluruhan saiz dan padding dan margining cukup sempurna. Satu-satunya hal yang anda perlu menyesuaikan dengan template anda adalah lebar widget dan jumlah medan menegak.

 
1. Dalam rangka mengurangkan atau menambah lebar keseluruhan widget hanya menukar width: 960px;
2. Jika anda ingin mengurangkan jumlah widget ke tiga maka cukup hapuskan bagian kod, 

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

3. Atau jika anda ingin menambah medan tambahan kemudian tambah kod di bawah ini tepat di atas <div style='clear: both;'/>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div>

Ingat bahawa lowerbar # merujuk pada jumlah medan. Jadi jika anda ingin menambah medan kelima maka cukup mengganti lowerbar # dengan lowerbar5.Selepas anda telah menambah medan kelima maka ingatlah untuk menukar width: 23%; dengan width: 17%;

Pada pendapat saya cukup hanya empat medan sahaja,ia sudah cukup menarik.....

Read More

Teknik Power White hat, grey hat dan black hat

Baiklah, hari ini saya akan berkongsi mengenai white hat, grey hat dan black hat untuk Search Engine Optimization (SEO) dari segi definisi dan contoh:

Teknik White Hat
Teknik White Hat bererti anda membuat laman web atau blog mengikut rules search enjin seperti yahoo dan google - buat satu website, paparkan pendapat anda, lakukan link exchange dan melawat ke blog orang lain. Pendek kata ia cara biasa yang kita lakukan. So skang jom tengok teknik grey hat pulak.
Teknik Grey Hat
Saya percaya ramai yang menggunakan teknik ini tapi tak perasan. Teknik Grey hat contohnya adalah seperti mengambil content orang lain - edit - dan paparkan di web/blog anda. Editing dilakukan pun sebab taknak panalti dek google. Siapa yang tak biasa, sila beritahu :P
Teknik Black Hat
Teknik black hat pula merupakan teknik spam enjin carian. Mereka menggunakan perisian untuk mengubah content website dan secara automatik, so blog mereka boleh siap dalam masa 10 minit. Pastu ada 100 website pulak tu. Lagi satu, kebiasaanya web yang menggunakan black hat ni tak lawa, tiru content orang lain bulat-bulat dan tak update sangat.
"Habis apa guna diorang wat camtu?"
"Tak kisahlah langgar etika ke, copyright ke, apa ke…Asalkan aku dapat duit!"
Tujuan blackhatters (si pengguna blackhat) adalah untuk mendapatkan DUIT. Tapi AWAS, teknik black hat yang kantoi - dikesan oleh google akan membuatkan web anda di buang dari penyenaraian mereka dan akaun adsense anda akan diban! So fikir dulu sebelum bertindak, dan bertindak cara bijak - jangan kantoi :D
Ada apa dengan Teknik white,grey and black hat seo?
"Abes teknik black hat berbahaya, kenapa orang nak buat jugak"
Cara ni dapat buatkan pengguna disenaraikan di bahagian teratas Search Engine (yahoo, google). Makin tinggi di enjin carian, makin ramailah pelawat blog. Bila dah ramai tu, mesti yang ada klik adsense, klik chitika ads, klik affiliate produk di blog kita. So its about Money jugak lah ;)

Read More

Is Twitter gearing up for an Android app? Twitter

I get a lot of Android-related questions from my geek friends and the top one has to be, "What is the best Twitter client for Android?" A new unofficial Twitter app is launched every week on the Android Market, so my answer varies a lot.
Why doesn't Twitter just release their own application? Facebook and MySpace both have native Android apps. Even Orkut got the native treatment from Google.
If you look at the recent actions and statements coming out of Twitter, they could be secretly planning an Android app. Actually, I think most of us would be shocked to learn that Twitter isn't working on an app.
The story goes all the way back to last year when TechCrunch posted a leaked Twitter roadmap that gave us a preview of their future. It comes as no surprise really, but Twitter wants to rule the online world (like Facebook and Google) by becoming the first with a billion members so they can become the pulse of the planet.
If Twitter really wants to be the pulse of the planet, then location will be key. They updated their mobile site last year and turned on location in February. Based on what every other company is doing, a native application is the next logical step after creating a mobile site with location (See Buzz, Facebook, Foursquare, Gowalla, etc.).

Read More

Tips Melajukan Loading Page Dengan CSS Compressor

Dari hari ke hari saya akan cuba mencari cara untuk melajukan loading page tanpa mengubah atau membuang widget-widget yang ada. Ok baik lah, hari ini saya kan berkongsi 1 tip yang mungkin boleh membantu anda. Sebenarnya dah lama saya gunakan cara ini iaitu dengan menggunakan CSS Compressor.Dengan cara ini, loading page akan menjadi lebih cepat kerana ia meng “compact” kan semua script-script css yang ada di dalam blog anda. Untuk keterangan lanjut baca dihalaman page tersebut.

Untuk mencubanya. Sila ikuti step-step dibawah.

Step 1 : Login Dashboard => Design => Edit HTML dan jangan lupa klik pada Expand Widget Templates. Untuk langkah berjaga-jaga, sila Download Full Template untuk backup file jika berlaku apa-apa nanti.

Step 2 : Copy kod css anda iaitu dengan mencari kod body{  sehingga sebelum kod ]]></b:skin> .

Step 3 : Pergi ke web CSS Compressor .

Step 4 : "Paste" kan pada bahagian "Insert CSS Code". Kemudian klik Compress.

Step 5 : Setelah siap,"replace" dengan css yang anda copy pada step ke-2 tadi.

Step 6 : Siap. Cuba web speed report untuk membezakan page size sebelum dan selepas.

Read More

Tingkatkan Traffic Dari Search Engine Dengan Costum Title Meta tag!

Default setting yang di buat blogger.com pada title meta tag yang terdapat pada script template anda sebenarnya kurang mesra kepada google search engine. Ini kerana, title meta tag tersebut akan memaparkan nama blog terlebih dahulu dan kemudian di ikuti dengan tajuk entri atau artikel.Di bawah ini adalah contoh title meta tag yang terdapat pada blog anda.

<title><data:blog.pagetitle/></title>

Untuk menjadikan blog anda mesra dengan google search engine, title meta tag yang terbaik adalah titlemeta tag yang akan memaparkan tajuk entri atau artikel terlebih dahulu dan di ikuti dengan nama blog. Apa yang perlu anda lakukan adalah menggantikan default title tag kepada title meta tag yang lebih mesra dengan google search engine. Anda boleh lihat costum title meta tag tersebut di bawah.

<b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/> | <data:blog.title/></title><b:else/><title><data:blog.pageTitle/></title></b:if>

Untuk menggantikan default title tag kepada costum title meta tag, hanya perlu ikut beberapa langkah yang mudah di bawah.
Langkah 1Log in blog => Dashboard => Design => Edit HTML. Seterusnya klik pada Expand Widget Templates.

Langkah 2Dengan menggunakan keyboard, tekan kekunci Ctrl + F. Seterusnya taip atau paste kod <title><data:blog.pagetitle/></title> pada ruang Find dan kemudian, tekan kekunci Enter.

Langkah 3Salin kod berwarna merah di bawah dan paste (gantikan) pada kod <title><data:blog.pagetitle/></title><b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/> | <data:blog.title/></title><b:else/><title><data:blog.pageTitle/></title></b:if>

Akhir sekali, klik Preview dan jika tiada mesej Error terpapar, klik saja Save.

Sumber: maribinablog

Read More

Cara Meningkatkan Page Rank (Google Pagerank)

Pertama yang harus diingat bahwa google merahasiakan formula untuk menghitung page rank sebuah blog (website). jadi jawaban saya hanya bersifat dugaan. Google menilai page rank sebuah blog sebagai sebuah sistem yang berkaitan antara satu faktor dengan faktor lainnya.

Ada beberapa hal (faktor) yang mempengaruhi page rank:

1. Backlink (link satu arah dari blog lain ke blog anda)
Backlink ini perlu anda perhatikan mencari backlink bukan hanya jumlahnya (kuantitas) tetapi juga kualitas link. Semakin banyak jumlah link ke blog anda maka akan semakin bagus dan semakin berkualitas link tersebut maka akan semakin bagus.

Link yang berkualitas adalah link yang temanya relevan atau berhubungan dengan tema postingan atau blog anda (perlu diingat google memberikan rank untuk setiap halaman/postingan blog). Secara default google akan menjadikan keyword yang ada di judul postingan, dan keyword di label sebagai penentu tema postingan.

Nanti akan kita bahas beberapa cara mendapatkan backlink.
(Semakin besar perbandingan link masuk dan link keluar akan semakin baik pageranknya). Yang perlu diingat mendapatkan satu backlink dari blog dengan PR2 lebih baik daripada 10 link dari blog PR1 (asusmsi blog anda PR1), demikian juga jika blog anda PR2 (mendapatkan 1 link dari blog PR3 lebih baik dari 10 link blog PR2), jika blog anda PR1 (maka 1 link dari PR3 lebih baik dari 100 link dari PR1), demikian seterusnya...
ada beberapa jenis arah link:

a. Link satu arah (inbound link),
b. link dua arah,
c. link satu arah (direct link, outbound link)
catatan: Link a lebih baik dari link b, link b lebih baik dari link c

2. Kesehatan link
Kesehatan link sangat perlu anda perhatikan, usahakan 2 bulan sekali melakukan pengecekan terhadap link, anda bisa menggunakan google webmaster tools untuk mendiagnosa link-link yang bermasalah di dalam blog anda, yang harus anda perhatikan:

a:death link (link mati) adalah link dari blog anda ke halaman lain, dengan halaman tujuan telah dihapus oleh pemiliknya, jadi sebaiknya link seperti ini dihapus saja.
b:error link, ini biasanya disebabkan karena timeout, atau halaman di blog anda terhapus, tetapi masih tersimpan di cache google, solusi bersihkan arsip link di chace google, bisa gunakan google webmaster tools untuk menghapus link halaman di cache google
c: Dan berbagai permasalahan link lainnya, bisa dilihat disini link spamming
3. Trafik (banyaknya kunjungan/pengunjung ke blog anda)
Semakin tinggi trafik akan mempengaruhi atau memperbanyak jumlah klik ke blog anda, dan klik link yang ada di dalam blog anda.
4. Umur blog
Biasanya google menempatkan blog-blog baru atau blog yang bermasalah ke dalam sandbox, yaitu penyimpanan sementara (mungkin tempat karantina) jika google menilai blog tersebut layak untuk dinilai maka akan dikeluarkan dari sandbox, blog yang berumur kurang dari 3 bulan biasanya ditempatkan dulu di sandbox setelah itu akan dibebaskan untuk dinilai, biasanya yang bertahan lama di sandbox adalah blog baru yang jarang diupdate atau tidak terurus. Jika dianggapa fatal kemungkinan google akan menghapus blog tersebut.
5. Mungkin ada teman yang punya pendapat lain silahkan ditambahkan di kotak komentar.
B. Cara mendapatkan backlink
1. Komentar di blog orang lain
2. Buat beberapa blog dummy sebagai bumper (ladang) untuk membackup blog utama anda
Sebagai contoh untuk blog ini saya menggunakan du blog dummy untuk meng-supply link yaitu blog dummy dan kalong-kalong , beberapa tempat yang bagus untuk membuat blog dummy adalah bloggaul indosiar ( http://www.bloggaul.com/),
3. membuat beberapa blog agar setiap blog saling me-link sehingga bisa saling mendongkrak pagerank masing-masing blog
4. Tukaran link dengan blog yang temanya relevan atau berkaitan dengan tema blog anda
5. Submit artikel ke social bookmark yang mengijinkan link do follow ke blog anda, contohnya: http://artikelindonesia.com/
6. Submit artikel ke social bookmak no follow, (link no follownya sepertinya dianggap oleh yahoo sebagai yahoo backlink, tetapi google tidak menganggap sebagai backlink, hal ini masih kontroversi bisa benar bisa tidak).
7. Submit ke web direktori, utamakan web direktori yang bisa menampilkan/menerima feed blog anda
8. Jika anda punya modal cukup anda bisa menyewa link di blog orang lain anda bisa pesan per tahun, atau beberapa tahun (tidak disarankan)
9. Anda bisa membuat sebuah lomba SEO kemudian mengajak peserta SEO untuk melink blog anda, biasanya blog anda bisa kebanjiran backlink dan trafik. (ini adalah salah satu teknik link baiting, atau mengajak orang lain melink blog anda)
10. dan lain-lain.
C. Cara mendapatkan trafik
1. Submit artikel ke social bookmark lokal (Indonesia) : infogue, lintasberita, yahoo answer, dan berbagai forum lainnya, serta situs social networking seperti facebook, friendster, yuwie,tweeter, dll
2. Submit artikel ke situs social bookmark mancanegara seperti digg, delicious,selengkapnya bisa dilihat disini situs social bookmark
Perlu diingat saat submit artikel perlu memperhatikan letak direktorinya, tag (keyword), agar yahoo backlinknya berkualitas. Jika anda kuat ,Anda cukup mensubmit masing-masing 100 artikel ke masing-masing (sekitar 150 situs social bookmark tersebut), maka anda bisa mendapatkan 150.000 yahoo backlink.
Namun kendalanya jika menggunakan situs social bookmark setiap 6 bulan atau bahkan ada yang 3 bulan linknya sudah dihapus,sehingga anda harus submit ulang 150000 link tersebut. jika menggunakan dummy blog linknya akan permanen.
3. Membuat artikel yang bermanfaat buat orang lain, dan selalu di update (postingan yang tidak bermanfaat pun di posting saja, karena robot google akan gembira jika menemukan banyak update postingan saat mengunjungi blog anda). karena jika tidak diupdate samasekali maka google akan memasukkan blog anda ke sandbox, sangat susah untuk keluar dari sandbox.
4. Submit ke search engine, dan menerapkan beberapa tips dan trik seo on page dan off page untuk pemula yang bisa anda lihat di blog saya trik seo pemula
5. Memulai optimasi keyword dari keyword yang persaingannya kurang ketat di sarch engine. Terkadang ada beberapa keyword yang sudah dioptimasi berbulan-bulan tetapi belum muncul di 10 besar SERP, teatpi ada keyword yang hanya sehari atau beberapa hari bisa langsung muncul di 10 besar SERP.
6. Untuk meningkatkan page rank dan trafik butuh waktu dan butuh kesabaran, selain usaha dan perlu berdoa, jika belum berhasil terus berusaha jangan mudah patah semangat dan terus berdoa....berdoa...dan berdoa...kepada Allah SWT.

Read More

Ping Blog Post Anda Dengan Lebih Mudah Dengan sekali klik!!!

Biasa Ping Blog? pernah Ping blog post? Pada yang biasa mesti tahu apa kebaikan ping blog anda ke ping services dalam dunia internet.....

Sering sekali saya jumpai pertanyaan-pertanyaan di forum “Bagaimana blog di-indeks dengan cepat?“, Sebenarnya banyak cara untuk contoh pertanyaan diatas,  salah satu cara adalah “ping-kan” blog kamu.
Saya memanfaatkan layanan web dari pingler.com, web ini membantu blog cepat terindex. Caranya mudah sekali, cukup nama blog kamu, alamat Url blog kamu dan kategori, kemudian masuk code lalau klik   Ping My Site.  Blog kamu akan ter-index dalam waktu 5 jam.  Cukup mudahkan?

Bila blog kamu yang lainya ingin di-ping, saya sarankan, kamu klik “Ping Another Site?”, jika kamu klik “Back” pada browser, refresh saja browser yang kamu gunakan, karena jika tidak refresh, code Captcha tidak akan bekerja.

Cara diatas adalah salah satu dari seribu cara yang masih banyak cara lainnnya…, mudah-mudahan cara ini membantu blog kamu.

Read More

Letak Iklan Ditengah Post+Google Adsense

.

Selalunya iklan adsense ini muncul hanya di atas ,bawah dan di sidebar blog anda sahajakan..hal ini serba sedikit akan menyebabkan

klik diiklan anda pun tak banyak...so disini kita cuba tingkatkan pendapatan adsense kita melalui cara ini...dan cara ini memang berkesan.

Dan untuk pengatahuan anda trick ini...sudah bertahun-tahun menjadi rahsia webmaster...dan anda bertuah kerana saya akan berkongsi dengan

anda rahsia ini...anda tak perlu risau cara ini tidak melanggar syarat2 google adsen klik sini:www.adsense-located.com so disini saya akan terangkan cara-caranya...

LANGKAH 1) Sign ke blogger akaun anda pergi ke Layout > Edit HTML>Klik > Expand Widget anda...

LANGKAH 2) Cari code ini (<data :post.body/>) untuk memudahkan anda cari code ini tekan Ctrl+F dan gantikan code tadi dengan code dibawah ini......

<div expr:id='"aim1" + data:post.id'> </ p>

<div style="clear:both; margin:10px 0">

<- Code AdSense anda di sini! ->

</ Div>

expr: id = '"aim2" <div + data:post.id'>

<data :post.body/>

</ Div>

<script type="text/javascript">
var obj0 = document.getElementById undefined"aim1: post.id /> <data");
var obj1 = document.getElementById undefined"aim2: post.id /> <data");
var s = obj1.innerHTML;
var r = s.search undefined/ x3C! - --x3E/igm adsense);
if undefinedr> 0) undefinedobj0.innerHTML = s.substr undefined0, r); obj1.innerHTML = s.substr undefinedr 16);)
</ Script>

LANGKAH 3) Perkara yang paling mustahak anda mesti tukar, Code adsense anda menggunakan code anda sendiri seperti yang anda lihat di atas perkataan yang berwarna merah (Code AdSense anda di sini) tukarkan dengan code anda...Pakai Nie untuk ubah kode Adsense Encode

sekarang sudah selesai,jadi anda hanya pastikan letak code tadi dengan betul....mudah bukan?

Read More