Cara Membuat Kotak Iklan Banner di Blog

Cara Membuat Kotak Iklan Banner di Blog.Panduan blogger untuk blogger pemula.Panduan blogger yang akan membahas,menjelaskan serta membantu sobat blogger semua khususnya yang masih pemula dalam dunia blog.Panduan blogger kali ini akan menjelaskan tentang "Cara Membuat Kotak Iklan Banner di Blog".Sebelumnya perlu diketahui bahwa mempunyai sebuah blog yang mempunyai trrafic lalu lintas yang ramai merupakan dambaan terbesar.Namun ramainya traffic tersebut mungkin tak akan berarti apa-apa jika blog tersebut hanya "nganggur" alias tak menghasilkan uang.

Sebenarnya banyak cara untuk menghasilkan uang dari blog.Sebagai contoh paling sederhana yaitu blog tersebut bisa kita jadikan ladang uang/penghasilan dengan cara memberikan layanan pasang iklan banner.Dengan adanya layanan tersebut besar kemungkinan blog yang kita miliki bisa menghasilkan uang,apalagi jika blog yang kita miliki mempunyai traffic yang cukup tinggi.Hal ini semestinya benar-benar dimanfaatkan oleh pemilik blog tersebut.Selain itu juga,dengan adanya layanan tersebut berarti kita memfasilitasi sobat-sobat blogger yang lain untuk berbagi traffic serta menyadiakan tempat untuk mempromosikan produk dari para pemasang iklan benner tersebut.

Dan langsung saja jika sobat blogger tertarik untuk membuat kotak iklan banner di blog,silahkan ikuti langkah-langkah seperti berikut ini :

1. Login ke Blogger

2. Klik Tamplate

3. Klik Edit HTML

4. Klik Lanjutkan

5. Cari kode ]]></b:skin> dengan cara tekan ctrl+f 

6. Copy dan Paste-kan kode di bawah ini di atas kode ]]></b:skin>

#tjoretanakoeads {margin:0px;padding:0px;text-align:center}
#tjoretanakoeads  img {margin:1px 1px;text-align:center;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: 1px 2px 1px#FBFBEE;-moz-box-shadow: 1px 2px 1px #ccc;box-shadow: 1px 2px 1px #FBFBEE;}
#tjoretanakoeads img:hover {-moz-opacity: 0.7;opacity: 0.7;filter:alpha(opacity=70);}

7. Klik Simpan Template

8. Langkah selanjutnya,buka Tata Letak

9. Klik Tambah Gadget dan pilih opsi HTML/JavaScript

10. Copy dan paste kode di bawah ini

 <div id="tjoretanakoeads">
<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
<a href="MASUKKAN-URL" target="_blank" title=" TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
</div>

11. Klik Simpan

Keterangan : Silahkan ganti tulisan yang berwarna Hijau,Biru dan Merah sesuai keinginan sobat 

Read More

Cara Membuat Gambar Melayang di Blog

Panduan blogger yang akan membahas, menjelaskan serta membantu sobat blogger semua khususnya yang masih awam/pemula dalam dunia blog.Panduan blogger kali ini akan membahas tentang "Cara Membuat Gambar Melayang di Blog". Memiliki sebuah blog yang cantik dan menarik merupakan salah satu dambaan bagi setiap blogger.Selain itu juga,dengan memiliki sebuah blog yang cantik menarik bisa menjadi rujukan bagi pengunjung untuk berkunjung ke blog milik kita.Dalam perkembangannya,banyak sekali para blogger berlomba-lomba untuk menjadikan blog miliknya semakin tampil cantik dan menarik.

