Tutorial Belajar Blog dan SEO Untuk Pemula

Saturday, October 29, 2011

Membuat Tombol Add Comment Dengan Efek Jquery Slider

Pada postingan kali ini saya ingin berbagi informasi tentang bagaimana Membuat Sebuah Tombol Add Comment dengan Efek Jquery. Cara ini sangat cocok untuk blog yang dikunjungi banyak komentar, maka sangat membantu para pembaca untuk menyeret bagian bawah untuk diposting komentar. Intinya adalah, pada saat kita menge klik " Add Comment ", kita akan langsung dibawa ke halaman kotak komentar.

Caranya adalah seperti ini :

1. Masuk Ke Halaman Blogger
2. Klik Design => Edit HTML
3. Centang Expand Widget Templates
4. Cari kode </b:skin>

5. Masukkan kode CSS dibawah ini tepat di atas kode </b:skin>

a.add_comment{text-decoration:none;color:#fff}
.add_comment{float:right;padding:6px 10px;margin:20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;text-align:center;display:inline-block;background:#d43131;background:-moz-linear-gradient(top,#ffaa9a,#f8674b 5%,#d54746);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffa493),color-stop(.03,#f8674b),to(#d54746));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8674b',EndColorStr='#d54746'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8674b',EndColorStr='#d54746')";-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #d1371c;border-bottom:1px solid #9f220d;color:#FFF;text-shadow:0 1px 1px #6f3a02}
.add_comment:hover{background:#c92929;background:-moz-linear-gradient(top,#ff9986,#ee5f43 5%,#d04443);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fa8772),color-stop(.03,#ee5f43),to(#d04443));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee5f43',EndColorStr='#d04443'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee5f43',EndColorStr='#d04443')";border-bottom:1px solid #9f220d}
.add_comment:focus{padding:7px 11px;color:#FFF;text-shadow:0 -1px 1px #894906;border:none;background:#bc2323;background:-moz-linear-gradient(top,#d04443,#ee5f43 95%,#d04443);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#d04443),color-stop(.9,#ee5f43),to(#d04443));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#d04443',EndColorStr='#ee5f43'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#d04443',EndColorStr='#ee5f43')";box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7;-webkit-box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7;-moz-box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7}

6. Cari kode <b:includable id='comments' var='post'>
7. Sisipkan kode dibawah ini tepat bawah kode <b:includable id='comments' var='post'>

<b:if cond='data:blog.pageType == "item"'>
<a class='add_comment' href='#comment-form'>Add a comment</a>
<div class='clear' />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$('.add_comment').click(function(){$('html,body').animate({scrollTop:$(".comment-form").offset().top},1000);});</script></b:if>

8. Simpan & Selesai

Terima Kasih,
Semoga Bermanfaat,

Wednesday, October 26, 2011

Menambahkan Author Box di Bawah Postingan

Author Box yaitu profil singkat sang penulis blog beserta photonya. Author box itu bisa menampilkan biografi singkat diri kita dan juga mungkin bisa menambahkan kontak kita. Dengan menambahkan author box di bawah komentar akan membuat blog kita jelas dan para pengunjung mengerti siapa orang dibelakan blog tersebut.

Berikut ini cara Menambahkan Author Box di Bawah Postingan :
1. Login ke Blogger.
2. Pada halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget

5. Cari kode ]]></b:skin> dan letakan kode berikut di atasnya;

.author-box {
background: #f0f0f0;
margin: 20px 0 40px 0;
padding: 10px;
overflow: auto;
color:#888;
font-family:verdana, sans-serif;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box a{
color:#666;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
}

6. Cari kode <div class='post-footer-line post-footer-line-1'> dan taruh kode berikut ini di bawahnya;

<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p><img alt='avatar' class='avatar avatar-125 photo' height='90' src='URL avatar/photo kita' width='70'/><b>About Author</b><br/>Biografi singkat tentang diri kita<br/></p></div></b:if>

7. Sebelum menyimpan, ganti URL dengan URL photo kita, dan tulis biografi singkat tentang diri kita. Dan juga bisa menganti judul about author, juga bisa mengubah kode css yang disesuaikan dengan tampilan blog kita.
8. Simpan jika sudah selesai.

Terima Kasih,
Semoga Bermanfaat.

Cara Membuat Teks Area Dengan Berbagai Jenis Tampilan

Kali ini saya ingin berbagi informasi tentang Cara Membuat Teks Area Dengan Berbagai Jenis, bagi teman - teman yang belum mengerti silahkan di cek yah .. hehehe

1. Teks Area standar / default

Kode :

<center><textarea rows="5" cols="25" style="display: inline;" name="txt">Isi teks/ kode/ script yang ingin Anda masukan disini.</textarea></center>

Hasil Kode :

Keterangan :
Rows = Tinggi
Cols = Lebar

2. Teks Area dengan button / tombol higtlight

Kode :

Untuk yang ini, adalah memudahkan Pengunjung Blog anda untuk memberi tanda hightlight

<center><form name="copy"><input value="Klik Tandai" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/><textarea rows="5" cols="25" style="display: inline;" name="txt">Isi teks/ kode/ script yang ingin Anda masukan disini.</textarea></form></center>

Hasil Kode :

3. Teks Area dengan onclick hightlight

Untuk contoh yang ini hampir sama dengan textarea yang ada button hightlighnya.

Kode :

<center><textarea rows="5" cols="25" style="display: inline;" name="txt" onclick="this.focus();this.select()">Isi teks/ kode/ script yang ingin Anda masukan disini.</textarea></center>

Hasil Kode :

4. Teks Area Dengan sensitif hightlight

Untuk teks area type ini fungsinya hampir sama dengan teks area yang sebelumnya , tetapi lebih sensitif, maksudnya ketika mouse berada di wilayah teks area walaupun tanpa ngeklik tapi akan mengeblok sendiri,

Kode :

<center><textarea rows="5" cols="25" onfocus="this.select()" style="display: inline;" onmouseover="this.focus()" name="txt" onclick="this.focus();this.select()">Isi teks/ kode/ script yang ingin Anda masukan disini.</textarea></center>

Hasil Kode :

Nb : Jika teman - teman ingin merubah lebar dan tinggi tampilan textarea silahkn ganti angka pada kata " rows " dan " cols ".

Terima Kasih,
Semoga Bermanfaat.

Saturday, September 3, 2011

Cara membuat halaman Under construction

Halaman Under construction biasa nya digunakan saat website yang kamu buat Sedang di perbaiki tampilannya. mungkin dari menu, warna, dan background blogmu. Jadi Fungsi dari Halaman Under construction untuk melakukan renovasi blogmu secara total atau keseluruhan langsung saja kita pelajari.

Login blogmu.
Pilih rancangan
pilih Edit html.
Pilih Save template atau Download template Lengkap pada Text link di Bawah menu.

Kemudian Centang Expand Template Widget.
Cari Code <body> dan </body>.
Kemudian Hapus Code sampai Code jadi <body> ........ </body>. di Hapus.
kemudian Ganti dengan Code berikut.

Save template

Keterangan :

Code berwarna BIRU kamu ganti dengan URL gambar kamu.

Demikian artikel tentang cara membuat halaman under construction.

Terima Kasih,

Semoga Bermanfaat.

Thursday, November 26, 2009

Dapatkan $100 Gratis dari PayPal dan Facebook

Ada program baru yang cukup menggiurkan dalam dunia per-Facebookan, kamu bisa mendapatkan $100 hanya dengan mereferensikan Aplikasi Facebook yang satu ini.

Kamu sudah mendapatkan $1 hanya dengan bergabung dalam program ini, tapi untuk menerima earning kamu harus mengumpilkan $100, setelah itu layanan PayPal Wishlist akan langsung mengirimkan duit ke rekening PayPal kamu.
Sesuai dengan ketentuan pihak Paypal Wishlist, maka penghasilan Anda baru dapat diterima pada tanggal 28 Februari 2010. Tenang masih lama kok

Cara mendaftar:

Login dengan account Facebook Kamu.
Kemudian masuk ke halaman promosi Paypal Wishlist
Masukkan alamat email Paypal yang sudah terverifikasi, kalo belum punya PayPal daftar aja dulu program PayPal Wishlist, urusan verifikasi email PayPal belakangan aja
Langkah terakhir tinggal membuat Wishlist Anda. Lalu share aja langsung ke teman-teman Anda di Facebook.

Apa program PayPal Wishlist is Scam? Jangan pedulikan itu dulu yang penting gabung aja sekarang. Urusan Scam itu urusan belakangan, toh gak keluar duit juga khan

Terima Kasih,
Semoga Bermanfaat.

Wednesday, October 28, 2009

Cara Menonaktifkan Fungsi Klik Kanan Pada Blog

Fungsi klik kanan pada mouse sangat penting peranannya, misalnya untuk melihat kode template, image, membuka halaman link pada blog yang anda kunjungi. Tapi tidak sedikit para bloggers yang menonaktifkan fungsi klik kanan pada blog - nya, Mungkin alasan mereka menonaktifkan fungsi klik kanan adalah "faktor keamanan".

Menurut saya (menonaktifkan fungsi klik kanan pada blog) tidak perlu di lakukan, Karena hanya mempersulit pengunjung dalam "mencari apa yang mereka cari".

Jika cara ini anda anggap perlu untuk keamanan, tambahkan script berikut pada template anda, caranya :

1. Login ke blog anda.

2.Pilih Tata Letak.

3. Klik Edit HTML.

4. Cari kode ]]></b:skin> pada Html anda, copy script di bawah ini !, paste - kan di bawah kode tsb.

<script type='text/javascript'>
//<![CDATA[
var message="";
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if (document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
//]]>
</script>

5. Simpan template.

Terima Kasih,
Semoga Bermanfaat.

Thursday, August 27, 2009

Menampilkan Entri Terbaru Dengan Memanfaatkan Daftar Blog

Pada postingan saya sebelumnya saya membahas tentang menampilkan judul postingan terbaru, dengan mengunakan java script. Sekarang ada cara lagi yang lebih seru. Yang ini menampilkan entri terbaru atau recent post dengan mengunakan fitur dari blogger yaitu "Daftar Blog"

Saat kamu menambahkan gadget, di tata letak. Kita menemui fitur terbaru blogger yaitu "Daftar Blog" Perlihatkan yang Anda baca dengan blogroll dari blog favorit Anda. Nah sekarang bagaimana seandainya blog favorit kita adalah blog kita sendiri, jadinya akan asyik kan?

Dengan fitur Daftar Blog ini kita kan menampilkan entri terbaru kita, dengan menampilkan juga

- Ikon
- Judul dari item terbaru
- Snippet dari item terbaru
- Gambar mini butir terkini
- Tanggal pembaruan terakhir

Sekarang bagaimana cara menampilkan entri terbaru dengan memanfaatkan Daftar Blog? 1. Login ke blogger
2. Pilih Tata Letak --> Tambah Gaget
3. Pilih Daftar Blog --> TAMBAHKAN KE DAFTAR
4. Tambah URL, masukan kode berikut ini:

http://NAMA.blogspot.com/feeds/posts/default/?start-index=2

Untuk entri terbaru kedua

http://NAMA.blogspot.com/feeds/posts/default/?start-index=3

Untuk entri terbaru ketiga

http://NAMA.blogspot.com/feeds/posts/default/?start-index=4

Untuk entri terbaru keempat

Dan seterusnya sesuai dengan keinginanmu, berapa banyak entri terbaru yang ingin kamu tampilkan, tinggal mengantinya dengan start-index=4 angka 4 berarti judul keempat. Ganti NAMA.blogspot.com dengan URL blog kamu sendiri. Untuk entri terbaru pertama kita tinggal memasukan URL blog kita (misal http://aguskristianto.blogspot.com).

Untuk menghilangkan judul blog, sehingga yang muncul hanya judul postingan tambahkan kode berikut ini pada template:

.blog-title {
display:none;
}

Letakkan diatas kode ]]></b:skin>

Terima Kasih,
Semoga Bermanfaat.

Menampilkan Judul Entri Terbaru ( Recent Post )

Masih sama dengan menampilkan judul postingan terbaru, setiap pengunjung akan dapat melihat judul-judul yang pernah kita tulis. Kita dapat menampilkannya di halaman utama blog kita. Judul yang dapat kita tampilkan lebih dari 15 judul. Judul postingan terbaru juga dikenal dengan nama recent post atau new entri.

Caranya sangat mudah, yaitu kita
1. Login ke blog kita,
2. Pilih tata letak, tambahkan gadget,
3. Pilih HTML/Javascript.

Sekarang masukan script berikut ini :

<script src="http://www.geocities.com/uddin_81/recent-post.js"></script> <script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script> <script src="http://NAMABLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"> </script>

Sedikit yang harus kita rubah yaitu:

numposts = 10 angka 10 berarti 10 judul yang akan kita tampilkan
http://NAMABLOG.blogspot.com NAMABLOG harus diganti dengan URL blog kita.

4. Klik Save lalu lihat hasilnya.

Terima Kasih,
Semoga Bermanfaat.

Menampilkan Judul Artikel Yang Terkait (Related Articles by Categories)

Berjalan-jalan ke trik-tips blogging, saya menemukan cara untuk menampilkan judul artikel yang berhubungan. Di trik ini, judul itu di tampilkan di bawah artikel, dan penampilan itu berdasarkan label. Mungkin kita ada label Musik karena kamu hobby main Musik, di Label Musik itu ada 15 judul, maka saat kita melihat salah satu dari judul itu maka 14 judul ada di bawahnya.

Berikut ini langkah-langkah kita untuk menampilkan judul artikel yang berhubungan :

1. login ke Blogger
2. Lalu pilih Tata Letak-->Edit HTML
3. Selanjutnya Expand Widgets Template template kita
4. Cari kode berikut ini

<data:post.body/>

*) untuk blog yang ada "read more" nya akan ditemui 2 kode <data:post.body/>, pilihlah kode yang pertama
5. Kalau sudah ketemu, letakan script berikut ini di bawahnya:


