How to Use Pokespy

Pokespy is a web-based application that is still in the development stage which is useful for the Pokehunt (Hunters Pokemon) in a Pokemon game GO!
Application of this one was being really hits to the players Pokemon GO in Indonesia, the article of this application helps the players to find the GO Pokemon Pokemon species around them. The factor that makes these applications become indispensable that the players can know the species, location, and how long it will be there tersebeut Pokemon, with Pokemon GO so the players should not worry about safety while playing Pokemon GO.

Admin Terlintas will distribute tutorial using PokeSpy on your Smartphone:

1. Prepare your smartphone, activate the GPS.
2. Prepare Browser (if you can use Chrome) and do not forget Google Maps.
3. Open a browser on your mobile phone (if you use Chrome admin) and visit pokespy.stts.edu
4. Check the upper right corner there is a city code, look for the city where you live:
JOG - Jogja | SUB - Surabaya | MLG - Malang | JKT - Jakarta | BDG - Bandung | DPS - Denpasar | PGK - Pangkal Pinang | SMG - Semarang
5. Choose the Pokemon that you want to capture, click the Pokemon will appear 2 logo Facebook and Maps (Google Maps) select Google Maps (red arrows).
6. Wait a minute, because you will be redirected to Google Maps and glide to the location of the Pokemon.
7. Having arrived at these locations open game POKEMON GO! Catch!

HAPPY HUNTING POKEMON!

Cara Membuat Link Download dari MediaFire

Cara Membuat Link Download dari MediaFire - Bagaimana cara memasang link download seperti file mp3, video, film, gambar wallpaper, file dengan extensi .exe di blog / website supaya orang lain dapat mendownload link tersebut? Tentunya secara langsung untuk membuat link download dan dipasang di blog tidak bisa, jadi harus menggunakan bantuan jasa yang menyediakan tempat untuk upload files di internet. Banyak situs yang menyediakan jasa layanan untuk upload files seperti 4shared, ziddu dan lain-lain. Untuk pembahasan kali ini saya akan share untuk membuat link download menggunakan MediaFire yang menyediakan file upload sampai 10 GB.

Untuk mengupload file-file pada MediaFire, anda harus register dulu (sign up) sehingga nantinya anda akan mendapatkan url address file yang akan dipasang di blog untuk didownload orang lain.

Cara Mendaftar di MediaFire :
1. Silahkan kunjungi http://www.mediafire.com/
2. Klik tulisan Sign up
3. Akan tampil pilihan Basic, Pro, Business. Pilih Get Started pada pilihan Basic
4. Isi form yang disediakan seperti Nama, Email dan Password dan jangan lupa centang pada kotak kecil dekat tulisan I agree to the terms service. Kalau sudah lalu klik Create Account & Continue



5. Lalu buka Email anda dan klik konfirmasi supaya aktif
6. Maka Mediafire akan mengarahkan pada tulisan klik Verify Email



7. Klik Upload (pilih from computer)



8. Lalu pilih Files dan pilih Begin Upload



9. Lalu klik Copy Link yang diberikan di notepad

Saya anggap anda sudah mempunyai link dari Mediafire, dan cara memasang link download di blog, caranya begini : misalnya link dari mediafire yang sudah saya upload seperti https://www.mediafire.com/?5885c30mbukdsxq

Supaya kode tersebut bisa dijadikan link download, maka kode yang akan dipasang pada postingan blog posisinya harus mode HTML (bukan Compose), kodenya seperti dibawah ini :

<a href="https://www.mediafire.com/?5885c30mbukdsxq">Download</a>

Contoh pada postingan seperti ini :

Silahkan anda comot Templates Seo Friendly dengan klik link download dibawah ini :

<a href="https://www.mediafire.com/?5885c30mbukdsxq">Download</a>

Hasilnya seperti ini :

Silahkan anda comot Templates Seo Friendly dengan klik link download dibawah ini :

Download

Nah mudah bukan, sekian postingan yang singkat ini, semoga bermanfaat.

Menambah Elemen Sidebar Sebelah Kiri di Blogspot

Cara Menambah Sidebar Sebelah Kiri - Otak-atik tampilan template blog memang mengasyikkan supaya lebih bagus. Biasanya tangan kita sering iseng dan tidak ada puasnya dengan tampilan blog sekarang ini dan ingin membuat lebih menarik lagi. Nah pada pembahasan kali ini saya akan share bagaimana cara merubah tampilan blog yang semula 2 kolom menjadi 3 kolom yaitu dengan menambah 1 kolom sidebar yang letaknya di sebelah kiri. Simak caranya dibawah ini.

Baca juga : Cara menambah 1 kolom dan 2 kolom di bawah sidebar

Cara Menambah Kolom Sidebar di Sebelah Kiri
1. Buka blog anda
2. Pilih Template => Edit HTML
3. Tekan Ctrl+F dan cari kode css yang mirip seperti dibawah ini

#main-wrapper{padding-left:10px;width:590px;float:$startSide;word-wrap:break-word;overflow:hidden}
#sidebar-wrapper{width:310px;float:right;word-wrap:break-word;overflow:hidden}

4. Lalu tambahkan kode berikut dibawahnya

#sidebarkiri-wrapper {width:160px;float:left;word-wrap:break-word;overflow:hidden;}

5. Penerapannya seperti dibawah ini :

#main-wrapper{padding-left:10px;width:590px;float:$startSide;word-wrap:break-word;overflow:hidden}
#sidebar-wrapper{width:310px;float:right;word-wrap:break-word;overflow:hidden}
#sidebarkiri-wrapper {width:160px;float:left;word-wrap:break-word;overflow:hidden;}

Tampilan gambar di Tata Letak sebelum sidebar kiri ditambah seperti dibawah ini :

6. Pada kode #main-wrapper silahkan ganti width:590px menjadi width:440px yang merupakan lebar dari area posting akan dikecilkan, sehingga menjadi seperti ini

