Cara Memasang Google Translate Pada Blog Bagian 2

Pada postingan yang ke-24 ini akan membahas tentang Cara Memasang Google Translate Pada Blog Bagian 2
Loh kok ada bagian 2 nya?
Bagian 1 ada disini
Perbedaannya lalu apa?
Pada postingan sebelumnya menggunakan google translate komplit dengan menu drop
Namun pada postingan saat ini menggunakan animasi bendaara dari simbol bahasa tersebut
Penasaran? Ingin menggunakannya?
Mari ikuti tutorialnya

1. Login dahulu di Blogger
2. Masuk ke Dasbor > pilih blog yang akan diedit
3. Pilih Rancangan > pilih Element Laman
4.  Kemudian Klik Tambah Gadget
5. Pilih JavaScript/HTML
6. Kemudian copy kode di bawah 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="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLWeHRt5amYow0CNBCP9cJL79Ssne1LGBgQAYMJ-NFzRLy2IxxFqTbpXo0ev61Vqqv_KHH8xGKI8B_jQpJa0RIK5InasL3JsdFXYjkrlbPGwNHuQuNOJahj-siUX6fWVfwvxHSyHri1zY/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a><br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6fqj-jwZXLzcyQ4tYyU2ecjhd6dP2fQw2XUrPXwoFD_jPzczGTf_zvFJOccnns6XqLrdrZ51VMKTuC-_CZQCszT6xJXnk1yuoYWLfGeIThtBxowSsUHwOB4XvOkwNAy1F6RcspI9Bm0k/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjx9OTaTPOCu9mddcndbBR1JjNL4oFKLbEG6V68mSqN8z47DhjiWevFjnU59QYqkopYlvA7ER-0hKspL5ls4Asp-u2n1uC8y46l9xX_aJZaryo9Ixtqj0KIMn44fnqrlniXbB_1aYZnoC3/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr4yzUoEkOdH3IyWibwkCq50Tob72BdHUyx6fena0Q9fq83DJOgbc17nGJmw2IPgKnFiOr1zGatc5sThyCNPSuhuHdjnWZaCEyN6R3EA1O1eVEeHWq9WckYkWUvUEsVdurjC7wQad4o5tb/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj3mZEfXEUA9dvASqEjsuOXG6BcunuI75TsFzRaWqjaY_GgZfTclx7zCvUAm0_upyq2e_KXmO79XZVvbCjoPjtlU2tdrtrOJougn3jgXAI2OU2Zl8LqR7Ql-y6EcsflwpgReIEnDPSVsM/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6N9sf506-WGb-XCxpTOxgLRdA-nBtShITtsZ9kXKgffD7mdT_VHSOqb_Dd5EkXwwEt38oLzdCEv1duzqYLOAg5EbniA7_f1M4FAwPV2wCWbW36w4LWgcZBmjQQLcI0M5zjGpkEm7rk-I/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a><br /> <br/><br/><br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFu7GBgmuEhlBMaafZa5W1jRSLuD6_J3D2PKPCAkcbod5JXpIs-LhuD1qp1ieocyQ6dzAwTU3kJa9cwBlqiW5TV9M1wEO8vOnJskDHYz9i4GLSqNWPwbdDPWizx_Yy8oNpoKL86PE_a-I/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMbhc_Ab_sFD5JgikQjceam2lbkaq_gJpzolrRnfiYtpoL-ebU7_BLrfqGODlpMXmqbP1LX82QHF1f6zixJ-7lDRD3bbfIbN05CWtARxIshRUe1rPGn2gdF_fgp0Ym0cjN0sUAuCiNJ8E/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqXq20dCPAhcPRbWujOxf_a4KEzOQDArHpYR4lP-iCPqXmkvReaX4fMt4d6gGh3tIXrry6vOP8tchWGEI3cX8Wrn7MVxaXfsAcBgYfo1ZdMOIIBX-5u_bbM4flRq2vSSzW9Y8CbaaMwFZV/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggpVcal-Mfs-NXd1gswUJrA6TgWoMcfjFQfT5rF04Cx7-JMLft03efA0MwoL-0xGQZ59Anv7NLqx6-0ql1g2HGyWWbeuAx8Pr8w_wfB5uwm368YcWc1yUGe_pJo3JIJsRCrmhnXQDnT9U/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCnG8Qcle7Q4RFaucv1t-pUEj9dai6alVMlgqdxrDFVG0mwe_WYUGOsrCjHyAS2IqqKSp5kpT0c1wL88U9DOdu6Po69I-zRzTe_zeTonpaNfCxFrmNG6sYJgdCV8jVaMI_nJo7Wm9s3ew/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6jzfvieyI0ZEkxenS48QcQrq2McyP8ZEzV6lc4V8ZR-t1fPx9nBfaY1Zfvy_9RTuTgKAndlDj8ecjjbX6Qi5qnTlZifP29Q-16IhepxyptmXmIOHLxx6WdOM3VomwtXv8kRBnylXp2q8/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> <br /> </div>

