| Gambar Background Blog Dinamis dari Bing Posted: 13 Feb 2013 10:44 PM PST Sebenarnya ini repost dari blog.midhighsolution.com berhubung postingan yang di midhigh juga saya yang posting jadi saya psoting ulang aja deh diblog sendiri.. hehehe,.. Biasanya gambar blog kita akan statik sesuai gambar yang kita tetapkan, tetapi ini kan berbeda karena gambar background blog kita akan berubah setiap hari seperti Bing. Opss.. tepatnya background kita akan sama seperti gambar yang ditampilkan Bing. Asyiknya jika pada hari-hari besar tertentu bing menampilkan gambar yang berkaitan dangan perayaan hari tersebut, so blog kita juga akan sama, jadi blog kita seakan-akan memperingati hari tersebut juga,.. hehe.. Oke cukup penjelasanya sekarang langsung ke TKP... - Masuk dulu ke akun blog kamu (blogger).
- Kemudian pilih Setting, Template, Edit HTML
- Cari (ctr+f), tag <Variable name="body.background" telusuri berlahan pada tag tersebut akan ada tag url(http://link.gambar.bacgroaund.kamu) pada kurung () setelah url itu berisi sesuai link dari gambar bacground kita saat ini.
- Sekarang kita ganti isi kurung () dengan http://midhighsolution.com/bingbac.php sehingga menjadi url(http://midhighsolution.com/bingbac.php)
- Setelah tutup kurung kita bisa tambahkan no-repeat fixed top center ini agar gambarnya tidak di repeat dan posisinya berada di atas tengah. kesuluran tagnya akan menjadi seperti ini
<Variable name="body.background" description="Body Background" type="background"
color="$(body.background.color)" default="$(color) none repeat-x scroll top center" value="$(color) url(http://midhighsolution.com/bingbac.php) no-repeat fixed top center"/> - Namun untuk posisi ini biasanya tidak sepenuhnya menutupi seluruh isi layar karena ukuran gambar tidak terlalu besar. Untuk mengatasinya kita tambahkan sedikit css.
- Cari (ctr+f), tag ]]></b:skin> kemudian letakkan css berikut tepat diatasnya.
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
css tersubut berfungsi agar ukuran gambar bacground mengikuti ukuran layar kita. - Selseai. Sekarang bacgroaund blog kamu akan sesuai dengan Bing Bacgraound.
Info Tambahanuntuk file bingbac.php bisa kamu buat sendiri dan simpan di host kamu untuk kamu yang punya hostingan. isi scriptnya berikut : <?php
$myimages = simplexml_load_file('http://www.bing.com/HPImageArchive.aspx?format=xml&idx=0&n=1&mkt=en-US');
$ling = $myimages->image[0]->url;
$filename = basename("http://www.bing.com".$ling);
$file_extension = strtolower(substr(strrchr($filename,"."),1));
switch( $file_extension ) {
case "gif": $ctype="image/gif"; break;
case "png": $ctype="image/png"; break;
case "jpeg":
case "jpg": $ctype="image/jpg"; break;
default:
}
header('Content-Type: '.$ctype);
readfile('http://www.bing.com'.$ling);
?> Sumber blog.midhighsolution.com  |
No comments:
Post a Comment