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 Kotak Komentar Facebook dengan Blogger Sejajar (Berdampingan)

Mungkin tutorial ini cukup sulit untuk dipahami dan dimengerti. Karena saya telah 2x gagal dalam pemasangan Gadget keren ini, dan sebelumnya saya telah membuat sebuah artikel yang memiliki tema yang sama yaitu Cara Memasang Kotak Komentar Facebook pada Setiap Postingan Blog

Ok kali ini saya akan memberikan Tutorial yang cukup keren dan sedikit menantang
Alangkah baiknya sebelum kita mulai, anda download dulu template anda (agar resiko tidak terlalu tinggi - Merusak Template)

 Gambar 1.1 Mengunduh template

Mari kita mulai

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

2. Cari kode dibawah ini (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)

</head>

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

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='http://www.facebook.com/Andreanocalvin?ref=tn_tnmn' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
 </script>
<span style="font-size: 30%">Get This!<a href="http://tutorialseo-blog.blogspot.com/2012/10/cara-membuat-kotak-komentar-facebook.html" target="_blank" rel="follow">Tutorial Blogger</a></span> 

• Ganti kode yang saya coret dengan alamat profil Facebook Anda

4.  Lalu cari

]]></b:skin>

5. Letakan kode dibawah ini tepat diatas kode yang tadi\

 .comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px;
cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

6. Simpan template anda terlebih dahulu
7. Setelah itu cari kode

<div class='comments' id='comments'>

8. Pastekan kode dibawah ini tepat dibawah kode yang tadi

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='6' width='650'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

• Kode bewarna merah adalah lebar dari kotak komentar

 TAMBAHAN

• Kebanyakan blog akan memiliki 2 kode <div class='comments' id='comments'>. Jika anda adalah salah satunya, maka letakan kode no 8 dibawah ke-2 kode tersebut
• Jika Kotak komentar belum muncul, maka hapus kode <div class='comments' id='comments'> yang ke-2. Contoh

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<div class='comments comments-page' id='blogger-comments-page'>

Berikut ini adalah hasil akhir dari kode-kode tadi

Gambar 1.2 Hasil akhir

INGAT UNTUK SELALU MEMBACKUP TEMPLATE!!

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 untuk mengetahui atau Melacak artikel kita yang di copy

Setiap orang selalu saja seenaknya mengopy artikel pada blog kita tanpa seizin pemilik blog, mereka belum cukup memahami kalai tulisan itu adalah hasil karya kita sendiri. Namun ada caranya agar kita tahu blog mana yang telah mengopy artikel kita melalui situs web gratis yaitu Copyscape. Simak tutorialnya

1. Kunjungi http://copyscape.com/, lalu masukan url blog sobat pada kolom yang telah tersedia. lalu klik Go

Gambar 1.1 Copyscape

2. Akan muncul alamat blog yang telah mengcopy artikel sobat

Namun ada cara agar artikel sobat tidak di copy dengan cara memasang anti CTRL dan memasang anti klik kanan pada blog

Semoga Bermanfaat

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 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 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 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

Cara menyisipkan video Youtube di postingan Blog

Youtube merupakan sebuah situs yang memiliki fasilitas video sharing (membagi video). Tahukah kalian asal mula Youtube? Pada bulan Februari 2005 Youtube didirikan oleh 3 orang mantan karyawan Paypal yang bernama Chad Hurley, Steve Chen, dan Jamed Karim. Dan pada tahun 2006 youtube akhirnya telah resmi dibeli oleh Google Inc. Senilai 1,65 Milyar US (Matanya pada hijau tuh :p)

Dengan adanya Youtube ditangan Google akhirnya Youtube digandeng dengan Blogger, artinya setiap video Youtube bisa kita bagikan melalui postingan Blogger (Sebagai perangkat pendukung). Untuk menyisipkan video Youtube tidak terlalu sulit atau bisa dikatakan sangat mudah, mari kita bahas bersama-sama

1. Kunjungi www.youtube.com kemudian pilih video yang ingin kalian sisipkan (pastikan video tersebut cocok dengan tema posting)

 2. Setelah telah kalian memilih video perhatikan bagian bawah dari video tersebut, ada tombol Bagi lalu Sematkan. Klik tombol tersebut dan akan muncul sebuah kotak teksarea dengan kode HTML. Copy semua kode tersebut dengan menekan CTRL+C atau Klik kanan -> Copy

Gambar 1.1. Kode yang saya dapatkan

 

