Cara Membuat Judul Blog Berkedip

Cara untuk membuat Cara Membuat Judul Blog Berkedip sangat mudah, kita hanya perlu menyisipkan kode

<blink>JUDUL POSTINGAN ANDA</blink>

Maaf postingannya terlalu ringkas, 

Cara Membuat Tabel dengan Scroll pada Blog

Pada hari ini, saya akan memberikan tutorial yang berjudul Cara Membuat Tabel dengan Scroll pada Blog . Cara ini sering saya gunakan untuk meringkas space iklan dan info blog saya. Cara Membuat Tabel dengan Scroll pada Blog ini memiliki banyak fungsi yaitu meringkas beberapa gadget agar tidak terlalu menempati banyak ruang

Gambar 1.1 Contoh Tabel yang saya pakai

Gambar 1.2 Contoh Tabel yang saya pakai

1. Pertama masuklah ke Dasboard sobat, lalu klik salah satu blog sobat
2. Pilih Tata Letak , lalu Tambah Gadget 
3. Setelah itu akan muncul tab baru, pilih gadget Html Javascript
4. Lalu muncul halaman baru lagi
5. Isi Judul, dan isikan kode berikut pada kontennya

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">
<center> 

Silakan letakan kode HTML disini

</center>
</div>

• Kode bewarna merah adalah lebar dari tabel tersebut (kira kira aja)
• Kode bewarna biru adalah tinggi dari tabel tersebut (kira kira aja)

6. Simpan 

Cara Memasang Kotak Komentar Facebook Pada Setiap Postingan Blog

Malam hari kali ini saya akan memberikan anda sebuah tutorial yang sering di pakai oleh kebanyakan blog ternama, yaitu "Cara Memasang Kotak Komentar Facebook di Setiap Posting Blog"

Gambar 1.1 Kotak Komentar Facebook

Untuk membuatnya juga tidak terlalu membutuhkan banyak kode, kita hanya membutuhkan 1 kode. Tertarik?? Langsung saja kalau begitu
1. Masuk ke Dashboard ~> Blog Sobat ~> Template ~> Edit HTML ~> Lanjutkan ~> Centang Expand Template Widget
2. Cari kode <b:includable id='status-message'> (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian) 
3. Lalu diatas kode yang tadi ada </b:includable> putar mouse anda sedikit ke atas hingga menemukan </b:includable> yang kedua. Setelah itu letakan kode dibawah ini tepat diatas kode yang ke dua

<b:if cond="data:blog.pageType == &quot;item&quot;"> <div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<fb:comments expr:href='data:post.url' num_posts='8' width='650'/>
</b:if>

 Gambar 1.2 Kode yang saya maksud

4. Simpan dan cek salah satu postingan anda

Keterangan:

• Kode bewarna merah adalah ukuran kelebaran kotak komentar facebook

Cara Mengganti / Merubah Favicon Blog

Favicon adalah suatu lambang khusus yang dimiliki oleh setiap blog, favicon dapat dilihat dengan mata telanjang (siapa bilang mata pake baju?). Dan dibawah ini adalah contoh favicon Tutorial Blog

Gambar 1.1 Contoh Favicon

Mungkin untuk kalian yang belum merombak favicon blog akan di beri favicon bawaan oleh pihak blogger.

Dan kali ini Tutorial Blog akan memberikan tutorial Cara Mengganti / Merubah Favicon Blog.

1. Cari gambar yang menurut kalian unik di mbah google. Setelah ketemu simpan gambar tersebut
2. Lalu kunjungi http://www.favicongenerator.com/
3. Upload gambar yang telah kalian dapatkan di kolom yang tersedia lalu klik Generate Favicon

 Gambar 1.2 Upload Favicon

 4. Lalu simpan kembali gambar yang telah dirubah

Gambar 1.3 Simpan gambar

5. Lalu pegi ke Dashboard ~> blog sobat ~> Tata Letak

6.  Klik edit pada menu favicon, dan unggah favicon yang telah disimpan

Gambar 1.4 Masukan Favicon

7. Selesai dan cek blog anda

Cara alternatif jika favicon tidak muncul
1. Pergi ke http://tinypic.com
2. Upload favicon kalian di kolom yang tersedia

Gambar 1.5 Upload favicon di tinypic

3. Lalu anda akan dialihkan ke laman baru, dan copy alamat yang tersedia di kolom ke-4 di notepad

