Blog Tutorial 4 U

Cara Mudah Pasang Counter Pengunjung / Blog's Stats gimana sih ? Nama counter blog sangat penting untuk mengetahui seberapa jauh blog itu dikunjungi orang. Semakin banyak pengunjung tentu semakin bagus blog tersebut baik bagus secara kontent atau bagus secara SEO. Nah postingan kali ini kita akan bahas sedikit tentang cara Mudah pasang Counter Pengunjung / Blog's Stats di blog kita.

Langsung aja ya langkah-langkahnya :
1. Login dulu di account blogger anda
2. pilih design
3. pilih page element
4. silakan klik add gadget
5. klik Blog's Stats
6. Klik Save
7. SIlakan Cek hasilnya, jadi kan.

Nah kalau mau coba versi lain tentang pasang counter pengunjung di blog nanti kita bahas pada postingan berikutnya ya

Pasang Daftar Isi Blog Otomatis sebenarnya tidak terlalu sulit. Gak perlu waktu berjam-jam, Coba deh ikuti langkah-langah berikut ini :

1. Log in ke blogger
2. Klik Layout di dashboard menu
3. Klik Edit HTML
4. Jangan lupa beri Centang pada Expand Widget Templates
5. Cari kode berikut : <b:include data='post' name='post'/>
6. Ganti kode tersebut dengan kode berikut :
<b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType != "item"'><a expr:href='data:post.url'><div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;"><data:post.title/></div></a><b:else/><b:include data='post' name='post'/></b:if><b:else/><b:include data='post' name='post'/></b:if>

7. Simpan template anda, kemudian Pikirkan mau ditaruh dimana daftar isi blog anda ? Kalau misalnya mau diletakkan di elemen halaman, ikuti langkah berikutnya

8. Masuk ke account blogger anda
9. Pilih menu tata letak / Layout

3. Pilih tambah gadget

4. Pilih html/javascrip

5. Copy paste kode berikut ini :

<a href="http://mrwindu.com/search?max-results=200" target="_blank"><span style="font-weight:bold;">Daftar Isi</span>&raquo;</a>

Selamat Mencoba,Jangan lupa ganti url : http://blog-tutorial4u.blogspot.com dengan alamat url blog anda. Kalau ingin meletakkan daftar isi seperti pada blog ini cari saja di tab sebelumnya yaitu edit html kemudian cari dimana letaknya home dengan menekan ctrl F nah disampingnya itu biasanya ada menu-menu seperti About, Contac Us, RSS dan sebagainya lalu ambil aja salah satu diganti tulisan Daftar Isi, link urlnya ganti http://blog-tutorial4u.blogspot.com/search?max-results=200" gampang kan, ayoo selamat mencoba, biar blog anda makin keren. Pengen lihat penerapannya klik aja di sini

Cara Pasang STT Blogspot atau Cara Pasang Search Term Tagging Blogspot gimana sih ?? Plugin ini memang sangat efektif untuk menjaring keyword dari mesin pencari/search engine. Coba anda amati pada postingan blog ini, dibagian bawah postingan ada tulisan Hasil Pencarian : kan ? Nah dibawahnya itu adalah hasil kerja STT2 Blogspot atau yang lebih dikenal dengan nama STT2. Javascript sangat bagus dipasang diblog anda.

Pertanyaan utamanya scriptnya mana ? Tenang teman saya Bowo pemilik Blogger Sragen sudah membuatkan script tersebut untuk kita semua, kita tinggal pakai aja.

Berikut ini scirpt yang perlu anda copy paste :

<script language="javascript" src="http://users4.jabry.com/sttblogger/widget.asp"></script>

Letakkan script di atas pada setiap akhir postingan, gampangkan ? Nah kalau ingin otomatis muncul, tapi awas pesen yang punya script jangan digunakan untuk membuat AGC Blogspot ya. Bagaimana cara lainnya ?

1. Login di blogger anda
2. Klik Design, pilih edit html, jangan lupa centang tulisan Expand Widget Templates
3. Cari kode berikut : <data:post.body/>
4. Paste script di atas dibawah kode tersebut
5. Simpan template anda

