Minggu, 20 Maret 2011

Dynamic Favicon On Post Area for Blogger

Berawal dari menengok blog sobat @mybloggertricks yang menulis artikel bagaimana membuat animasi favicon untuk blogger. Favicon icon kecil yang keberadaannya ada pada tab browsingan dan address bar. Coba tengok postingan Hopefully Useful! Tidak jauh dengan itu, kali ini Beben si bloglang anu ganteng kalem tea mau berbagi bagaimana memasukan dynamic favicon kedalam postingan (domain only)
Favicon dinamis ini hanya akan berfungsi pada domain sendiri yang tentunya sudah terdaftar :D Karya dari web http://geticon.org/ <--- IS DEAD. Secara prinsipil generate favicon ini seperti berikut:

blogger.com
<img src="http://geticon.org/of/blogger.com" alt="blogger.com" width="16" height="16" />Coba ganti tulisan berwarna merah itu dengan domain web lain. Kalau ada secara otomatis akan berganti gambar faviconnya, dan kalau tidak ada maka akan digantikan dengan gambar default sbb:
blah-bleh-bloh
Sekarang mari kita sisipkan dengan bantuan jQuery Plugins ke bagian postingan blog kita tercinta ini agar setiap ada web berdomain langsung berdiri gambar favicon disamping kiri nama web tersebut ;) Contoh:
googlegoogle

jQuery Script

Sobat bisa mendownload scritpnya disini get favicon plugin. Ekstrak hasil download maka akan dihasilkan script jQuery plug-in
<script type='text/javascript'>
//<![CDATA[
(function( $ ){
$.fn.geticon = function() {
this.fadeIn('normal', function(){
$('<img>',{'src':'http://geticon.org/of/'+$(this).attr('href')})
.css('vertical-align','middle')
.prependTo($(this));
});
};
})( jQuery );
//]]>
</script>
Letakin itu si script tepat sebelum (diatas) tag penutup </head> Setelah entuh cari tag penutup </body> letakin script pemanggil berikut tepat diatasnya.
<script type="text/javascript">
// DOMREADY
//<![CDATA[
$(document).ready(function() {
// left side automaticly get icon
$('.post-body a').geticon();
});
//]]>
</script>
Setiap kali nanti sobat memosting dan mengetikan nama web google.com, facebook.com atau lainnya (syntax link) maka lihatlah apa yang ada disamping link itu :D Sebuah gambar favicon imut-imut kayak Beben akan nongol disamping kiri nama web bersangkutan :">
Happy favicon \m/

Tidak ada komentar:

Posting Komentar