Sharecount Button for Facebook

Jika sobat sudah punya tombol berbagi facebook, atau share button yg seperti ini share button facebook, tidak ada yg salah dengan itu. Disini Beben si bloglang ganteng kalem tea cuman mau share yg lebih gaya. Namanya yaitu sharecount button! Terinspirasi dari retweet button memiliki fungsi yg mirip untuk menampilkan berapa blog/web kita sudah dishare via FB :) Tapi nanti dulu sob, ada fitur lainnya juga nich (inggrisan ah) ;))...

Features:

• Displays the number of shares and on hover the total number of clicks for those shares (displays Facebook logo when 0 shares)
• Large or small button.
• Track the shares from the button using your awe.sm API Key or fbshare.me links.
• Add Google Analytics parameters to fbshare.me links.
• Configure the colors of the badge in the large button.

Intinya tombol ini terhubung dg google analytics. Contohnya nanti akan terlihat seperti ini:

<script type='text/javascript'>
var fbShare = {
url: 'http://YOUR-NAME.blogspot.com/',
size: 'large',
badge_text: 'C0C0C0',
badge_color: 'CC00FF',
google_analytics: 'true'
}
</script>
<script src="http://widgets.fbshare.me/files/fbshare.js"></script>

Trivial but Useful

Terkadang hal kecil selalu dilupakan, maka tidak heran rakyat kecil selalu dilupakan :-/ Tekan klik kiri pada mouse (tahan) lalu tarik pada kata (grab) diblog ini "Prodigy of Head" maka akan terlihat warna berbeda. Itu tidak lebih hanya membubuhkan sedikit variabel pada CSS sobat dengan::selection {background:#c3effd; color:#000;/* Safari and Opera */}
::-moz-selection {background:#c3effd; color:#000;/* Firefox */} Sepele tapi bikin gaya toh :)) Jika mau 7 cara cepat agar perangkat CSS kita terlihat lebih baik dan experience David Walsh sang master MooTools sudah menyajikannya ;)

Kalau membicarakan XHTML memang sedikit unik sob, yg notabebne bawaan editor blogspot. Seperti halnya jika kita ingin memasukan satu embed video/flash/etc seperti ini

Ada cara penulisan kode yg sedikit berbeda kalau di XHTML ;)

Original HTML code

<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/XXXXXXXXXXX&rel=0"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/XXXXXXXXXXX&rel=0" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
</object>

XHTML Strict code

<object type="application/x-shockwave-flash" width="425" height="355" data="http://www.youtube.com/v/XXXXXXXXXXX&amp;rel=0">
<param name="movie" value="http://www.youtube.com/v/XXXXXXXXXXX&amp;rel=0"></param>
<param name="wmode" value="transparent"></param>
</object>

Tuh kan berbeda cara nulisnya mah ;;) Silahkan masuk kemari jika ingin melihat cara² yg lainnya DonatoFurlani.It. Diatas tadi kan sudah diberitau cara menjadikan grab menjadi berbeda warnanya, sekarang bagaimana cara tersimpel untuk membuat tidak bisa dicopy alias No Copy Click ;))

Hal kecil dan sepele memang suka luput dari pemikiran :D For mozilla kita hanya tinggal membubuhkan variabel CSS -moz-user-select:none; dan untuk Safari browse -khtml-user-select: none; jadi deh gak bisa dikopi. Coba bandingkan jika kita memakai JavaScript

<script type='text/javascript'>
function EventsSelect() {
return false;
}
document.onselectstart = EventsSelect;
document.onselect = EventsSelect;
document.ondblclick = EventsSelect;
document.onmousedown = EventsSelect;
</script>

Hohoho...ketara toh bedanya :)) Nah selamat berjumpa kembali bersama Beben si bloglang anu ganteng kalem tea dalam trivial but useful. Perasaan tidak ada hal yg tidak berguna di dunia ini :) See you :-h

Put SEO smart link for Blogspot / blogger (update)

Artikel kali ini akan membahas mengenai SEO smart link ;)) Adapun pengertian dari smart link ini sobat bisa satroni disini BlogJuragan. Disana sudah dikasih tauk bagaimana cara memasang dan scriptnya versi Mr. Ganda Manurung ;;) Setelah Beben si bloglang anu ganteng kalem tea praktekan di blog Prodigy of Head ini, ternyata tidak ada efek apapun. Tidak tauk templatenya, salah pasang script, atau blah bleh bloh lainnya deh. Dipasang di dummie blog Beben juga tidak ada reaksinya :P Maka dari itu, sekarang kita akan coba versi memasang SEO smart link terintegrasi dengan jQuery script pluings. Kalau ada sobat yg belom tauk apa itu plug-ins, silahkan baca keterangan alakadarnya Plugins!

Untuk mempraktekan trik ini harap diperhatikan benar-benar yah sob :-? Mengapa Beben berkata demikian??? Karena eh karena ketika kita sudah memasang script ini nanti, maka kata yg sudah dipilih untuk dirujuk menjadi sebuah syntax link, akan menjadi link nyata yg sudah dipilih oleh sobat b-) PERHATIKAN YAH!!! Kata apasaja nanti yg sudah dipilih untuk dijadikan sebuah link meliputi segala hal. Title/judul Alt pada gambar, title/judul pada link, kata pada kategori, pokoknya semua kata yg sudah dipilih nanti oleh sobat, akan menjadi sebuah link!!! Maka dari itu harap dipilih kata yg notabene masih sedikit digunakan pada template sobat.

Script jQuery plugins for Smart link

<script type='text/javascript'>
//<![CDATA[
(function($) {
var thePage = $("body");
thePage.html(thePage.html().replace(/lorem/ig, '<a href="http://beben-koben.blogspot.com">lorem</a>'));
})(jQuery)
//]]>
</script>

Dalam praktek, Beben meletakkan script tersebut tepat sebelum/diatas tag </body> Heres screenshot for my example Click Here for Screenshot

Keterangan script:

1. lorem
Ganti kata lorem dengan kata yg diinginkan sobat.
2. http://beben-koben.blogspot.com
Ganti link tujuan itu dengan link tujuan sobat.

Ingat semua kata akan digantikan dengan link tujuan!!! Jika sobat ingin lebih dari satu kata yg akan dituju, maka tinggal menambahkan kode berikut pada script pluginsnyah...thePage.html(thePage.html().replace(/ipsum/ig, '<a href="http://ben-tools.blogspot.com">ipsum</a>'));Maka akan menjadi beginong...

<script type='text/javascript'>
//<![CDATA[
(function($) {
var thePage = $("body");

thePage.html(thePage.html().replace(/lorem/ig, '<a href="http://beben-koben.blogspot.com">lorem</a>'));

thePage.html(thePage.html().replace(/ipsum/ig, '<a href="http://ben-tools.blogspot.com">ipsum</a>'));

})(jQuery)
//]]>
</script>

See you and happy blogging. Itu script lupa dapetnya dari mana euy :)) maaf deh jadi tidak tauk jg resourcenya by sapa =)) Sangkin BW kesana kemari, lopa nama webnya (gak kesave) =)) =)) =))

Google Custome Search and jQuery Information

Karena tidak ada postingan, karena kehabisan ide dan males juga nih :D maka daripada itu rehat sejenak ah ;)) Apa sobat sudah mengupdate script jQuery sobat? Sekarang sudah versi jQuery 1.4.4 loh :-/ Untuk itu ini dia jQuery 1.4.4 API Cheat Sheet:

1. From Web
2. Picture Cheat Sheet
3. PDF Format

Jika sobat mau tauk mengenai gosip², issue², efek baru, dan bla-bla mengenai jQuery, sobat bisa satroni jQuery Web dan lihat discussion dan forumnya :D Kalau web yg menerangkan trik² plugin jQuery, jangan tanya yah buanyakkkk =))

Mengenai google search custome, Beben si bloglang mau berbagi dikit mengenai kode snippetnya ;)) Tentunya ini berlaku bagi yg searchnya sudah diganti dengan default google yah ;) (kayak punya blog aku ini) sok cobain lihat :-" b-)
Pada bagian control panel google custom search sobat ada setingan yg memang bisa dilakukan dari sana. See here for details Details Search Custome Google. Dah ah...:)) See you :-h

Convert Code for Post Friendly On Comments

Karena cukup penting keberadaannya, maka kali ini Beben si bloglang anu ganteng kalem tea akan membahas bagaimana memasukan script for convert berada dekat dengan kotak komentar, supaya tidak jauh/bolak-balik kalau mau mengconvert kode agar bisa tampil dipost kotak komentar kita :-bd (roaming yah penjelasannya...) :)) Nanti juga pasti akan terbayangkan lah ;) Perhatikan tulisan yg dekat kotak komentar Beben Convert your coded here, for friendly post!!! itu sob :) Bahan-bahan yg dibutuhkannya meliputi javascript, CSS dan juga HTML :P

Javascript 1

Cari tag <head> letakkan dibawahnya.

<script type="text/javascript">
//<![CDATA[
function more() {
document.getElementById('Hidden').style.display = 'inline';
document.getElementById('Toggle').innerHTML = '<a href="javascript:goNes()">&#8592;</a></span>';
}
function goNes() {
document.getElementById('Hidden').style.display = 'none';
document.getElementById('Toggle').innerHTML = '<a href="javascript:more()">&#8594;</a>';
}
//]]>
</script>

Kalau mau disave dulu ya silahkan ;;) Centang Expand Widget Templates template pojok kanan atas sobat. Tekan Ctrl + F pada keyboar lalu temukan kode <div class='comment-form'> Masukin javascript 2 berikut...

Javascript 2

<span style='font-weight:bold;color:#000000'>Convert your coded here, for friendly post</span>
<span id='Hidden' style='display: none;'>
<script type="text/javascript">
//<![CDATA[
function convert(){var ele1=document.getElementById("Beben-Koben");var replaced;replaced=ele1.value;replaced=replaced.replace(/</ig,"&lt;");replaced=replaced.replace(/>/ig,"&gt;");replaced=replaced.replace(/"/ig,"&quot;");replaced=replaced.replace(/±/ig,"&plusmn;");replaced=replaced.replace(/©/ig,"&copy;");replaced=replaced.replace(/®/ig,"&reg;");replaced=replaced.replace(/howdy/ig,"ya'll");ele1.value=replaced;}
//]]>
</script>
<table border="0" cellpadding="0" cellspacing="1" width="506"><tbody><tr><td valign="top" width="505"><textarea id="Beben-Koben" style="border: 1px groove rgb(231, 231, 231);" cols="37" rows="6"></textarea><br /><input value="Convert Code" onclick="convert();" type="button" style="background-color:#FF00FF" /></td></tr></tbody></table>
</span>
<span id='Toggle'><a href="javascript:more()">&#8594;</a></span>

Sobat sudah memiliki Convert Code for Post Friendly :) didekat komentar :) Happy blogging \m/

Search of Widgets

Blog walking kesana kemari ketempat sobat² blogger, ternyata widget masih menjadi salah satu andalan guna menghias blog menjadi full stylish dan gaya punya :-bd Widget, cuaca, jam, currency mata uang, dan lain-lain. Beberapa ini mungkin mau bisa menjadi pilihan sobat dalam menentukan pilihan :-/ Triknya cukup mudah, jika sobat masuk kehalaman dan memilih widget jangan lupa perhatikan kiri dan kanan link widget lainnya. Karena disana ada link-link tujuan lainnya :D Example...

  Indonesian Rupiah Exchange Rate

