Kumpulan Tutorial Blogspot

Home → Semua Post

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.

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

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