 |
| Tutorial Go Blog |
Membuat Recent Post Thumbnail - Sobat blogger-ku yang rajin mengunjungi website/blog yang saya miliki ini, mudah-mudahan kalian bisa dan memahami tentang tutorial yang sudah saya buatkan di situs website/blog ini. Dan semoga juga blog kalian bisa menjadi nangkring di halaman mesin google pencarian, tentunya termasuk saya juga yang berharap website/blog-nya bisa nangkring di halaman pertama meski di urutan ke 3-4 atau seterusnya.
Untuk pembahasan kali ini Tutorial akan mengedepankan informasi masih seputar tentang pembuatan recent post. Yang mana sebelumnya saya sudah memberikan info tentang Cara Gampil Membuat Widget Recent Post Dengan Gambar. Tentunya mengenai informasi yang sebelumnya anda-anda sudah pada membacanya bukan..!! Jika belum, silahkan dibaca dulu informasi yang sebelumnya.
Disini, saya admin Tutorial Go Blog siap untuk memberikan atau berbagi informasi tentang cara membuat recent post atau postingan terbaru dengan menggunakan thumbnail. Namun, sebelum melakukan langkah ke TKP, anda wajib copy dahulu kode HTML yang ada dibawah ini yaaa.
<style type='text/css'>
img.recent_thumb {padding:1px;width:72px;height:72px;border:0;
float:left;margin: 10px 10px 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;margin: 10px 10px 5px 0px;padding: 0;font-size:13px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;}
.recent_posts_with_thumbs strong {font-size:12px;}</style>
<script style='text/javascript' src='http://recent-post-techkgp.googlecode.com/files/recent%20post_www.techkgp.com.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 150; </script>
<script src='http://tutorialgo-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
img.recent_thumb {padding:1px;width:72px;height:72px;border:0;
float:left;margin: 10px 10px 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;margin: 10px 10px 5px 0px;padding: 0;font-size:13px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;}
.recent_posts_with_thumbs strong {font-size:12px;}</style>
<script style='text/javascript' src='http://recent-post-techkgp.googlecode.com/files/recent%20post_www.techkgp.com.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 150; </script>
<script src='http://tutorialgo-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
Catatan :
- Warna hijau adalah jumlah postingan yang akan ditampilkan.
- warna biru adalah URL blog, anda ganti dengan URL blog anda.
Nah, sekaranglah saatnya anda untuk melibas langkah-langkah yang sudah disediakan dalam situs Tutorial Go Blog ini.
Keterangan :
- Login ke blogger.com
- Masukkan email & kata sandi
- Buka dashboard
1. Tahap pertama. Cari menu yang bertuliskan "Tata Letak", kemudian anda masuk di menu tersebut dengan cara menekan "Enter/Ok".
 |
| Gambar 1 |
2. Tahap kedua. Jika sudah masuk di menu tata letak, sekarang anda langsung saja car menu widget yang bertuliskan "Tambahkan Gadget". Nah, nanti anda akan menemukan beberapa menu widget yang ingin anda pilih.
 |
| Gambar 2 |
3. Tahap ketiga. Cari atau temukan menu widget yang bertuliskan "HTML/JavaScript". Contohnya seperti yang ada pada gambar dibawah.
 |
| Gambar 3 |
4. Tahap keempat. Ini adalah tahap finishingnya, anda tinggal masukkan kode HTML yang sebelumnya sudah anda copy, dan sekarang paste-kan kode tersebut kedalam kolom yang sudah tersedia seperti digambar bawah ini. Lalu anda simpan kode tersebut.
 |
| Gambar 4 |
5. Tahap kelima. Jika kode HTML sudah anda masukkan, lalu anda tekan "Simpan" dan untuk memastikan seperti apa hasilnya, anda bisa mereview dahulu hasilnya dengan cara menekan "Pratinjau".
 |
| Gambar 5 |
6. Selanjutnya, kita tinggal lihat hasil pembuatan recent post menggunakan thumbnail tersebut seperti contoh di gambar bawah ini.
 |
| Hasil Gambar |
Dengan membuat widget postingan terbaru atau recent post tersebut, insya Allah tampilan desain website/blog milik anda menjadi lebih menarik dari sebelumnya dikarenakan ada sebuah tampilan yang terbaru dari recent post blog-nya.
Demikian informasi tips Membuat Recent Post Thumbnail tersebut. Jika anda mempunyai situs website/blog sendiri dan belum ada widget seperti di atas, maka silahkan anda praktekan pada blog anda. Tetapi, jika anda sudah pernah membuatnya dan berhasil, sekarang anda bisa juga coba mencari sensasi yang terbaru dan menarik seperti Cara Gampil Membuat Recent Post Pada Blog Tanpa Gambar. Terima kasih banyak, kunjungi kembali situs ini...