Weather in Bandung

See you and happy widget :-h ;)

Making Splash Screen Effect for Blogspot

Artikel kali ini yaitu mengenai "Making an Apple-style Splash Screen" <--- judul aslinya. Membuat percikan (splash) pada layar monitor kita ketika akan memasuki blog kita :x Percikannya berupa tulisan berganti-ganti gitoh. Seperti kata² opening lah kala mau masuk...paham pasti lah ;)) Karena berbentuk script, dan biasanya script diload belakangan maka disarankan ini cocok bagi blognya yg ringan alias masih cepat dibukanya :D biar tampak efeknya ;)

Bagaimana setelah melihat demonya :-/ Terlihat ada tulisan ganti-ganti ketika memasukinya! kalau tidak tampak refresh lagi cepetan liat :P Terintegrasi dengan jQuery script silahkan jika belom paham baca dolo apa itu plugins!

Kode CSS

#splashScreen img{
margin:0 auto;
}
#splashScreen{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background-color:#111111;
background-repeat:no-repeat;
text-align:center;
}

Letakan diatas/sebelum kode ]]></b:skin>

jQuery Plugins

Pada live demo script ini diletakan sebelum tag </head> tapi setelah ditest di blogspot bisa juga diletakan diatas/sebelum tag </body> Whatever lah...:D

<script type='text/javascript'>
//<![CDATA[
// A self-executing anonymous function,
// standard technique for developing jQuery plugins.
(function($){
$.fn.splashScreen = function(settings){

// Providing default options:
settings = $.extend({
textLayers : [],
textShowTime : 3000,
textTopOffset : 80
},settings);
var promoIMG = this;

// Creating the splashScreen div.
// The rest of the styling is in splashscreen.css
var splashScreen = $('<div>',{
id : 'splashScreen',
css:{ backgroundImage: promoIMG.css('backgroundImage'), backgroundPosition : 'center '+promoIMG.offset().top+'px', height : $(document).height()
}
});
$('body').append(splashScreen);
splashScreen.click(function(){
splashScreen.fadeOut('slow');
});

// Binding a custom event for changing the current visible text according
// to the contents of the textLayers array (passed as a parameter)
splashScreen.bind('changeText',function(e,newID){

// If the image that we want to show is
// within the boundaries of the array:
if(settings.textLayers[newID]){
showText(newID);
}
else {
splashScreen.click();
}
});
splashScreen.trigger('changeText',0);

// Extracting the functionality as a
// separate function for convenience.
function showText(id){
var text = $('<img>',{
src:settings.textLayers[id],
css: {marginTop : promoIMG.offset().top+settings.textTopOffset}
}).hide();
text.load(function(){
text.fadeIn('slow').delay(settings.textShowTime).fadeOut('slow',function(){text.remove();
splashScreen.trigger('changeText',[id+1]);
});
});
splashScreen.append(text);
}
return this;
}
})
(jQuery);
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){

// Calling our splashScreen plugin and
// passing an array with images to be shown
$('#promoIMG').splashScreen({
textLayers : ['img/thinner.png', 'img/more_elegant.png', 'img/our_new.png']
});
});
//]]>
</script>

Kode script yg diberi warna merah tua itulah tulisan yg berupa gambar yg gonta-gantinya sob. Silahkan ganti gambar tsb dengan gbr tulisan sesuai dengan keinginan sobat :) Setelah melakukan semua cara diatas masukin kode HTML ini pada body template, kalau mau bisa tepat dibawah tag <body><div id="promoIMG"></div>Save dan lihat hasilnya :-bd
Resource by: http://tutorialzine.com

Simple Explanation of the jQuery Plugins

jQuery sudah merupakan dari bagian perkembangan web/blog. jQuery Plugins yang sering Beben si bloglang ganteng kalem tea beberkan dalam artikel² aku tentunya :"> Sebenarnya kalau ditilik pemahaman plugins itu sendiri, hampir sama dengan pengertian Snippet! Snippet adalah istilah pemrograman untuk wilayah kecil yang dapat digunakan kembali, meminimalkan penggunaan kode berulang yang umum ke fungsi lain, operasi unit-formal untuk menggabungkan menjadi lebih besar modul pemrograman dll (mungkin) ;)) Sobat dapat melihat contoh² dari jQuery plug-ins jQuery examples via w3school, disana sudah langsung bisa melihat efek-efek yg dihasilkan jika kita melakukan snippet pada script intinya :P Untuk menjalankan teknik plugins ini tentu sobat sudah harus memiliki<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/></script>atau versi terbaru. Setelah memiliki script inti, kita bisa berkreasi dengan kode² plugins. Kode plug-ins untuk basis blogspot biasanya diletakkan dibawah persis dengan script inti atau diatas/sebelum tag </body> (selama pengalaman saya) :D Satu contoh efek gambar dari plugins yg diterapkan di Prodigy of Head

Examples jQuery Toggle with jQuery Script

<!DOCTYPE html>
<html>
<head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/></script>

<script type='text/javascript'>
$(document).ready(function(){
$("#display").click(function () {
$("#hidden").slideToggle("500");
});
});
</script>

<style type='text/css'> /*** <b:skin> ***/

#hidden{display:none}

</style> /*** </b:skin> ***/

</head>
<body>

<a href="/" id='display'>Klik Here</a>
<div id='hidden'>Tulisan ini, tidak akan terlihat sebelum diklik!!!</div>

</body>
</html>

Keterangan:

1. Script tulisan berwarna biru.
Script inti dari jQuery.
2. Script tulisan berwarna kuning tua.
Script plug-ins dari script inti.
3. Script tulisan berwarna merah tua.
Kode CSS dari jQuery plugins jika memang menggunakan CSS.
4. Script tulisan berwarna hijau muda.
Penulisan dalam bentuk HTML, yg biasa penempatannya didalam tag <body> ataupun Add a Gadget ► HTML/Javascript

Semoga bermanfaat yah :) postingan Simple Explanation of the jQuery Plugins sederhana ini versi BEBEN :D

Evernote for Remember

Postingan sebelumnya Beben si bloglang ganteng kalem tea sudah membagikan beberapa widgets smart search! Kali ini widget mengenai evernote :-bd What is that evernote? Evernote membuat segala mudah untuk mengingat hal-hal besar dan kecil dari kehidupan penting kita menggunakan komputer, telepon, dan web. Dengan pendaftaran akun secara gratis, sobat dapat melakukan snap photo, clip text, ambil screenshot, dll evernote yg akan melakukan selanjutnya :) Dengan memiliki account sendiri segala sesuatu yang sobat ambil secara otomatis diproses, diindeks, dan membuatnya mudah dicari, pencarian untuk catatan menurut kata kunci, judul, dan tag. Situs memori bekerja paling baik bila kita mengatakan apa yang harus diingat. Kita melakukan ini dengan mengidentifikasi ID dari elemen HTML pada halaman kita yang berisi konten kita.

Misalnya, pada halaman ini, konten yang terkandung dalam elemen, jadi kita akan memasuki konten dalam kotak di bawah ini. Jika kita tidak terbiasa dengan HTML situs kita, jangan khawatir. Kami bekerja sama dengan terkemuka alat pengembangan blog dan situs untuk membuat menambahkan Evernote Memori Situs benar-benar sederhana. Tujuan Evernote adalah memberikan setiap orang kemampuan untuk dengan mudah menangkap momen, ide, inspirasi, atau pengalaman ketika mereka ingin menggunakan perangkat atau platform mana yang mereka anggap paling nyaman, dan kemudian membuat semua informasi yang mudah ditemukan. Evernote adalah sebuah perusahaan swasta independen berkantor pusat di Mountain View, California.

Script

Letakan script dari web evernote ini dibawah tag <head><script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>

HTML

Masukin syntax link ini ditempat yg diinginkan, yg terpenting didalam tag <body> template sobat.

<a href="#" onclick="Evernote.doClip({contentId:'content'}); return false;"><img src="http://static.evernote.com/article-clipper.png" alt="Clip to Evernote" style="border:none" /></a>

Silahkan registrasi dan baca selengkapnya di EverNote. Bye bye :-h

Instant Ways Plus

Perasaan pernah mosting mengenai grab kata, terus disearch via beberapa web gitoh :-/ tapi lopa apa judulnya :)) Widget kali ini mirip dengan itu sob, kinerjanya pada blogspot juga cukup mudah. Karena hanya tinggal dimasukin ke Add a Gadget ► HTML/Javascript ;) Ketika menyorot kata yg akan disearch nanti ada pilihan mau via mana www.google.com, http://twitter.com, http://search.twitter.com, www.oneriot.com, dan http://en.wikipedia.org Silahkan meluncur bro SmarterFox. Itu cara instant search, jika sobat mau bikin menu dan secara instant juga silahkan menengok kemari StyledMenus. Disana nanti sobat akan dihadapkan dengan pilihan menu CSS yg gaya punya :-bd

Menu dan search sudah kalau sobat mau lihat² smiley yg tentunya Beben si bloglang ganteng kalem tea sudah pernah berbagi dalam artikel yg entah dimana keberadaannya :D patut deh melirik kemari AliceWoodRome, lutu² emoticonnya deh :x Apalagi yak yg instant² buat gaya-gayaan :P Oh iyah, ini saja deh popup :-? pasti udah pada tauk deh feature satu itu :-" Cari kode tag <head> jika ingin simpan dibawah scriptnya, jika ingin diatas cari kode tag </head>

Javascript Popup

<script language='javaScript'>
//<![CDATA[
function popUp(url) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(url, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=400,height=300,left = 430,top = 255');");
}
//]]>
</script>

Ketika akan memakainya sobat tinggal menggunakan syntax link seperti berikut...<a href="javascript:popUp('http://YOUR-LINK-BLAH-BLEH-BLOH')">Open the Popup Window</a>Yang lain nih...

Javascript OpenWin.

<script language='JavaScript'>
//<![CDATA[
function openWin(url, w, h)
{
var winprop = "width=" + w + ",height=" + h;
openwin = window.open(url,'',winprop);
}
//]]>
</script>

Syntax link jika mau memakai openwin ini...<a href="JavaScript:openWin('YOUR-LINK-BLAHBLEHBLOH', '500', '250')");">TITLE</a>Terkahir ini openwin/popup terintegrasi dengan jQuery, jadi plugin gitoooH :))

jQuery plugin script

<script type='text/javascript'>
jQuery('a.popup').live('click', function(){
newwindow=window.open($(this).attr('href'),'','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
});
</script>

Syntax link ketika mau memakainya...<a class="popup" href="http://beben-koben.blogspot.com/">Prodigy of Head</a> Tinggal pakai atribut class="popup" didalam syntax link :) Dah ah kebanyakan, nanti malah ngiler ;;) Thats all about Instant way's-plus-plus

See you :-h \m/

Highlighters for Blogspot By: Dan Webb