Banyak sekali langkah-langkah yang bisa ditempuh agar sebuah blog tampil cantik dan menarik.Berbagai cara banyak dibahas oleh sobat blogger di seluruh Dunia termasuk juga di Indonesia.Dalam hal ini,akoe sarankan sobat memiki sebuah "skill" atau kemampuan untuk menjadikan sebuah blog agar tampil lebih menarik.Salah satu cara untuk mempercantik blog adalah dengan memasang gambar/widget yang menarik di blog.Mungkin kalau hanya memasang gambar/widget saja sudah bisa sobat laukan.Tapi dalam panduan blogger ini berbeda,yaitu memasang gambar/widget di agar tampil melayang di blog,sehingga blog sobat akan tampil lebih menarik lagi.

Dan jika sobat tertarik tentang bagaimana caranya memasang sebuah gambar/widget melayang di blog,silahkan ikuti langkah-langkah seperti di bawah ini :

1. Login terlebih dulu ke akun blog sobat
2. Klik Tata Letak
3. Klik Tambah Gadget
4. Pilih Opsi HTML/Java Script
5. Copy dan Paste kode HTML di bawah ini

 Posisi Atas Kiri

<div style="display:scroll;position:fixed;top:0;left:0;">

Isi dengan kode HTML widget/url gambar

</a></div>

Posisi Atas Kanan

<div style="display:scroll;position:fixed;top:0;right:0;">

Isi dengan kode HTML widget/url gambar  

</a></div>

Posisi Bawah Kiri

<div style="display:scroll;position:fixed;bottom:0;left:0;">

Isi dengan kode HTML widget/url gambar  

</a></div>

Posisi Bawah Kanan 

<div style="display:scroll;position:fixed;bottom:0;right:0;">

Isi dengan kode HTML widget/url gambar  

</a></div>

6. Klik Simpan 

Read More

Widget Cek Resi TIKI JNE dan Pos Indonesia

Artikel cara cek resi tiki, jne, pos Indonesia melaluiwidget Blogspot. Anda mempunyai Toko online dari blogspot, atau blog anda menawarkan barang yang cara pengiriman-nya menggunakan jasa pengiriman seperti JNE, TIKI atau POS Indonesia. Setiap pengiriman barang dengan menggunakan Jasa kirim tersebut tentunya klien menginginkan atau meminta informasi Tracking No atau yang populer dengan nama kode nomor resi, nomor resi ini berguna berguna untuk melacak sampai sejauh mana proses barang pesanan sampai. Nah untuk memudahkan pemilik blog atau website dan untuk memudahkan klien mengecek-nya sendiri, pada kesempatan ini saya akan berbagi informasi sebuah widget/gadget untuk pengecekan kode nomor resi jasa pengiriman TIKI, JNE dan POS Indonesia. 

Widget ini memudahkan anda maupun klien agar tidak susah-susah masuk ke situs resmi ketiga jasa kirim tersebut ketika mau mengecek melalui nomor resi.

Cara membuat widget cek nomor resi TIKI, JNE dan pos Indonesia, cukup mudah, anda tinggal copy kode di-bawah dan paste pada widget/gadget HTML blog sobat:

Kode Tracking/nomor resi JNE:

    <img style="width: 126px; height: 67px;" src="http://i.imgur.com/JzyLE.png" alt="" title="" />

    <form action="http://www.jne.co.id/index.php" method="get" name="input" target="_new2">

    <input type="hidden" name="mib" value="tracking.detail" />

    JNE: <input name="awb" type="text" />

    <input type="submit" value="Submit" /></form>

Tampilan dari kode cek no resi JNE diatas akan seperti ini:

JNE: 

Kode Tracking/nomor resi TIKI:

    <img style="width: 126px; height: 67px;" src="http://i.imgur.com/Wlfnn.jpg" alt="" title="" />

    <form method="post" action="http://www.tiki-online.com/tracking/track_single" name="input" target="_blank">TIKI:<input id="TxtCon" name="TxtCon" type="text">

    <input id="button" name="button" value="Submit" type="submit"></form>