7. Kemudian di paste di tempat yang tadi
8. Simpan


Sekian tutorial tentang Cara Memasang Google Translate Pada Blog Bagian 2
Sambung postingan selanjutnya
Selamat mencoba dan semoga sukses..Amin..
Ditunggu komentarnya ya..

Read More

Cara Memasang Google Translate Pada Blog

Pada postingan yang ke-23 ini saya akan membahas tentang Cara Memasang Google Translate Pada Blog
Fungsinya untuk mengubaha basaha yang ada di blog anda menjadi bahasa yang di inginkan oleh visitor

Langsung saja mari simak tutorialnya

1. Login dahulu di Blogger
2. Masuk ke Dasbor > pilih blog yang akan diedit
3. Pilih Rancangan > pilih Element Laman
4. Kemudian Klik Tambah Gadget
5. Pilih JavaScript/HTML
6. Kemudian copy kode di bawah ini

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>

7. Paste pada window yang tadi
8. Jangan lupa disimpan


Sekian tutorial tentang Cara Memasang Google Translate Pada Blog
Sambung postingan selanjutnya
Selamat mencoba dan semoga sukses..Amin..
Ditunggu komentarnya ya..

Read More

Cara Membuat Artikel Terkait Thumbnail (Related Post) Pada Blog

Pada postingan yang ke-22 ini akan membahas tentang Cara Membuat Artikel Terkait Thumbnail (Related Post) Pada Blog
Sebenarnya tidak beda jauh dengan postingan saya sebelumnya yaitu Cara Membuat Artikel Terkait (Related Post) Pada Blog
Cuman perbedaannya yang sekarang tampilannya menggunakan Thumnail atau Gambar cuplikan (belum saya coba)

Bagi yang penasaran dan ingin segera mencobanya, silakah mengikuti tutorial di bawah ini


1. Login dahulu di Blogger
2. Masuk ke Dasbor > pilih blog yang akan diedit
3. Pilih Rancangan > pilih Edit HTML
4. Jangan lupa untuk centang pada kotak Expand Template Widget
5. Cari kode ]]></b:skin> dengan bantuan CTRL+F atau tekan F3 pada keyboard

6. Copy kode di bawah ini

/*** Featured Categories ***/<br /> img.label_thumb{<br /> float:left;<br /> padding:5px;<br /> border:1px solid #8f8f8f;<br /> background:#D2D0D0;<br /> margin-right:10px;<br /> height:55px;<br /> width:55px;<br /> }<br /> img.label_thumb:hover{<br /> background:#f7f6f6;<br /> }<br /> .label_with_thumbs {<br /> float: left;<br /> width: 100%;<br /> min-height: 70px;<br /> margin: 0px 10px 2px 0px;<br /> adding: 0;<br /> }<br /> ul.label_with_thumbs li {<br /> padding:8px 0;<br /> min-height:65px;<br /> margin-bottom:10px;<br /> }<br /> .label_with_thumbs a {}<br /> .label_with_thumbs strong {}

7. Kemudian paste DIATAS kode ]]></b:skin>
8. Cari kode </head> dengan bantuan CTRL+F atau tekan F3 pada keyboard
9. Copy kode dibawah ini