3. Setelah kode kalian salin, buatlah sebuat postingan. Lalu klik Edit HTML
Tampilan baru: Edit HTML berada di sisi kiri atas (sebelah kalimat compose)
Tampilan lawas: Edit HTML berada di sisi kanan atas (sebelah kalimay compose)
Paste kode HTML pada tersebut pada akhir postingan atau bisa anda letakan di bagian tengah maupun awal postingan. Jika sudah kalian paste klik compose kembali

4. Sebelum kalian terbitkan, kalian bisa mem-previewnya terlebih dahulu. Setelah kalian sudah mantap pada letak video tersebut silakan kalian terbitkan postingan tersebut

Cara Memasang Google Translate dalam bentuk bendera kotak pada Blog

Pada tutorial yang lalu sebenarnya saya telah membahas postingan yang memiliki tema yang sama. Yaitu “Cara memasang google translate pada blog (Drop Down)” dan “Cara memasang google translate pada blog (Bendera bulat)”, untuk siang hari ini kita akan membahas postingan yang hampir mirip dengan sebelumnya cuma ada sedikit saja yang berbeda. Sudah tahukan apa yang akan kita bahas? (Baca aja tuh judulnya). Postingan ini sengaja saya bagikan buat anda yang menyukai ikon penerjemah dalam bentuk bendera seperti di bawah ini

 Gambar 1.1. Tampilan Google Translate dalam bendera

Bagaimana ikonnya? Keren, biasa, tidak tertarik atau apa?
Oke deh kalau begitu kita mulai tutorialnya
1. Masuk ke Dashboard -> Blog sobat -> Tata letak -> Add Gadget -> HTML/JavaScript
2. Masukan kode yang di bawah ini pada konten elemen tersebut

<form action="http://www.google.com/translate">
<script language="JavaScript">
<!--
document.write ("<input name=u value="+location.href+" type=hidden>")
// -->
</script>
<input value="en" name="hl" type="hidden"/>
<input value="UTF8" name="ie" type="hidden"/>
<input value="" name="langpair" type="hidden"/>
<center>
<input onclick="this.form.langpair.value=this.value" title="Chinese Simplified" value="ro|zh-CN" type="image" height="20" src="http://www.google.com/images/flags/cn_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="English" value="ro|en" type="image" height="40" src="http://www.google.com/images/flags/uk_flag.gif" width="50" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Greek" value="ro|el" type="image" height="20" src="http://www.google.com/images/flags/gr_flag.gif" width="30" name="langpair"/>
<br/>
<input onclick="this.form.langpair.value=this.value" title="Hindu" value="ro|hi" type="image" height="20" src="http://www.google.com/images/flags/in_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="German" value="ro|de" type="image" height="20" src="http://www.google.com/images/flags/de_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Dutch" value="ro|nl" type="image" height="20" src="http://www.google.com/images/flags/nl_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Russian" value="ro|ru" type="image" height="20" src="http://www.google.com/images/flags/ru_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Bulgarian" value="ro|bg" type="image" height="20" src="http://www.google.com/images/flags/bg_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Polish" value="ro|pl" type="image" height="20" src="http://www.google.com/images/flags/pl_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Czech" value="ro|cs" type="image" height="20" src="http://www.google.com/images/flags/cz_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Croatian" value="ro|hr" type="image" height="20" src="http://www.google.com/images/flags/hr_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="French" value="ro|fr" type="image" height="20" src="http://www.google.com/images/flags/fr_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Italian" value="ro|it" type="image" height="20" src="http://www.google.com/images/flags/it_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Portuguese" value="ro|pt" type="image" height="20" src="http://www.google.com/images/flags/pt_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Spanish" value="ro|es" type="image" height="20" src="http://www.google.com/images/flags/es_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Arabic" value="ro|ar" type="image" height="20" src="http://www.google.com/images/flags/sa_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Japanese" value="ro|ja" type="image" height="20" src="http://www.google.com/images/flags/ja_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Korean" value="ro|ko" type="image" height="20" src="http://www.google.com/images/flags/kr_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Chinese (traditional)" value="en|zh-TW" type="image" height="20" src="http://www.google.com/images/flags/tw_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Danish" value="ro|da" type="image" height="20" src="http://www.google.com/images/flags/dk_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Finnish" value="ro|fi" type="image" height="20" src="http://www.google.com/images/flags/fi_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Norwegian" value="ro|no" type="image" height="20" src="http://www.google.com/images/flags/no_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Swedish" value="ro|sv" type="image" height="20" src="http://www.google.com/images/flags/se_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Catalan" value="ro|ca" type="image" height="20" src="http://www.google.com/images/flags/cl_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Filipino" value="ro|tl" type="image" height="20" src="http://www.google.com/images/flags/ph_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Hebrew" value="ro|iw" type="image" height="20" src="http://www.google.com/images/flags/il_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Indonesian" value="ro|id" type="image" height="20" src="http://www.google.com/images/flags/id_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Latvian" value="ro|lv" type="image" height="20" src="http://www.google.com/images/flags/lv_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Lithuanian" value="ro|lt" type="image" height="20" src="http://www.google.com/images/flags/lt_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Serbian" value="ro|sr" type="image" height="20" src="http://www.google.com/images/flags/rs_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Slovak" value="ro|sk" type="image" height="20" src="http://www.google.com/images/flags/sk_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Slovenian" value="ro|sl" type="image" height="20" src="http://www.google.com/images/flags/si_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Ukrainian" value="ro|uk" type="image" height="20" src="http://www.google.com/images/flags/ua_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Vietnamese" value="ro|vi" type="image" height="20" src="http://www.google.com/images/flags/vn_flag.gif" width="30" name="langpair2"/>
<h6>Widget By <u><a href='http://tutorialseo-blog.blogspot.com/2012/04/cara-memasang-google-translate-dalam.html'>Tutorial Blogger</a></u></h6>
</center>
</form>

