April 2012

Home → Arsip Untuk April 2012

Merubah Warna Header Pada Blog

Pertama-tama, sebelum kita mempelajari lebih jauh tentang menambahkan elemen baru di bawah header, kita harus tahu dulu apa sih header itu? Header adalah informasi awal atau data yang berguna untuk kategorisasi atau transmisi tujuan utama sebuah blog. Header merupakan unsur yang paling penting dalam sebuah template karena setiap pengunjung yang datang ke blog Anda pertama kali yang dilihat adalah headernya. Contohnya bisa sobat lihat pada gambar berikut ini ...

Fungsi header itu sangat banyak sekali, terutama sebagai kunci awal sebuah blog. Sebuah blog yang sukses akan menaruh kata kunci dari blog mereka di headernya sebagai informasi pembuka atau yang sering disebut tema pada sebuah cerpen. Selain itu, kita juga perlu mempercantik header kita, agar pengunjung tidak jenuh, salah satunya dengan merubah warna header blog. Selain itu, kita juga bisa menambahkan kolom / elemen baru di bawah header untuk menempatkan apa saja terutama iklan. Di header pun kita bisa merubah font (jenis huruf) (baca: Cara Mengganti Style Font Blog) yang bisa kita sesuaikan dengan templates blog kita. Untuk membuatnya sobat bisa mengikuti caranya di bawah ini:

1. Login ke akun sobat blogger.

2. Di bagian dasbor, klik rancangan.
3. Pada tab elemen laman, klik edit html.
4. Carilah kode: #header { pada kotak Edit HTML.
(Gunakan CTRL + F untuk pencarian cepat)

Keterangan : Agar mempercantik headernya, Anda bisa menambahkan kode background: kode warna; tepat di bawah tulisan margin. Tulisan kode warna tersebut Anda bisa menghapusnya dan menggantinya dengan warna yang Anda inginkan (baca: Kode Warna HTML). Contoh: #ff6633.
5. Hasilnya akan menjadi seperti ini.

Merubah Warna Header Pada Blog

6. Simpan template, dan lihat hasilnya!

Begitulah kiranya step by step cara merubah warna header pada blog

Cara Menambahkan Headline News di Blog

Pada postingan ini, kita akan membahas tentang cara menambahkan headline news di blog agar blog terlihat cantik dan bagus.

Apa sih Headline itu? Headline adalah sekumpulan berita-berita terbaru yang dapat kita baca dengan seksama yang terdapat di bawah/atas layar yang berjalan biasanya dari kanan kekiri. Fungsi headline adalah menarik minat target publikasi untuk membaca. Yang intinya adalah headline itu adalah judul besar dari hasil karya kita, baik itu berita, artikel, catatan kecil, dan lain sebagainya yang tujuan dari headline itu untuk menarik minat pembaca berita.

Headline ini berbeda dengan headline yang ada di televisi, bedanya kalau di blog gunanya untuk menampilkan Postingan Terbaru kita dengan efek marquee.

Bagaimana? Jika sobat tertarik untuk membuatnya silahkan ikuti langkah di bawah ini.

1. Login ke akun blogger sobat.
2. Pilih Rancangan, lalu klik Add a Gadget.
3. Pada window yang terbuka, pilih HTML/Javascript, lalu isikan kode berikut:

<script type="text/javascript">
var hn_url_blog = "http://alamatblogsobat.blogspot.com";
var hn_jumlah_post = 10;
var hn_warna_latar = " #7cfc00";
var hn_warna_garis = "#000000";
var hn_posisi = "top";
var hn_tampilkan_judul = true;
var hn_backlink = true;
</script>
<script src="http://my-project-tabview-tab.googlecode.com/files/Headline%20News.js">
</script>

Keterangan :
Kode yang berwarna merah boleh sobat ganti dengan catatan berikut:

hn_url_blog = URL blog anda (ganti dengan url blog anda)
hn_jumlah-post = jumlah judul artikel yang di tampilkan
hn_warna_latar = kode warna untuk latar belakang headline news
hn_warna-garis = kode warna garis bingkai
hn-posisi = menentukan posisi letak headline new. (top = atas, bottom = bawah, right = kanan, left = kiri)