<script type='text/javascript'> //<![CDATA[ function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;} if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error) {s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdYW8FfG6ocYiFkfUZkYXW-QEnuKhyphenhyphen8R0YzjMjc1Cqm3YphZeZFv9Fy7I_iPsEsqteoe9rm4oWFZ131nWetUV8vc3-JmLP3LsI_3t7CdlxHQ4BUgNasldht4rSUplqwPtUZUpwdXDqtXmS/';} var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true) document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;} else if("summary"in entry){var postcontent=entry.summary.$t;} else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');} else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}} var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;} if(showcommentnum==true) {if(flag==1){towrite=towrite+' | ';} if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;} if(displaymore==true) {if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;} document.write(towrite);document.write('</li>');if(displayseparator==true) if(i!=(numposts-1)) document.write('');}document.write('</ul>');} //]]> </script>

10. Kemudian paste DIATAS kode </head>
11. Simpan
12. Pada pilihan Rancangan kita beralih pada pilihan Elemen Halaman
13. Anda tentukan akan menambahkan dimana letak munculnya dengan klik Tambah Gadget
14. Pilih Java script/HTML
15. Copy kode dibawah ini

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script> <br /> <script type="text/javascript" src="/feeds/posts/default/-/Gadget?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

16. Paste kode di atas dalam JavaScript/HTML tersebut

17. Simpan

Sekian tutorial tentang Cara Membuat Artikel Terkait Thumbnail (Related Post) Pada Blog

Sambung postingan selanjutnya

Selamat mencoba dan semoga sukses..Amin..

Ditunggu komentarnya ya..

Read More

Cara Membuat Artikel Terkait (Related Post) Pada Blog

Pada postingan yang ke-21 ini akan membahas tentang Cara Membuat Artikel Terkait (Related Post) Pada Blog
Sebenarnya apa sih fungsunya Cara Membuat Artikel Terkait (Related Post) Pada Blog?
Fungsinya untuk menampilkan postingan anda yang terkait berdasarkan label yang anda berikan pada postingan yang tertampil tersebut
Mungkin ini juga bermanfaat juga, karena visitor bisa melihat beberapa postingan anda dan merasa nyaman berada di blog anda
Masih penasaran seperti apa?
Lihat langsung ke TKP
Mengingat seberapa pentingnya Cara Membuat Artikel Terkait (Related Post) Pada Blog ini, pasti anda ingin menampilkannya bukan?
Nah bagi yang ingin mencobanya mati ikuti tutorial di bawah ini :

1. Login dahulu di Blogger
2. Masuk ke Dasbor > pilih blog yang akan diedit
3. Pilih Rancangan > pilih Edit HTML
4. Jangan lupa untuk centang pada kotak Expand Template Widget
5. Cari kode <data:post.body/></b:if> dengan bantuan CTRL+F atau tekan F3 pada keyboard
6. Copy kode di bawah ini

<!--related post--><br /> <b:if cond='data:blog.pageType == "item"'><br /> <div class='similiar'><div class='widget-content'><h3>Artikel Yang Sejenis</h3><div id='data2007'/><br /> <script type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 10; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement('ul'); var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i < maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } var li = document.createElement('li'); var a = document.createElement('a'); 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 < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); var txt = document.createTextNode(label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); div1.appendChild(h); div1.appendChild(ul); document.getElementById('data2007').appendChild(div1); } } } function search10(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10'); script.setAttribute('type', 'text/javascript'); 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 = "<data:label.name/>"; var test = 0; for (var i = 0; i < labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length <= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel < maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div></div></b:if><br /> <!--related post-->

7. Kemudian paste DI BAWAH kode <data:post.body/></b:if>
8. Jangan lupa disimpan


Sekian tutorial tentang Cara Membuat Artikel Terkait (Related Post) Pada Blog
Sambung postingan selanjutnya
Selamat mencoba dan semoga sukses..Amin..
Ditunggu komentarnya ya..

Read More