#main-wrapper{padding-left:10px;width:440px;float:$startSide;word-wrap:break-word;overflow:hidden}

7. Cari kode <div id='main-wrapper'>

8. Selanjutnya tambahkan kode berikut diatasnya

<div id='sidebarkiri-wrapper'>
<b:section class='sidebar' id='sidebarkiri' preferred='yes'>
</b:section>
</div>

Kalau dilihat di Tata Letak, jadinya seperti dibawah ini (sidebar kiri telah ditambahkan)

9. Simpan Template

Demikianlah cara menambah sidebar kiri di blogger, silahkan dicoba.

Cara Mendaftar Blog ke Dmoz

Pada pembahasan sebelumnya saya pernah share cara daftar blog ke Technorati, nah kali ini juga akan membahas mengenai cara mendaftarkan blog ke ODP (Dmoz), dimana keduanya juga merupakan directory search engine terbesar. Salah satu cara untuk mengoptimalkan blog dan meningkatkan trafik blog yaitu dengan cara submit ke beberapa directory seperti ODP (Dmoz) dan Technorati.

Baca juga : Cara Daftar Blog di Technorati

Cara Daftar Blog ke Dmoz
1. Buka situs http://www.dmoz.com
2. Pilih World: Bahasa Indonesia: Kesehatan: Kondisi dan Penyakit (pokoknya yang ada hubungannya dengan kategori blog anda)



3. Kalau kategori sudah dipilih lalu pilih “Menyarankan URL” (Suggest URL) yang terdapat pada halaman kanan atas, lihat tanda panah merah pada gambar dibawah ini



4. Selanjutnya akan diarahkan pada form pengisian (isi dengan huruf kecil semua)
- Site URL : diisi dengan nama blog anda
- Title of Site : diisi dengan judul / title blog anda
- Site Description : diisi dengan deskripsi blog anda
- Your Email Address : diisi dengan email anda
- User Verification: : Masukan kode verifikasi yang disediakan
- Lalu tekan Submit

 Selamat mendaftar blog ke dmoz, semoga pembahasan ini bermanfaat.

Begini Cara Daftar Blog di Technorati

Untuk membuat blog agar lebih dikenal alangkah baiknya didaftarkan ke salah satu directory terbesar seperti Technorati. Katanya sih dengan mendaftarkan blog ke Technorati, efeknya bagi blog yaitu dapat meningkatkan trafik blog, jadi tidak ada salahnya kalau kita mencoba daftar dan submit ke directory Technorati.

Cara mendaftar blog ke Technorati
1. Silahkan kunjungi http://technorati.com
2. Kalau sudah masuk ke situs technorati, lalu klik "Join" (di sebelah kanan atas)



3. Lalu isikan data yang disediakan dan juga isi kodenya serta centang pada tulisan "I agree to abide lalu klik "Join"



4. Kalau sudah benar maka akan muncul seperti gambar dibawah ini untuk konfirmasi pendaftaran yang akan dikirim ke Email.



5. Buka Email anda dan klik konfirmasi, kalau sudah maka akan tampil seperti gambar dibawah ini



6. Maka akan tampil menu untuk login, silahkan isi username dan password



7. Lalu klik gambar profil anda di kanan atas dan isikan data yang diberikan untuk edit profil seperti mengisi url blog anda.



8. Masukkan kembali url blog anda seperti gambar dibawah ini dan klik "Claim"



9. Akan muncul gambar baru untuk "Claim a new blog" dan isikan data yang disediakan seperti pada Details, Site description, Site categories, Site tags lalu klik "Proceed to next step"

10. Kalau berhasil akan tampil gambar "Blog Claim Status" lalu klik "Return to profile"



11. Selanjutnya akan tampil gambar seperti dibawah ini, maka klik "Check Claim" pada gambar profil



12. Maka akan tampil gambar yang didalamnya berisi nomor Claim Token seperti dibawah ini dan nantinya akan dikirim ke Email anda.



13. Proses selanjutnya anda harus buat postingan baru yang isi postingannya harus mencantumkan kode Claim Token seperti pada postingan ini : Cara Claim Token Di Technorati.

14. Kalau postingan sudah dipublish lalu kembali ke halaman profil di Technorati dan klik "Verify Claim Token"



15. Kalau muncul gambar seperti dibawah ini berarti anda tinggal menunggu Team Technorati untuk mengevaluasi bahwa blog anda sudah terdaftar di technorati.



Demikianlah cara mendaftar dan submit blog ke technorati, semoga bermanfaat.

Cara Claim Token Di Technorati

Cara Claim Token Di Technorati - Postingan kali ini sebenarnya untuk memverifikasi token yang diberikan oleh Technorati, dimana syarat untuk mendaftar / submit di Technorati ini harus mencantumkan token yang dikirimkan ke email. Disini saya mempunyai kode claim token UWJD99DEJMPD yang nantinya akan dapat mem-verivy claim token tersebut. Nah untuk anda yang ingin submit di technorati yang pasti anda akan diharuskan membuat postingan yang membahas technorati dan harus mencantumkan kode token didalam postingan blog sehingga team technorati akan melihat kalau nomer token yang dikirim telah tercantum dalam postingan.

Simak juga : Cara Daftar Blog di Technorati

Nah sekian dulu postingan mengenai cara claim token technorati, silahkan anda coba mendaftar di technorati supaya blog anda lebih dikenal.

Menyembunyikan Titel Blog Untuk Diganti Logo Di Header

Bagaimana cara menghilangkan title / judul blog di header dan menggantinya dengan logo? Menyembunyikan judul blog di header dan menggantinya dengan logo membuat tampilan blog semakin menarik apalagi desain logo yang ada di header tampilannya bagus akan membuat si pemilik blog merasa senang dan puas kalau melihat logo blog hasil karya sendiri. Nah sekarang simak cara meng-hidden titel blog di header dan diganti dengan logo blog dibawah ini.

