Minggu, 15 Desember 2013
Artikel berhubungan dengan gambar thumbnail image
Jika kemarin saya posting tentang cara pasang artikel berhubungan/terkait biasa artinya hanya teks judul saja yang tampil, tetapi sekarang saya posting tentang cara pasang artikel berhubungan dengan gambar dan judulnya, dengan artikel berhubungan beserta gambar akan semakin mempercantik tampilan blog anda pada bagian halaman single postnya. Nah artikel berhubungan dengan gambar ini akan mengambil judul posting dan gambar pertama dari postingan tersebut dengan menampilkan artikel yang terkait mengambil dari sebuah kategori-kategori yang sama dari artikel yang sedang ditampilkan.
Jika blog sudah memiliki artikel berhubungan versi biasa atau tanpa gambar, sebaiknya hapus dulu agar lebih rapi! kamu bisa menghapus melalui tertarik membuatnya? silahkan ikuti caranya dibawah ini:
1. Masuk ke akun blogger kamu
2. Klik Template ---> Edit HTML
3. Beri tanda check pada ""
4. Cari kode </head> "untuk mempermudah pencarian tekan Ctrl+F"
5. Jika sudah ketemu letakkan kode berikut tepat diatasnya "langkah 4"
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond=data:blog.pageType == "item">
<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: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src=http://googlecode.com/files/artikelberhubungandengangambar.js type=text/javascript/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
6. Cari kode <div class=post-footer-line post-footer-line-1>
-Jika tidak ketemu cari <p class=post-footer-line post-footer-line-1>
-Atau jika tidak ketemu lagi cari saja <data:post.body/> (jika anda sudah memakai readmore ada dua kode <data:post.body/> jadi letakkan setelah kode yang kedua)
7. Jika sudah letakkan kode berikut tepat dibawah kode tersebut "langkah 6"
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond=data:blog.pageType == "item">
<div id=related-posts>
<b:loop values=data:post.labels var=label>
<b:if cond=data:label.isLast != "true">
</b:if>
<script expr:src="/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6" type=text/javascript/></b:loop>
<script type=text/javascript>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style=clear:both/>
<!-- remove --></b:if>
<b:if cond=data:blog.url == data:blog.homepageUrl><b:if cond=data:post.isFirstPost>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
8. Sekarang simpan template kamu
9. selesai lihat hasilnya!
Keterangan :
- var maxresults=5 rubahlah angka 5 untuk menentukan jumlah artikel yang akan ditampilkan
- var relatedpoststitle="Related Posts" anda bisa merubah dengan sesukamu misalnya : "Artikel yang terkait" dll
- Kamu juga bisa merubah tampilannya dengan mengedit / memodifikasi kode CSSnya kode CSS terletak pada "langkah 5"
Senin, 25 November 2013
Cara Membuat Scrolling Image Otomatis
Contoh :
<marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" width="150" height="200">
<a href="link" target="_blank"><img src="url gambar" /></a>
<a href="link" target="_blank"><img src="url gambar" /></a>
</marquee>
Keterangan :
Kecepatan gerak gambar : semakain besar semakin cepat.
Link : link. Contoh : blogspot.com
Url gambar: url gambar.
Tutorial untuk dipasang disidebar, sebagai berikut :
- Login pada Blogger
- Masuk mode Rancangan kemudian Edit HTML
- Pilih HTML/JavaScript
- Masukan script tadi
- Klik Simpan
Tutorial untuk dipasang dipostingan blog, sebagai berikut :
- Login pada Blogger
- Masuk mode Posting kemudian Entri Baru
- Klik Edit HTML yang ada disebelah tulisan Compose
- Masukan script tadi
- Klik tulisan Compose kemudian Terbitkan Entri
Kamis, 31 Oktober 2013
Image Resizer for Windows 7 Terbaik
Kalau anda baru saja pindah dari Windows XP ke Windows 7, Microsoft’s Power Toy Image Resizer mungkin adalah salah satu software gratisan yang paling anda rindukan. Software gratisan sebesar 249 kb ini sakti sekali dan sangat mudah digunakan. Untuk apa? Sesuai namanya, program ini bisa anda pakai untuk mengubah ukuran image.
Nah, kalau sudah pindah ke Windows 7, adakah software gratisan yang punya fungsi sama dengan Microsoft’s Power Toy Image Resizer itu? Pada awal Windows 7 dirilis memang belum ada, tapi sekarang sudah lumayan banyak pilihan pengganti Image Resizer bawaan Windows XP itu. Setidaknya, ada 2 yang saya pernah gunakan dan yang penting lagi, nyaman.
1. Image Resizer 2.1 for Windows. Yang satu ini memang dari Microsoft. Fungsionalitas dan kompabilitasnya bagus. Banyak pilihan lebih dibanding versi sebelumnya. Sekarang ada versi 3, tapi masih versi alpha. Kalau mau mencoba download saja. Toh tidak akan mempengaruhi OS anda, jadi aman untuk mencoba.
2. Light Image Resizer. Kalau yang ini dibuat oleh ObviousIdea. Bagus. Punya nilai lebih dibanding yang punya-nya Microsoft. Dia bisa mengenali file-file image yang masih RAW, semisal .CR2 (Canon RAW), .NEF (Nikon RAW), dan .DNG (Adobe). Anda juga dimungkinkan untuk memberi watermark di image anda, supaya lebih aman. Hehe…