 |
| Tutorial Go Blog |
Cara Membuat Widget Recent Post Dengan Gambar - Untuk para pemula pemain blog khususnya, anda sekarang tidak perlu khawatir soal cara mendesain sebuah tampilan pada website/blog anda agar pengunjung semakin betah untuk berlama-lama di dalam website/blog yang anda miliki. Nah, agar para pengunjung betah berlama-lama didalam website/blog anda, anda sebaiknya lakukan desain template blog anda untuk mempercantik penampilan.
Caranya tidak sulit kok, asalkan kita fokus dan ikuti cara-cara yang akan diberikan oleh Tutorial Go Blog ini. Dan kita awali mempercantik tampilan website/blog dengan cara memasang widget recent post atau artikel terbaru pada website/blog anda. Namun, recent post yang akan kita pelajari hanya menampilankan sebuah image atau gambar postingan saja.
Dan sebelum anda melakukan langkah-langkah dalam pembuatan postingan terbaru dengan media gambar atau image saja, anda copy dahulu kode script html dibawah ini.
<div id='bp_recent'></div>
<script style='text/javascript' src='https://googledrive.com/host/0B8a75E285BMHcThrdkdWZUNiUzg'></script>
<script style='text/javascript'>
var numberOfPosts = 12;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 90;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://www.tutorialgo-blog.blogspot.com/feeds/posts/summary?max-results=12&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
<script style='text/javascript' src='https://googledrive.com/host/0B8a75E285BMHcThrdkdWZUNiUzg'></script>
<script style='text/javascript'>
var numberOfPosts = 12;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 90;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://www.tutorialgo-blog.blogspot.com/feeds/posts/summary?max-results=12&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
Keterangan :
- Warna merah pada angka 12 tersebut adalah jumlah judul postingan yang akan ditampilkan, dan anda bisa merubahnya dengan apa yang anda ingin-kan.
- Warna biru merupakan URL blog yang harus anda ganti dengan URL blog milik anda.
Nah, jika sudah memahami soal langkah yang telah di jelaskan di atas tersebut, kini saatnya anda siap-siap untuk melakukan langkah-langkah pembuatan recent post menggunakan image atau gambar pada website/blog milik anda.
Keterangan :
- Login ke blogger.com
- Masukkan Email & Kata sandi
- Buka Dashboard blogger
1. Untuk langkah yang pertama, anda cari menu yang bertuliskan “Tata Letak”. Biasanya menu yang saya sebutkan tersebut berada di posisi kiri depan layar komputer anda.
 |
| Gambar 1 |
2. Langkah yang kedua, apabila anda sudah masuk ke menu tata letak tersebut, kemudian anda cari menu yang bertuliskan “Tambahkan Gadget”. Contoh gambar ada dibawah ini.
 |
| Gambar 2 |
3. Untuk langkah yang ketiga, apabila anda sudah masuk ke menu tambahkan gadget, kemudian anda cara menu yang bertuliskan “HTML/JavaScript”. Contoh gambar ada dibawah ini.
 |
| Gambar 3 |
4. Untuk langkah yang kelima, sebelumnya anda sudah meng-copy kode script html yang ada di atas tersebut kan. Nah, saatnya kini anda memasukkan kode script html tersebut ke kolom yang sudah disediakan seperti pada gambar tersebut.
 |
| Gambar 4 |
5. Selanjutnya, anda tinggal melihat hasilnya dengan cara menekan menu yang bertuliskan “Pratinjau”. Jika hasilnya seperti gambar yang ada dibawah ini, itu tandanya anda berhasil. Namun jika tidak muncul gambar seperti dibawah tersebut, anda coba periksa dan ulangi lagi dari awal.
 |
| Hasil Gambar |
Seperti itulah trik Cara Membuat Widget Recent Post Dengan Gambar pada website/blog yang anda miliki. Dengan membuatkan widget tambahan recent post, akan menambah cantik penampilan website/blog yang anda miliki sekarang. Apabila anda ingin yang lebih bagus lagi anda bisa mencoba belajar lainnya seperti. Terima kasih banyak...