Sebelumnya Beben si bloglang ganteng kalem tea udah membagikan koleksi² penulisan dan script yang mungkin bisa berguna bagi sobat dengan artikel berjudul balakutak :D Sekarang bagaimana membuat kode pada postingan blog sobat bergaya highlighter. Mungkin sudah tidak asing lagi kalau dikalangan blog berbasis WP maupun web. Jika sobat perhatikan penulisan kode-kode mereka baik yg CSS, HTML, Script dipostingannya pasti huruf dan gayanya full stylish kan b-) Setelah melakukan BW kesana kemari mencari kode syntax highlighter ini, menemukan juga yg mungkin simpel dan kecil sizenya :P Code Highlighter 0.2 ini karya Dan Webb (www.danwebb.net) Setelah ditest di dummie blog alias demo blog, berjalan dengan baik dan mulus ;)) Berikut screenshotnya :D

• HTML Highlighter
• CSS Highlighter
• Javascript Highlighter

Ooops karena ini terintegrasi dengan jQuery, maka sobat sudah harus memiliki script ini di template sobat yah...<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>Letakan keseluruhan script ini dibawah tag <head> atau diatas tag </head>

1. <script type="text/javascript" src="CodeHighlighter.js"></script>
2. <script type="text/javascript" src="javascript.js"></script>
3. <script type="text/javascript" src="css.js"></script>
4. <script type="text/javascript" src="html.js"></script>

Dapatkan seluruh script diatas dihalaman http://svn.danwebb.net/external/CodeHighlighter/trunk/ Setelah itu masukin kode CSS diatas/sebelum kode ]]></b:skin>

Kode CSS

.javascript .comment {
color : green;
}
.javascript .string {
color : teal;
}
.javascript .keywords {
color : navy;
}
.javascript .global {
color : blue;
}
.javascript .brackets {
color : navy;
}
.css .comment {
color : gray;
}
.css .properties {
color : navy;
}
.css .selectors {
color : maroon;
font-weight : bold;
}
.css .units {
color :red;
}
.css .urls {
color :green;
}
.html .tag {
color : purple;
}
.html .comment {
color : gray;
font-style: italic;
}
.html .string {
color : navy;
}
.html .doctype {
color : teal;
}
pre {
border: 1px solid black;
margin : 2em;
padding : 1em;
line-height: 1.5;
background:#debe94;
overflow: auto;
}
code {
font-size: 1.2em;
}

Perhatikan CSS yg dibedakan warnanya itu, biasanya itu sudah ada kalau yg sudah mengedit template :-? (harap dicek dolo) Kalau sudah ada tidak usah pakai lagi maksudnya mah ;)) Tinggal kode CSS yg lainnya ajah yg diedit-edit :P biar gaya dan full stylish :-" Untuk kode HTML terpakai ketika kita akan memosting kode HTML, CSS, atau Javascript tentunya sudah diphrase terlebih dahulu ;) Gunakan tag sbb

1. Untuk Javascript mode.
<pre><code class="javascript">

YOUR CONTENT IS HERE

</code></pre>
2. Untuk HTML mode.
<pre><code class="html">

YOUR CONTENT IS HERE

</code></pre>
3. Untuk CSS mode.
<pre><code class="css">

YOUR CONTENT IS HERE

</code></pre>

Jika tertarik dengan teknik Publish Source code in Blogger masih menggunakan highlighter trick juga, bisa lihat alternatif lain Publish Source code in Blogger .
Happy highlighters \m/

Web Upd8 on Prodigy of Head

Setelah bergelut dengan linux bos saya, yang menjadikan saya tertunda untuk melakukan Blog Walking :( Tapi tidak disangka saya malah menclok ke negara Romania. Disana saya menemukan blogger bernama @Andrew dengan artikel² mengenai tutorial blogspot yang gaya punya dan full stylish sob :-bd Edan artikelnya sob, dari yang cetek banget sampai yg bikin kepala mau pecah dikit :D Introduce my friend blogger from Romania taraaa webupd8. Saran Beben, lihat menunya pilih title Tags lalu liat kategori web dan cari Blogger atau Blogging/Webmaster, lalu acak-acak dan dapatkan ilmunya :))

Ada artikel yg membuat Beben tersenyum dari sobat kita ini, yaitu membuat "Adding Subtitles To Your Blog Entries" yg mana nanti akan ada judul kecil dibawah judul utama postingan kita. Caranya juga cukup sederhana lagi http://www.webupd8.org/2009/08/adding-subtitles-to-your-blog-entries.html :D Satu lagi postingan mengenai "Inline Website Translation Using jQuery and Google Translate API" sok search disana yah ;)) Pokoknya mantap, maknyus, gaya, full stylish bagi kita untuk newbi² ini ;)
See you :-h \m/

jQuery - Fading Content

Sobat sudah baca jQuery slider. Kali ini Beben si bloglang anu ganteng kalem tea akan berbagi yang mirip dengan itu bisa gonta-ganti gituh, tapi ini berbentuk pesan, gambar banner juga bisa pokoknya bisa ganti² gitoh. Dalam format HTML <li> ini sehingga mudah digunakan :D Tentunya harus memiliki jQuery 1.4.3 karena ini merupakan trik plug-in ;))
Letakan script jQuery plugin ini dibawah Jquery 1.4.3 atau diatas tag </body>

Jquery Pug-in

<script type="text/javascript">
//<![CDATA[
this.randomtip = function(){
var pause = 5000; // define the pause for each tip (in milliseconds)
var length = $("#tips li").length;
var temp = -1;
this.getRan = function(){

// get the random number
var ran = Math.floor(Math.random()*length) + 1;
return ran;
};
this.show = function(){
var ran = getRan();

// to avoid repeating
while (ran == temp){
ran = getRan();
};
temp = ran;
$("#tips li").hide();
$("#tips li:nth-child(" + ran + ")").fadeIn("slow");
};
show(); setInterval(show,pause);
};
$(document).ready(function(){
randomtip();
});
//]]>
</script>

Cari kode ]]></b:skin> lalu masukin kode CSS berikut diatasnya.

#tips, #tips li{
margin:0;
padding:0;
list-style:none;
}
#tips{
width:100%;
font-size:15px;
line-height:120%;
}
#tips li{
color: #ffffff;
text-align: center;
padding:10px;
background:#555555;
display:none; /* hide the items at first only */
}

Untuk masukin kode HTML, bisa dilakukan didalam tag <body> template sobat atau dengan jalan Add a Gadget ► HTML/Javascript

Kode HTML

<ul id="tips">
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr?</li>
<li>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua?</li>
<li>At vero eos et accusam et justo duo dolores et ea rebum?</li>
<li>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet!</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr?</li>
</ul>

Save dan lihat hasilnya, berubah-rubah enggak tuh tulisannya yg ditag <li> tersebut :P See you and happy blogging \m/

Resource by: www.snipplr.com/

Balakutak Posted

Siap-siap nih dengan artikel satu ini!!! Karena Beben si bloglang ganteng kalem tea akan membagikan penulisan² yg mungkin bisa sobat pakai dalam menghiasi blog agar menjadi gaya and full stylish b-) Mungkin bisa jadi kalau mau diterapkan diblog dengan jalan metode Add a Gadget ► HTML/Javascript :D Pakailah sesuai kebutuhan dengan bijak ;)) Hmmm...seperti embed frame kalender dari G-Mail ini...<iframe src="http://www.google.com/calendar/embed?height=350&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=YOUR-ID-GMAIL%40gmail.com&amp;color=%232952A3&amp;ctz=America%2FNew_York" style=" border-width:0 " width="100%" height="350" frameborder="0" scrolling="no"></iframe>Ganti tulisan berwarna merah dengan account Gmail sobat. Sobat mau membuka secara pop-up kayak begini Try it!, maka kodenya seperti ini<a href="http://2.bp.blogspot.com/_Sd_fWTTYeEk/S1L9B-vubBI/AAAAAAAAAA0/mHUmNPamr-E/prodigy-of-head-727264.gif" onclick="window.open(this.href, 'popupwindow', 'width=500,height=75,scrollbars,resizable'); return false;" title="my banner">Try it!</a>Jika mau menampilkan status terakhir twitter via JSON script, dan tentunya terintegrasi dengan script jQuery 1.4.3

<script type='text/javascript'>
$.getJSON("http://twitter.com/statuses/user_timeline/YOUR-ID-ACCOUNT-TWITTER.json?callback=?", function(data) {
$("#twitter").html(data[0].text);
});
</script>

<div id="twitter"></div>

Jika mau via blogger, sobat bisa melakukan dengan teknik ini juga :D<h2>Recent Tweets</h2>
<ul id="twitter_update_list"></ul>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/YOURNAME-ACCOUNT-TWITTER.json?callback=twitterCallback2&amp;count=5"></script>Mau menampilkan gambar supaya ada disebelah links menurut typenya, sobat bisa mengunjungi PoolieStudios. Untuk mendapatkan icon yg gaya punya & full stylish sobat bisa satroni Icons.MySiteMyWayJavascript hari beserta tanggal<script type="text/javascript">
var tgl=new Date()
var nombredia=new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jum'at","Sabtu")
var nombremes=new Array("Jan","Feb","Mar","Aprl","Mei","Jun","Jul","Agsts","Sept","Oct","Nov","Des")
document.write(nombredia[tgl.getDay()] + " ")
document.write(tgl.getDate() + " - ")
document.write(nombremes[tgl.getMonth()] + " - ")
document.write(tgl.getFullYear())
</script>Script Json guna menampilkan IP sobat tercayang ;))

<script type='text/javascript'>
$.getJSON("http://jsonip.appspot.com?callback=?",function(data){
$("#Ip").html( "Your ip: " + data.ip);
});
</script>

<div id='Ip'></div>

jQuery plugin guna mengetahui jenis browseran dan versinya<script type='text/javascript'>
jQuery.each(jQuery.browser, function(i, val) {
$("<div>" + i + " : <span style='color:red'>" + val + "</span>") .appendTo(document.body);
});
</script>Script Json untuk menampilkan video youtube via account yg mengupload...

<script type="text/javascript">$(function() {
$.getJSON('http://gdata.youtube.com/feeds/users/ID-ACCOUNT-UPLOADER-YOUTUBE/uploads?alt=json-in-script&callback=?&max-results=10', function(data) { 
$.each(data.feed.entry, function(i, item) {
    var title = item['title']['$t'];
    var video = item['id']['$t'];
video = video.replace('http://gdata.youtube.com/feeds/videos/','http://www.youtube.com/watch?v=');
$('#youtube').append('<a href="'+video+'">'+title+'</a> <br/>');
});
});
});
</script>

<div id="youtube"></div>

Script jQuery plug-in disable click (klik kanan pada mouse tidak berfungsi)<script type='text/javascript'>
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
</script>atau<script type='text/javascript'>
$(document).ready(function()
{
$(document).bind("contextmenu",function(e){
return false;
});
});
</script>Ada lagi<script type='text/javascript'>
$('*').bind("contextmenu", function(e){ return false; })
</script>Demikian bagi² penulisan yg mungkin jika sobat BW blon tentu nemuin :)) Balakutak postingan ini mungkin bisa bermanffat bagi kemajuan blog kita tercinta \m/ Seluruh trik penulisan script² diatas terintegrasi dengan script inti
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/></script>
Jadi maksudnya, trik itu akan berfungsi jika ada script disebutkan diatas yah sob :D
Untuk penulisan kode embed flash yg ada di google dan youtube...

