Widget Recent Post atau bisa di sebut juga Widget Postingan terbaru memang sudah pernah saya jelaskan di kesempatan sebelumnya namun setelah browsing - browsing ternyata versi recent post itu banyak sekali, salah satunya Recent Post With Horizontal Thumbnail yaitu Widget yang menampilkan Postingan terbaru dari blog anda namun yang di tampilkan hanya gambar saja. Agar lebih jelas silahkan lihat lebih jelas screenshout di bawah ini :
Kurang lebih tampilan Widget Recent Post With Thumbnail itu seprti di atas, sekarang mari kita lihat cara pemasangannya, tapi menurut saya sih cara untuk memasangnya mudah tinggal ikuti saja langkah pemasangan widget recent post di postingan sebelumnya. Tapi kayanya g asyik kalau saya hanya memberikan scriptnya aja, oke lihat langkah pemasangannya :
- Pertama login ke blogger.com
- masuk ke Rancangan >> Elemen Halaman
- Setelah berada pada elemen halaman maka tambahkan sebuah gadget
- pilih yang HTML/Javascript
- taruh kode di bawah ini kedalamnya
<script language="JavaScript"> imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJnatYQE4pyd2V4_ObdSwcVztj525VXSOdyPyWxEoOaLWQrQXB2ey-QMgl60jTfK4s8sj9zkI4iBiy2uIsC7l-E3xIzDsBzO6IL3Q0UAv40YYe-4HdjIgx-0pogkUSgnRSiyHQ6xhwZQX9/s1600/No+Image.gif"; imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJnatYQE4pyd2V4_ObdSwcVztj525VXSOdyPyWxEoOaLWQrQXB2ey-QMgl60jTfK4s8sj9zkI4iBiy2uIsC7l-E3xIzDsBzO6IL3Q0UAv40YYe-4HdjIgx-0pogkUSgnRSiyHQ6xhwZQX9/s1600/No+Image.gif"; imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJnatYQE4pyd2V4_ObdSwcVztj525VXSOdyPyWxEoOaLWQrQXB2ey-QMgl60jTfK4s8sj9zkI4iBiy2uIsC7l-E3xIzDsBzO6IL3Q0UAv40YYe-4HdjIgx-0pogkUSgnRSiyHQ6xhwZQX9/s1600/No+Image.gif"; imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJnatYQE4pyd2V4_ObdSwcVztj525VXSOdyPyWxEoOaLWQrQXB2ey-QMgl60jTfK4s8sj9zkI4iBiy2uIsC7l-E3xIzDsBzO6IL3Q0UAv40YYe-4HdjIgx-0pogkUSgnRSiyHQ6xhwZQX9/s1600/No+Image.gif"; imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJnatYQE4pyd2V4_ObdSwcVztj525VXSOdyPyWxEoOaLWQrQXB2ey-QMgl60jTfK4s8sj9zkI4iBiy2uIsC7l-E3xIzDsBzO6IL3Q0UAv40YYe-4HdjIgx-0pogkUSgnRSiyHQ6xhwZQX9/s1600/No+Image.gif"; showRandomImg = true; tablewidth = 248; cellspacing = 8; borderColor = "#ffffff"; bgTD = "#ffffff"; imgwidth = 118; imgheight = 100; fntsize = 12; acolor = "#666"; aBold = true; icon = " "; text = "comments"; showPostDate = false; summaryPost = 50; summaryFontsize = 11; summaryColor = "#666"; icon2 = " "; numposts = 5; home_page = "http://ALAMATBLOGANDA.blogspot.com/"; label = "tagname"; </script> <script src="http://oketrik.googlecode.com/files/horizontal_only_thumbnail.js" type="text/javascript"></script>
Penjelasan
- tablewidth = 248 >> menunjukan lebar dari widget tersebut.
- borderColor = "#ffffff" >>Warna dari garis pinggir widget.
- bgTD = "#ffffff" >> Menunjukan warna latar belakang widget recent post with thumbnail.
- imgwidth = 118; imgheight = 100 >> Lebar dan panjang gambar recent post.
- numposts = 5>> jumlah Postingan terbaru yang ditampilkan
- ALAMATBLOGANDA >> Ganti dengan alamat blog anda
- setelah itu simpan dengan judul recent post
- selesai
Memasang widget recent post with thumbnail tidak sesulit mencari jarum di gundukan jerami kok, ikuti step de mi step untuk mempermudah cara pemasangannya. Kalau sudah buntu dan tidak bisa melakukan pemasangan silahkan tanyakan pada saya dengan meninggalkan link pesan di kotak komentar. Terima kasih Dan Happy Blogging.
Selanjutnya...
Pada Postingan kali ini kita akan membahas mengenai judul tersebut diatas kita sering bosan dengan judul yang kecil mau huruf besar semuanya atau huruf besar di awal huruf judul nya nanti kita bahas semuanya namanya juga manusia tak akan puas maunya ada perubahan, sama dengan saya kalau saya lain lagi penampilan Blog sering di rubah kalau tempaletenya warnanya dirubah tak pernah puas he he he penampilan.
Baik caranya kurang lebih seperti ini mudah kok :
- Logen ke Blogger ID anda
- Pilih Tata Letak
- Pilih Edit HTML
- Download Template lengkap agar data template aman ada datanya
- Silakan cari code ini : .sidebar h2
.sidebar h2 {
font-size:110%;
font-weight:bold;
text-transform:uppercase;
text-align:right;
border: 1px solid #000;
background:#6df466;
padding;5px;
}
Keterangan :
Kode font-size:110%; : berfungsi untuk mengatur besarnya huruf. Satuan yang digunakan bisa pakai % atau pixels (px). Angkanya dapat kita ganti sesuai selera kita
Kode font-weight:bold; : menunjukan judul yang tampil dengan huruf tebal. Kata bold dapat kita ganti dengan normal jika penampilanya tidak ingin tebal atau ganti dengan italic jika ingin penampilan hurufnya miring.
Kode text-transform:uppercase; : kata uppercase ialah huruf kapital (besar). Anda dapat mengganti dengan kata lowercase (semuanya huruf kecil) atau capitalize (hanya huruf depannya yang besar). pilih sesuai selera kita
Kode text-align:right; : Letak judul sidebar di bagian kanan. Anda dapat mengganti dengan left atau center. kanan kiri dan tengah
Kode border: 1px solid #000; : berfungsi untuk menampilkan garis di sekeling judul sidebar. kita bisa mengganti ukuran dan warnanya dari garis tersebut.
Kode background:#6df466; : untuk menampilkan warna latar dari judul sidebar. ini bisa diganti dengan warna kegemaran kita
Kode padding;5px; : untuk memberi jarak antara bagian pinggir judul sidebar dengan tulisan judul sidebarnya, supaya tidak mipit kepinggir
Untuk yang berwarna merah silakan di ganti salah satu atau keseluruhan cari di keterangan tersebut diatas.
Selamat mencoba dan semoga bermanfaat...
Selanjutnya...
EMAIL ALERT