Kode Tracking/nomor resi POS:

    <img style="width: 126px; height: 67px;" src="http://i.imgur.com/K0oO2.jpg" alt="" title="" />

    <form method="get" action="http://www.posindonesia.co.id/home/modules/mod_search/tmpl/libs/lacakk1121m4np05.php" name="input" target="_blank">POS:<input name="barcode" type="text">

    <input value="Submit" type="submit"></form>

Bagaimana mudah bukan cara membuatnya? Mudah-mudahan dengan menggunakanblog widget cara cek no resi pengiriman tiki, jne dan pos Indonesia anda dan klien anda semakin mudah dan bisnis semakin lancar...

Read More

Widget sms gratis di blog

Widget sms gratis di blog- maraknya penggunaan HP tidak terlepas dengan cara berkomunikasi yang biasa digunakan yaitu telepon dan SMS. Berbicara seputar SMS, mungkin kita sudah terbiasa kirim sms melaui HP kita, Nah sekarang bagaimana kalau kirim SMSnya melalublog anda? Apalagi setiap orang bisa memanfaatkannya baik itu anda sendiri sebagai pemilik blog maupun pengunjung blog anda, dan yang pastinya pemakaiannya semuanya GRATIS. Bagaimana bisa? Caranya gampang kok, cara pemakaiannya pun sama seperti kita kirim sms seperti pada HP.

Disini saya akan memberikan beberapa kode HTML yang bisa anda pasang di pada bloganda. Pemasangan widget sms gratis ini penempatannya pada gadget/widget seperti halnya pemasangan banner seperti yang sudah saya jelaskan di artikel cara membuat banner blog.

Berikut adalah beberapa kode-nya:

Kode1:

<iframe name="I2" src="http://sms-online.web.id/widget"
width="90%" height="350px"> not support
</iframe>
<center>
<a href=”http://jasapembuatanblog-murah.blogspot.com”>Widget SMS Gratis</a>
</center>

*warna biru, diganti dengan nama blogspot kamu

Tampilan widget sms gratis kode 1 setelah dipasang:

Kode 2:

<!-- Start SMS gratis -->

<iframe src="http://www.freesmsvoip.com/index.php?do=widget"width="200"height="260&quot; frameborder="0" scrolling="auto"></iframe>

<!-- end SMS Gratis -->

*warna biru, silahkan sesuaikan dengan ukuran gadget anda

Tampilan widget sms gratis kode 2 seperti di-bawah ini:

Kode 3:

<iframe name="widgetsms" src="http://www.sms-online.web.id/widget/" width="270" height="350" frameborder="0"></iframe>

Nah.. kalau kode widget sms gratis di blog dengan Kode ke-3 tampilannya adalah sebagai berikut:

Sekarang cara pasangnya kode-kode widget sms gratis tadi di blog sebagai berikut:

1. Login dulu  ke akun blogger Anda 
2. Klik menu rancangan 
3. Klik ‘Tambah Gadget’ (HTML/JavaScript) 
4. Isikan salah satu kode diatas 
5. Simpan deh…

Bagaimana cara memasang widget sms gratis di blog diatas? Sangat mudah bukan.. selamat mencoba.

Read More

Cara membuat efek daun berjatuhan pada blog

Add caption

Satu lagi artikel cara membuat efek pada blog yaitucara membuat efek daun berjatuhan di blogspot, cara ini sangat gampang sekali di praktekan dan mesih menggunakan javascript. Tapi perlu diingat sesuai dengan artikel saya tentang cara mempercantik blogspot, disarankan anda bijak menggunakan efek blogspot ini, jika blog anda sudah menggunakan efek lain seperti efek salju berjatuhan di blog, jikalau terasa berat loading blog anda, maka pilihlah salah satu efek saja.

Berikut cara membuat efek daun berjatuhan pada blogspot anda.

1. Pastikaln anda sudah login ke blogger anda

2. Pada halaman dashboard klik rancangan > Edit HTML

3. Jangan lupa centang Expand widget template.

4. Dengan menggunakan Ctrl+ F, atau tekan F3 cari kode</head>