Gambar 1.6 Menyimpan link

4. Setelah itu Masuk ke Dashboard ~> Blog Sobat ~> Template ~> Edit HTML ~> Lanjutkan ~> Centang Expand Template Widget
5. Cari kode dibawah ini (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)

<b:include data='blog' name='all-head-content'/>

6. Letakan kode di bawah ini tepat dibawah kode yang tadi

<link href='favicon.ico' rel='shortcut icon'/>
<link href='http://i50.tinypic.com/20h6igw.png' rel='icon' type='image/gif'/> 

7. Simpan


Cukup disini tutorial kali ini

Mengimport Artikel pada Blog

Lupa Password atau akun sobat dicuri kapan pun bisa terjadi, alangkah baiknya sobat selalu membackup artikel sobat. Jika tidak sobat akan kehilangan blog untuk selamanya T,T. Jika sobat sudah membackup artikel yang ada diblog, sobat bisa saja meneruskan blog sobat tersebut dengan cara membuat blogGAbaru (Hiks,hiks,hiks). Setelah sobat membuat artikel baru, import saja artikel yang telah di backup

1. 1. Pertama masuklah ke Dasboard sobat, lalu klik salah satu blog sobat
2. Setelah itu pilih Setelan ~> Lainnya ~> Impor Blog

Gambar 1.1 Impor Blog

3. Muncul popup impor, silakan pilih artikel yang telah sobat impor dan isi kode captcha

Gambar 1.2 Mengimpor Artikel

4. Pilih Impor Blog

Good Luck

Cara Membackup Artikel pada Blog

Apa fungsi dari membackup Artikel yang ada di blog???

Pertanyaan yang bagus, fungsi dari membackup artikel adalah untuk berjaga jaga jika suatu saat nanti blog kita telah di hapus oleh pihak blogger (Mungkin, hehehe) atau kita bisa juga memindahkan artikel kita ke blog lain. Caranya cukup mudah, simak tutorial ini :D

1. Pertama masuklah ke Dasboard sobat, lalu klik salah satu blog sobat
2. Setelah itu pilih Setelan ~> Lainnya ~> Ekspor Blog

Gambar 1.1 Ekspor Blog

3. Akan muncul popup, klik Unduh Blog

Gambar 1.2 Mengunduh Artikel

4. Silakan kalian tentukan dimana artikel tersebut akan diunduh

5. Lalu pilih Save

Good Luck

Cara menghilangkan kalimat langgan: entri (atom) [ Subscribe to: Post (Atom) ] pada postingan blog :

Apa sih kalimat yang saya maksud? Dibawah ini adalah screenshot untuk kalimat yang saya maksud

Gambar 1.1. Langgan Entri Atom

Mau menghilangkannya agar blog kalian terlihat lebih segar?

1. Masuk ke Dashboard ~> Blog Sobat ~> Template ~> Edit HTML ~> Lanjutkan ~> Centang Expand Template Widget

2. Cari kode <b:include name='feedLinks'/> (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)

3. Setelah ketemu hapus kode yang tadi

Gambar 1.2. Menghapus kode yang tadi

4. Simpan templatenya

Untuk kalimat simpannya tak terlihat

hapus kotak pencariannya 

 

5. Cek blog anda dengan cara merefresh blog anda

 

 Gambar 1.3. Menghilangkan kalimat Langgan Entri Atom

Cara mengganti tulisan komentar pada kotak komentar

1. Pertama masuklah ke Dasboard sobat, lalu klik salah satu blog sobat
2. Pilih Tata Letak , lalu pilih tulisan edit pada posting blog

Gambar 1.1. Pilih menu pada Blogger

3. Setelah itu muncul jendela pop up baru

4. Ganti kalimat komentar dengan kalimat lain (Contoh: Orang Menanggapi Artikel Ini)

Gambar 1.2. Mengganti Kalimat Komentar

5. Setelah kalian ganti, silakan kalian simpan edit-an tersebut

6. Cek blog anda dengan merefresh blog tersebut

Gambar 1.3. Tampilan baru pada kalimat komentar

Cara menyembunyikan judul blog

1. Masuk ke Dashboard ~> Blog Sobat ~> Template ~> Edit HTML ~> Lanjutkan ~> Centang Expand Template Widget

2. Cari kode #Header h1 (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)

3. Setelah ketemu letakan kode di bawah ini tepat dibawah kode yang tadi

display:none;

 4. Simpan templatenya