Baca juga : Membuat Header dan Menu Navigasi Tidak Bergerak (Tetap Diatas)

Cara Menghilangkan Judul / Titel Blog Di Header
1. Buka blog anda
2. Pilih Template
3. Pilih Edit HTML
4. Tekan Ctrl+F, cari kode yang mirip dengan kode dibawah ini :

#header h1{line-height:1.4em;text-transform:uppercase;letter-spacing:.1em;font:normal normal 20px Georgia, Serif;margin:0 auto;padding:20px px .15em;}

5. Tambahkan kode display:none;

6. Penerapannya seperti dibawah :

#header h1{line-height:1.4em;text-transform:uppercase;letter-spacing:.1em;font:normal normal 20px Georgia, Serif;margin:0 auto;padding:20px px .15em;display:none;}

Cara Mengganti Title BLog Dengan Logo
1. Cari kode yang mirip seperti dibawah ini

#header-wrapper{background:#ccc;width:970px;border:0 solid #dcd9d9;margin:0 auto}

2. Tambahkan kode berikut ini :

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihIcySOpiS1r5ZjAfB4n8lYOp8gCP-n3-k_99WJdCOraaSHiZUs8v0yrJ6vI3SuuluNeiT9Saea0WQvAOkPnokgoXbMG4rw3s_xrHDjEMRFjJFJjnYYO0hUAqtAhEMDVIb0UafZ_e20A72/s1600/logo.jpg) no-repeat;

3. Penerapannya seperti ini :

#header-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihIcySOpiS1r5ZjAfB4n8lYOp8gCP-n3-k_99WJdCOraaSHiZUs8v0yrJ6vI3SuuluNeiT9Saea0WQvAOkPnokgoXbMG4rw3s_xrHDjEMRFjJFJjnYYO0hUAqtAhEMDVIb0UafZ_e20A72/s1600/logo.jpg) no-repeat;width:970px;border:0 solid #dcd9d9;margin:0 auto}

Keterangan : ganti url gambar warna merah dengan url logo blog anda

4. Simpan Template

Demikianlah Cara Menyembunyikan Titel Blog di Header dan Diganti Logo, semoga bermanfaat.

Membuat Header dan Menu Navigasi Tidak Bergerak (Tetap Diatas)

Untuk tutorial blog kali ini saya akan share mengenai cara membuat header (logo header) dan menu navigasi jika di scroll mouse posisinya tidak bergerak dan masih tetap diatas (tidak tertutup artikel yang sedang dibukanya). Widget ini akan melayang di blog atau disebut juga dengan istilah sticky widget. Anda nantinya dapat memilih widget apa yang akan dibuat diam ditempat (pilih menu navigasi atau pilih header). Dengan membuat sticky menu dan sticky header ini akan membuat pengunjung lebih enak melihat menu navigasi tanpa harus menggunakan mouse untuk menscroll naik turun.

1. Membuat Sticky Menu Navigasi :
- Buka blog anda di blogger.com
- Pilih Template => Edit HTML
- Tekan Ctrl+F, cari kode </body> dan letakkan kode berikut diatasnya

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('.nav').css({ 'position': 'relative' });
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>

Keterangan :
Ganti warna merah dengan kode menu navigasi di blog anda, misalnya #navigasi atau #nav

2. Membuat Sticky Header Blog :
- Buka blog anda di blogger.com
- Pilih Template => Edit HTML
- Tekan Ctrl+F, cari kode </body> dan letakkan kode berikut diatasnya

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var stickyHeaderTop = $('.header-wrapper').offset().top;
var stickyHeader = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyHeaderTop) {
$('.header-wrapper').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('.header-wrapper').css({ 'position': 'relative' });
}
};
stickyHeader();
$(window).scroll(function() {
stickyHeader();
});
});
//]]>
</script>

Keterangan :
Ganti warna merah dengan kode header anda misalnya .header atau .header-wrapper atau #header-wrapper

Demikianlah cara membuat sticky menu dan sticky header di blogspot, semoga bermanfaat.

Membuat Ruang Posting Blog Menjadi 2 Kolom Di Homepage

Pasti anda menjumpai blog yang di halaman depan / homepage tampilan untuk tempat posting terbagi menjadi 2 kolom. Tampilan postingan di homepage terbelah menjadi di kolom posting sedangkan kalai Mungkin anda menginginkan blognya khusunya tampilan di homepage menjadi 2 kolom yaitu ruang posting kiri dan ruang posting kanan, tetapi pada halaman lain tempat postingan masih 1 kolom, simak caranya dibawah ini.