Nah gampangkan ? JIka masih ada hal yang mengganjal dan perlu dibicarakan silakan tinggalkan komentar di kotak komentar berikut ini

Pada postingan kali ini kita akan coba bahas tentang plugin SEO smart link. Apasih itu ? SEO Smart link adalah sebuah plugin untuk wordpress yg fungsinya mengubah setiap kata yang kita tentukan, menjadi sebuah link. Hebatnya lagi plugin tersebut dapat kita pasang di blogspot. Semua kata "Blog" akan otomatis diconvert menjadi link. Tak perlu khawatir Script ini bekerja efektif berkat sentuhan tangan Ganda Manurung, seorang programmer indonesia terbaik.

SEO Smart Link akan membaca setiap kata pada setiap posting. Contohnya, jika sobat memasukkan kata "Blog" pada script tersebut maka otomatis pada semua halaman yang terdapat kata "Blog" akan di link ke alamat url yang telah ditentukan.

Berikut ini cara memasang kode autolink ini di blogspot :

1. Step pertama, Login ke blogger.com lalu ke design(rancangan).
2. Menuju tab edit html. Tekan ctrl+f di keyboard. Dan cari kode </body>
3. Copy dan paste kode scriptnya berikut ini :

<b:if cond='data:blog.url != data:blog.homepageUrl'><script type='text/javascript'>
function autoLink(){
this.keywdHref = new Object();
this.add = function(keyword, href){
if(keyword.substr(0,1) != &quot; &quot;){keyword = &quot; &quot; + keyword;}
this.keywdHref[keyword] = href;
}
this.createAnchor = function(){
var objs = document.getElementsByTagName(&quot;div&quot;);
for(var i=0; i&lt;objs.length; i++){
var obj = objs[i];
if(obj.className.indexOf(&quot;post-body&quot;)&gt;-1){
var content = obj.innerHTML;
for(var keyword in this.keywdHref){
var href = this.keywdHref[keyword];
var newstr = content.replace(keyword, &quot;&lt;a href=&#39;&quot;+href+&quot;&#39;&gt;&quot;+keyword+&quot;&lt;/a&gt;&quot;, &quot;gi&quot;);
obj.innerHTML = newstr;
content = newstr;
}
}
}
}
this.startScript = function(){
var onLoad = window.onload;
window.onload = function(){
if(onLoad){onLoad();}
setTimeout(&quot;f.createAnchor()&quot;, 100);
}
}
}
</script>
<script type='text/javascript'>
var f = new autoLink();
f.add(&quot;Blog&quot;, &quot;http://blog-tutorial4u.blogspot.com/&quot;);
f.startScript();
</script></b:if>


4. Setelah halaman script terbuka silahkan copy pastekan semua kode di script tersebut tepat diatas kode </body>

Keterangan :

* Lihat bagian paling akhir kode dan ganti Blog dengan kata atau kata kunci yang anda pilih.
* dibawahnya Ganti http://blog-tutorial4u.blogspot.com/ dengan alamat url yang dikehendaki.

sumber

Jika teman-teman ada kesulitan tentang pemasangan like button pada postingan sebelumnya sebaiknya anda coba cara lain yang lebih gampang:
1. Pertama anda buka http://developers.facebook.com/docs/plugins/ sehingga akan nampak tampilan sebagai berikut :

2. Pilih Like button yang paling atas, diklik ya, nah nanti ada step yang harus dilalui : pada kotak url blog diisi ya kemudian pilih Get Code

3. Setelah diklik Get Code nanti akan muncul kotak dialog yang menampilkan :




4. Copy kedua html pada kotak di atas kemudian paste di html blog anda setelah biar cepat cari anda dapat tekan Ctrl F dan ketik pada kotak pencarian klik next, stelah ketemu di paste ya

5. Simpan, selesai deh, silakan mencoba semoga berhasil

Pada postingan kali ini kita akan coba mengurai sedikit tentang Cara Menambahkan / Membuat Tombol Like / Like Button di Blog. Penting ga penting sih, cuma buat teman-teman yang ingin bersosialisasi lewat facebook button like menjadi sangat penting. Pengunjung tinggal ngeklik tombol like maka postingan kita otomatis akan ngelink ke wallnya pengunjung tadi. asyik kan, tidak merepotkan semua orang. Tinggal klik, maka selesai semuanya. Contoh penerapannya dapat dilihat di sini

Langkah-langkah/ Cara Menambahkan / Membuat Tombol Like / Like Button di Blog:

1. Masuk ke blogger

2. Tata Letak

3. Edit HTML

4. Klik kotak kecil Expand Template Widget

5. Ctrl+F untuk memudahkan pencarian, lalu cari kode berikut:

(bila ada dua pilih yg paling bawah)

7. Kemudian copy pastekan script berikut ini tepat di bawah kode diatas
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>

8. Simpan dan lihat hasilnya.

Selamat mencoba, jika anda suka tinggalkan komentar di blog ini

http://img87.imageshack.us/img87/5862/image1an1.gif
http://img110.imageshack.us/img110/6218/image2ie0.gif
http://img98.imageshack.us/img98/9617/image3cr0.gif
http://img134.imageshack.us/img134/633/image4hx4.gif
http://img139.imageshack.us/img139/83/image5oa7.gif
http://img509.imageshack.us/img509/6449/image6fu0.gif
http://img527.imageshack.us/img527/6543/image7go9.gif
http://img507.imageshack.us/img507/5774/image8wn8.gif
http://img150.imageshack.us/img150/5784/image9qo1.gif http://img404.imageshack.us/img404/1214/image10vr1.gif
http://img412.imageshack.us/img412/3808/image11pc0.gif
http://img100.imageshack.us/img100/4658/image12du2.gif
http://img132.imageshack.us/img132/4733/image13lj1.gif
http://img145.imageshack.us/img145/7793/image14zg9.gif
http://img412.imageshack.us/img412/4403/image15jc7.gif

Gampang kan, silakan coba, ga bakalan rugi, ha...3x, tidak pengaruh ke trafik kok, tapi siapa tau pengunjung jadi suka kalau lihat foto anda di addressbar kayak blognya pak Yanto, tahu kan.


ini loh, contoh penerapannya di html

<link href='http://img87.imageshack.us/img87/5862/image1an1.gif' rel='SHORTCUT ICON'/>

  </head>

  <body>
  <div id='outer-wrapper'><div id='wrap2'>
  html warna biru adalah html yang anda copy untuk mengubah icon blogger, warna merah adalah kode yang harus anda temukan dengan cara tekan saja Ctrl dan F tinggal ketikan </head> nanti enter, kalau udah ketemu paste kode html warna biru diatas. contohnya anda lihat pada address bar blog ini. html warna hijau adalah kode html setelah </head>

Namanya juga blogger, kalau tidak aneh-aneh dan unik tidak menarik, ya tidak ? Salah satunya membuat tulisan berjalan pada postingan, biar menarik gitu. Nah itu biasa disebut efek Marque. Efek Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau berjalan. Program marquee ini banyak disukai oleh para blogger di dalam blognya karena sifat program ini yang dinamis serta menarik untuk di lihat disamping untuk menghemat tempat pada halaman blog (efisiensi tempat)
Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>.

Atribut yang sering di gunakan adalah :

BGCOLOR="warna" --> Untuk mengatur warna background (latar belakang) teks

DIRECTION="left/right/up/down" --> Mengatur arah gerakan teks

BEHAVIOR="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan

Scroll --> teks bergerak berputar
Slide--> teks bergerak sekali lalu berhenti
Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)

TITLE='pesan" --> Pesan akan muncul saat mouse berada di atas teks

SCROLLMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semajin cepat gerakannya.

SCROLLDELAY="angka" --> Untuk mengatur waktu tunda gerakan dalam mili detik

LOOP="angka|-1|infinite" --> Mengatur jumlah loop

WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen

Agar lebih jelas akan saya sertakan contohnya :

Contoh marquee dari gerakan :

<MARQUEE align="center" direction="right" height="200" scrollamount="2" width="30%">

Gerakan dari kanan ke kiri

</MARQUEE>



Gerakan dari kanan ke kiri



ganti kata "left" dengan keinginan anda yaitu bisa : left, up, down .

Contoh marquee dari perilaku gerakan :

<MARQUEE align="center" direction="left" height="200" scrollamount="3" width="70%" behavior="alternate">

gerakan menurut perilaku

</MARQUEE>

Hasilnya :

ganti kata "left" dengan keinginan anda yaitu bisa : left, up, down .

Contoh marquee dari perilaku gerakan :



Gerakan menurut perilaku



Nah kalau ingin mengganti tulisan berjalan dengan link bagaimana ? Atau gerakan dari bawah ke atas biar enak gimana ?

Copy aja kode HTML berikut :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">

<a href="http://mrwindu.com" target="new">mrwindu dot com</a><br/>

<a href="http://tik-mrwindu.blogspot.com" target="new">Teknologi Informasi dan Komunikasi </a><br/>

<a href="http://blog-tutorial4u.blogspot.com" target="new">Blog Tutorial 4 U </a><br/>

<a href="http://mrwindu-back2nature.blogspot.com" target="new">Back to Nature</a><br/>

</marquee>


Lihatlah hasilnya sebagai berikut :



mrwindu dot com


Teknologi Informasi dan Komunikasi


Blog Tutorial 4 U


Back to Nature




Selamat Mencoba, jangan lupa tinggalkan komentar anda, terima kasih

Kalau pada postingan sebelumnya kita membahasa tentang cara menambahkan text area pada blog, nah pada postingan kali ini kita akan coba variasi lain yakni text area dengan menggunakan tombol highlight. Tombol highlight ini akan memudahkan bagi para pengunjung untuk mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna tatkala text ataupun kode-kode yang di berikan dalan jumlah yang sangat banyak dan ini akan mengurangi resiko tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk membuat text area dengan menggunakan highlight ini silahkan anda copy kode HTML di bawah :

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">contoh text area dengan highlight</textarea></p></div></form>

Lihatlah hasilnya sebagai berikut :


Kalau yang ditambahkan kode HTML bagaimana ? caranya sama tinggal anda ganti tulisan contoh text area dengan highlight dengan kode HTML contoh nya :



Kalau tulisan Highlight All diganti Tulisan lain boleh ? boleh aja coba lihat contohnya :


Silakan coba semoga bermanfaat

Bagaimana sih menambahkan Text Area pada blog ? Lalu untuk apa Text area itu dibuat ? Biasanya text area ini di gunakan untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh para pengunjung. Cara membuatnya tidak sulit kok, silakan coba tips berikut :

Masuklah ke dalam postingan baru atau elemen halaman blog anda. Jika anda ingin meletakkan text area pada postingan silahkan anda Copy kode di bawah ini :

<p align="center"><textarea name="code" rows="6" cols="20"> Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area </textarea></p>

Hasilnya :

Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area

Keterangan : rows="6", menunjukan tinggi dari text area, jadi jika anda menginginkan text area yang tinggi maka silahkan ganti angka " 6 tadi dengan angka yang lebih tinggi nilainya.

Cols="20", menunjukan lebar dari text area. Jika anda menginginkan text area yang lebar maka silahkan ganti angka " 20 " tadi dengan angka yang lebih tinggi nilainya.

Jika anda ingin menambahkan pada elemen halaman, caranya anda tinggal masuk pada dashboard, pilih design, terus pilih page elemen, tambahkan widget, pilih html, lalu paste kode di atas.

Gampangkan ? Nah silakan coba mudah-mudahan bermanfaat.

Buat teman-teman yang suka mengoleksi template blog atau sekedar goanta-ganti template karena bosan, berikut ini saya akan coba list beberapa blog atau website yang menyediakan template blogger gratis untuk anda. Template-template gratis tersebut yang saya pakai untuk koleksi sekaligus saya pasang di beberapa blog saya :

1. http://www.zoomtemplate.com
2. http://www.premiumbloggertemplates.com
3. http://isnaini.com
4. http://btemplates.com
5. http://blogtemplate4u.com
6. http://www.finalsense.com
7. http://www.bloggertemplatesfree.com



Silakan download sendiri ke alamat-alamat url penyedia template gratis tersebut