1.       3. Setelah itu simpan elemen tersebut

Cara Memasang Tombol Share To Facebook Di Blog

Memasang gadget share facebook pada blog ini bertujuan untuk mempublikasikan atau sharing posting atau artikel blog kita ke teman blogger dan memperluas jaringan blog sobat (Meningkatkan reputasi blog), serta dapat juga mendatangkan banyak pengunjung (Apa bedanya sama reputasi?)/ Untuk membuatnya 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 <span class='post-author vcard'>  (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)

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

<b:if cond='data:post.url'>
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url'><img alt='This Share Facebook' border='0' src='http://img32.imageshack.us/img32/5742/sharefacebook.jpg'/></a>
</b:if>

 Gambar 1.3. Peletakan kode HTML

4. Simpan Templatenya

Untuk yang kalimat simpannya tidak terlihat, hilangkan dulu kotak pencariannya 

Gambar 1.4. Hasil Akhir kode tersebut Klik Disini

Cara Membuat Link Berbentuk Spoiler / Form Button

Cara Membuat Link Berbentuk Spoiler / Form Button sebenarnya, sama saja seperti Cara Menyembunyikan / Menyelipkan Gambar Dengan Spoiler Pada Blog hanya sedikit saja yang berbeda. Cara Membuat Link Berbentuk Spoiler / Form Button jika di klik maka akan menuju ke suatu link sedangkan Cara Menyembunyikan / Menyelipkan Gambar Dengan Spoiler Pada Blog jika di klik akan memunculkan suatu gambar

Dibawah ini adalah contoh dari  Cara Membuat Link Berbentuk Spoiler / Form Button

 Untuk melakukannya bisa di bilang cukup mudah. Berikut adalah cara Cara Membuat Link Berbentuk Spoiler / Form Button:
1. Buatlah sebuah postingan
2. Pilih Edit HTML 

3. Setelah itu masukan script berikut ini

<form action="http://tutorialseo-blog.blogspot.com/" method="get" target="_blank">
<input name="q" type="submit" value="Klik Disini!" />

4. Selesai

Cukup ganti kode yang bewarna merah. Dan  Link dengan spoiler sobat sudah jadi

Selamat Berkreasi ^_^

Cara Menyembunyikan / Menyelipkan Gambar Dengan Spoiler Pada Blog

Ok lanjut saja, berikut adalah contohnya

Berikut adalah Cara Menyembunyikan / Menyelipkan Gambar Dengan Spoiler Pada Blog

1. Buatlah sebuah postingan
2. Pilih Edit HTML

3. Setelah itu masukan script berikut ini

<center><div>
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Lihat Gambar'; }" style="margin: 0px; padding: 0px;" type="button" value="Lihat Gambar" /></div>
<div style="background: #ffffff; border: 0px solid #000; margin: 10px auto; padding: 5px;">
<div style="display: none;">
<img alt="Kumpulan Tutorial | Aksesoris Blog | Dasar dasar Blog | Gadget Blog | Template Blog
" height="200" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/276920_330771053623003_487235119_n.jpg" title="Tutorial Blogger" width="300" /></div>
</div>
</center>

Keterangan:

• Silakan Ganti kode bewarna biru dengan link image lain

4. Selesai

Selamat Berkreasi ^_^