4. Simpan/Save, lihat hasilnya.

Mungkin itu saja tutorial cara menambahkan headline news di blog. Semoga berguna bagi sobat yang ingin memperlihatkan artikelnya di blognya.

Cara Membuat Recent Post Dengan Thumbnails

Cara Membuat Recent Post Dengan Thumbnails - Hari ini kita akan mempelajari tentang recent post dengan versi thumbnail atau Cara Membuat Recent Post Dengan Thumbnails.

Recent Post dengan thumnails? Sebelumnya kita harus tahu dulu thumbnails itu apa.

Thumbnails merupakan gambar atau pictures yang terpajang di media-media, contohnya widget yang sekarang kita bahas ini. Gambar yang dihiasi kata-kata dari javascript ini sangat bagus. Anda tidak akan menyesal untuk mencobanya.

Recent post dengan thumbnails ini berbeda dengan artikel terbaru yang hanya menggunakan bullet sebagai penghiasnya dilengkapi dengan efek marquee/berjalan yang membuat blog kita semakin cantik. Dengan membuat Slide Show pada halaman blog kita, pengunjung akan lebih mudah lagi untuk menyelusuri daftar isi pada blog yang kita buat.

Tertarik membuatnya? Ikuti langkah berikut di bawah ini.
1. Login ke akun blogger sobat.
2. Lalu klik rancangan - tambah gadget - pilih HTML/Javascript.

3. Lalu masukkan kode di bawah ini di kolom tersebut.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">


</style>

<script language='javascript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 300;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "Reply(s)";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://kutu-blogspot.blogspot.com/";
limitspy=5
intervalspy=6000
</script>

<div id="spylist">
<script type='text/javascript'>
//<![CDATA[
/*
* Script dikombinasikan dari bloggerstricks.com
* spy effect dari jqueryfordesigners.com
* Modifikasi oleh kutu-blogspot.blogspot.com/
*/
jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("<li>"+e(this).html()+"</li>")});o=i.length;l.wrap('<div class="spyWrapper" />').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='<li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate">'+n+'</div><div class="spycomment">'+cmtext+"</div>";document.write(v);j++}document.write("</ul>")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
//]]>
</script>
</div>

boxwidth = 300 adalah lebar widget dalam pixel (px), ganti nilainya sesuai dengan lebar sidebar blog.
text = "Reply(s)" adalah teks di belakang jumlah komentar, ganti Reply(s) sesuai keinginan, misalnya: komentar, comment(s), dll.
numposts = 10; adalah jumlah posting terbaru yg akan di-crawl, ganti nilainya sesuai keinginan.
limitspy=5 adalah jumlah posting terbaru dalam sekali tampilan, ganti nilainya sesuai keinginan.
intervalspy=6000 adalah kecepatan scroll / spy dalam milisecond (ms), ganti nilainya untuk mengatur kecepatannya.

4. Save widget dan lihat hasilnya.

Selesai sudah cara membuat artikel terbaru dengan thumbnails. Bagi sobat kunjungi terus dan dapatkan artikel terbaru disini.

Membuat Menu dan Sub Menu Horizontal

Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. Pada kesempatan ini, kita akan mengulas trik blogger tentang membuat menu horizontal secara sederhana. Mengapa dikatakan sederhana? Karena jika kita optimasi lebih mendalam, ternyata terdapat beberapa varian dari menu horizontal tersebut. Fungsi dari trik blogger ini adalah sebagai salah satu navigasi dalam blog agar memberikan layanan kemudahan shortcut link bagi pengunjung blog kamu.

Sub menu sendiri berfungsi untuk mempertegas salah satu menu tersebut. misalnya dalam satu menu berjudul sport, maka sub menunya bisa berisi dari macam-macam olahraga semisal sepakbola,motogp,tinju,tennis dan masih banyak lagi.

Singkat kata, berikut langkah membuat menu horizontal dalam blog kamu :

Login ke account blogger kamu.
Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget". (Sebelum lakukan pengeditan, sebaiknya lakukan backup templates terlebih dahulu. (Baca : Cara Backup Templates)