<b:if cond='data:blog.pageType == "item"'><div class='similiar'>
<div class='widget-content'><h3>ARTIKEL TERKAIT</h3><div id='data2007'/><br/><br/><script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;var maxNumberOfPostsPerLabel = 4;var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;maxNumberOfLabels = 3;
function listEntries10(json) {var ul = document.createElement(&#39;ul&#39;);var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;for (var i = 0; i &lt; maxPosts; i++) {var entry = json.feed.entry[i];var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {if (entry.link[k].rel == &#39;alternate&#39;) {alturl = entry.link[k].href;break;}}var li = document.createElement(&#39;li&#39;);var a = document.createElement(&#39;a&#39;);a.href = alturl;
if(a.href!=location.href) {var txt = document.createTextNode(entry.title.$t);a.appendChild(txt);li.appendChild(a);ul.appendChild(li);}}for (var l = 0; l &lt; json.feed.link.length; l++) {if (json.feed.link[l].rel == &#39;alternate&#39;) {var raw = json.feed.link[l].href;var label = raw.substr(homeUrl3.length+13);var k;for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);var txt = document.createTextNode(label);var h = document.createElement(&#39;b&#39;);h.appendChild(txt);var div1 = document.createElement(&#39;div&#39;);div1.appendChild(h);div1.appendChild(ul);document.getElementById(&#39;data2007&#39;).appendChild(div1);}}}function search10(query, label) {
var script = document.createElement(&#39;script&#39;);script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);document.documentElement.firstChild.appendChild(script);}
var labelArray = new Array();var numLabel = 0;
<b:loop values='data:posts' var='post'><b:loop values='data:post.labels' var='label'>textLabel = &quot;<data:label.name/>&quot;;
var test = 0;for (var i = 0; i &lt; labelArray.length; i++)if (labelArray[i] == textLabel) test = 1;if (test == 0) {labelArray.push(textLabel);var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?labelArray.length : maxNumberOfLabels;if (numLabel &lt; maxLabels) {search10(homeUrl3, textLabel);numLabel++;}}</b:loop></b:loop></script></div>
</div></b:if>

6. Klik Save Template, Lalu lihat hasilnya.

Terima Kasih,

Semoga Bermanfaat.