Embed flash Google

<object width="100%" height="200" type="application/x-shockwave-flash" data="http://video.google.com/googleplayer.swf?docId=ID-XXXXXX" >
<param name="wmode" value="transparent" />
</object>

Embed flash YouTube

<object type="application/x-shockwave-flash" width="100%" height="200" data="http://www.youtube.com/v/ID-XXXXXX&amp;rel=0">
<param name="movie" value="http://www.youtube.com/v/ID-XXXXXX&amp;rel=0"></param>
<param name="wmode" value="transparent"></param>
</object>See you and happy blogging :-h

Google^TM

Image Post With Effect Isolasi

Masih bergelut dengan CSS dan HTML postingan yang akan Beben si bloglang ganteng kalem tea beberkan kali ini sob ;)) Kemarin kan sudah tuh bagaimana cara membuat exchange banner (ID) bergaya kartu nama Heres for Posted Nah untuk sesi sekarang, membuat gambar dipostingan kita bergaya seperti diisolasi :D Seperti biasa pada screenshot :P dan perhatikan gambar isolasi pada bagian atas gambar peta!!!

Nanti dalam postingan, jika sobat mau masukin gambar akan tampak seperti ditempel dengan menggunakan isolasi :x Seperti itu kira² penjelasannya, dan bumbu²nya yaitu [..] Sobat harus sudah memiliki gambar isolasinya, nih disinih ambil Gambar Isolasi.

Kode CSS

div.isolasi {
display: block;
position: relative;
height: 290px;
text-align:center
}
div.isolasi span {
position: absolute;
background: url(http://GAMBAR-ISOLASI.GIF) no-repeat;
width: 170px;
height: 28px;
left: 160px;
}
div.isolasi img {
margin-top: 15px;
border:none;
-moz-box-shadow: 10px 10px 5px #777;
-webkit-box-shadow: 10px 5px 5px #777;
box-shadow: 10px 5px 5px #777;
}

Masukin semua kode CSS tersebut diatas/sebelum kode ]]></b:skin>

Kode HTML

Kode ini dipakai ketika sobat akan memosting (tag yang dipakainya)

<div class="isolasi">
<span></span>
<img src="http://GAMBAR-YANG-AKAN-DIPOSTINGKAN.JPG" alt=""/>
</div>

Kalau tidak mau lupa, sobat save saja itu kode HTML-nya dengan cara Dashboard ► Settings ► Formatting ► Scroll kebawah dikit dan cari Post Template ► Masukin deh disana kodenya :) See you and happy blogging, and happy image with effect isolasi :)) :-h
Untuk image bergaya iframe...

Kode CSS

.img {
display: inline-block;
position: relative;
text-decoration: none;
}
.img img {
border: 1px solid #cccccc;
padding: 10px;
}
img:hover {
background-color: #AA00FF;
border: 1px dashed #FFFFFF;
}
.img div {
background: #666666;
color: #ffffff;
opacity: .70;
padding: 3px 0px;
position: absolute;
left: 0px;
bottom: 10px;
text-align: center;
width: 100%;
}
.img:hover div {
font-size:135%;
color: #FFFF00;
}

Kode HTML

<a href="#" class="img">
<img src="http://YOUR-LINK-IMAGE.jpg">
<div>Your Captions</div>
</a>

Cardname for Exchange ID

Siapa yang tidak mengenal dengan budaya change banner dikalangan blogger Indonesia :-/ Banner dengan sentuhan kreasi, yg ditempatkan pada trick textarea guna mempermudah mencomotnya bagi pelancong keblog kita tercinta :x Rileks sejenak dari tutorial script-scriptan, empet butek kepala mo pecah ngejelegur :-& Balik lagi ke acara tukar menukar, tapi dengan konsep sedikit berbeda dengan teknik kartu nama :bz Jika versi change banner dengan textarea metodh (campur aduk kieu bahasana) :)) akan tampak kayak begini kali yak sob

<a href="http://beben-koben.blogspot.com" target="_blank"><img border="0" alt="Prodigy of Head" src="http://i41.tinypic.com/4v5nq0.gif"/></a>
Bagaimana kalau kita berkreasi dengan cardname touching art b-) untuk membuat exchange link/banner >-) Ini dia hasil kreatifitas Beben si bloglang anu ganteng kalem tea :P

Ini kode yg sudah tinggal ngambilnya sob, banner cardname akuh He...He...He... :))<center><div style="text-align:left; font:12px Verdana, Helvetica, Arial, sans-serif; width:315px; height:166px;padding-top:3px;background:url(http://3.bp.blogspot.com/_ALuJjudg6Rg/TOVPCFm3y6I/AAAAAAAACng/Qo_BLVY5MnE/CARDNAME.gif)" /><p style="line-height:14px; font-size:14px; margin:0 0 0 105px; color:#331608;">Beben Koben</p><p style="line-height:14px; margin:0 0 0 137px; color:#461E0B;">Tutorial for full stylish blogger, Blogspot</p><p style="line-height:14px; margin:0 0 0 142px; color:#5A270E;">KubSar VII</p><p style="line-height:14px; margin:0 0 0 141px; color:#6C2F11;">SekeLoa St</p><p style="line-height:14px; margin:0 0 0 138px; color:#7E3614;">Sex: 100% Male</p><p style="line-height:14px; margin:0 0 0 131px; color:#8E5634;">IQ: Jongkok - Pas²an</p><a href="http://beben-koben.blogspot.com.com" style="color:#555; text-decoration:none;" title="my blog"><p style="line-height:13px; margin:0 0 0 130px;">Prodigy of Head</a></p><div style='margin-top:3px'><a href="http://www.facebook.com/beben.koben?ref=profile" title="my facebook"><img style="border:0; margin:0 0 0 155px; float:left;" src="http://3.bp.blogspot.com/_ALuJjudg6Rg/TOVSNQ3C4GI/AAAAAAAACno/rJmYHbIQVtU/facebook.gif" alt="Facebook" /></a><a href="http://twitter.com/bebenkoben" title="my twitter"><img style="border:0; margin:0; float:left;" src="http://1.bp.blogspot.com/_ALuJjudg6Rg/TOVSPLLBVbI/AAAAAAAACn4/Ar4J9T6jo_4/twitter.gif" alt="Twitter" /></a><a href="http://id.linkedin.com/pub/beben-koben/20/655/537" title="my linkedin"><img style="border:0; margin:0; float:left;" src="http://1.bp.blogspot.com/_ALuJjudg6Rg/TOVSOMWV_II/AAAAAAAACnw/CKLpNpM1QJk/linkedin.gif" alt="Linkedin" /></a></div></div></center>

Bumbu-bumbunya

<div style="text-align:left; font:12px Verdana, Helvetica, Arial, sans-serif; width:315px; height:166px;padding-top:35px;background-image:url('http://gambar-background-kartunama.JPG');">

<p style="line-height:14px; font-size:14px; margin:0 0 0 105px; color:#331608;">YOUR NAME</p>
<p style="line-height:14px; margin:0 0 0 137px; color:#461E0B;">Tutorial for full stylish blogger, Blogspot</p>
<p style="line-height:14px; margin:0 0 0 142px; color:#5A270E;">YOUR PLACE</p>
<p style="line-height:14px; margin:0 0 0 141px; color:#6C2F11;">YOUR STREET ADDRESS</p>
<p style="line-height:14px; margin:0 0 0 138px; color:#7E3614;">YUOR GENDER</p>
<p style="line-height:14px; margin:0 0 0 131px; color:#8E5634;">YOUR IP</p>
<a href="http://LINK-URL-BLOG.blogspot.com.com" style="color:#555; text-decoration:none;">
<p style="line-height:13px; margin:0 0 0 151px;">Prodigy of Head</a></p>

<div style='margin-top:3px'>

<a href="http://www.facebook.com/YOUR-NAME-ACCOUNT?ref=profile"><img style="border:0; margin:0 0 0 155px; float:left;" src="http://LINK-GAMBAR-IMAGE-facebook.gif" alt="Facebook" /></a>
<a href="http://twitter.com/YOUR-NAME-ACCOUNT"><img style="border:0; margin:0; float:left;" src="http://LINK-GAMBAR-IMAGE-twitter.gif" alt="Twitter" /></a>
<a href="http://id.linkedin.com/pub/YOUR-NAME-ACCOUNT"><img style="border:0; margin:0; float:left;" src="http://LINK-GAMBAR-IMAGE-linkedin.gif" alt="Linkedin" /></a>

</div>
</div>

Silahkan ganti sama sobat, dan hiasin kreasinya dengan briliant 8->> Setelah itu, masukin deh ke textarea sobat itu bumbu²nya! Ketika ada pelancong mengambil banner...TARAAA!!! Sebuah kartu nama dg design cuamiknyah terpampang :)>-
Bye bye :-h

I Finally Got Slider/Slideshow for My Heading :P

Sekian lama mengobak-ngabik web, ternyata ketemu juga nich sob Image slider/slideshow jQuery plugin. Maksudnya ketemu yg cocok dipasang di blog aku Beben si bloglang ganteng kalem tea :)) =)) Selayang pandang mengenai image slidehow/slider yaitu, image yg silih berganti dengan lembutnya diatur dengan irama agar terlihat gaya dengan menggunakan jQuery script :D ;)) Pada sesi ini, aku tidak akan menerangkan bagaimana cara memasang di template blog sobat. Tinggal mengikuti langkah² yg sudah ada saja kok sob :-bd Dua metode ini paling simpel ditemukan disinih sob:

1. SohTanaka
2. Jon Raasch's Blog
3. jQuery Banner Rotator Tergaya

Silahkan dipilih mana yg menurut sobat paling mudah dipakainya. Untuk sobat Ardhiansyam http://www.berandabumi.co.cc/ yg aku tengok suka mengulik-ngulik jQuery juga, dan dia berkata pada balasan komentar aku diblognya

Segera dipublikasikan sob, biar ga penasaran

Here's bro cekgidot buka web keren berikut http://www.claudiowebdesign.it/ ► Klik kategori Blog ► Cari postingan dg judul "New jQuery Plugin: Spiral animations" Happy jQuery brooo \m/ and see yah :-h

