Menampilkan Google Translate di Blogger

Google Translate merupakan tools yang sudah tidak asing lagi di mata para penggemar internet. Sesuai dengan namanya, tools ini menyediakan fitur penerjemahan dari beberapa bahasa. Sekarang, saya akan memberi tahu anda bagaimana cara menampilkannya di blogger.

• Login ke Blogger terlebih dahulu
• Pilih menu Tata Letak-Tambah widget/add widget
• Pilih HTML/Java Script
• Masukkan script code berikut ini

<style>
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
<br />
<div>
<a class="google_translate" href="http://www.blogger.com/blogger.g?blogID=4017651258897972619#" rel="nofollow" target="_blank" title="English"><img align="absbottom" alt="English" border="0" height="32" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwjycGEnLI/AAAAAAAAA1o/7p6S3-tipsA/English_thumb%5B3%5D.png?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="English" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/blogger.g?blogID=4017651258897972619#" rel="nofollow" target="_blank" title="French"><img align="absbottom" alt="French" border="0" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj1AdOWZI/AAAAAAAAA1w/lWUkGNrOFYo/French_thumb%5B5%5D.png?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="French" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/blogger.g?blogID=4017651258897972619#" rel="nofollow" target="_blank" title="German"><img align="absbottom" alt="German" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE5sc_j5UmzUgWtTsuYkQTQoZBOZtDq9ev1RV8IE_9ml91IjAOzFTjvzLQH7x9Rz93E4vWId0HS3-XbomnsTkbfSJvMZ5XSdUHOLtWeD4UFrbKHh7rsZfswUP2S2tQmhUUeNwXlDkjlJWW/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="German" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/blogger.g?blogID=4017651258897972619#" rel="nofollow" target="_blank" title="Spain"><img align="absbottom" alt="Spain" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgmlTdbDFaEtyKkXGeXwkqCt3G9eD6q21zGP4R3tblRibC4ZLPPoEYj_aELDEImCz2TrokPugli56yWp5TlNcL6AekErj7EOHZApYjGocqoPiSMaO2PFZdexK89Tn3LR-IfA0cVLKY1Tgr/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Spain" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/blogger.g?blogID=4017651258897972619#" rel="nofollow" target="_blank" title="Italian"><img align="absbottom" alt="Italian" border="0" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj-14HeyI/AAAAAAAAA2I/TN52dIqkO9Q/Italian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Italian" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/blogger.g?blogID=4017651258897972619#" rel="nofollow" target="_blank" title="Dutch"><img align="absbottom" alt="Dutch" border="0" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkBmKewNI/AAAAAAAAA2Q/43NEAnyNo1I/Dutch_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Dutch" width="24" /></a>
<br />
<br />
<a class="google_translate" href="http://www.blogger.com/blogger.g?blogID=4017651258897972619#" rel="nofollow" target="_blank" title="Russian"><img align="absbottom" alt="Russian" border="0" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkESa-0pI/AAAAAAAAA2Y/i0X4cKgxq3g/Russian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Russian" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/blogger.g?blogID=4017651258897972619#" rel="nofollow" target="_blank" title="Portuguese"><img align="absbottom" alt="Portuguese" border="0" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkG0osjzI/AAAAAAAAA2g/_kM2A16R_Ho/Portuguese_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Portuguese" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/blogger.g?blogID=4017651258897972619#" rel="nofollow" target="_blank" title="Japanese"><img align="absbottom" alt="Japanese" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9TgGjhj2KmtyWptjXEW2ioXafHUtCwj_1W7xiXBae-ZoLxZN805U8EiB9u0-31pAbsvEU1-S0g0OXy6SmxzVQFeMGziRi7CMRi1yxNMch1cqawi2kPdT_neP1jg06K0Ax9xYBw3Wd0SJZ/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Japanese" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/blogger.g?blogID=4017651258897972619#" rel="nofollow" target="_blank" title="Korean"><img align="absbottom" alt="Korean" border="0" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkMouNMKI/AAAAAAAAA2w/L5l6J-Hh8XA/Korean_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Korean" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/blogger.g?blogID=4017651258897972619#" rel="nofollow" target="_blank" title="Arabic"><img align="absbottom" alt="Arabic" border="0" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkPdkvXBI/AAAAAAAAA24/A1LSG1lcuac/Arabic_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Arabic" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/blogger.g?blogID=4017651258897972619#" rel="nofollow" target="_blank" title="Chinese Simplified"><img align="absbottom" alt="Chinese Simplified" border="0" height="32" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwkSgrv4ZI/AAAAAAAAA3A/jQqZ1l6avts/Chinese-Simplified_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Chinese Simplified" width="24" /></a>
</div>
<div 0px="" 0px”="" 3px="" style="font-size: 10px; margin: 8px;">
</div>