Untuk kalimat simpannya tak terlihat

hapus kotak pencariannya

Cara mengetahui / mengecheck artikel (postingan) blog yang masuk di google

Cara ini mungkin akan mempermudah kita untuk mengetahui seberapa banyak artikel kita yang telah masuk di google. Mau tahu caranya?

1. Masuk dulu ke Google
2. Setelah itu tuliskan kalimat " site:http://alamatbloganda.blogspot.com " (tanpa kutip)
3. Enter

Nah muncul artikel sobat yang muncul di google. Salam Blogger :D

Cara mengetahui / mengecheck pagerank (pr) blog kita

Siang sobat, kali ini saya akan mengajarkan cara mengecheck pagerank blog. Tapi sebelumnya saya minta maaf karena saya tidak bisa memberi screenshotnya

1. Pertama kunjungi p r checker
2. Masukan URL blog sobat pada kotak yang tersedia
3. Setelah itu akan ada kode chaptca, tulis kode chaptca tersebut pada kolom yang ada
4. Sudah deh, pagerank blog sobat kelihatan

Biasanya kalau blog baru pageranknya 0 jadi jangan panik atau Frustasi
hehehe

Cara menghilangkan tulisan Powered by blogger [ Diberdayakan oleh blogger ] pada blog

Tak asing rasanya jika sobat menemukan Powered by blogger [ Diberdayakan oleh blogger ] pada bagian footer blog anda, Biasanya tulisan ini akan muncul jika sobat menggunakan template bawaan dari blogger. Tampilannya seperti dibawah ini

Gambar 1.1. Kalimat pada bagian footer

Untuk tutorial kali ini saya akan mengajarkan cara untuk menghapus kalimat tersebut

1. Masuk ke Dashboard ~> Blog Sobat ~> Template ~> Edit HTML ~> Lanjutkan ~> Centang Expand Template Widget

2. Cari kode <!-- outside of the include in order to lock Attribution widget --> (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)

3. Setelah ketemu hapus kodeyang ada dibawah kalimat tersebut

<b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
<b:if cond='data:feedbackSurveyLink'>
<div class='mobile-survey-link' style='text-align: center;'>
<data:feedbackSurveyLink/>
</div>
</b:if>

<div class='widget-content' style='text-align: center;'>
<b:if cond='data:attribution != &quot;&quot;'>
<data:attribution/>
</b:if>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>

 Gambar 1.2. Hapus kode yang ada dibawah kalimat tersebut

4. Simpan templatenya
5. Lalu akan muncul kalimat peringatan, klik saja tombol hapus widget

Cara membuat Text Area Pada Blog

Text Area sering digunakan oleh para blogger sebagai kotak untuk menyisipkan kode tukar link maupun tukar banner, namu ada juga yang mengunakan ini untuk menyisipkan kode HTML. Sebenarnya untuk membuat text area itu sangat mudah, contohnya seperti ini

Hai Sekarang kalian sedang membaca postingan berjudul Cara membuat Text Area pada blog, selamat membaca ya :D

Cara membuatnya sangat mudah kok, sisipkan saja kode dibawah ini pada Edit HTML yang ada di postingan

<textarea rows="5" cols="15" onfocus="this.select()" onmouseover="this.focus()" style="display: inline;" name="txt" onclick="this.focus();this.select()">Hai Sekarang kalian sedang membaca postingan berjudul Cara membuat Text Area pada blog, selamat membaca ya :D </textarea>

Belum tahu letak kode Edit HTML?

Cara Membuat Recent Post dengan Tumbnails pada blog

Screenshot:

Gambar 1.1. Recent Post dengan Tumbnails

Mau buat seperti itu, mudah kok

1. Pertama masuklah ke Dasboard sobat, lalu klik salah satu blog sobat
2. Pilih Tata Letak , lalu Tambah Gadget 
3. Setelah itu akan muncul tab baru, pilih gadget Html Javascript
4. Lalu muncul halaman baru lagi
5. Isi Judul, dan isikan kode berikut pada kontennya

<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 = 298;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 5;

home_page = "Alamat Blog";

</script>

<script src="http://tutorialblogger.googlecode.com/files/recentposttumbanail.js" type="text/javascript"></script>

6. Simpan Elemen Tersebut

Cara menyisipkan link pada kotak komentar