jQuery plug-in slideshow terpendek kayaknya mah ini nih (http://snook.ca/) ;)) :D

jQuery Plug-in

<script type='text/javascript'>
jQuery(function(){
jQuery('.fadein img:gt(0)').hide();
setInterval(function(){
jQuery('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');},
3000);
});
</script>

Kode CSS

.fadein{position:relative;height:120px}
.fadein img{position:absolute; left:0; top:0}

Kode HTML

<div class="fadein">
<img alt='' src='http://your-link-image1.jpg'/>
<img alt='' src='http://your-link-image2.jpg'/>
<img alt='' src='http://your-link-image3.jpg'/>
<img alt='' src='http://your-link-image4.jpg'/>
<img alt='' src='http://your-link-image5.jpg'/>
<img alt='' src='http://your-link-image6.jpg'/>
</div>

Accordion jQuery Plug-In

Lahan diblog semakin sempit? saatnya kreatifitas kita dituntut untuk mengoptimalkan jQuery Plug-in :D ;)) Dengan trik yang akan Beben si bloglang ganteng kalem tea beberkan ini mengenai simple accordion. Baca dan tengok live demo yang sudah pernah master Abu Farhan posting mengenai the best accordion for blogger :-bd Kalau disana master Abu Farhan menggunakan script tambahan dalam penggunaan accordionnya :-/
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/accordionscriptv101-min.js' type='text/javascript'/>
Kalau sekarang mah, full 100% plug-in with jQuery :-" Diharuskan sudah memiliki script Jquery:<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>Jika sudah ada tidak usah dipakai lagi, bikin nambru`u sob :)) Letakin script plug-in ini diatas tag </body> atau dibawah tepat script jQuery/1.4.2

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("dd:not(:first)").hide();
$("dt a").click(function(){
$("dd:visible").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
});
});
//]]>
</script>

Kode CSS

Letakin seperti biasa sebelum kode ]]></b:skin>

dl {
width: 100%;
}
dl,dd {
margin: 0;
}
dt {
background: #555555;
border-bottom: 2px solid #000000;
font-size: 18px;
padding: 5px;
margin: 0;
}
dt a {
color: #FFF;
display:block;
text-align:center;
text-decoration: none;
}
dt a:hover {
background-color: #AA0000;
}
dt a:active {
background-color: #ffff00;
color: #AA0000;
}
dd a {
color: #000;
}
ul {
list-style: none;
padding: 5px;
}

Kalau suka dan mengerti CSS silahkan berkreasi sendiri :P Masukin HTML ini pada <body> template sobat. Jika mau dimasukin disidebar blog sobat, tinggal otak-atik ID CSSnya saja :D

<dl>
<dt><a href="#">jQuery</a></dt>
<dd>
<ul>
<li><a href="#">BLAH</a></li>
<li><a href="#">BLEH</a></li>
<li><a href="#">BLOH</a></li>
</ul>
</dd>
<dt><a href="#">Plug-In</a></dt>
<dd>
<ul>
<li><a href="#">BLAH1</a></li>
<li><a href="#">BLEH1</a></li>
<li><a href="#">BLOH1</a></li>
<li><a href="#">BLUH1</a></li>
</ul>
</dd>
<dt><a href="#">Development</a></dt>
<dd>
<ul>
<li><a href="#">BLAH2</a></li>
<li><a href="#">BLEH2</a></li>
<li><a href="#">BLOH2</a></li>
</ul>
</dd>
</dl>

Save

Secara keseluruhan tampak sbb: Click Here for Custom Model Window

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title>Accordion Demo</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("dd:not(:first)").hide();
$("dt a").click(function(){
$("dd:visible").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
});
});
//]]>
</script>
<style type='text/css'>
body { font-family: Arial; font-size: 16px; }
dl {
width: 100%;
}
dl,dd {
margin: 0;
}
dt {
background: #555555;
border-bottom: 2px solid #000000;
font-size: 18px;
padding: 5px;
margin: 0;
}
dt a {
color: #FFF;
display:block;
text-align:center;
text-decoration: none;
}
dt a:hover {
background-color: #AA0000;
}
dt a:active {
background-color: #ffff00;
color: #AA0000;
}
dd a {
color: #000;
}
ul {
list-style: none;
padding: 5px;
}
</style>
</head>

<body>
<dl>
<dt><a href="#">jQuery</a></dt>
<dd>
<ul>
<li><a href="#">BLAH</a></li>
<li><a href="#">BLEH</a></li>
<li><a href="#">BLOH</a></li>
</ul>
</dd>
<dt><a href="#">Plug-In</a></dt>
<dd>
<ul>
<li><a href="#">BLAH1</a></li>
<li><a href="#">BLEH1</a></li>
<li><a href="#">BLOH1</a></li>
<li><a href="#">BLUH1</a></li>
</ul>
</dd>
<dt><a href="#">Development</a></dt>
<dd>
<ul>
<li><a href="#">BLAH2</a></li>
<li><a href="#">BLEH2</a></li>
<li><a href="#">BLOH2</a></li>
</ul>
</dd>
</dl>
</body>
</html>

Resource by: http://snipplr.com/

Javascript Scroll Mouse

Kali ini Beben akan mencoba berbagi trik mengenai javascript scroll mouse :D Ketika scroll mouse sobat dinaikturunkan akan ada bilangan +1 ketika naik dan -1 ketika turun. Disini akan kita sisipkan syntax link disamping nominalnya :P Jadi waktu menaikturunkan scroll pada mouse akan ada link blog kitanya sob ;)) Bisa juga link yg dianggap penting, jadi pada tauk itu pengunjung ;;) Rada susah ngejelasinnya juga ah sob ~X( On screenshot :D Click Here for Look Screenshot

Kode CSS

#delta {
font-weight: bold;
color: red;
top: 50%;
left: 3px;
position: fixed;
font-size: 115%;
text-shadow: 0px 0px 10px #888;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3
}
#delta a {
color: yellow;
text-decoration: none
}

Javascript

Letakin diatas tag </head>

<script type='text/javascript'>
//<![CDATA[
function handle(delta){var s=delta+": ";if(delta<0)
s+="<a href='http://your-name-blog.blogspot.com/'>Your Title1</a>";else
s+="<a href='http://your-name-blog.blogspot.com/'>Your Title2</a>";document.getElementById('delta').innerHTML=s;}
function wheel(event){var delta=0;if(!event)event=window.event;if(event.wheelDelta){delta=event.wheelDelta/120;if(window.opera)delta=-delta;}else if(event.detail){delta=-event.detail/3;}
if(delta)
handle(delta);}
if(window.addEventListener)
window.addEventListener('DOMMouseScroll',wheel,false);window.onmousewheel=document.onmousewheel=wheel;
//]]>
</script>

Gantilah kode yg diberi warna berbeda itu :) Setelah itu masukin tag HTML dibagian <body><div id='delta'/>Dan lihat hasilnya :-bd See yah with Beben si bloglang ganteng kalem tea :D :-h

Source by: http://snipplr.com/

Search Gaya Full Stylish

Hai...hai...haiii, bertemu kembali dengan Beben si bloglang ganteng kalem tea yang selalu menampilkan postingan gaya punya and full stylish :"> Kali ini bagaimana membuat bagian search tampil beda, dan yg pastinya cool b-) Pasti sobat sudah pada tauk itu si kotak search yah ;)) Metodenya seperti ini sob! Kita akan membuat bagian search kita, yg biasanya gambar tombol search berupa kaca pembesar (what ever) selalu menyertai di belakang kotak search atau didalamnya! Sekarang kita buat si gambar kaca pembesar itu yg hanya tampak, dan ketika cursor/mouse disorotkan akan terbelalak kotak searchnya :D [bingung-bingung lah :))] Untuk melihat aksi livenya silahkan kunjungi web yg menciptakan kreasi ini http://typo.graphr.net/ dan lihat pada pojok kanan atas ;) Bumbu-bumbunya [..]

Kode CSS

Seperti biasa letakin sebelum/diatas kode ]]></b:skin>

#search form {
position: absolute;
top: 0;
right: 0;
height: 18px;
overflow: hidden;
padding: 18px 8px 0 28px;
background: url("http://link-image-search.gif") 8px 50% no-repeat;
}
#search form div {
margin-top: -0.58em;
}
#search input[type="text"] {
width: 175px;
margin-left: -1000em;
border: 1px solid #c0c0c0;
border-top-color: #808080;
border-bottom-color: #e0e0e0;
background-color: #999999;
padding: 0.2em 0.3em;
font-size: 70%;
font-family: Lucida, Verdana, sans-serif;
color: #ffffff;
}
#search form:hover input[type="text"],
#search input[type="text"]:focus {
margin-left: 4px;
}
#search input[type="submit"] {
display: none;
}

Ganti http://link-image-search.gif dengan gambar beresolusi 18x20 pixels. Masukan tag HTML berikut dibagian search template blog sobat...

<div id="search">
<form method="get" action="http://your-name-blogsot.com" onclick="this.style.marginLeft='0';">
<div>
<input type="hidden" name="" value="41" />
<input type="text" id="search" name="search" tabindex="1" />
<input type="submit" value="Search" />
</div>
</form>
</div>

Perhatikan tulisan yg dibedakan itu, itulah kode yg berperannya sob. Happy blogging and see you :-h

Hopefully Useful

Kadang-kadang tatkala kita ingin membuat sesuatu yang gaya itu harus memiliki skill yg keren :D Ternyata bisa jadi persepsi itu salah kok sob! Dengan ilmu pas-pasan tapi dengan kreatifitas sedikit, kita bisa kok membuat skill gaya punya. Setelah BW dan melihat-lihat dan menelaah, Beben si bloglang ganteng kalem tea akan memberi contoh hal-hal sederhana yg membuat gaya :)) Contoh simpel ini bisa sobat praktekan dalam mencari ide membuat sebuah favicon (favorites icon) Tahu kan favicon sob ;)) icon kecil pada tab browsingan dan address bar ;)

Hanya dengan begini saja sob coba tuh kita dapat mengetahui berbagai macam gambar favicon dengan domain.com<img src="http://www.google.com/s2/favicons?domain=blah-bleh-bloh.com" />Ganti kata² blah-bleh-bloh dengan nama domain yg dituju :D

Untuk tulisan menjadi gambar berformat PNG, sobat bisa dengan trik ini... <img src='http://l.yimg.com/img.sports.yahoo.com/static/bir/headline?txt=blah-bleh-bloh'/>Ganti tulisan blah-bleh-bloh dg tulisan yg diinginkan. Sobat tahu tidak dengan kode CSS overflow!!! Kita bisa berkreatif dengan kode itu loh...

Put a long text1 in here. It will be scrollable.
Put a long text2 in here. It will be scrollable.
Put a long text3 in here. It will be scrollable.
Put a long text4 in here. It will be scrollable.
Put a long text5 in here. It will be scrollable.
Put a long text6 in here. It will be scrollable.
Put a long text7 in here. It will be scrollable.
Put a long text8 in here. It will be scrollable.

Kode CSS

#scroll_box {
border: 1px solid #ccc;
height: 120px;
width: 400px;
overflow: auto;
margin: 5px 0;
background-color: #ffe;
color: #FFFF00;
}

Silahkan dibagus-bagus sendiri deh variabelnya ya :)

Kode HTML

Ketika mau memosting gunakan tag<div id="scroll_box">YOUR CONTENT HERES</div>Mau menuliskan syntax link new window tanpa variabel target!!!
Insert Link Title<a href="http://ben-tools.blogspot.com/" title="ben-tools" onclick="window.open(this.href,'newwin'); return false;">Insert Link Title</a>Kode opacity...

90 % opacity	50 % opacity	20 % opacity
90 % opacity	50 % opacity	20 % opacity

Kalau mau menuliskan alamat email bebas dari spider nich ;;)

<form action="#" onsubmit="return false;"><input readonly value="Hover to see my E-mail" onmouseover="focus();select();value='b'+'e'+'b'+'e'+'n'+'.'+'k'+'o'+'b'+'e'+'n'+'@'+'g'+'m'+'a'+'i'+'l'+'.'+'c'+'o'+'m';" style="color:#f0f;text-align:center;font-weight:bold" size="23"/></form>