Cara membuat postingan di homepage menjadi 2 kolom
1.Login ke blogger
2.Klik Template => Edit HTML
3. Tekan Ctrl+F, cari kode ]]></b:skin> lalu letakkakn kode berikut dibawahnya

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
.post {float:left;margin:0 5px 10px 5px;overflow:hidden;padding:7px 7px 5px;positon:relative;width:274px;height:200px;}
.post h1,.post h2{line-height:1em;margin:0 0 4px;padding:0}
.post h1 a, .post h1 a:visited, .post h1 strong,.post h2 a, .post h2 a:visited, .post h2 strong{font:bold 12px Arial}
.post h1 strong,.post h1 a:hover,.post h2 strong,.post h2 a:hover{color:#111;}
.post-body{font:11px Arial;border-top:none;padding-top:0px;background:none;margin: 5px 10px 5px 10px;text-align:left}
</b:if>
</style>

Keterangan :
Teks warna merah silahkan diubah sesuai lebar dan tinggi kolom posting

4. Simpan Template

Demikianlah cara membagi dua kolom postingan di homepage, semoga bermanfaat.

Static Pages Blogger Bermasalah? Solusinya Begini

Masalah pada halaman statis / static pages yang tidak bisa muncul atau bermasalah seringkali terjadi di blogspot atau blogger. Biasanya masalah dengan halaman statis di blogger ini yang muncul hanya judul postingan saja sedangkan isinya tidak tampil. Mungkin saja masalah static pages yang tidak bisa terbaca ini terjadi karena adanya readmore otomatis / auto readmore yang baru anda pasang di blog. Dan kebanyakan para blogger membuat daftar isi, form contact atau about me diletakkan pada halaman statis seperti pada blog Terlintas yang sedang anda buka ini (pada menu navigasi). Dan url halaman statis biasanya ada tambahan hurup p seperti contoh halaman Daftar Isi yaitu http://lintas-tutor.blogspot.com/p/daftar-isi-terlintas.html.

Cara Memperbaiki Halaman Statis Yang Bermasalah
1. Login ke blogger
2. Pada dasbor, pilih Template => Edit HTML
3. Tekan Ctrl+F, cari kode yang mirip seperti ini

<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>
<div style='float:right;padding:6px 0 0 0;font:normal 12px Arial;'>
<span class='rmlink'><a expr:href='data:post.url'/></span>
</div>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

4. Tambah kode berikut dan letakkan diantaranya :

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

5. Untuk penerapannya seperti di bawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&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>
<div style='float:right;padding:6px 0 0 0;font:normal 12px Arial;'>
<span class='rmlink'><a expr:href='data:post.url'/></span>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/>
</b:if>

6. Simpan Template

Demikianlah Cara Mengatasi Static Pages Yang Tidak Muncul, semoga bermanfaat.

Memasang Widget Cek No Resi JNE, TIKI, Pos Indonesia

Widget Cek Resi JNE, TIKI, Pos Indonesia - Tracking pengiriman / kode nomor resi JNE, TIKI dan Pos Indonesia ini biasa digunakan oleh blog / website yang mempunyai toko online dan biasanya widget cek resi JNE, TIKI dan Pos Indonesia ini diletakkan di sidebar. Widget ini berguna untuk mengetahui proses barang pesanan sampai. Disamping itu widget cek resi ini berguna untuk mengetahui berapa ongkos kirim melalui TIKI, JNE dan tarif kirim Pos Indonesia dan juga bisa menentukan kota asal dan kota tujuan.

Widget Cek Tarif JNE, TIKI, Pos Indonesia




Widget Tarif dan Cek Resi JNE




Widget Tarif dan Cek Resi TIKI




Widget Tarif dan Cek Resi Pos Indonesia

Widget cek no resi pengiriman TIKI, JNE, Pos Indonesia ini bisa anda dapatkan dan Register dulu di situs www.widgetku.com

Nah semoga ulasan ini dapat bermanfaat untuk anda yang mempunyai toko online.

Membagi Elemen Postingan Blog Menjadi Dua Kolom Tanpa Edit HTML

Tutorial blog kali ini akan saya bahas mengenai cara membagi elemen postingan menjadi dua kolom yaitu kolom posting kiri dan kolom posting kanan. Tempat biasa anda memposting artikel biasanya hanya satu kolom, oleh karena itu kita akan membuat variasi kolom postingan membelah menjadi dua kolom.  Mungkin dengan tampilan 2 kolom elemen postingan blog ini akan lebih menarik dan tidak membosankan. Kolom postingan yang akan dibagi dua ini nantinya dapat diatur lebarnya dan jarak antar kolom posting, jadi disesuiakan saja dengan lebar kolom posting blog anda dan untuk memasukkan kodenya harus mode HTML. Contoh gambar postingan yang terbagi 2 kolom seperti dibawah ini.

Cara Membagi Dua Kolom Elemen Posting Blog
Seperti biasa anda menulis artikel tapi didepan tulisan letakkan kode dibawah ini pada mode HTML (bukan Compose)

<table cellpadding="10" cellspacing="10">
<tbody>
<tr>
<td align="justify" valign="top" width="250">Letak  Postingan Sebelah Kiri</td>
<td align="justify" valign="top" width="250">Letak Postingan Sebelah Kanan</td>
</tr>
</tbody></table>

Keterangan :
1. Cellpadding = jarak tepi kolom dengan tulisan, silahkan diganti
2. Cellspacing = jarak antara dua kolom posting, silahkan diganti
3. Width 250 =  lebar kolom posting, silahkan diganti

Demikianlah pembahasan mengenai Membagi Elemen Posting Blog Menjadi Dua Kolom, semoga bermanfaat.

Cara Mengganti Template Baru di Blogspot

Postingan mengenai cara mengganti template di blogspot ini saya sajikan bagi anda yang baru belajar menggeluti dan hobby ngeblog. Sebelum merubah template blog dengan template yang baru, usahakan membackup dulu template lama anda dengan tujuan untuk menjaga kalau terjadi kesalahan atau template yang anda upload kurang cocok, jadi dapat diupload ulang. Biasanya para blogger mencari templates blogger dengan desain yang bagus dan template seo friendly dan fast loading. Template blogger dengan loading cepat membuat anda sendiri terutama pengunjung blog akan merasa senang karena apabila blog anda dilihat pengunjung, loading blog yang dibuka begitu cepat. Banyak jasa penyedia template gratis dan desainya bagus yang dapat anda pilih dan didownload di google. Biasanya file template yang akan didownload masih berupa file .rar atau .zip jadi anda harus install dulu program winrar atau winzip untuk mengekstrak file tersebut. Namun ada juga yang langsung didownload dengan extensi .xml.

Cara Mengganti Template Baru di Blogger
Pertama yang harus anda lakukan yaitu mendownload template yang disediakan di google (cari template yang seo friendly), selanjutnya :
1. Login ke Blogger
2. Pada dasbor, pilih Templates



3. Lalu pilih Cadangkan / Pulihkan



4. Unduh Template Lengkap (backup template pertama anda untuk jaga-jaga kalau terjadi kesalahan)
5. Pilih File (pilih file template yang sudah anda simpan di komputer)
6. Lalu pilih Unggah
7. Selesai

Demikianlah cara upload tempates di blogspot, semoga bermanfaat.

Membuat Efek Marquee di Blogspot

Cara Membuat Efek Marquee - Efek marquee atau teks dengan efek berjalan ini banyak kita jumpai di blog orang lain. Banyak macam efek marquee seperti teks yang bergerak dari kanan dan kekiri, teks bisa bergerak ke atas dan kebawah atau teks akan berhenti apabila mouse diarahkan dan masih banyak efek marquee yang sering dijumpai di blog lainnya. Efek marquee ini untuk cara memasangnya bisa di dalam postingan atau di sidebar blog, jadi terserah mau diletakkan dimana sesuai selera anda.

Karena tampilan efek marquee ini begitu menarik maka banyak para blogger yang senang memasang efek marquee di blog dan dapat menghemat ruang di halaman blog. Untuk membuat efek marquee ini biasanya diawali dengan tag <marquee> dan penutupnya dengan tag </marquee> dan atribut yang dipakai seperti :

1. direction => mengatur arah gerakan
2. behavior => mengatur gerakan
3. slide => teks bergerak dan berhenti
4. alternate => teks bergerak dari kiri dan kekanan
5. scroll => teks bergerak berputar
6. scrollmount => mengatur kecepatan gerakan (makin besar angkanya maka gerakan makin cepat)
7. scrolldelay => mengatur waktu gerakan
8. loop => mengatur jumlah loop
9. bgcolor => mengatur background teks
10. width = mengatur lebar blok teks

Macam-macam efek marquee :

1. Efek Marquee bergerak dari kanan ke kiri

<marquee align="center" direction="right" height="200" scrollamount="2" width="30%">
marquee dari kanan ke kiri
</marquee>

Hasilnya seperti dibawah ini :

marquee dari kanan ke kiri

Keterangan : silahkan ubah right dengan : left atau up atau down

2. Efek marquee bergerak ke bolak-balik

<marquee align="center" direction="left" height="200" scrollamount="3" width="70%" behavior="alternate">
Marquee bergerak ke kanan dan ke kiri
</marquee>

Hasilnya seperti dibawah ini :

Marquee bergerak ke kanan dan ke kiri

3. Efek marquee berhenti jika mouse diarahkan

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center">
Silahkan arahkan mouse disini
</marquee>

Hasilnya seperti dibawah ini :

Silahkan arahkan mouse disini

4. Efek Marquee dengan link didalamnya

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">
<a href="http://lintas-tutor.blogspot.com" target="new">Terlintas</a>
</marquee>

Hasilnya seperti dibawah ini :

Terlintas

Demikianlah tutorial mengenai cara membuat efek marquee di blog, silahkan diotak-atik sendiri.

Cara Membuat Tabel dan Thumbnail di Postingan Blog

Membuat tabel di blog perlu sekali dilakukan misalny tabel untuk tukar link atau blog yang menyajikan tentang daftar harga (blog toko online). Cara membuat tabel dan gambar (thumbnail) di blog ini mudah dilakukan, namun kalau tidak kode pembuatan tabel yang jelas akan kesulitan juga. Untuk menyisipkan gambar didalam tabel pada postingan blog harus dalam mode HTML (bukan compose) agar dapat terbaca dan kalau sudah kembalikan pada mode compose. Nah sekarang simak bagaimana cara membuat tabel dan gambar didalam postingan blog dibawah ini.

Cara Menyisipkan Gambar Didalam Tabel

Kode dasar membuat tabel dan gambar didalam postingan blog seperti dibawah ini :

<table border="1">
<tr>
<td>Judul Gambar 1</td>
<td>Judul Gambar 2</td>
</tr>

<tr>
<td>URL Gambar 1</td>
<td>URL Gambar 2</td>
</tr>
</table>

Keterangan :
1. Judul Gambar diisi dengan judul menurut selera anda
2. URL Gambar diisi dengan gambar anda

Cara Menerapkan Tabel dengan Thumbnail didalam Postingan yaitu buat dulu postingan seperti biasa anda akan menulis artikel di postingan blog dan pasang kode dibawah ini dalam mode HTML (bukan Compose)

Contoh Kode Membuat Tabel dan Gambar yang pertama :

<center>
<table border="1" style="width: 500px;"><caption align="top"><b>Tabel 1 Daftar Blogger</b></caption>
<tbody>
<tr align="center"><th>No.</th> <th>Nama Blog</th> <th>URL Blog </th> <th>Logo Blog</th></tr>

<tr align="center"><td>1.</td> <td>Terlintas</td> <td>http://lintas-tutor.blogspot.com</td><td><a href="http://1.bp.blogspot.com/-hiB1U7U5X14/UvrsKDh-n3I/AAAAAAAACoA/z61YB-eSCVE/s1600/logo.jpg" title="Cara Membuat Tabel dan Thumbnail"><img alt="Cara Membuat Tabel dan Thumbnail" src="http://1.bp.blogspot.com/-hiB1U7U5X14/UvrsKDh-n3I/AAAAAAAACoA/z61YB-eSCVE/s1600/logo.jpg" height="50" width="50" /></a></td></tr>

<tr align="center"><td>2.</td> <td>Terlintas</td> <td>http://lintas-tutor.blogspot.com</td><td><a href="http://1.bp.blogspot.com/-hiB1U7U5X14/UvrsKDh-n3I/AAAAAAAACoA/z61YB-eSCVE/s1600/logo.jpg" title="Cara Membuat Tabel dan Thumbnail"><img alt="Cara Membuat Tabel dan Thumbnail" src="http://1.bp.blogspot.com/-hiB1U7U5X14/UvrsKDh-n3I/AAAAAAAACoA/z61YB-eSCVE/s1600/logo.jpg" height="50" width="50" /></a></td></tr>

<tr align="center"><td>3.</td> <td>Terlintas</td> <td>http://lintas-tutor.blogspot.com</td><td><a href="http://1.bp.blogspot.com/-hiB1U7U5X14/UvrsKDh-n3I/AAAAAAAACoA/z61YB-eSCVE/s1600/logo.jpg" title="Cara Membuat Tabel dan Thumbnail"><img alt="Cara Membuat Tabel dan Thumbnail" src="http://1.bp.blogspot.com/-hiB1U7U5X14/UvrsKDh-n3I/AAAAAAAACoA/z61YB-eSCVE/s1600/logo.jpg" height="50" width="50" /></a></td></tr>
</tbody></table>
</center>

Hasilnya seperti gambar dibawah ini :

Tabel 1 Daftar Blogger

No.	Nama Blog	URL Blog	Logo Blog
1.	Terlintas	http://lintas-tutor.blogspot.com
2.	Terlintas	http://lintas-tutor.blogspot.com
3.	Terlintas	http://lintas-tutor.blogspot.com

Contoh Kode Membuat Tabel dan Gambar yang kedua (bisa untuk Toko Online) :

<center>
<table border="1" style="width: 500px;">
<caption align="top"><b>Tabel 2. Daftar Harga BlackBerry Septermber 2013</b></caption>
<tbody>

<tr>
<td style="background: #d6d6d6; text-align: center;"><span style="color: red;">Harga BlackBerry Q5u</span></td>
<td style="background: #d6d6d6; text-align: center;"><span style="color: red;">Harga BlackBerry Q10</span></td>
<td style="background: #d6d6d6; text-align: center;"><span style="color: red;">Harga BlackBerry Z10</span></td>
</tr>

<tr>
<td style="text-align: center;"><span style="color: lime;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Tcp62b_3CNU47GRKMsSnZtAQm_b7lywNh5jr1aOF5CXhLZLYamxirCC_945Nm31mC4GA8UrrhnmSE98oBxzrjUme3GzMW1sC5Q2irhyphenhyphenMKcRsqnyXMZy0dUA3-QG_yEpSn4QLkyjBhZg/s1600/Harga+BlackBerry+Q5.jpg" title="BlackBerry Q5u"><img alt="Cara Membuat Tabel dan Thumbnail di Postingan Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Tcp62b_3CNU47GRKMsSnZtAQm_b7lywNh5jr1aOF5CXhLZLYamxirCC_945Nm31mC4GA8UrrhnmSE98oBxzrjUme3GzMW1sC5Q2irhyphenhyphenMKcRsqnyXMZy0dUA3-QG_yEpSn4QLkyjBhZg/s1600/Harga+BlackBerry+Q5.jpg" /></a></span><br />
Baru : Rp. 3.950.000,-<br />
Bekas : Rp.<span style="color: lime;"> - </span></td>
<td style="text-align: center;"><span style="color: lime;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDHPc9eqPrXRLFcPCLRzzl7vrbhGLvoSFcjz9fQOIUmnhPnA5RBA81y8Kev-EluOoTzsBmSby74oNDMthjJDjzxvuvnAp4pAce6YkEQnXSExwVeehlQovGQ9Cxr3cv3XiKldgJ3QJtryo/s1600/Harga+BlackBerry+Q10.jpg" title="BlackBerry Q10"><img alt="Cara Membuat Tabel dan Thumbnail di Postingan Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDHPc9eqPrXRLFcPCLRzzl7vrbhGLvoSFcjz9fQOIUmnhPnA5RBA81y8Kev-EluOoTzsBmSby74oNDMthjJDjzxvuvnAp4pAce6YkEQnXSExwVeehlQovGQ9Cxr3cv3XiKldgJ3QJtryo/s1600/Harga+BlackBerry+Q10.jpg" /></a></span><br />
Baru : Rp. 6.950.000,-<br />
Bekas : Rp. -</td>
<td style="text-align: center;"><span style="color: lime;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEFWLiimMLI_c7GBRVX5wB3SXirws0S0ZHtU7hgbaWyosV5u3ytyW3W5M_7He5SdDrT7BMOC8pjDlNSu4yhnUhXXUfL58ZidKElPqoJ4QDD_b8-qUbt_qyxhMcS-Gp0vZETRUd9sIwM8A/s1600/Harga+BlackBerry+Z10.jpg" title="BlackBerry Z10"><img alt="Cara Membuat Tabel dan Thumbnail di Postingan Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEFWLiimMLI_c7GBRVX5wB3SXirws0S0ZHtU7hgbaWyosV5u3ytyW3W5M_7He5SdDrT7BMOC8pjDlNSu4yhnUhXXUfL58ZidKElPqoJ4QDD_b8-qUbt_qyxhMcS-Gp0vZETRUd9sIwM8A/s1600/Harga+BlackBerry+Z10.jpg" /></a></span><br />
Baru : Rp. 6.250.000,-<br />
Bekas : Rp. -</td>
</tr>

<tr>
<td style="background: #d6d6d6; text-align: center;"><span style="color: red;">Harga Blackberry Curve 9320 Armstrong</span></td>
<td style="background: #d6d6d6; text-align: center;"><span style="color: red;">Harga BlackBerry Curve 9220 Davis</span></td>
<td style="background: #d6d6d6; text-align: center;"><span style="color: red;">Harga BlackBerry Curve 9380 Orlando</span></td>
</tr>

<tr>
<td style="text-align: center;"><span style="color: lime;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw6UO98aQjB3tC_av68dUltf_06uE5hoDAufuMV8HCq_FK8JHUyLKIZXGKwRSelrObxbsoKtAzrK9CTeZ36YGkqZ-DCdPhqYjOwjza-bUaMka3CXynbQ7eURRrDnHZlv2l-HnwZYVk0U4/s1600/Harga+Blackberry+Curve+9320.jpg" title="Blackberry Curve 9320 Armstrong"><img alt="Cara Membuat Tabel dan Thumbnail di Postingan Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw6UO98aQjB3tC_av68dUltf_06uE5hoDAufuMV8HCq_FK8JHUyLKIZXGKwRSelrObxbsoKtAzrK9CTeZ36YGkqZ-DCdPhqYjOwjza-bUaMka3CXynbQ7eURRrDnHZlv2l-HnwZYVk0U4/s1600/Harga+Blackberry+Curve+9320.jpg" /></a></span><br />
Baru : Rp. 2.250.000,-<br />
Bekas : Rp. 1.850.000,-</td>
<td style="text-align: center;"><span style="color: lime;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfjqJmMQoCogyvC-zPhvt_30RLw0am9lzqtk-6VAt1lIvYZcQBAvgFSCWYv0zweFZuc8wPXWKBMmnag9r6niVpz7lJG2TRl33Eg9qSlsTwn8yZRvokOzlKUKZDPA247WP7eRQhh54PNeY/s1600/BlackBerry+Curve+9220.jpg" title="BlackBerry Curve 9220 Davis"><img alt="Cara Membuat Tabel dan Thumbnail di Postingan Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfjqJmMQoCogyvC-zPhvt_30RLw0am9lzqtk-6VAt1lIvYZcQBAvgFSCWYv0zweFZuc8wPXWKBMmnag9r6niVpz7lJG2TRl33Eg9qSlsTwn8yZRvokOzlKUKZDPA247WP7eRQhh54PNeY/s1600/BlackBerry+Curve+9220.jpg" /></a></span><br />
Baru : Rp. 1.700.000,-<br />
Bekas : Rp. 1.250.000,-</td>
<td style="text-align: center;"><span style="color: lime;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpcIFfv5Ldi8k5F5fgsdhDNhGa_plzU9y4nqB-aALfTucGwXwUVpvYfZTNAXMV-MirxA6iB8ihNOcOWv6aUrmwXEgKWvd4Z5dNy-GdbpE24QpekUNXjAPRfYhGu-xmwBJ9ZCDkj7U0uns/s1600/BlackBerry+Curve+9380+Orlando.jpg" title="BlackBerry Curve 9380 Orlando"><img alt="Cara Membuat Tabel dan Thumbnail di Postingan Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpcIFfv5Ldi8k5F5fgsdhDNhGa_plzU9y4nqB-aALfTucGwXwUVpvYfZTNAXMV-MirxA6iB8ihNOcOWv6aUrmwXEgKWvd4Z5dNy-GdbpE24QpekUNXjAPRfYhGu-xmwBJ9ZCDkj7U0uns/s1600/BlackBerry+Curve+9380+Orlando.jpg" /></a></span><br />
Baru : Rp. 2.850.000,-<br />
Bekas : Rp. 2.350.000,-</td>
</tr>

</tbody></table>
</center>

Hasil gambarnya seperti dibawah ini :

Tabel 2. Daftar Harga BlackBerry Septermber 2013

Harga BlackBerry Q5u	Harga BlackBerry Q10	Harga BlackBerry Z10
Baru : Rp. 3.950.000,- Bekas : Rp. -	Baru : Rp. 6.950.000,- Bekas : Rp. -	Baru : Rp. 6.250.000,- Bekas : Rp. -
Harga Blackberry Curve 9320 Armstrong	Harga BlackBerry Curve 9220 Davis	Harga BlackBerry Curve 9380 Orlando
Baru : Rp. 2.250.000,- Bekas : Rp. 1.850.000,-	Baru : Rp. 1.700.000,- Bekas : Rp. 1.250.000,-	Baru : Rp. 2.850.000,- Bekas : Rp. 2.350.000,-

Keterangan :
Teks width: 500px bisa anda ubah dengan lebar kolom tabel (disesuaikan saja dengan blog anda)

Demikianlah tutorial mengenai cara membuat tabel dan menyisipkan gambar di postingan blog, semoga bermanfaat.

Cara Membuat Artikel Terbaru Dengan Thumbnail di Blogspot

Recent Posts atau Artikel Terbaru yang baru dipublish atau dipostingkan akan lebih menarik jika ditambah dengan gambar atau thumbnail dan cara meletakkan widget recent post / artikel terbaru ini biasanya di sidebar blog. Tampilan widget recent post ini sangat menarik karena hanya menampilkan hanya judul postingan saja dan menggunakan slide yang turun kebawah. Langsung saja yuk simak cara memasang widget recent posts dengan thumbnail di blog dibawah ini.

Baca juga : Modifikasi Recent Posts dengan Fungsi Next dan Previous

Cara Membuat Recent Posts / Artikel Terbaru dengan Gambar di Blog
1. Login ke blogger
2. Pilih Tata Letak
3. Pilih Tambah Widget
4. Pilih HTML/Java Script.
5. Masukan kode berikut kedalamnya

<style type="text/css">
#rp_plus_img{height:360px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#e9e9e9;
border:solid 1px #a0a0a0;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/lintastutor/rudy/artikelterbaru.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script>
</ul>

Keterangan :
- var numposts = 5; adalah jumlah artikel yang ditampilkan, silahkan ganti menurut selera anda

6. Simpan

Demikianlah tutorial blog mengenai cara memasang artikel terbaru dengan thumbnail, silahkan dicoba dan semoga bermanfaat.

Membuat Related Posts Dengan Thumbnail di Bawah Postingan

Related Posts atau artikel terkait dengan gambar (thumbnail) perlu dipasang di blog untuk mempermudah pembaca blog dalam melihat artikel lain di blog anda. Ada banyak macam widget related posts atau artikel terkait yang bisa dipasang di blog dan biasanya para blogger meletakkan artikel terkait berada di bawah postingan blog, seperti related posts dengan scroll atau related post link witihin dan lain-lain. Nah sekarang simak bagaimana cara membuat dan memasang related posts atau artikel terkait dibawah postingan blog.

Baca juga : Membuat Related Posts Link Within

Cara Membuat dan Memasang Related Posts Thumbnail di Bawah Postingan
1. Buka blog anda
2. Pilih Template
3. Pilih Edit HTML
4. Tekan Ctrl+F, cari kode </head> dan letakkan kode berikut diatasnya

<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 18px; letter-spacing: 2px; font-weight: bold; text-transform: none; color: #5D5D5D; font-family: Arial Narrow; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ border-right: 1px dotted #DDDDDD; color:#5D5D5D; } #related-posts a:hover{ color:black; background-color:#EDEDEF; } </style> <script type='text/javascript'> var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJwlmpTZt_UDfJbhrfQcIWHdaGki43XkMc5XQrboHW3xMHiglclZ9XVERUcvfa3IxIX1aZzFNlAilvBD362irAO1K_xp8_wd8xG2t6fOIDLMPKdfQvLgmuIcxc5odP3goSLhDZaacMR2xn/s1600/no_image.jpg&quot;; var maxresults=5; var splittercolor=&quot;#DDDDDD&quot;; var relatedpoststitle=&quot;Related Posts&quot;; </script> <script src='https://sites.google.com/site/lintastutor/rudy/related-posts-thumbnails.js' type='text/javascript'/></b:if>

5. Cari kode <div class='post-footer-line post-footer-line-1'>

6. Letakkan kode berikut dibawahnya

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script> </div><div style='clear:both'/> <!-- remove --></b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://lintas-tutor.blogspot.com'><img alt='Terlintas' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicz2qce-SKhr5RDYwFwhavDV_wULrenmHJEFxUm7Fz0NTQj4_a1yTM8_fysmZvYbqa-lnraXEk-LG6Nl0WjtmsADr5PrtXDKQhb8p2nPzo1CVvKliK1fRQXdhrnY48zU6cfUiToH9BDC9b/s1600/best+blogger+tips.png'/></a> </b:if></b:if>

Keterangan :
- max-results=5 adalah jumlah artikel yang ditampilkan
- Ganti teks warna biru

7. Simpan Template

Demikianlah cara membuat artikel terkait / related posts dengan gambar, silahkan dicoba.

Cara Mengganti Warna Link di Blogspot

Tampilan blog khususnya pada link bisa saja diganti warnanya atau mungkin akan memberi link dengan garis bawah jika disorot mouse. Link di blog merupakan tautan yang jika diklik akan mengarah pada halaman lain. Supaya pembahasan cara mengganti warna link di blog ini tidak bertele-tele, simak tutorial untuk merubah warna link dibawah ini.

Cara Merubah Warna Link di Blog :
1. Buka blog anda di Blogger.com
2. Pilih Template => Edit HTML
3. Tekan Ctrl+F, cari kode a:link yang mirip seperti contoh dibawah ini

a:link{color:#357798;text-decoration:none}
a:visited{color:#357798;text-decoration:none}
a:hover{color:#cc6600;text-decoration:none}
a img{border-width:0}

Keterangan :
- Angka warna merah silahkan dirubah dengan kode warna sesuka anda
- Tulisan none artinya link tanpa garis bawah, kalau mau garis bawah tinggal ganti dengan underline

4. Simpan Template

Cukup mudah bukan? semoga ulasan ini bermanfaat.

Cara Memberi Tombol Scroll di Kotak Komentar Blog

Fungsi dari memberi scroll pada kotak komentar blogger ini sama dengan tutorial saya sebelumnya yaitu cara pasang tombol spoiler pada kotak komentar blog, dimana akan membuat komentar blog tampilannya semakin ringkas tidak memanjang kebawah. Untuk cara membuat scroll pada kotak komentar blogger tidaklah sulit dan kode yang akan dipasang juga sedikit. Nah simak caranya dibawah ini.

Baca juga : Cara Membuat Scroll pada Semua Widget

Cara Membuat Scroll Pada Kotak Komentar Blog
1. Buka blog anda
2. Pilih Template => Edit HTML
3. Tekan Ctrl+F, cari kode seperti dibawah ini

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
<a expr:name='&quot;comment-&quot; + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

4. Lalu letakkan kode berikut diatasnya

<div style='overflow:auto; width:ancho; height:300px;'>

Keterangan :
Silahkan ubah angka 300px sesuai kehendak anda

5. Simpan template

Demikianlah cara membuat scroll pada kotak komentar blogger, semoga bermanfaat.

Cara Membuat Related Posts Super Cepat

Related Posts atau disebut juga dengan artikel terkait ini sangat baik dipasang di blog dan biasanya para blogger memasang related posts / artikel terkait di bawah postingan blog sehingga memudahkan pengunjung melihat artikel yang lainnya dan otomatis akan menambah pageview blog anda. Pada tutorial blog kali ini saya akan share bagaimana cara membuat related posts fast loading atau artikel terkait loading cepat. Simak caranya dibawah ini.

Simak juga : Cara Membuat Random Post Fast Loading

Cara Membuat Related Post Fast Loading di Blogspot
1. Buka blog anda di blogger
2. Pada dasbor, pilih Template => Edit HTML
3. Tekan Ctrl+F, cari kode </head> dan letakkan kode berikut diatasnya

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write('</ul>');}
//]]>
</script>

4. lalu cari kode <data:post.body/> dan letakkan kode berikut dibawahnya
5. Kalau ditemukan 2 buah kode <data:post.body/> maka pilih kode yang no 2

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4>Related Post</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();</script>
</b:if>

6. Simpan Template

Demikianlah tutorial mengenai cara membuat artikel terkait / related post loading cepat, semoga bermanfaat.