5. Copy code dibawah dan letakan kode tersebut tepat diatas kode </head> tadi.

<script src='http://arti.master.irhamna.googlepages.com/daun.js'/>

6. Simpan pekerjaan adan dengan menekan tombol SAVE

7. Lihat hasilnya.. bagus kan? ^_^

Demikianlah ke-7 langkah cara membuat efek daun berjatuhan pada blogspotanda, sangat mudah diikuti atau dipraktekan. Selamat mencoba dan Happy blogging.

Read More

Memasang Translate Gambar Bendera di Blog

Kebanyakan blog menggunakan bahasa internasional, yaitu bahasa Inggris dengan tujuan agar blognya dapat dimengerti oleh semua orang diseluruh dunia. Namun jangan khawatir apabila blog yang kita miliki berbahasa Indonesia, dengan menggunakan tambahan widget googletranslate maka blog kita yang berbahasa Indonesia akan dapat diterjemahkan ke dalam beberapa bahasa yang digunakan di dunia, seperti bahasa Inggris, Perancis, Italia, Jerman, Brazilia, Portugal, Yunani, Jepang, Cina, Korea, maupun bahasa Arab. 

Pada kesempatan kali ini saya akan memberikan tutorial kepada teman-teman tentang cara memasang translate yang berupa gambar bendera. Tips ini baru saya dapatkan dari o-om. Baik, langsung saja pada langkah-langkahnya :

1. Pertama login ke blogger terlebih dahulu
2. Klik Tata Letak  
3. Klik tab Elemen Halaman  
4. Klik Tambah Gadget  
5. Pilih Tambah HTML/JavaScriptCopy pastekan code translate di bawah kedalam kolom yang tersedia.

Tampilan Ke-1

Copy Code 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>
<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/AVvXsEhHTrvxu2CUUpgaZWZ0Xi7hQFS8zxvInPfS2POCtsINwK9q0n2f-VDr57RDZKMak5zrTUpT3UknRRtWxOBsQpjFUprXsAmPcSxSPwSzXH82LZEJV9QiM-UVcNtrSdDl1gsfTcC8Ho7HBN4/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<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/AVvXsEiTWyFC8tcPBUsmsDZZua4U417S3pud3lez-8K9xgpwOp5KVVFOX32XA_sEJILfcwwa03g6WRBR_HfNPQumZbIDpkg_kdbUEjJd0aRXhOpBlJ-4ZLdHFdJpvxT4iLQq8BcH1VgBMq1AxEs/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<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/AVvXsEgYULmW2aDYBkeZ5lAQL_NRVoyDs8WlUNgDojwTYaDVsaz5xYPdMf6wQSL7cqxXWibzlaeohZ0juTOlZO1labXvQTAWlDB-CXdGt7tP5pAd5EHI280iVgmrzDADnfJxH-TsT95Al7uPovzX/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<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/AVvXsEjjqYftWEkHXdF29l58Ccvti46BXY5MiubPz4y1dipgDvbJzZ0bUVNgK6P0QAIwSvWM3hr95jUgDXkgniu9C0svlPZ8JUXCrk9tnQE4u5y0huZyma6f7pXmwVA4GXs-VvYs49llOW4qxxOE/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<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/AVvXsEiBXtnwIx5aRZwDv3AvaU2xuLN3fNP0Hkl-JvSLwMM-UgGqgZiI2o32KgYlGAkp6WchocpPx-OR4WKmQsrjWKJCcXJCjVWJt0TcL7s_G2mKk1emDc9bP1fxzZuMjz2LNL0rddJxV6dm1GA/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<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/AVvXsEgx94vagW4I4XtF3O-gS_WTR90hwI6erPF8za-8jA49teZ0qJrFzV1aWXZQwQo4Hi6xIlL_nwgOMqlpkWE_WhK0ro_XISQkUv5p1AXZEGsMfr0x8cycZVp3r0D0g-EouLQNaQaFM0-UAMs/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<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/AVvXsEiJfbFkm2hwYHCicTxaJ4q-HPzN_ISMiwgAap71ze75W69Bzxrl1ISLMIKlBgnaENZlQRjNag9Gx00jf9wm7qfrbU6Epy9nriadiwJV03MRprxVXKaxsh3B2jp1rhXlaHleIb-bF131YyA/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<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/AVvXsEjH2gmL26BlJYF4dygYqvw1s340GtIqjfF03rhJJ_Le-Jelgn86HlCWJ1WD-Vuv0_-t9Mztr5b-zLUUzGRQErFwkwJ_pSTHy6AXOyXqflhB8TxIVYdFr5B6ssiowHdUUrSQf-Yz67Q9MT8/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<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/AVvXsEiBdPZgmpQPIbG8rqUEGe61G1tyhoQQvu5huGx4L5h_PrMm9pgLc0XgMZyF29CZlc0C58HbOFwp_F39q6jIZ_PaQDujKTYhXwTd3Jim2xmv7C_fNB3lmIEUmEi4MijIxU3Z6yHgLsl2kbw1/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<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/AVvXsEgTxB-E8QuFk2THmHivws1crb_H_i54TaLiC8NeiKBlTVUU32P8Iyf18EL8AHA5_XBWDgE1AdrXWKv2r6IJqtJXgUhG0FGKFP4V75-jDX-YzRbftta0tXFX_KOKIhY6wf5FWucVwywaBVA/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<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/AVvXsEhSWqIRAQELEffOqYNw8KQvvEaR5VkPDGs_AfiEIylEu9uAlUK5V_D9GCIojdE0J5gIUaQzuZgHf5LHxnd3_L3f_P-Vd5u8YO2Ey4XB950FX1r004H4i19RyiIs1gaGBUzGx4as-q5neVk/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<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/AVvXsEj0HJLQhpgiQK8EzVscGr2FoADKh_WvKNxB-70uNBXiPXn8zxpZIYEnVGNGc5WNQv23We7cYaMfOaK8Sxxb06KqnUJXlszpqEhX4nFQeR5kVX7utyQ_m_svrc7lUpf45_h3QiMh9qeJNs8/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