Baca juga artikel yang lainnya

Read more »

Membuat Tulisan Read More di Blogger

Apakah sobat blogger pernah melihat blog atau situs-situs yang di bawah postingannya memiliki tulisan read more ? Fitur ini biasanya di pakai oleh para blogger untuk menghemat tempat dan terlihat enak saat dilihat, karena hanya ada beberapa baris tulisan saja dalam setiap judul posting.

Kalo anda mau pasang read more di blog, perhatikan langkah-langkah di bawah :

• Login ke Blogger dengan ID sobat
• Pilih Tata Letak
• Edit HTML, lalu lanjutkan
• Centang expand template widget, dan cari script tulisan </head> dengan menggunakan Ctrl + F
• Lalu masukkan kode berikut ini tepat diatas </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg =  430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

• Jika sudah, cari kode <data:post.body/>
• Ganti tulisan <data:post.body/> dengan tulisan di bawah

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

</script>

<span class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

</b:if>

Semoga Berhasil !!

Read more »

Menambah Gadget Di Bawah Header

Sobat blogger semua pasti sudah tidak asing lagi dengan istilah gadget yang ada di blog. Biasanya, kita bisa menambah gadget di bagian samping atau bawah, tapi sekarang saya akan memberi tahu anda bagaimana membuat gadget di bawah header.

Untuk mengetahuinya, silahkan ikuti langkah-langkah berikut.

• Silahkan anda login ke blogger
• Klik menu Tata Letak
• Pilih Edit HTML, dan beri centang expand template widget
• Cari kode berikut ini dengan menggunakan Ctrl+F

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

• Ganti tulisan di atas dengan tulisan

<b:section class='header' id='header' preferred='yes'>

Selesai, terima kasih telah berkunjung ke blog saya.

Read more »

Membuat Spoiler (Hide/Show) Di Blogger

Tentunya bagi sobat blogger semua yang sudah atau pernah bergabung di dalam diskusi forum internet tidak akan asing lagi melihat fitur dengan nama spoiler. Yaa . . Spoiler adalah fitur dimana kita bisa menampilkan atau memunculkan gambar, tulisan, video dan lain-lain. Bagi anda yang belum pernah melihat bagaimana tampilan dari spoiler, berikut ini tampilannya

Judul Spoiler:

Seperti inilah tampilannya !! Gimana ?? Kalo tertarik silahkan copy script di bawah ini

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Letakkan teks atau kode script (gambar atau video) di sini

 <br>
</div>
</div>
</div>

Untuk memasang Spoiler, ikuti langkah-langkah di bawah :

• Login ke Blogger 
• Pilih New Post atau Entri Baru
• Pilih mode HTML yang terletak di pojok kiri, di samping mode compose
• Copy script yang ada di atas
• Kita dapat mengganti Judul Spoiler, Buka, dan Tutup

Semoga bermanfaat !!

Read more »

Membuat Menu Horizontal Di Bawah Menu Header

Bagi kalian para blogger tentunya sudah sering sekali melihat blog-blog yang blog tersebut memiliki menu horizontal di bawah menu header seperti berikut :

• Home
• My Facebook
• Tukar Link
• Daftar Isi
• Me On PureVolume 

 Cara membuatnya gampang kok. Ikuti langkah-langkah berikut ini :

• Login dulu ke blogger

• Pilih tab "Tata Letak"

• Klik tulisan Tambah gadget yang ada di bawah header

•  Pilih HTML/Java Script
• Copykan kode berikut di kolom konten

<ul class="basictab">

<li class="selected"><a href="http://restinplease.blogspot.com/">Home</a></li>

<li><a href="https://www.facebook.com/profile.php?id=100000528775706">My Facebook</a></li>

<li><a href="http://restinplease.blogspot.com/p/tukar-link.html">Tukar Link</a></li>

<li><a href="http://restinplease.blogspot.com/p/idm-6.html">Daftar Isi</a></li>

<li><a href="http://www.purevolume.com/VENILITYBAND">Me On PureVolume</a>&nbsp;</li>

</ul>

• Ganti tulisan berwarna merah dengan link yang akan dituju setelah judul menu di click, dan tulisan berwarna biru ganti dengan judul menu. Selesai.

Mudah bukan ?? Jangan lupa untuk meninggalkan komentar anda di kolom komentar. Terima kasih.

Read more »