Cari Kode kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

/* navbar
================== */

#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}

#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

Catatan :

Agar menu horizontal sesuai dengan template blog, kamu perlu mengganti kode-kode yang berwarna hijau dan merah.
Khusus untuk kode yang berwarna hijau, sangat penting disesuaikan dengan lebar blog kamu.
Untuk kode pewarnaan, sobat bisa mengaturnya sendiri. (Baca : Kode Warna HTML)

Kemudian cari kembali kode seperti di bawah ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='test
(Header)' type='Header'/>

... dan seterusnya ...

</b:section>
</div>

Copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna merah (sesuaikan dengan template blog kamu).

<div id='NavbarMenu'>
       <div id='NavbarMenuleft'>
      <ul id='nav'>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li>
          <a href='#'>Sample Page</a>
          <ul>
            <li>
              <a href='#'>Sub Page #1</a>
              <ul>
                <li><a href='#'>Sub Sub Page #1</a></li>
                <li><a href='#'>Sub Sub Page #2</a></li>
                <li><a href='#'>Sub Sub Page #3</a></li>
              </ul>
            </li>
            <li><a href='#'>Sub Page #2</a></li>
            <li><a href='#'>Sub Page #3</a></li>
            <li><a href='#'>Sub Page #4</a></li>
            <li><a href='#'>Sub Page #5</a></li>
          </ul>
        </li>
        <li><a href='#'>Sample Post</a></li>
        <li><a href='#'>Blog Page</a></li>
      </ul>
    </div>
    <div id='NavbarMenuright'> <form action='http://Alamat_Blog_Kamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
</form>

</div>
</div>

Keterangan :

- Sobat tinggal mengganti text �#� dengan �Alamat link yang anda ingin pasang�.
- Sobat ganti text berwarna hijau dengan judul dari link anda tersebut.

- Kode berikut ini adalah sub menu / turunan dari menu tsb.

contoh:

<li><a href=�http://kutu-blogspot.blogspot.com'>All about SEO</a></li>

Jangan lupa disimpan

Notes

Permasalahannya terjadi pada dropdown yang blink ketika di dekati mouse. Kode CSS yang perlu diperbaiki adalah sebagai berikut

#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
position:absolute;
}

Kemudian agar teks dalam menu utama dapat menyesuaikan dengan ukuran karakter yang Anda masukkan, maka perlu pula memperbaiki kode CSS seperti yang tampak di bawah ini.

#nav li {
float: left;
margin: 0px;
padding: 0px;
position:relatif;
}

Kode CSS yang berwarna merah merupakan penambahan dari kode CSS navigasi menu horizontal sebelumnya. Saya mohon maaf atas ketidak nyamanan ini.

Semoga berguna buat sobat semua. Ada hasrat yang terpendam? Kebingungan? Silahkan keluarkan hasrat dan pertanyaan kamu di kotak komentar di bawah. Jangan sungkan ya ..

Cara Cek Blog Dofollow atau Nofollow

Cara Cek Blog Dofollow atau Nofollow - Pada postingan hari ini kita akan membahas tentang bagaimana cara cek blog dofollow atau nofollow yang bisa kita periksa pada blog temen-temen kita.

Pasti anda sudah tahu nofollow dan nofollow bukan? Jika belum tahu silakan baca artikel sebelumnya yaitu Apakah DoFollow dan NoFollow itu?. Perbedaan dofollow dan nofollow sangat jelas adanya. Sebenarnya mudah, kali ini kita akan menggunakan sebuah add-ons untuk melihat apakah blog seseorang itu nofollow atau dofollow.

Secara default, blog blogspot menggunakan sistem nofollow pada form komentarnya. Namun tidak sedikit pula blogger yang menerapkan sistem dofollow dalam comment formnya.

Untuk menemukan blog-blog mana saja yang menggunakan sistem dofollow, anda bisa googling dengan kata kunci 'dofollow blog list' atau 'daftar blog dofollow'. Ada banyak situs yang membuat daftar blog dofollow di situsnya.