Sebenarnya cara menyisipkan link pada kotak komentar itu sama saja dengan cara menyisipkan link pada postingan. Cuma kalau cara menyisipkan link pada kotak komentar menggunakan kode HTML, contohnya seperti di bawah ini

Gambar 1.1. Contoh Link yang saya tinggalkan pada blog teman

Mau buat link seperti itu? Caranya mudah kok

Pada saat nulis sisipkan kode di bawah ini

<a href='http://tutorialseo-blog.blogspot.com'>Tutorial Blogger</a>

Contohnya saya menulis seperti ini

 Kunjungi balik ya sob di <a href='http://tutorialseo-blog.blogspot.com'>Tutorial Blogger</a>

Setelah jadi akan seperti ini

Kunjungi balik ya sob di Tutorial Blogger

Cara membuat form login pada blog

1. Pertama masuklah ke Dasboard sobat, lalu klik salah satu blog sobat
2. Pilih Tata Letak , lalu Tambah Gadget 
3. Setelah itu akan muncul tab baru, pilih gadget Html Javascript
4. Lalu muncul halaman baru lagi
5. Kosongkan Judul, dan isikan kode berikut pada kontennya

Silakan Login melalui blogger <br/><br/><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()"><input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"/><input value="blogger" name="service" type="hidden"/><input value="8" name="nui" type="hidden"/><input value="8" name="naui" type="hidden"/><input value="2" name="fpui" type="hidden"/><input value="3" name="uilel" type="hidden"/><input value="true" name="skipvpage" type="hidden"/><input value="false" name="rm" type="hidden"/><input value="true" name="alwf" type="hidden"/><input value="http://www.blogger.com/login.g" name="roeu" type="hidden"/><input value="0" name="alinsu" type="hidden"/><input value="WbQ8QiJfUvA" name="GA3T" type="hidden"/><div><label for="Email"> Username: <br/><input id="Email" tabindex="1" value="" name="Email" size="20" type="text"/></label></div><div><label for="Passwd"> Password: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Forgot your password?">?</a>) <br/></label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/></div><br/><input id="signin-btn-ns" tabindex="0" value="Sign in" class="ubtn ubtn-block" name="submit" type="submit"/></form>

6. Lalu simpan Elemen tersebut

Hasil akhirnya ada dibawah ini


Silakan Login melalui blogger

Username:

Password: (?)

Cara membuat kotak pencarian multi pada blog

Langsung saja ya tutorialnya

 

1. Masuk ke Dashboard ~> Blog Sobat ~> Template ~> Edit HTML ~> Lanjutkan ~> Centang Expand Template Widget

 Gambar 1.1. Edit HTML

 Gambar 1.2. Lanjutkan

2. Cari kode ]]></b:skin> (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)

3. Setelah ketemu letakan kode dibawah ini tepat diatas kode yang tadi

/** css for the search box */
div#pm-search ul { /* unordered list */
margin-top: 0;
margin-right: 0;
margin-left: 0px;
margin-bottom: 5px;
padding: 0;
}
div#pm-search li { /* each list element */
list-style-type: none; /* don't edit this */
display: inline; /* don't edit this */
cursor: pointer; /* don't edit this */
margin-top: 0;
margin-bottom: 0;
margin-right: 5px;
margin-left: 0px;
text-indent: 0px;
padding: 0;
}
div#pm-search form { /* the search form */
margin: 0;
padding: 0;
}
div#pm-search-h {
display: block; /* don't edit this */
}
div#pm-search-g,
div#pm-search-b,
div#pm-search-t {
display: none; /* don't edit this */
}
div#pm-search input { /* the textbox and submit button */
background-color: transparent;
border: 1px dotted #999;
color: #999;
}
.pm-search-selected { /* which search service is currently selected */
color: #999;
border-bottom: 1px dotted #999;
}
.pm-search-unselected { /* which search services are not selected */
color: #777;
border-bottom: 1px dotted #777;
}

4. Sekarang cari kode </head>
5. Letakan kode yang tadi tepat diatas kode </head>
6. Simpan template tersebut
7. Setelah itu masuklah ke Dasboard sobat, lalu klik salah satu blog sobat
8. Pilih Tata Letak , lalu Tambah Gadget 
9. Setelah itu akan muncul tab baru, pilih gadget Html Javascript
10. Lalu muncul halaman baru lagi
11. Kosongkan Judul, dan isikan kode berikut pada kontennya lalu simpan