</div> <div style=font-size:10px;margin:8px 0px 3px 0px>
by : <a href=http://www.blogspottutorial.com/>BTF</a>
</div>

 Tampilan Ke-2

Copy Code 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>
<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/AVvXsEhHTrvxu2CUUpgaZWZ0Xi7hQFS8zxvInPfS2POCtsINwK9q0n2f-VDr57RDZKMak5zrTUpT3UknRRtWxOBsQpjFUprXsAmPcSxSPwSzXH82LZEJV9QiM-UVcNtrSdDl1gsfTcC8Ho7HBN4/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<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/AVvXsEiTWyFC8tcPBUsmsDZZua4U417S3pud3lez-8K9xgpwOp5KVVFOX32XA_sEJILfcwwa03g6WRBR_HfNPQumZbIDpkg_kdbUEjJd0aRXhOpBlJ-4ZLdHFdJpvxT4iLQq8BcH1VgBMq1AxEs/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<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/AVvXsEgYULmW2aDYBkeZ5lAQL_NRVoyDs8WlUNgDojwTYaDVsaz5xYPdMf6wQSL7cqxXWibzlaeohZ0juTOlZO1labXvQTAWlDB-CXdGt7tP5pAd5EHI280iVgmrzDADnfJxH-TsT95Al7uPovzX/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<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/AVvXsEjjqYftWEkHXdF29l58Ccvti46BXY5MiubPz4y1dipgDvbJzZ0bUVNgK6P0QAIwSvWM3hr95jUgDXkgniu9C0svlPZ8JUXCrk9tnQE4u5y0huZyma6f7pXmwVA4GXs-VvYs49llOW4qxxOE/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<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/AVvXsEiBXtnwIx5aRZwDv3AvaU2xuLN3fNP0Hkl-JvSLwMM-UgGqgZiI2o32KgYlGAkp6WchocpPx-OR4WKmQsrjWKJCcXJCjVWJt0TcL7s_G2mKk1emDc9bP1fxzZuMjz2LNL0rddJxV6dm1GA/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<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/AVvXsEgx94vagW4I4XtF3O-gS_WTR90hwI6erPF8za-8jA49teZ0qJrFzV1aWXZQwQo4Hi6xIlL_nwgOMqlpkWE_WhK0ro_XISQkUv5p1AXZEGsMfr0x8cycZVp3r0D0g-EouLQNaQaFM0-UAMs/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<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/AVvXsEiJfbFkm2hwYHCicTxaJ4q-HPzN_ISMiwgAap71ze75W69Bzxrl1ISLMIKlBgnaENZlQRjNag9Gx00jf9wm7qfrbU6Epy9nriadiwJV03MRprxVXKaxsh3B2jp1rhXlaHleIb-bF131YyA/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<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/AVvXsEjH2gmL26BlJYF4dygYqvw1s340GtIqjfF03rhJJ_Le-Jelgn86HlCWJ1WD-Vuv0_-t9Mztr5b-zLUUzGRQErFwkwJ_pSTHy6AXOyXqflhB8TxIVYdFr5B6ssiowHdUUrSQf-Yz67Q9MT8/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<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/AVvXsEiBdPZgmpQPIbG8rqUEGe61G1tyhoQQvu5huGx4L5h_PrMm9pgLc0XgMZyF29CZlc0C58HbOFwp_F39q6jIZ_PaQDujKTYhXwTd3Jim2xmv7C_fNB3lmIEUmEi4MijIxU3Z6yHgLsl2kbw1/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<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/AVvXsEgTxB-E8QuFk2THmHivws1crb_H_i54TaLiC8NeiKBlTVUU32P8Iyf18EL8AHA5_XBWDgE1AdrXWKv2r6IJqtJXgUhG0FGKFP4V75-jDX-YzRbftta0tXFX_KOKIhY6wf5FWucVwywaBVA/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<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/AVvXsEhSWqIRAQELEffOqYNw8KQvvEaR5VkPDGs_AfiEIylEu9uAlUK5V_D9GCIojdE0J5gIUaQzuZgHf5LHxnd3_L3f_P-Vd5u8YO2Ey4XB950FX1r004H4i19RyiIs1gaGBUzGx4as-q5neVk/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<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/AVvXsEj0HJLQhpgiQK8EzVscGr2FoADKh_WvKNxB-70uNBXiPXn8zxpZIYEnVGNGc5WNQv23We7cYaMfOaK8Sxxb06KqnUJXlszpqEhX4nFQeR5kVX7utyQ_m_svrc7lUpf45_h3QiMh9qeJNs8/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
</div> <div style=âfont-size:10px;margin:8px 0px 3px 0pxâ>
by : <a href=http://www.blogspottutorial.com/>BTF</a>
</div>