Untuk Anda yang bingung blognya dofollow atau nofollow bisa menggunakan cara di bawah ini:
--> Pergilah ke Rancangan - Edit HTML.
--> Beri tanda centang pada "Expand Widgets Template"
--> cari kode seperti ini pada kode HTML blog anda :
'data:comment.authorUrl' rel='nofollow'

Lihat pada gambar di atas. Sobat cari dulu kode 'data:comment.authorUrl' jika disampingnya terdapat kode di atas yang di garis bawahi / di gambar di atas, berarti blog sobat no follow. Namun jika tidak ada berarti blog sobat dofollow.

Di atas adalah cara manual melihat blog kita apakah dofollow atau nofollow. Namun bagaimana jika melihat blog orang dofollow ataukah nofollow dengan cara simple dan tidak memakan waktu? Nah kita akan menggunakan sebuah add-ons dari firefox untuk melihat apakah blog itu nofollow atau dofollow. Add-ons nya adalah DoNoFollow 1.5. Kebanyakan sobat di internet lain hanya sharing DoNoFollow 1.4 yang hanya rasuk pada browser firefox 3.6. Nah DoNoFollow 1.5 ini kompatible dengan mozilla firefox 4.0, firefox 5, 6 dan firefox 7. Selain itu, Addon ini mudah digunakan dan tidak terlalu memakan waktu.

Untuk mendownload DoNoFollow 1.5 Anda bisa klik link ini.Setelah terinstall tinggal restart firefox. Setelah itu klik kanan pada area yang kosong dan klik pada tulisan nodofollow. Nah, semua link yang ada di halaman akan berubah warna biru untuk dofollow dan pink/merah untuk nofollow.

Nah, sekarang kita bisa menghemat banyak waktu untuk mengecek apakah suatu link itu dofollow atau nofollow dengan menggunakan addon nodofollow.

Nah bagaimana? Anda tertarik membuat blog menjadi dofollow? Sekian dulu artikel saya mengenai cara cek blog dofollow atau nofollow, semoga anda bisa membedakan blog dofollow atau nofollow. Semoga bermanfaat.

Apakah DoFollow dan NoFollow itu?

Apakah DoFollow dan NoFollow itu? - Bagi blogger yang sudah lama ngeblog pasti sudah tahu kata dofollow dan nofollow, namun yang blogger awam pasti sangat asing dengan dofollow dan nofollow, maka dari itu kita akan membahasnya pada artikel ini.

Apa sih DoFollow dan Nofollow itu?

DoFollow adalah istilah dalam Blog/Website yang jika kita memberikan komentar pada Blog tersebut maka Link yang kita masukan saat berkomentar itu akan dianggap sebagai Backlink oleh mesin pencari seperti Google. Blog doFollow ini biasanya banyak dicari oleh para pemburu Backlink untuk menaikkan Pagerank Blog mereka.

Sedangkan NoFollow adalah istilah dalam Blog/Website yang jika kita memberikan komentar pada Blog tersebut maka Link yang kita masukan saat berkomentar itu tidak dianggap sebagai Backlink oleh mesin pencari seperti Google. Namun tetap orang lain bisa berkunjung melalui link yang kita pasang dalam komentar. Pada awalnya (default), setiap blog disetting noFollow, maksudnya untuk mengurangi spam tapi bisa diubah menjadi doFollow.

Sebagai blogger, sobat jangan terlalu menekankan hal DoFollow adalah segalanya. Kebanyakan blogger lain jika posting hanya memperlihatkan kelebihan DoFollownya agar DoFollow semakin banyak dipakai. Nah, di bawah ini adalah perbedaan antara blog DoFollow dan NoFollow.

Keuntungan Dan Kerugian Blog DoFollow

Kelebihan Blog Dofollow:

Postingan kita biasanya akan lebih banyak diberi komentar, terlepas apakah postingannya berkualitas/bermanfaat atau tidak karena para pengunjung hanya ingin mendapatkan backlink secara cuma-cuma dari blog kita. Backlink ini nantinya akan membantu untuk menaikkan pagerank blog mereka. Tapi dalam beberapa kasus, tidak sedikit blog doFollow yang postingannya sepi komentar.