<div id="pm-search">
<ul>
<li id="li-h" class="pm-search-selected" onclick="selectH()">here</li><li id="li-g" class="pm-search-unselected" onclick="selectG()">google</li><li id="li-b" class="pm-search-unselected" onclick="selectB()">blogger</li><li id="li-t" class="pm-search-unselected" onclick="selectT()">technorati</li>
</ul>
<div id="pm-search-h">
<form action="http://YOURBLOG.blogspot.com/search" method="get">
<input id="pm-f-h" value="" name="q" size="15" type="text"/>
<input value="Search" type="submit"/>
</form>
</div>
<div id="pm-search-g">
<form action="http://blogsearch.google.com/blogsearch" method="get">
<input id="pm-f-g" value="" name="as_q" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="YOURBLOG.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-b">
<form action="http://search.blogger.com/" method="get">
<input id="pm-f-b" value="" name="as_q" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="YOURBLOG.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-t">
<form action="http://www.technorati.com/search.php" method="post">
<input id="pm-f-t" maxlength="255" name="s" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="searchlet" name="sub" type="hidden"/>
<input value="YOURBLOG.blogspot.com" name="from" type="hidden"/>
<input value="n" name="authority" type="hidden"/>
<input value="n" name="language" type="hidden"/>
</form>
</div>
</div>

 Ingat ganti kode YOURBLOG.blogspot.com 


Dibawah ini adalah gambar dari hasil html yang tadi

Gambar 1.3. Hasil akhir

Membuat auto refresh pada blog

Refresh dalam bahasa indonesia dapat dikatakan adalah penyegaran, tapi apa yang dimaksud refresh pada blog? Mungkin sama saja yang berarti penyegaran / muat ulang. Sekarang auto refresh dapat kita masukan kedalam dunia blog sehingga para pengunjung / visitor sobat tidak perlu repot-repot menekan tombol F5

Berikut cara  Membuat auto refresh pada blog

1. Masuk ke Dashboard ~> Blog Sobat ~> Template ~> Edit HTML ~> Lanjutkan ~> Centang Expand Template Widget

 Gambar 1.1. Edit HTML

 Gambar 1.2. Lanjutkan

2. Cari kode <head> (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)

3. Setelah ketemu letakan kode dibawah ini tepat dibawah kode yang tadi 

<meta http-equiv="refresh" content="10"/> 

Untuk angka yang bewarna merah adalah waktu auto refresh

4. Simpan templatenya

Untuk yang kalimat simpannya tidak terlihat, hilangkan dulu kotak pencariannya

Cara membuat Dropcap pada postingan blog

Pasti kawan-kawan semua sudah mengerti apa itu dropcap? Kalau ada yang belum mengerti akan saya jelaskan secara rinci apa itu dropcap. Drop cap adalah huruf besar pada awal kalimat, biasanya dropcap ini sering ditemukan saat kita sedang membaca surat kabar sebagai awal kalimatnya. Bukan hanya itu dropcap juga biasa dipakai pada MS. Word (Microsoft Word). Sekarang fasilitas dropcap ini bisa kita gunakan untuk awal kalimat pada postingan blog (blogger), ya meskipun caranya agak sedikit susah/rumit. Dibawah ini adalah contoh dropcap pada postingan blog

T

utorial Blogger adalah blog yang bisa dibilang cukup berteman dan tidak sombong


Untuk membuat dropcap pada postingan blog, ikuti langkah dibawah ini
1. Masuk ke Dashboard ~> Blog Sobat ~> Template ~> Edit HTML ~> Lanjutkan ~> Centang Expand Template Widget

 Gambar 1.1. Edit HTML

 Gambar 1.2. Lanjutkan

2. Cari kode ]]></b:skin> (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)

3. Setelah ketemu letakan kode dibawah ini tepat diatas kode yang tadi 

/* Drop Cap
----------------------------------------------- */
.dropcap {
float:left;
color: #000000;
line-height:35px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:70px;
}

4. Simpan templatenya

Untuk yang kalimat simpannya tidak terlihat, hilangkan dulu kotak pencariannya

Menggunakan Dropcap Pada Postingan

1. Buatlah sebuah postingan

2. Klik Edit HTML 

3. Ketik <div class="dropcap">Huruf Besar</div>

Contohnya seperti ini

<div class="dropcap">H</div>ai nama saya Andreano Calvin

Setelah jadi akan seperti ini 

H

ai nama saya Andreano Calvin
 


Semoga Berhasil