So easy, and hopefully useful see yah \m/

Be a Master

Sobat mungkin sudah pada tahu trik menempatkan sesuatu yang selalu berada dipojok keberadaannya ;;) Sekarang Beben juga akan berbagi trik ringan mengenai benda pojokan, tapi dengan variasi hover pada judulnya. Biar tampak lebih gaya dan bergaya sob :)) Kali ini yg akan dipojokan yaitu si burung twitter. Sederhana saja kok sob, hanya memasukan sedikit kode CSS diatas/sebelum kode ]]></b:skin> di template sobat...

.tweetthis {
position: fixed;
bottom: 0;
right: 5px;
text-decoration: none;
}
.tweetthis span {
display: none;
position: absolute;
right: 32px;
bottom: 32px;
padding: 5px;
background: #33C3FA;
text-decoration: none;
font-weight: bold;
font-size: 1.2em;
border: 2px solid #777;
}
.tweetthis:hover span {
display: block;
}
.tweetthis img {
border: none;
}

Setelah itu, masukin nih kode HTML didalam tag <body>. Ingat jangan sampai didalam tag lain :D<a class='tweetthis' href='http://twitter.com/share'><img src='http://link-your-image-tweet.png'/><span>Tweet this!</span></a>Lalu save dan lihat hasilnya macam apa hayooo \:D/

Click here if you want to be a goodest on creativity Click Here for Be a Master

Customize 404 Page - Blogspot

Hack sederhana ini hanya berlaku untuk bagian yang kolom searchnya belum diapa-apakan, alias asli masih bawaan default blogspot!!! Karena hanya berfungsi jika masih original bagian searchnya ;)) Tahu dong search side :-? Kolom kecil yg berfungsi guna mencari artikel dengan memasukan keyword tertentu :-bd Kalau diblog Prodigy of Head ini ada dibagian kanan atas itu loh. Nah kebanyakan tombol buat searchnya itu berupa gambar kaca pembesar gitooo sob :)) Mari kita mulai hack sederhana ini dari pada ngebosenin baca opening yg gak tau ujung pangkalanya ini...Screenshot hasil result pada search default blogspot akan tampak sbb:

Bagaimana cara mempercantik bagian itu??? Mari kita teguk secangkir ~O) hangat sambil mengklik read more ;;)
Cari kode ]]></b:skin> letakan sedikit kode CSS berikut diatasnya!!!

.status-msg-body{background:#000 url(http://your-link-image.com/w1r7k.gif) no-repeat center center;
text-align:center;
padding:.3em 0;
position:absolute;
z-index:4;
font-size:145%;
color:#FF0000
}

Lalu save deh. Screenshot for result...

Warna dan gambar background tinggal ganti sesuai dg selera :)) Permios :-h

Follower Twitter Widget for Web/blog

Kabar pendek dari sobat kita MyFundoo-Blog yang sudah memosting widget yang mirip follower with Google Friend Connect :D Sobat mungkin sudah familiar dengan kotak fan facebook!!! Menilik dari fungsinya memberitahukan jumlah follower dan juga tombol untuk mengikutinya :) Seperti itulah kira² widget follower for twitter for web/blog :-bd Caranya cukup mudah, kita tinggal Add a Gadget ► HTML/Javascript lalu masukin saja kode-kode berikut kedalamnya yah ;)

<div class="textwidget">
<script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script><div id="twitterfanbox">
<script type="text/javascript">fanbox_init("twitteruser");</script></div>
</div>

<style>
.FB_SERVER_IFRAME {
width: 100% !important;
height: 250px !important;
}
</style>

Gantilah tulisan twitteruser itu dengan ID twitter sobat (tanpa @ didepannya) Heres for screenshot demo...

Silahkan komentarnya :D happy twitter @bebenkoben

Web Reflection

Masih ingat tidak dengan Beben si bloglang kalau memosting sesuatu :-? This is my motto bro "No Gaya No Post" :)) Makanya selalu perhatikan link yg selalu aku kasih yah ;)) Seperti sobat blogger satu ini, asal dari negara tembok berlin berada Jerman. Blognya memosting mengenai javascript, PHP, Web, dan banyak lagi :-bd Dia aktif di jQuery web dan merupakan salah satu user aktif jg di ajaxian web - nih JavaScript Jedi, PHP Ninja and Ajaxian Staff b-) Adapun tutorial blog yg dia postingkan tidak banyak sih, tapi gaya punya euy. Satu yg simpel nih sob... Dia membuat JPU! Mirip dengan Windows Task Manager yg ada di komputer kita, tapi ini untuk memantau kinerja script yg ada di blog kita. Caranya juga cukup mudah (karena sudah dibuat juga sih...xixixi) Sobat hanya tinggal masukin script sebesar 5Kb saja ini ke dalam template sobat. Letakan dibawah kode tag <head><script type="text/javascript" src="http://www.3site.eu/JPU/JPU.js"></script>Setelah tertanam, lihat dipojok kanan, akan tampil nanti kotak kecil dengan indikator yg jedut-jedut mirip LED Indicator...hohoho. Karena saya tidak mengerti akan script²an, maka yg dimengerti saja deh yg di share disini yah ;)) Lanjut mang [..]

Masih ingat mengenai trik membuat emoticon supaya dapat tampil di blog??? (search with keyword emoticon in my search side) Dia juga membuatnya sob! tapi sayang linknya broken jadi rada susah menelaahnya :D @WebReflection ini membuat emot yg terintegrasi dengan jQuery tp yaitu tadi broken linknya euy :( Tapi Beben akan berbagi emot versi yg tertanam di blognya sobat kita ini :D Andrea Giammarchi ;)

Javascript

Letakan script berikut (mau di hosting mau apa adanya) diatas/sebelum tag </head>