Blog kita akan sering dikunjungi terutama oleh para pemburu backlink. Walau dalam beberapa kasus, tidak sedikit blog doFollow yang sepi pengunjung.

Meningkatkan pageviews walau Blog noFollow pun banyak yang pageview nya bagus walau sepi komentar.

Biasanya pemilik Blog doFollow akan dianggap sebagai orang yang ramah dan dermawan karena mau bagi-bagi backlink secara cuma-cuma. Walau untuk hal ini masih perlu dipertanyakan. Tergantung dari dirinya masing-masing.

Kekurangan Blog Dofollow:

Pagerank blog kita bisa turun.

Tidak begitu disukai oleh Google karena memberikan link keluar yang banyak.

Rawan diserang spammer yang menginginkan backlink gratis. Biasanya mereka membuat komentar ala kadarnya yang penting mereka memasang link pada blog kita. Walaupun untuk hal ini tergantung pada sang komentator.

Akibatnya, jika terlalu banyak link keluar blog kita bisa dihapus dalam daftar mesin pencari atau minimal Google hanya mengindeks sebagian halaman blog kita. Tentu saja ini akan membuat pengunjung dari Google berkurang atau bahkan tidak ada. Dan tidak menutup kemungkinan pagerank blog kita pun malah turun.

Pemilik blog doFollow biasanya kurang interaktif (pasif) karena berprinsif, buat apa mengomentari komentator, buat apa berkunjung balik toh saya sudah berbaik hati dengan memberikan backlink cuma-cuma. Tapi tenang, tidak semuanya juga kok.

Jadi, buat para pencari blog dofollow jangan asal comment ya. Bacalah dulu artikel/tulisan teman kita tersebut. Kemudian tinggalkanlah respon anda dalam bentuk yang baik (baca: Cara Berkomentar yang Baik). Jangan terlalu mengharapkan DoFollow, yang paling mengerikan adalah ketika spam bermunculan. Pada akhirnya, spam dapat menimbulkan ketidaknyamanan bagi para pengguna situs web.

Jika pribadi saya, Saya lebih senang blog nofollow karena google selalu meng-index blog kita. (Tapi sering koment di blog DoFollow, hihi).

Tanpa blog DoFollow pun kita akan dikomentari tapi yang terpenting buatlah "Posting yang Bermanfaat dari segi kualitas dan kuantitas".

Ibarat saja sebuah air putih, kebanyakan orang tidak menyukai air putih, namun apabila diracik dan ditambah menjadi sebuah minuman yang enak misalnya jus sebuah air putih tadi akan ada manfaatnya. Sekian dulu postingan saya mengenai dofollow dan nofollow. Untuk cara cek blog yang dofollow atau nofollow pada blog temen silakan ke artikel saya yaitu Cara Cek Blog Dofollow atau Nofollow. Semoga bermanfaat

Jadilah diri sendiri, jangan terpaku pada sesuatu yang tidak memungkinkan. Mulailah dengan membuat postingan yang sederhana namun bermanfaat yang bisa dicicipi semua orang

Cara Backup Templates

Backup template dalam Blog merupakan prosedur standar yang wajib dilakukan setiap blogger pada saat akan melakukan perubahan desain blog. Perubahan bisa berupa penambahan atau pengurangan kode html atau javascript baru. Sebelum perubahan seluruh kode html harus di simpan terlebih dahulu dalam folder PC melalui download template. Semua tool telah tersedia di halaman Edit HTML.

Hasil download kode template yang tersimpan di folder PC berekstensi �.xml, dan merupakan file yang berfungsi untuk mengembalikan lagi template yang mengalami kerusakan setelah perubahan dilakukan. Jadi inilah fungsi utama backup template, sehingga setiap blogger wajib hukumnya untuk selalu melakukan prosedur ini.

Langkah pengamanan template sebuah blog ini dimaksudkan untuk menjaga seandainya terjadi kegagalan pada saat dilakukan modifikasi terhadap template. Dengan diamankannya desain awal blog, maka pengguna blog tidak akan kesulitan untuk mengembalikan lagi desain blog ke bentuk awal sebelum dilakukan perubahan. Bagaimana cara untuk melakukan backup (pengamanan) template dan memfungsikannya untuk memulihkan kembali desain blog yang mengalami kerusakan? Oke .. Mari ikuti panduan di bawah ini.