Temen-temen bisa menambah negara mana lagi yang mau ditampilkan, silahkan dicoba. Semoga bermanfaat

Read More

Membuat Content Slider Image Otomatis

Sebelum template pada demo slider ini saya bagikan nantinya, saya akan mengulas satu persatu terlebih dahulu fitur yang ada pada template ini. Dan disini Anda akan mengetahui bagaimana sebuah template akan bekerja bersama dengan beberapa fitur yang ada di dalamnya secara otomatis. Prinsip kerja dari Content Slider ini hampir sama pada artikel saya sebelumnya tentangmembuat slider otomatis pada template Sporty Magazine 2, bedanya hanya pada tampilan thumbnail kecil yang saya letakkan di bawah dan efek mouseover yang ditambahkan pada slider ini.

Banyak sekali tutorial membuat image slider yang sudah beredar di internet, dari beberapa kasus yang saya temui kebanyakan masih memasukkan URL gambar dan keterangan satu persatu, dan itu sangat merepotkan dan membutuhkan ketelitian, meskipun ada beberapa diantaranya yang sudah otomatis, disini saya hanya memberikan alternatif lain untuk memperbanyak koleksi teman-teman semua mengenai prinsip dasar dari kerja sebuah image slider otomatis pada blog platform blogger.  Tampilan image slider seperti gambar dibawah, jika anda perhatikan sebenernya inilah dasar dari pembuatan Yahoo slider sederhana yang saya pasang pada template Johny Simplemag. Anda bisa modifikasi sendiri sesuai selera.