<script type='text/javascript'>
//<![CDATA[
(function(list){
// JSmile for jQuery - Andrea Giammarchi [webreflection.blogspot.com] - V0.4
jQuery.fn.extend({
smile: (function(){
function smile(show){
show = !arguments.length || !!show;
this.each(function(i, firstChild){
jQuery.each(firstChild.childNodes, function(i, firstChild){
switch(firstChild.nodeType){
case 1:
show ? jQuery(firstChild).smile(show) : smile.remove(firstChild);
break;
case 3:
if(show && !smile.nodeName[firstChild.parentNode.nodeName.toLowerCase()])
smile.add(firstChild);
break;
}
});
});
return this;
};
smile.add = function(firstChild){
var parentNode = firstChild.parentNode,
nodeValue = firstChild.nodeValue,
i = 0,
length = 0,
img;
nodeValue.replace(
smile.RegExp,
function(createTextNode, pos){
if(++length < smile.max && list[createTextNode]){
if(smile.list[createTextNode])
img = smile.list[createTextNode].cloneNode(true);
else {
img = new Image();
img.className = smile.className;
img.src = "data:image/gif;base64," + list[createTextNode];
img.alt = img.title = createTextNode;
smile.list[createTextNode] = img;
};
jQuery(firstChild).before(document.createTextNode(nodeValue.substring(i, pos))).before(img);
i = pos + createTextNode.length;
}
}
);
if(i)
jQuery(firstChild).before(document.createTextNode(nodeValue.substring(i))).remove();
};
smile.remove = function(firstChild){
jQuery(firstChild).find("img." + smile.className).each(function(i, firstChild){
jQuery(firstChild).replaceWith(document.createTextNode(firstChild.alt || firstChild.title));
});
};
smile.max = 25;
smile.list = {};
smile.className = "jsmile";
smile.nodeName = {"code":1,"noscript":1,"pre":1,"script":1,"style":1};
smile.RegExp = /:arrow:|:cry:|:evil:|:geek:|:idea:|:lol:|:mrgreen:|:oops:|:roll:|:shock:|:twisted:|:ugeek:|8-\)|:o|:x|:\||:!:|:\(|:\)|:\?:|:\?|:D|:P|;\)/g;
return smile;
})()
});
})({"8-)":"R0lGODlhDwAPALMNAP\/qAEVFRQAAAP\/OAP\/JAP6dAP+0AP\/+k\/\/9E\/\/\/x\/\/\/\/\/\/lAP\/\/6wAAAAAAAAAAACH5BAEAAA0ALAAAAAAPAA8AAARZsEkZap24VZbOGRcWcAgCnEMRTEFnnnC6ascLx2sr7DvA76rAgacQ+HZFQ+VwNJ54BGXAdoNFK4PqbUFQabJOmIAAogwGi99YxjoT3m+2KGCoG4IZlmU2iQAAOw==",":evil:":"R0lGODlhDwAPAMQQAEVFRf\/qAAAAAP\/OAP\/JAP6dAP\/9E\/+0AP8AAP\/+k\/\/\/x\/4qAP5tA5aWlv\/lAP\/\/6wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABAALAAAAAAPAA8AAAVpIABApGiSkLmYj5IkgyoyhaEYRqAPQ8GINUBORwT0AA1AwiAg6pqx5C0gaD6bhIJoKUBUqV0B4bClIhDEs5gsvBK\/Y9HASXdkR8ZrFRsr8aw6DgJHKEYDBIiIhCgpAAePB1ojjIUmkyghADs=",":geek:":"R0lGODlhEQARANU\/ALvqHf6rDf\/yHGRXNv6lDP6zDrvjHJpyHNeMEbvtV1xNNLvxWP7aFf67D2upLf7MEZDQX2ZaPvb29pGLeEU6J3VoRbq4sv\/oGf\/lGP7VFLvyIP\/tG\/nvI7vrV3xyXpuYjerp6O7u7dXU0dbGMO6ZDnluWbbnV+3VHX9UBuy+FPDw75iDQ9zb2H5eJ35zYLvvH8J\/Ev7gF7SeLm5hRubUOe6qEHNkPcCBErLeHdmYEoFcJfvtH\/7DDzMzMwAAAPr6+iH5BAEAAD8ALAAAAAARABEAAAa3wJ\/wJ5lUIrbIbCIZOkUVGkewuZxkA5Hz91lNBVRMjJEafIYqxQ4MvmAYmUeKEhJORht2dfzg8Q4TQj6DhD4YhYQ\/Pg4vGo6OPguSCZQQg4wvLz4vAJELPpQJlosApT4ABpEJoB0dow44BrKyoAmtHSaWiog+Bbw+QiIDDcQFxgEBBMoKLEMeBw3HyCjKBx5OIRQ1xj3dyiR0WyAUOcjKBAgUIFtCIBEtNwgwOgrr7EMWHjMlFuxBADs=",":idea:":"R0lGODlhDwAPALMNAEVFRf\/qAAAAAP\/\/\/\/\/OAP\/JAP+0AP\/9E\/6dAP\/+k\/\/\/x\/\/lAP\/\/6wAAAAAAAAAAACH5BAEAAA0ALAAAAAAPAA8AAARdsEkJap24VaZSIhcGcMcRnAQCTEBnCjCqUsk73AK6tvaNBwUVoBYQ4H4FQyVxMg6cuWTF1Hw+T1IA4dSMBRbB3babA4IoBMKiCAOnVmhCoSCYvzMVg94gzLAscBMRADs=",":lol:":"R0lGODlhDwAPALMNAEVFRf\/qAAAAAP\/\/\/\/\/OAP\/JAP+0AP6dAP\/9E\/\/+k\/\/\/x\/\/\/6\/\/lAAAAAAAAAAAAACH\/C05FVFNDQVBFMi4wAwEAAAAh+QQFFAANACwAAAAADwAPAAAEWrBJCWqduNWlUiIXBiyCgARBeQAToJhonK5UcgoxHoCacuspXGEFsMmOBUMlATymlABEaUotQQmpgXY7EAxZAKyA2y3wNAQCo2qmUdKFeJzgbgEMeAMxY7dkIgAh+QQFFAANACwCAAIACwAHAAAEE7BJJFuoOOvNq+if8GGiNAzZ2UQAIfkEBQoADQAsBQAHAAUAAgAABAVQSDlqjQAh+QQFCgANACwFAAcABQACAAAEBTBIKWqNACH5BAUKAA0ALAUABwAFAAIAAAQFUEg5ao0AIfkEBRQADQAsBQAHAAUAAgAABAUwSClqjQA7",":mrgreen:":"R0lGODlhDwAPANUAAAAAAP\/\/\/wDywwDuvwDsvgDqvADktwDitgDgtADcsQDarwDYrgDWrADSqQDOpgDKogDIoQDGnwDEngC+mQC8lwC4lAC0kQCyjwCujACqiQCohwCmhQCggQCcfQCafACWeQCOcgCKbwCGbACCaQB+ZQB8ZAB4YP\/\/\/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAACcALAAAAAAPAA8AAAZ6wJNQCCgWh8hTcQJpKAxHJEBzoTQVh4IAMAR0NkWJY1EcbIkeAKYCeAASBwCBCwB9OBkLJeJgJBAGUAAhRoWFCUUiAAEBi4yOAA1FI5CMjY8QRSWVj48TdCSLjpcAF1xKJqGjRRsap6iqRh4dr0QAJSMiISBRSUqFSUEAOw==",":o":"R0lGODlhDwATANU\/AP6zDv7OEpKLeem3FOvr6uKfEP\/yHFRFK3FmSrl7FGJXOJmViv7CD\/6pDfG4Ef6mDUE4JvrvIOTj4VtNL15SNv7HEP7UFNGLEf6tDd3c2v7ZFf\/pGf6+D\/7dFv\/tG\/65DmpSLP\/lGHNkNv3hGG1hPvPy8v\/++tPSzuugD52HQvOfDezUHWVbQYd+bPXIE+XXOLKaLs3Lx01EL1FFMcTCvZV0H9fKMNakFHluWX10X8CaF\/\/\/+ks+Kf\/\/\/wAAAPr6+iH5BAEAAD8ALAAAAAAPABMAAAbIwJ+wJECQRAqEQMj8nUiviMGzWcFYGeYiJTVMQyPNgLL4EShd7ybUsQQcEKLNw6tTR3UeoyZQ4HeAPCE8gDs8AzJ+hD6GeCaMPB8HIh2LhhqWPAAHFBqYnm4VDB+aADwyLgGqAaKjAAAYKDM5OhW2DAm5sA0NCS00IgzCHD3FGLwPIDE\/LDccHB8+0g0PDxcIQhkTDh8A0j7UKjwSWiCv39UgZU0Q59LWFE1CFAUYx9UJOPI\/EgcXvCoS8CCwjx8CCAd45CDIJAgAOw==",":oops:":"R0lGODlhDwAPAMQfAPqzAP3KAOBsAPeOW\/\/3zftoaP62dfecAP\/Sh\/ykaf+3t\/6YmOdzSkVFRf\/k5P\/69f\/MzP\/qAPiAgP\/86frXAP7jAPmmpv\/8E\/7Lg\/\/+k+NfX9lINgAAAP\/lmfrBewAAACH\/C05FVFNDQVBFMi4wAwEAAAAh+QQFFAAfACwAAAAADwAPAAAFZuAnik1ZjuhXTkSWBSfasNcV3cHRjE3L3UBObqfK\/IBBmIpgixydOF0jY+M8rZEAoJSpUCrIiFdbugAAFGTlfC6dDwHwjQI42HcNQCBt5XjhRA0BcWqDOjyDiYmHMnlsUik8JkQjIQAh+QQFCgAfACwBAAEADQANAAAFUeAnfs9EEMY4ll2HvMYwmt9rf7FI1PadTi4ETwgbEFyiW82QIHgMmB7imUggBgyrzYMdVBmbQc8AZsgGA49QhEl4RQZoDxOXweP4ukpUrdpFIQAh+QQFMgAfACwBAAEADQANAAAFSOAnik65jKgDQUq7FGP5tfT3kjNdn2qbK7lXT1SbLSQOi0XXUh4VEs1CZ4lKrpqPhJotwK7LkeIlES2mzDPMfG6rUaLrdS0KAQAh+QQFCgAfACwBAAEADQANAAAFUOAnihNBGGM6dR3iGsNYfm79wSJB1za6ujvEDkZoiWw0Q4LgMWB4iGYigRgwqDWPdTBlfAY8g5cRGww8QhEmwRUZnDzMO+Z+2+cp0XRKF4UAACH5BAUKAB8ALAEAAQANAA0AAAVR4Cd+E5FlwTiW1xW9wTGa32t\/sZjV9p0SrghPCDtkXKJbLQDIUAKVXuTJjBwEgB7legAABIJDLwA+yAAHilBUQQNEAWivEpfB4\/i6SuT12kUhADs=",":roll:":"R0lGODlhDwAPALMNAEVFRf\/qAAAAAP\/OAP\/JAP\/\/\/\/6dAP+0AP\/+k\/\/\/x\/\/9E\/\/lAP\/\/6wAAAAAAAAAAACH\/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgANACwAAAAADwAPAAAEXrBJCWqduFWWEBoXBnCKEpyDAUxAJwhn8KarhghFAeM6qCW8XFCnAtx0uGTyUEHIXjsogQkwPWOvwLQyiHlPC4JK0\/2eCD7yYAGAAtBjymBAqNdpmcphfyhmWBY1ExEAIfkEBQoADQAsBAAFAAgAAwAABAqwiFnkvFbYoGcEACH5BAUKAA0ALAQABAAHAAQAAAQLsIlG5ayz1Kb5LhEAIfkEBTIADQAsBAAEAAgAAwAABApQtNkkLbThgiePACH5BAUUAA0ALAkACgACAAIAAAQEsAnRIgAh+QQFCgANACwEAAQABwAEAAAEDbCURmUBtIErMOhahkUAIfkEBQAADQAsAgACAAsABwAABB2wSSEbrTJUXVX4zQcqQikEpkBMTdFaWFnJGxdyEQAh+QQFAAANACwCAAIACwAGAAAEFrBJJVuoOFehG7dBCIrKJwQmMV6hGAEAIfkEBQAADQAsAgACAAsABgAABBawSSEbrThLpVuYQmiFlFBIhYmW5ChGADs=",":shock:":"R0lGODlhDwAPALMNAP\/\/\/wAAAP\/qAEVFRf\/OAP\/JAP+0AP6dAP\/lAP\/9E\/\/+k\/\/\/6\/\/\/xwAAAAAAAAAAACH5BAEAAA0ALAAAAAAPAA8AAARXsEk5ap241cWUIhcWjEkinGMwBUAbnALrNnILvLUr77Gr264eMDCovVA24iCRgqFGhgrBSUUUDgPN9HksgCgEAsJpJWAng3BhvTZnMRWD3IB9ZzQWuyQCADs=",":twisted:":"R0lGODlhDwAPAMQRAEVFRf\/qAAAAAP\/OAP6dAP\/9E\/+0AP8AAP\/\/\/\/\/+k\/\/JAP\/\/x\/4qAJaWljMzM\/5tA\/\/\/6wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABEALAAAAAAPAA8AAAVrIABEpGiSkcmY0JIkgyo+RLEURaAPA\/GINUBORwT0AA1AoiAg6pqx5C0gaD6bCoJoKThUqV2BwrClHg7Es5gsvBK\/Y9Eg4HASHdmRscrvx0o8AgiDgwJHKEYxfEZaKCUABpEGWiOOiCaVKCEAOw==",":ugeek:":"R0lGODlhEwASANU\/AP67D4\/KgbWWI\/7YFP6qDY\/SgmZZNv6zDv6kDOHz3f\/yHHt1bZptGkU6J9uUEUSdllNIMlZGLfb29o\/dhP7JEY\/hhjmRkXVoRbq4sv\/oGf\/lGPnuIv\/tG\/7BD4\/Yg4iAbj4+O5uYjUtALuH43+rp6O7u7dXU0W9jQ+3VHe6ZDtzb2GJXPu6qEJiDQ+i\/Fn1zX\/7gF\/Dw78vk40lFO+bUOVxQOenp55WQfJKNe3NkPX5eJ4FcJd7w3vC8EgAAAPr6+iH5BAEAAD8ALAAAAAATABIAAAbDwJ9QKLldDDnDCScZOoWmC22j4GRQgpXpKQy1qIpqBjZwGUJD3y9WA4czGjKl1yj91L683meF7fVCPjIjhIQ+Gj4Jigk8Fmp3DxMVk5M+HgUFAZqOgZETeROfmHmbjzaWHqkePhQ+mq8+MUMQfx0AAH8QTh8CHb63BwcEwwgMH04mBrcAwcLECBEqTy8MzAd6CNkML1wlDSzBzwgpdVw\/Ng0OBBHsCA4NJOZCNis6Ivc7NfHyQxggMyAw8OOyAMQCeUEAADs=",":x":"R0lGODlhDwAPALMNAP\/qAEVFRQAAAP\/OAP\/JAP+0AP6dAP\/+k\/\/9E\/\/\/\/\/\/\/x\/\/\/6\/\/lAAAAAAAAAAAAACH5BAEAAA0ALAAAAAAPAA8AAARbsEkZap241aXOGRcWcAgCnIMRTEEnnLCQrtphvicOaooJ\/wCCKmADCHDGF6FQOcSeQWbAB4QtK4PY8QhgCFeBrCBBJgsIO81gsG3PWGuCXP4WBQr4wjDDstAmEQA7",":|":"R0lGODlhDwAPALMMAP\/qAEVFRQAAAP\/OAP\/JAP6dAP+0AP\/+k\/\/9E\/\/\/x\/\/lAP\/\/6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARYkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnKcgpKt2vHAOaokJ4L8TQRU4+IA4gqFyyDkByorvKVwGBtSTYri6\/mRgAWGnGQwUuS2NZSa43WtRwEA3EDMsS20SAQA7",":!:":"R0lGODlhDwAPAMQdAP\/qAEVFRf\/OAP\/JAP\/9E\/+0AP6dAP\/+k\/\/\/x391AP\/lAAAAAL+vAP\/\/68W1Bi8vL9LBBfPfBHFvV3JwWL+wAEpHKbGiAgMDA21rUxQUFOnXBvvnAFNPJgAAAAAAAAAAACH5BAEAAB0ALAAAAAAPAA8AAAVpYCeKQVmOaFc2yHEIJxqwBAHcghGMQWsnCwZORzrYAEAhbtc7Ii+UG2CgCxillox0Wigdto7KdtANOAEOzrgs2G4gUgWV2b5JHpPbAEYSCBQAGhgRcjk7fQIDioqGKSUFkAVVKTwmhyMhADs=",":(":"R0lGODlhDwARANU\/AGNWM\/\/yHNeMEf7UE\/6tDf6mDVZMM\/6oDWNXQP7HEOi\/Fv\/pGVJFL+ubD0U6J\/7cFvb29v6xDv6+D5KMeHFjOnVoRbq4sv\/lGP\/tG\/61DvnuIv7DD19UOptpGP65DoiAbnxyXpp3HZuYjerp6O\/v7v6jDPr6+gAAAPzhGZiDQ25hRrSeLu6tEX5eJ9mYEn5zYN7NNdzb2MGAEu+9Eu3VHYqEc5WQfLWOGHluWYFcJf\/\/+l1IKmhbOdXU0Us+Kfr6+iH5BAEAAD8ALAAAAAAPABEAAAbBwJ8QYqvwKDzVBCJs9iowTQCzoK04vaYopeHxAouFVwEQ\/UiGbmC9uDwGvJmDVINh1tMFavBIbEI1HCgLPoVtD4U+EiwMACg+PZE+iJE9PhkMFIg6PiY+A50+nBE7BqA6J5wJoqk+EQ4MMwmzGxsSHhkRBAQNDB83tRK3uQQHxh0fPQDCHjvOzgXROzE\/ICHNusUFOyUdL0IkDiwRugcFJSUNc00jDi7a6AIOI01CIwgtMgIyORz09U0sgFCBwwLAIAA7",":)":"R0lGODlhDwARANU\/AJpwG\/7SE\/7KEP6kDP\/yHHJuZdeMEf\/kGFVLM\/\/pGWNXQP6xDui\/FltILOubD0Y6J\/6sDfb29v7cFv65Dv7ZFf7CD5KMeP61DnFjOv\/tG3VoRbq4sv7FEP6oDf69D\/nuImNWM19UOmlcO4iAbn1yXpuYjerp6O\/v7tfW0\/zhGJiDQ+2wEe+9EnluWcJ\/EtbGMG5hRu6qEO3VHYqEc7WWI5WQfMCBEtmYEoBdJlFELubUOVxXSAAAAP\/\/\/zMzM\/r6+iH5BAEAAD8ALAAAAAAPABEAAAa9wJ8wUtOIMCKYJSJsojC6DyGTkNEUqGZJJSUQEokUhQEq\/U4I6W73PawFrMfJ8sqwp2GKYMcBzEIpYBlUBxIBHBUeKzkgKQcHPDyFAZEeExM5GBQSEmsUAXs7ExcLDQgBqKgCiB6kCwsPCCwCBRysowsFEA4IIzQcPsHCwgMAIyggEx4+Pc3NPh0DDVkkAKPDPgPFJEInDzGkEB3RAw5yTSYPN+LkBg8mTUImCjg2Bi44IfDxTRskMC028AsCADs=",":?":"R0lGODlhDwARANU\/AJpwG\/6kDP7bFf\/yHNeMEf7KEP6xDo2HdlVLM\/6tDWNXQP6oDey9E1tILOubD0U6J\/b29v62Dv7CD5KMeHFjOv69D3VoRbq4sv65Dv\/oGf\/lGP7FEP7SE\/\/tG\/nvI2NWM19UOmlcO4iAbnxyXpuYjerp6O7u7dXU0fzhGO6tEZiDQ9zb2H5zYO3VHebUOZWQfG5hRnluWbuIFdmYEsJ\/EoFcJX5eJ1FELvDw77SeLvvtH9bGMP\/\/+ks+KQAAAPr6+iH5BAEAAD8ALAAAAAAPABEAAAa3wJ8Q8rKEKCHYBCJsniwuz6CTaeVApyZJJR1MMwIB40P64RA6rzejEXAKjIdpsuv07lTUvbcBHEB6PII9Gj2CPD0pNx+BPD49AoaOPRg3FAIHgj4HHJKbBg0IHBycbxsSFREHBgk9CAwFG7KoGBGsCQ43IjKnFRW1twsBACInH7S2rAvLAQ0rPywAwD4+zMMsQiYPKQbKwgEOck0lDzMJ1gQPJU1CJQo2NAQ0NSDr7E0XIzAxF\/dBADs=",":?:":"R0lGODlhDwAPAMQaAEVFRf\/qAP\/OAP\/JAP6dAP+0AP\/9E\/\/+k+\/bAH91AAAAAN\/NAP\/\/x8++AA8OAL+vAP\/lAC8rAJ+SAP\/\/6x8cAF9XAN+wAO+8AL+XAG9mAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABoALAAAAAAPAA8AAAV1oCaKQFmOqFZOzHEIJwqwhhHcAgGMQGsskooEEcjtVAcDwkFJUBSL4q5nS0ADy0xgoAMksY1bQ5HYFkqHm7rhiBAHZ4BNHWgTzSUB\/aF43CBcU3piCVFbMCQCAhABVg+ARjyKAxYYFwORMgAFnAVdKTwmRyMhADs=",":D":"R0lGODlhDwARANU\/AP67D\/\/yHP\/kGFRCKXJuZUQ5JteQEf6rDf7IEFZMM\/6kDGNXQP7cFui\/Fv61DuubD\/7SE\/b29v\/oGf7ZFZKMeHFjOv\/tG3VoRbq4svnvI\/7CD2NWM5qXjV9UOptpGGlcO4iAbn1yXpp3Herp6O7u7dXU0eXk4v7gF4FcJX5eJ+2wEZiDQ+6qEJWQfN7NNVJGMe3VHW5hRnluWYqEc7WOGMGAEu+9ErSeLvfhHPvtH\/Dw79zb2F1IKgAAAP\/\/\/\/r6+iH5BAEAAD8ALAAAAAAPABEAAAa6wJ8w0rp8Kp8YJSJsli6uTMAigd06pSZnJQ1MJadJY8P56RI5r1ciYEAQtgJp5rIEej3qCY\/QiGYdOBJ5FgQCBG89ACovGycCAhJsbn0AAA4DFRMMnAwTbxqXDg48CRAFeKmqBQ4FLzYDPrKzswMPLyA0Ghy0sxwHHiAlGwADJr0mAwo8Oz8hIgA8vTwKHiFCJAUspDwoPNQPck0jBQYHBwrpBgUjTUIjCyk1BjUoHe3uTRgyMTIY+UEAADs=",":P":"R0lGODlhDwAPALMOAP\/qAEVFRQAAAP\/OAP8AAP\/JAP+0AP6dAP\/9E\/\/+k\/\/\/x\/\/\/6zMzM\/\/lAAAAAAAAACH5BAEAAA4ALAAAAAAPAA8AAARd0EkZap3Y1aVSGhcWcAgCnMMRTEEnCCfwpquWmHEOagoOn7+CKnADxoKGSiLHBBSSAROjCWA8KwPZa7sVrgJZAWE8FhR2msGgESAHziqWutB+0zIVg94wzLAsNRMRADs=",":arrow:":"R0lGODlhDwAPALMMAP\/qAEVFRQAAAP\/OAP\/JAP\/9E\/6dAP+0AP\/+k\/\/\/x\/\/lAP\/\/6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZUQGhcWcEUBnIMRTEFnnnC6asgLCEK8tvaJnwRVoHbDGXOEQwXhOxqTlZfzBw0MYLCfIri7ZnMAAogyGCiwWxmrTGi31aLAYX4QZliW2SQCADs=",":cry:":"R0lGODlhDwAPAMQQAP\/qAEVFRQAAAP\/OAP\/JAP6dAP+0AP\/+k\/\/9E\/\/\/\/\/\/\/x\/\/\/6\/\/lAACM2IG71l5eXgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH\/C05FVFNDQVBFMi4wAwEAAAAh+QQFHgAQACwAAAAADwAPAAAFXCAkikFZjihULspxDCcasAgC3EMRjEEr3EBBbqc6\/IBBmEphQyIJusDBJjgCqgCCoXRwOrWlpvcGDgzGNwZ0Z75V31mlajB4IBmPIY9O6Pf1MgEGgwZRKTwmRCMhACH5BAUUABAALAQABQAHAAcAAAURICRA5EieZNKcTYK+MGyeQggAIfkEBQoAEAAsBAAIAAcAAQAABQZg4kCkk4QAIfkEBQoAEAAsBAAHAAcAAwAABQogII5AkoymiSYhACH5BAUKABAALAQACAAHAAMAAAULIABApEieZIJCSQgAIfkEBQoAEAAsBAAHAAcABAAABQ1g0gBkk5BoqgJC2wIhACH5BAUKABAALAQACAAHAAEAAAUGYOJApJOEACH5BAUKABAALAQABwAHAAMAAAUKICCOQJKMpokmIQAh+QQFCgAQACwEAAUABwAGAAAFDyAEQORInmgKmCKLJmkSAgA7",";)":"R0lGODlhDwARANU\/ALWWI+i\/FmVYNJpwG\/7SE\/6kDP7KEP\/yHNeMEf\/kGP6xDlVLM\/6tDf\/pGf69D2ZaPv65Dv7cFv7CD\/61DlZGLf7GEOubD0Y6J\/b29v7ZFZKMeHFjOv\/tG3VoRbq4sv6oDfnuIl9UOoiAbn1yXpuYjVxXSOrp6NXU0e7u7YZ+bP7gFwAAANmYEpWQfMJ\/EvfhHObUOZiDQ9zb2PDw79bGMO+9En5eJ25hRu6tEXluWYqEc8CBEoFcJe3VHTMzM\/r6+iH5BAEAAD8ALAAAAAAPABEAAAa6wJ8Q0+o8No+bBiNsnjow0IHT6AEepyYpJj0cGg1VJiAg\/WYLaan0TUQIhtoFpaFx2NNwxlCpDHQhL2AcVG4EFRIOOAsCKgkJKyuGPj4OEBAUGxkREWsZcIkQEwoUCwSnp3yJowoKFws1fH2hEykMDBYUKQASiZajDD4fBQMiJwIOv63BH8MUMj8jA6IplMIFxCNCKBc4y83YFnNNJhcsDOAFCBcmTUImDzY7CC48Ie3uTR4jNzke+UEAADs="});//]]>
</script>

Setelah itu cari tag </body> dan letakan script pemanggil ini datasnya!

<script>//<![CDATA[
$(document.body).smile();
for(var div = document.getElementsByTagName("div"), i = 0; i < div.length; i++){
if(div[i].className == "post")
JSmile(div[i]);
};//]]>
</script>

Letakan sedikit kode CSS ini biar cuamik hasilnyaimg.jsmile {
border:0;
margin:0;
padding:0
}Screenshot demo on my demo blog :D

Kode emot jika ingin memakainya...

Click Here for Look Code Emoticon

Mau salju, petir, chat javascript, validator via w3 and many more acak² sana http://webreflection.blogspot.com/ dapatkan pengentahuan dan kembangkanlah skill kalian :))
Happy blogging with si bloglang ganteng kalem tea \m/