Langkah yang harus di tempuh untuk mengamankan template adalah sebagai berikut :
1. Login ke Blogger Merupakan langkah awal untuk masuk ke ruang Edit Template setelah membuka http://www.blogger.com kemudian dilanjutkan dengan memasukkan User Name (Nama Pengguna) atau Alamat Email serta jangan lupa tuliskan code number/kode rahasia.

2. Setelah masuk di DASHBOARD/DASBOR teruskan dengan KLIK pada Layout/Design atau TATA LETAK/Rancangan.

3. Anda akan masuk di Page Element/Elemen Laman. KLIK pada Edit HTML !

4. Tunggu beberapa saat! KLIK Download Template Lengkap (kanan tengah dengan teks warna biru).

5. Simpan Desain template anda di folder PC.

6. Desain awal template yang sudah tersimpan dengan aman di folder PC bisa digunakan untuk mengembalikan desain template ke bentuk semula (sebelum perubahan) apabila saat mengadakan perubahan pada desain template terjadi kegagalan karena kesalahan teknik atau kegagalan KODE HTML yang tidak kompatibel dengan blog.

7. Untuk mengembalikan desain template blog ke bentuk semula (sebelum dilakukan perubahan), anda tinggal KLIK pada CHOOSE kemudian cari file desain template blog yang sebelumnya sudah tersimpan di folder PC (file berekstensi .xml). Lanjutkan KLIK pada Upload.

8. Blog sudah dipulihkan kembali! Silahkan cek dengan membuka blog!

Cara Membuat Tag Cloud Animasi

Beberapa waktu yang lalu Saya mendapat request dari salah satu sobat blogger untuk posting artikel cara membuat tag cloud. Nah pada versi kali ini, saya akan sharing tag cloud ber-animasi.

Apa sih tag cloud itu? Tag cloud atau disebut juga label cloud merupakan daftar semua label yang digunakan untuk menandai suatu artikel. Label/category postingannya berbentuk seperti awan, bentuknya acak. Dari gambar di samping sobat pasti sudah dapat menebak apa itu tag cloud.

Jika sobat tertarik seperti widget di sidebar saya ini, maka ikuti langkah berikut ini:

1. Login ke akun blogger sobat.

2. Masuk ke Rancangan > Edit HTML.

(Sebelumnya lakukan back-up templates untuk berjaga-jaga.)

3. Copy script di bawah ini:

<b:widget id='Label99' locked='false' title='Tag Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://daw-xp.googlecode.com/files/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Codec by <a href='http://daw-xp.blogspot.com/'>DAW-XP</a></div>
<script type='text/javascript'>
var so = new SWFObject("https://sites.google.com/site/dawxpblog/home/tagcloud.swf", "tagcloud", "200", "150", "7", "#000000");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0xffffff");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Keterangan:

� Lebar widget : 200px
� Tinggi widget : 150px
� Warna latar (background) : abu gelap atau #000000
� Warna huruf : putih atau 0xffffff

Sobat bisa mengubahnya sesuai keinginan sobat (lihat kode warna disini)
4. Letakkan script di atas di bawah kode:

<b:section class='sidebar' id='sidebar' preferred='yes'>

(Gunakan Control + F untuk memudahkan pencarian, bisa dengan kata kunci id='sidebar')
5. Simpan templates sobat, dan lihat hasilnya ..
Sobat bisa mengubah letak dari widget tag cloud sobat di elemen laman.

Selamat Mencoba ..

Cara Membuat Background Pada Widget Blog

Cara membuat background pada widget blog. Background Style yang dimaksudkan adalah memberikan efek background pada suatu widget pada blog. Style ini bisa berupa warna dan gambar. Dan dengan ini, anda bisa lebih mempercantik tampilan dengan gambar atau pilihan warna anda.

Teknik ini sangat sederhana. Namun karena ada salah satu teman yang request, jadi saya posting. Selain itu di sini juga belum membahas soal latar belakang tersebut.