DEMO

Di blog demo ada slider image Carousel otomatis, jika Anda tertarik silahkan baca tutorialnya padaMembuat Slider Carousel Otomatis Berdasarkan Label.

Cara Pembuatan

Langsung saja pada langkah-langkah pembuatan Content Slider Image otomatis ini :

1. Langkah pertama, Anda mesti login ke blogger dengan akun Anda
2. Pilih blog yang ingin anda tambahkan slider image ini.
3. Setelah itu masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
5. Langkah berikutnya, letakkan kode berikut ini diatas kode ]]></b:skin> :
   
   Tulisan warna biru diatas adalah panjang dan lebar slider pada demo, silahkan sesuaikan ukurannya.
6. Masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
   
   Keterangan :
   
   Kode script warna merah (paling atas) adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.jswalaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satujQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
   Warna biru : Jumlah post yang ditampilkan dalam slider
   Warna hijau : Panjang dan lebar image besar
   Warna merah tua : Panjang dan lebar image kecil
7. Setelah langkah diatas, save templates terlebih dahulu. Setelah itu menuju ke layout >> add gadget masukkan kode ini pada kotak HTML/Javascript :
   Keterangan :
   
   Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan. Dan warna merah adalah keterangan slider yang berupa kecepatan, slider efek mouseover dan lain-lain, tidak harus dimasukkan.
   Jika Anda ingin menggantinya dengan recent post atau artikel terbaru ganti kode (ada dua ganti semua) :
   

   script src=\"/feeds/posts/default/-/sport?max-results

   dengan kode berikut :
   

   script src=\"/feeds/posts/default?max-results

8. Jika anda ingin meletakkannya langsung pada template, anda bisa letakkan kode nomer 7 dibawah kode <div id='main-wrapper'>, bagi yang ingin meletakkannya pada kotakHMTL/Javascript bisa dibuat dulu satu kolom kosong diatas blog post. Cara membuatnya, letakkan kode berikut diatas ]]></b:skin>

   /* Slide Content
   ----------------------------------------------- */
   .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
   word-wrap: break-word; overflow: hidden;} 
   .slide {color: #666666;line-height: 1.3em;}
   .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
   .slide li {margin:0;padding-top:0;
   padding-right:0;padding-bottom:.25em;
   padding-left:0px;text-indent:0px;line-height:1.3em;}
   .slide .widget {margin:0px 0px 6px 0px;}

9. Kemudian untuk memunculkannya pada layout (diatas blog post), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :

   <b:if cond='data:blog.url == data:blog.homepageUrl'>
         <div id='slide-wrapper'>
   <b:section class='slide' id='slide' preferred='yes'/>
         </div>
   </b:if> 

   

Jika diperhatikan kode script yang ada diatas memang terlalu banyak, dan tentunya akan semakin memperlambat loading sebuah blog. Untuk mengatasinya Anda bisa menyimpan kode-kode yang terlalu panjang tersebut di tempat penyimpanan Google Code. Nah, itu tadi salah satu fitur slider image yang saya ulas kali ini. Saya berharap dengan mengulas satu persatu fitur dalam sebuah template, nantinya teman-teman semua bisa membuat sebuah tampilan template sendiri dengan memodifikasi dari dasar tampilan yang sudah saya berikan diatas.Selamat mencoba dan semoga bermanfaat

Read More