Saya mendapatkan kode ini dari blognya Ardi33, terima kasih sob.

Oke, teknik ini memerlukan beberapa perubahan pada CSS template anda. Dan saya akan memisahkan beberapa teknik yang memang berbeda cara dan berbeda style berikut ini:

1. Colour Background Style
Pemberian warna pada suatu widget menggunakan sintaks background: #kodewarna; dan berikut selengkapnya:

#side-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 25px 0px 0px 0px;
width: 315px;
background: #ffffff;
}

Tambahkan kode merah seperti di atas pada widget yang ingin anda tambahkan warna background. Untuk warna, anda bisa menggunakan Photoshop atau Online Tools untuk mengetahui kode warna, dan jangan lupa menggunakan tanda pagar (#) sebelum kode.

2. Image Background Style
Ini adalah teknik memberikan gambar sebagai background pada suatu widget pada blog anda. Perhatikan gambar berikut:

Nah, untuk pemasangan style ini, ada beberapa perubahan pada sintaks. Berikut selengkapnya:

.post-footer { display: block; margin: 15px 0px 25px 0px; padding: 7px 20px 7px 20px; text-align: left; font: $postfooterTextFont; color: #ffffff; font-weight: normal; line-height: 1.6em; text-decoration: none; background-image:url("http://sites.google.com/site/cumaisenggroup/cabinet/dasbor/postfooter.gif"); background-color:#0092dd; background-position:top right; background-repeat:no-repeat; border: 1px solid $postfooterBorderColor; }

Penjelasannya adalah:
- Background Image diisi URL gambar.
- Background Color diisi kode warna yang sesuai dengan gambar.
- Background Position diisi dengan posisi penempatan gambar. Misal top-left, bottom-left, top-right, bottom-right, center-right, center-left.

Background Repeat diisi ke sebelah mana gambar akan diulang. Untuk ke atas, gunakan repeat-y menjadi:

background-repeat: repeat-y;

Untuk ke samping, gunakan repeat-x menjadi:

background-repeat: repeat-x;

Dan jika tidak ingin diulangm gunakan no-repeat seperti contoh awal.

3. Hover Image Background Style
Style unik, seperti yang digunakan untuk sebuah link. yaitu berubah warna jika mouse mendekat, namanya HOVER STYLE. Teknik ini juga bisa menggunakan gambar. Untuk pemasangannya, pastikan kode .widget pada CSS yang akan diberi background. Untuk contoh adalah kode berikut ini:

#main .widget {
margin: 0px 0px 0px 0px;
padding: 0px 25px 20px 25px;
}

Di atas adalah kode untuk main-widget, untuk sidebar biasanya menggunakan kode:

#sidebar .widget {
margin: 0px;
padding: 0px;
}

Pemberian efek ini sangat mudah. Copy-Paste seluruh kode widget dan taruh di bawahnya, lalu tambahkan :hover pada akhir kata widget dan beri style background di dalam kode tadi. Selengkapnya:

#main .widget {
margin: 0px 0px 0px 0px;
padding: 0px 25px 20px 25px;
}
#main .widget:hover {
background:#e3e3e3;
}

Gunakan kreasi anda dalam pemberian efek atau style ini. Buat blog anda secantik mingkin agar bisa menarik pengunjung dan dapatkan beberapa manfaatnya. Selamat berkreasi.

Kumpulan Tutorial Blogspot

Tips Blog | Tutorial Blog | Belajar Blog

Merubah Warna Header Pada Blog

Cara Menambahkan Headline News di Blog

Cara Membuat Recent Post Dengan Thumbnails

Membuat Menu dan Sub Menu Horizontal

Notes

Cara Cek Blog Dofollow atau Nofollow

Apakah DoFollow dan NoFollow itu?

Cara Backup Templates

Cara Membuat Tag Cloud Animasi

Cara Membuat Background Pada Widget Blog

About Me

Followers

Sample Text

Sample text

Daily Categories

Test Footer 1

Test Footer

Comment

Stay connected

Random Post

Template Information

Test Footer

Ads 468x60px

Entri Populer

Social Icons

Blog Archive

Featured Posts