Google +1 and Fresh Page for Blogger

Ternyata bukan isapan jempol belaka si embah google berbenah guna para pelanggannya yang setia :) Disisi lain saingannya yaitu si Yahoo! malah mau menonaktifkan salah satu layanannya yaitu MyBlogLOg!
Google kembali mengenalkan satu feature Google +1. Apakah itu yang dimaksudkan dengan Google +1 :-? Fitur ini akan terlihat pada sobat kala melakukan search sesuatu. Posisinya persis bersebelahan dengan gambar mikroskop kecil berwarna biru :D Coba perhatikan screenshot berikut yang dicomot sama Beben si bloglang anu ganteng kalem tea dari official google blog :D

Tombol +1 akan muncul di sebelah setiap hasil pencarian.

Setelah menekan tombol +1, kita memiliki pilihan untuk membatalkan dengan segera.

For more information about +1, watch this video: Click here to expand

Fitur +1 kepunyaan google ini diclaim memliki kemiripan fungsi dengan tombolnya like facebook :-/ Untuk melihat apa-apa yang sudah sobat +1 pada sesuatu, harus dalam keadaan login account google sobat :) Karena google +1 ini memang ditujukan ke profile google kita. Here for signup +1 +1 your website! dimari untuk melihat ke account sobat apa² yg sudah di+1 +1's tab. Screenshot maning, jangan liat photonya tapi liat yg aku tunjuk dengan gambar panah ;)):


UPDATE
This is way to add +1 button google for blogger Add +1 Button for Blogger Baru membuat postingan ini, ada kabar dari blogger buzz mengenai Fresh new perspectives for your blog, sekalian saja kita bahas yuk ya yuk...

Tanpa banyak basi-basa coba buka halaman ini Prodigy of Head Fresh New. Edan gaya punya kan penampakan terlihat :-"

For more information about fresh new, watch this video: Click here to expand

Popup With Javascript

Karena susah cari tutorial blogger gaya punya, maka bahas lagi mengenai links. Sebelumnya Beben Koben si bloglang anu ganteng kalem tea pernah memosting mengenai Open All Links With Checklist Method!
Teknik membuka link yang ada pada template kita tercinta :x dengan metode checklist terlebih dahulu. Jadi kalau mau buka new windows maka harus di cheklist dolo :D Kalau sekarang mah teknik membuka link menggunakan syntax javascript. Pusing pusing lah tah sok...wekekekekkk :P Biasanya kan kalau syntax link sobat menuliskan dengan beginih<a href="http://beben-koben.blogspot.com/" title="Prodigy of Head">My Blog</a>Sekarang sedikit berbeda rada ekstrim dikit ;)) kita mainkan javascript :)) Hasil jadi akan seperti ini sob:

Ben Tools
Nah bagaimana bisa begindang sobat-sobat. Seperti biasa, carilah terlebih dahulu kode </head> Lalu masukin ini bumbu-bumbunya diatas kode tersebut.

<script type="text/javascript">
//<![CDATA[
   function go(loc, NewWind) {
       if (NewWind != "new") {
           self.location = "http://www." + loc
       } else {
           loc = "http://www." + loc
           window.open(loc, "", "width=500,height=400,left=350,top=200,toolbar,status,resizable,scrollbars,location")
       }
   }
//]]>
</script>

Sobat jadi tinggal mengganti cara penulisan syntax link yang biasa ke mode javascript :D

Keunggulan

1. Jika sobat memakai trick ini, maka link tidak dapat di klik kanan open link in new tab.
2. Membuka secara popup.
3. Alamat link akan dirubah secara otomatis kedalam bentuk http://www. b-)

Cara Pemakaian

1. Simpel<a href="javascript:go('embah-google.blogspot.com/2011/03/mybloglog-discontinue.html','new')">here</a>2. Same windows<a href="javascript:go('embah-google.blogspot.com/2011/03/mybloglog-discontinue.html')" title="site map">here</a>3. Expert<a href="javascript:go('embah-google.blogspot.com/2011/03/mybloglog-discontinue.html','new')" onmouseover="window.status='http://embah-google.blogspot.com/';return true;" onmouseout="window.status=' ';return true;">here</a>
Sobat perhatikan disana Beben menuliskan alamat link tidak beserta dengan http://www. melainkan setelahnya itu! Karena nanti ini akan dimoderate secara otomatis oleh javascript yg diletakkan diatas kode </head> tadi ;)
Happy link \m/

Jangan Tutup MyBlogLog

Ketika membuka email mendapatkan berita dari Yahoo, yang menyebutkan bahwasannya satu layanan dari web Yahoo! akan dinonaktifkan yaitu MyBlogLog. Berikut bunyi dari email yang Beben Koben si bloglang anu ganteng kalem tea terima MyBlogLog Discontinue! Tidak tauk persis apa yang mempertimbangkan si Yahoo mau menutup mybloglog ini :(
Bayangkan saja sob, sudah sekian lama kita para blogger blogosphere menggunakan jasa ini yang notabene telah mengangkat dan menyebarkan fitur dari mybloglog tersebut secara tiba-tiba mau di tutup!!! Tak ayal ini membuat beberapa jejaring situs dengan fungsi sama mengangkat bicara.

Sungguh naif memang kalau kita tengok ditutupnya feature mybloglog ini. Kalau sebab diclosenya karena alasan seperti Jepang tertimpa tsunami mungkin kita para blogger masih bisa menerimanya. Kalau alasannya lain dan tidak masuk akal mungkin yahoo! sendiri yg akan menanggung akibat dari penutupan mybloglog. Berjuta-juta blogosphere akan kecewa terhadap si yahoo! Maka dari pada itu satu jejaring sosial bagi para blogger angkat bicara mengenai issue ini Stop Yahoo! from Shutting Down MyBlogLog [Bloggers Unite] Silahkan sobat joint ke situs tersebut guna mendukung agar mybloglog tidak ditutup (minimal dialihkan/dijual), denger santer pihak yahoo tidak mau menjualnnya :-?

Joint here: Bloggers Unite (Team by BlogCatalog)

Ayooo suarakan JANGAN TUTUP MYBLOGLOG

Cumulus oh Cumulus

Masih ingat tidak dengan fitur cumulus untuk label pada blogger? Yang tulisannya berputar-putar dalam bentuk flash itu loh! Tengok dimari guna mengetahui siapa dibalik dalang si cumulus master of cloud. Beben si bloglang anu ganteng kalem tea juga tidak tauk mana tepatnya ini istilah yg dipakai ;)) Cloud atau cumulus yak :D Tapi inti dari fitur satu ini memang memberikan sentuhan tersendiri. Lain dimata lain dihati, mirip Beben juga lain dimata ^{(mata sapi mksdx)} tapi selalu dihati :x
Teknik lain dari feature satu ini, Beben dapetin dari blog berbasis Wordpress. Mengusung dari sana, coba-coba praktek ke blogspot, ternyata bisa berfungsi juga :-"

Walau sedikit rumit untuk pemasukan kategori (tag) kedalam trick berikut, tapi hack yang akan Beben sharing memiliki kelebihan bisa memasukan tag secara bebas tidak terpatok yang ada di blog kita. Mau tag secara search, video, RSS dari web/blog lain atau apapun mungkin bisa juga sob :D Hurufnya mau gede segede tong air bisa, warna bebas, width, height, dan speed juga bisa diseting menurut kehendak. Tinggal sobat berkreasi memainkan syntax link saja ;)

Live Demo

Tertarik dengan ini? Kemon kita lanjut...geboy mang... Kita cara cepat saja yak :D
Add a Gadget ► HTML/Javascript

Bumbu-bumbu bin ramuan

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

<script type="text/javascript" src="http://word-cumulus-goog-vis.googlecode.com/svn/trunk/wordcumulus.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

<script type="text/javascript">
//<![CDATA[
     google.load("visualization", "1");

// Set callback to run when API is loaded
     google.setOnLoadCallback(drawVisualization);

// Called when the Visualization API is loaded.
     function drawVisualization() {

// Create and populate a data table.
       var data = new google.visualization.DataTable();
       data.addColumn('string', 'Tag');
       data.addColumn('string', 'URL');
       data.addColumn('number', 'Font size');

       data.addRows(12);

       data.setCell(0, 0, 'TITLE1');
       data.setCell(0, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label1');
       data.setCell(0, 2, 2+2.5*10);
       data.setCell(1, 0, 'TITLE2');
       data.setCell(1, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label2');
       data.setCell(1, 2, 3+2.5*8);
       data.setCell(2, 0, 'TITLE3');
       data.setCell(2, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label3');
       data.setCell(2, 2, 2+2.5*11);
       data.setCell(3, 0, 'TITLE4');
       data.setCell(3, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label4');
       data.setCell(3, 2, 2+2.5*12);
       data.setCell(4, 0, 'TITLE5');
       data.setCell(4, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label5');
       data.setCell(4, 2, 2+2.5*4);
       data.setCell(5, 0, 'TITLE6');
       data.setCell(5, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label6');
       data.setCell(5, 2, 2+2.5*7);
       data.setCell(6, 0, 'TITLE7');
       data.setCell(6, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label7');
       data.setCell(6, 2, 2+2.5*3);
       data.setCell(7, 0, 'TITLE8');
       data.setCell(7, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label8');
       data.setCell(7, 2, 2+2.5*5);
       data.setCell(8, 0, 'TITLE9');
       data.setCell(8, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label9');
       data.setCell(8, 2, 2+2.5*6);
       data.setCell(9, 0, 'TITLE10');
       data.setCell(9, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label10');
       data.setCell(9, 2, 2+2.5*7);
       data.setCell(10, 0, 'TITLE11');
       data.setCell(10, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label11');
       data.setCell(10, 2, 2+2.5*8);
       data.setCell(11, 0, 'TITLE12');
       data.setCell(11, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label12');
       data.setCell(11, 2, 2+2.5*9);

// Instantiate our table object.
       var vis = new gviz_word_cumulus.WordCumulus(document.getElementById('mydiv'));

// Draw our table with the data we created locally.
       vis.draw(data, {text_color: '#ff0000', speed: 100, width:200, height:300});
}
//]]>
</script>

<div id="mydiv"></div>

Masukan deh itu bumbu ke HTML/Javascript setelah melakukan settingan. Syntax label itu yang bisa sobat kreasikan mau disisipkan dengan apa. Beben disana sudah membuat 12 link syntax. Kalau sobat mau menambahkan atau mengurangi links harap diperhatikan kode script data.addRows

Kedua jenis script yg ada diatas telah terhostingkan dibawah naungan embah google. Satu yg harus diperhatiin wordcumulus.js.

/**
* An animated, rotating cloud of words, based on flash
*
* Usage prequisities:
* - Include the js files http://word-cumulus-goog-vis.googlecode.com/svn/trunk/swfobject.js
* and http://word-cumulus-goog-vis.googlecode.com/svn/trunk/wordcumulus.js
*
* Options:
* - text_color (e.g., '#ff0000')
* - hover_text_color
* - height (in px, default = 300)
* - width (in px, default = 400)
* - speed (default = 100, higher means faster rotation)
*/

var gviz_word_cumulus = {};

gviz_word_cumulus.WordCumulus = function(container) {

/**
* The container on which to draw this chart.
* @type {Element}
* @private
*/
this.container_ = container;
};


gviz_word_cumulus.WordCumulus.prototype.draw = function(data, options) {
this.data_ = data;
options = options || {};
var url = "http://word-cumulus-goog-vis.googlecode.com/svn/trunk/tagcloud.swf";
var params = {};

var attributes = {};
attributes['allowScriptAccess'] = 'always';
attributes['wmode'] = 'transparent'; // To resolve z-index issue on FF.
attributes['id'] = this.container_.id;

var flashvars = {
'mode' : 'tags',
'distr' : 'false',
'tcolor' : (options.text_color || '#ff0000').replace('#', '0x'),
'hcolor' : (options.hover_text_color || '#000000').replace('#','0x'),
'speed' : (options.speed || 100)
};
var tags_xml = "<tags>";
for (var row = 0; row < data.getNumberOfRows(); row++) {
var label = data.getFormattedValue(row, 0);
var uri = data.getFormattedValue(row, 1);
var font_size = 10;
if (data.getNumberOfColumns() > 2) {
font_size = data.getFormattedValue(row, 2);
}
var tag = "<a href='" + uri + "' target='_blank' style='font-size:" + String(font_size) + "pt;'>" + label + "</a>";
tags_xml = tags_xml + tag;
}
tags_xml = tags_xml + "</tags>";
flashvars["tagcloud"] = tags_xml;
swfobject.embedSWF(url, this.container_.id, (options.width || 400), (options.height || 300), '10', '', flashvars, params,
attributes);

};

Nah silahkan mau dibeberkan begitu atau dihosting :P Demikian alternatif cumulus dengan mengambil trick for WP-Cumulus.

Resource by: http://code.google.com/p/word-cumulus-goog-vis/wiki/UserGuide
Happy cumulus \m/

Lists of The Inspiration

Lists ini akan selalu Beben update seperti postingan sebelumnya yang mana memang pada suatu waktu menemukan kembali dengan tema yg sama. Beben si bloglang anu ganteng kalem tea mau berbagi web resource library semoga sobat-sobat dapat menambah pengetahuan di segala bidang. Pokoknya source web berikut merupakan tempat mencari inspirasi. Isinya saja kumpulan dari web-web ternama, keren, gaya punya, oke, macho, cakep, cantik dan seabreuk pujian lainnya :))
Kalau sekiranya dari sobat ada yg memiliki rujukan bisa share-share disini, nanti dimasukin buat mengkomplitin :-bd Yuk kita mulai ah sapa saja lists of the inspiration:

A1JavaScripts.com

User Agent Man

Discoveries of a Client Side Web Developer

Belom nemu lagi :D

Make Simple Tombol Share With CSS

Secara default blogger blogspot sudah menyediakan fasilitas tombol share (berbagi). See posted on buzz New Share Buttons. Tidak ada salahnya jika kita ingin berkreatifitas dengan ide-ide cemerlang guna memperindah keberadaan tombol berbagi ini sob :D Tapi pada kesempatan kali ini, Beben si bloglang anu ganteng kalem tea akan membahas bagaimana cara membuat tombol berbagi secara sederhana menggunakan CSS. Walau simple tapi tidak menghilangkan ciri khas yang gaya punya kok sob :)) Terinspirasi dari http://superdit.com/ melihat tombol share yg simpel tapi enak dipandang :)

Kode CSS

#share {
background: #f3f3f3;
margin-top: 5px;
padding: 10px 0;
border: 1px solid #e3e3e3;
color: #333;
font-weight: bold;
font-size: 15px;
}
#share a {
font-weight: bold;
font-size: 16px;
text-decoration: none;
margin: 0 7px;
}
#share a:hover {
color:#333333;
text-decoration: underline;
}
.share_space {
padding: 15px;
color: #FF0000;
}
.col_twitter {
color: #2299CC;
}
.col_facebook {
color: #3B5998;
}
.col_linkedin {
color: #3AA7CE;
}
.col_digg {
color: #195695;
}
.col_delicious {
color: #3274D0;
}

Seperti biasa masukin itu kode CSS diatas ]]></b:skin>

HTML Coded

<div id="share">

<span class="share_space">Share</span>→

<a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/>Twitter</a>

<a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/>Facebook</a>

<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/>Delicious</a>

<a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/>Linkedin</a>

<a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/>Digg</a>

</div>

Kode HTML ini biasanya diletakkan dibawah kode <div class='post-footer'>

Final Result

Jadi satu tombol share simple and cool, mari lanjutin kedua bos...

CSS Coded

#links {display:block;padding:0 5px 5px 0;font-size:10px;line-height:15px;font-weight:bold;font-style:normal;}
#links span {color:#000;font-size:13px;}
#twitter {color:#00F;}
#facebook {color:#3B5998;}
#feed {color:#EE3E41;}
#buzz {color:#51300B;}
#google {color:#255FFB;}
#linkedin {color:#4E9CC3;}
#technorati {color:#5B0;}
#links:hover span:hover {color:#F00;}
#links:hover a, #links:hover span {color:#000;cursor:pointer;}
#links:hover #twitter:hover {color:#52D4FD;}
#links:hover #facebook:hover {color:#1D2A5B;}
#links:hover #feed:hover {color:#FFC425;}
#links:hover #buzz:hover {color:#FF0;}
#links:hover #google:hover {color:#184A95;}
#links:hover #linkedin:hover {color:#006699;}
#links:hover #technorati:hover {color:#16834E;}

HTML Coded

<div id='links'><span>Sharing is Sexy:</span>

<a href='http://feedburner.google.com/fb/a/mailverify?uri=beben-koben"' id='feed' rel='nofollow' title='Subscribe'>Subscribe</a> -
<a expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk="+ data:post.url + "&title=" + data:post.title' id='google' rel='nofollow' title='Add this to Google Bookmarks'>Bookmarks</a> -
<a expr:href='"http://twitter.com/home?status=Reading: " + data:blog.title + " - " + data:post.url + " (@NAME)"' id='twitter' rel='nofollow' title='Tweet This!'>Tweet it!</a> -
<a expr:href='"http://www.facebook.com/share.php?u="+ data:post.url + "&title=" + data:post.title' id='facebook' rel='nofollow' title='Share this on Facebook'>Facebook</a> -
<a expr:href='"http://buzz.yahoo.com/submit/?submitUrl=" + data:post.url' id='buzz' rel='nofollow' title='Buzz up!'>Buzz up!</a> -
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.url + "&title=" + data:post.title' id='linkedin' rel='nofollow' title='Share this on Linkedin'>Linkedin</a> -
<a expr:href='"http://technorati.com/faves?add="+ data:post.url + "&title=" + data:post.title' id='technorati' rel='nofollow' title='Share this on Technorati'>Technorati</a>

</div>

Final Results

Silahkan mau diisi via apa saja itu si sharenya. Itu cuman contoh tinggal kreatifitas sobat mau ditambahin apa lagi deh. Demikian tutorial sederhana membuat tombol share pure CSS.
Happy share \m/

End of Page Slide Out Box jQuery Plugin

Okelah Beben si bloglang anu ganteng kalem tea akan memostingkan bagaimana cara memasukan trik end of page slide out box original post End of Page Slide Out Box with jQuery. Ketika kita melakukan scroll kebawah, maka akan tampak sebuah kotak muncul. Pada blog ini contohnya seperti follower box. Sebenarnya kalau sobat mau berkreatifitas, web/blog yang Beben sharing disini kebanyakan mengusung trick and tips or tutorial gaya punya b-)
Jadi urusannya tinggal daya kreasi kita untuk mau apa, lalu masukin deh ke blog sobat tercinta :x Memang tidak semudah membalikan telapak tangan kalo mau ini mau itu. Butuh kerja keras daya upaya 199% :))

Trik ini jQuery plugin yah, jadi jika mau memasang End of Page Slide Out Box ini di template sobat sudah harus tertanam script jQuery.

Kode CSS

#slidebox{
width: 400px;
height: 100px;
padding: 10px;
background-color: #fff;
border-top:3px solid #E28409;
position: fixed;
bottom: 0px;
right: -430px;
-moz-box-shadow: -2px 0px 5px #aaa;
-webkit-box-shadow: -2px 0px 5px #aaa;
box-shadow: -2px 0px 5px #aaa;
}
a.close{
background: #fff url(http://blogger.com/img/close.png) no-repeat top left;
width: 15px;
height: 15px;
position: absolute;
cursor: pointer;
top: 5px;
right: 5px;
}
a.close:hover{
background: #FF0000;
}

Secara kasar inti kode CSS yg dipakai seperti itu. Kalau mau menambahkan silahkan saja. Masukin deh diatas kode ]]></b:skin> CSS-nya. Perhatikan kode yg diberi warna merah itu. Kalau width itu dirubah, maka rubah juga kode right: -XXXpx (nilainya harus lebih besar dari coded width)

jQuery Plugin

<script type="text/javascript">
//<![CDATA[
$(function() {
$(window).scroll(function(){
/* when reaching the element with id "last" we want to show the slidebox. Let's get the distance from the top to the element */
var distanceTop = $('#last').offset().top - $(window).height();

if ($(window).scrollTop() > distanceTop)
$('#slidebox').animate({'right':'0px'},300);
else
$('#slidebox').stop(true).animate({'right':'-430px'},100);
});

/* remove the slidebox when clicking the cross */
$('#slidebox .close').bind('click',function(){
$(this).parent().remove();
});
});
//]]>
</script>

Letakkan diatas tag </body>

HTML kode

<div id="slidebox">
<a class="close"></a>

YOUR CONTENT HERE

</div>Menanamkan kode ini diantara tag <body> ... </body> Kalo gak mau ribet, Add a Gadget ► HTML/Javascript.
Ini yg sedikit rumitnya sob. Carilah unique ID pada template sobat yg mengarah ke bawah. Biasanya mah bertitlekan footer. Kalo sudah ketemu sisipkan code HTML ini sesudahnya. Ex:<div id="footer">
<div id="last">

bla bla bla

</div>
</div>Kalau tidak ada kegagalan dalam menyisipkan tag tersebut, maka sobat sukses :) Good luck...
Happy blogging \m/

Sticky Toolip with jQuery

Tooltip yang keberadaannya selalu menyertai sebuah syntax link dimana jika kita memberikan attribute title didalamnya maka akan muncul. Secara default browsingan memang sudah ada fasilitas ini. Silahkan sobat cari link yang diberi title, lalu tunjuk dengan kursor maka akan terlihat si judul itu :D
Datang dari OnWebDev dimana pemiliknya selalu update terus mengenai jQuery, CSS, Javascript, dan lain-lainnya. Beben si bloglang anu ganteng kalem tea ini akan berbagi bagaimana membuat sticky tooltip dengan bantuan jQuery script. Beben memilih yang ini karena terlihat simpel dan tentunya gaya punya sob.

Jika sobat mau melihat & membaca artikel sebelumnya mengenai tooltip diblog ini ada juga loh:

1. Simple Tooltips w/ CSS & jQuery By: Sohtanaka.
2. Simple Pretty Tooltip.
3. Easy jQuery Tooltip Plugin.

Itulah beberapa info mengenai tooltip keren punya. Mari kita lanjut ke versi @gabromanato

Kode CSS

#tooltip-wrapper {
position: absolute;
width: auto;
height: auto;
background: #333;
padding: 5px 10px;
text-align: center;
display: none;
font-weight: bold;
color: #fff;
border: 1px solid #FF0000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow: 5px 5px 5px #888888;
-moz-box-shadow: 5px 5px 5px #888888;
-webkit-box-shadow: 5px 5px 5px #888888;
}

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

jQuery Script

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var tooltipWrapper = '<div id="tooltip-wrapper"><div id="tooltip-inner"></div></div>';
$('body').append(tooltipWrapper);

var tooltipTitle;
var tooltipInner = $('#tooltip-inner');

$('a.tooltip').hover(function() {
if ($(this).attr('title')) {
tooltipTitle = $(this).attr('title');
$(this).attr('title', '');

}

tooltipInner.html(tooltipTitle);
$('#tooltip-wrapper').show();

}, function() {

$('#tooltip-wrapper').hide();
tooltipInner.html('');
if (tooltipTitle) {

$(this).attr('title', tooltipTitle);

}
}).mousemove(function(e) {

var x = e.pageX;
var y = e.pageY;
var tx = $('#tooltip-wrapper').outerWidth();
var ty = $('#tooltip-wrapper').outerHeight();

var bodyX = $('body').outerWidth();
var bodyY = $('body').outerHeight();

$('#tooltip-wrapper').css({
top: y + ty > bodyY ? y - ty : y,
left: x + tx > bodyX ? x - tx - 10 : x + 15
});

});
});
//]]>
</script>

Letakan diatas tag </body>

Save

Demo

demo
Setiap sobat membuat sebuah syntax link tinggal menambahkan atribut class="tooltip"<a href="http://embah-google.blogspot.com/" target="_blank" title="Embah Goolge" class="tooltip">Embah Goolge</a>Silahkan mau yang mana, tinggal pilih saja :) See you...:-h
Happy tooltip \m/

Related Post and Media New Feature for Blogger

Berita singkat saja ini buat para blogger maniac. Ingat dengan Feature Blogger Baru! Memang masih dalam rancangan dan penelitian lebih lanjut bagi fihak team blogger apa-apa saja yang akan direlease nantinya. Seperti kabar dari buzz blogger Spare two cents dimana kita dimintakan opini, saran, ide dan yg terlampir pada formulir survey! Silahkan sobat mengisi formulir survey di Online Content Creation & Sharing Survey.
Isi secara lengkap guna kemajuan blogger...ahaiii prikitiiiwww \m/ Seperti feature berikut, tidak tauk di Indonesia memang belum ada atau pending nih. Tertanam pada navbar dengan title Related Posts & Media.

Image resource by: www.way2blogging.org

Feature ini memberitahukan kepada kita related post dan media yang terkait dengan blog kita. Secara acak akan dipilih blogger yg memang bertemakan sama dengan blog kepunyaan kita ;) Setelah diteliti, mungkin fitur ini juga mengambil Related Topics dari keyword terkuat dari blog sobat. Secara default tampilan depan nanti akan berisikan Blog Post terkait dan Real Time via twitter. Sebelah kanan Related Topics dengan beberapa topik pilihan. Yang pasti wajib ada itu dari pihak blogger sendiri :D

Live Action of Related Posts & Media

Kita tunggu saja ini fitur sampai dan nongkrong ke Indonesia :))
Happy blogging \m/

Open All Links With Checklist Method

Membuat supaya link terbuka new windows, dimana setiap links yang ada di template blog sobat nantinya akan terbuka new windows. Cukup menaruh kode berikut dibawah tag <head>
<base target="_blank" />
Dengan begitu saja semua link akan terbuka new Windows - HTML base tag. Namun bagaimana jika perintah membuka link secara new windows ini bisa kita atur. Dengan metode checklist seperti pada saat sobat melakukan Expand Widget Templates Kalau di checked nanti akan terbuka new windows linksnya, kalau tidak di checklist maka sesuai perintah pada syntax linknya. Secara default nanti akan tergantikan dengan atribut target=_self Sebelum masuk ke tutorialnya ada baiknya Beben si bloglang anu ganteng kalem tea ini mengingatkan kembali membuat syntax link :D

Attribute Values

Value	Description
_blank	Open in a new window
_self	Open in the same frame as it was clicked
_parent	Open in the parent frameset
_top	Open in the full body of the window
framename	Open in a named frame

<a href="http://beben-koben.blogspot.com/">Prodigy of Head</a>Syntax link tanpa embel² attribut target.<a href="http://ben-tools.blogspot.com/" target="_blank">BEN TOOLS</a>Syntax link dengan attribut target _blank

Begitulah kira-kira ceramah singkat mengenai menulis link disamping masih banyak attribut yg dapat kita gunakan :) Ayo sekarang kita masuk ke ceramah selanjutnya memmbuat perintah membuka link menjadi new windows dengan perintah checklist/checked.

Ramuan alias bumbu

<script type="text/javascript">
//<![CDATA[
<!--
// code hack by Beben Koben
function targetLinks(newWin)
{
   if (newWin) where = "_blank";
   else where = "_self";
   for (var i=0; i<=(document.links.length-1); i++)
   {
   document.links[i].target = where;
   }
}
//-->
//]]>
</script>

<p>
<input name="targetnewtargetnew" onclick="targetLinks(this.checked)" type="checkbox"> Links open new windows!
</p>

Masukan semua bumbu itu dengan metode Add a Gadget ► HTML/Javascript. Kalau mau ribet, silahkan letakkan Javascript diatas tersebut dibawah tag <head> lalu itu HTML inputnya terserah sobat mau dimana. Yang penting jika mau ditanamkan di template harus berada pada tag <body> ... </body>
Good luck :)
Happy links \m/

Master of Cloud

Sobat pernah melihat gadget dengan tampilan cloud? Secara default pada label blogger sudah diaplikasikan Partly cloudy. Seiring dengan munculnya fitur cloud tersebut ada beberapa para master tut's membuat karya-karyanya yang begitu mengagumkan. Phydeaux3 dengan kreasinya Code for New Blogger Tag Cloud. Yang mana hasilnya bisa kalian lihat pada kategori blog ini ;)) :"> Sepertinya tidak mau kalah dengan master phydeaux3, ternyata master @amandafazani blogger buster owner membuat karya flash animated label cloud for Blogger yang sekarang terkenal dengan nama Blogumus. Emang master kali yak sob, ternyata eh ternyata ada juga yg membikin kreasi dimana album flickr and picasa bisa dibikin macam cloud juga tampilannya b-)

Karya dari @roytanck selaku owner Roy Tanck's weblog partner Amanda dalam membuat blogumus ;) Caranya cukup mudah saja, sobat hanya tinggal memasukan link RSS Feed dari album flickr/picasa sobat.

Expand here to get flickr/picasa widget form

Expand here to look sample picasa widget

Silahkan sobat berkreasi masing-masing dengan fitur cloud ini. Jika ada masalah dalam pemasangan, Beben si bloglang anu ganteng kalem tea akan mencoba membantu (kalo bisa itu juga) :D Siapa lagi master cloud!!! Share dong ah di komentar :)) Happy blogging... See you \m/ blog.ikaika.org/2011/09/update-to-label-sphere.html

Convert Character Unik Code jQuery Plugin

Hadir kembali bersama Beben si bloglang anu ganteng kalem tea. Selalu nemplok pada web/blog gaya punya guna diacak-acak ada apa saja didalamnya (sukur² kalo ada tutorial blog) :D Masih ingat dengan artikel mengenai convert. Itu yang setiap kali kita mau memasukan tulisan berupa kode-kode/script pada postingan! Harus diconvert dulu kan, biar bisa muncul. Silahkan sobat membaca postingan berikut guna mendapatkan kode untuk mengconvert script for convert.
Bisa dijadikan inspirasi jika sobat memang berniat baca-baca dari web ini Superdit. Keren oke punya artikelnya sob :-bd

Trik jQuery plugin kali ini datang dari sana, yaitu bagaimana membuat deteksi kode karakter (Detect Character Code) Sobat mungkin sudah pada tau bahwa blogger blogspot ini berbasis XHTML. Dimana penulisannya sedikit berbeda dengan HTML pada umumnya! Introduction for XHTML XHTML Introduction dan perbedaan antara HTML 4.01 ama XHTML XHTML vs HTML.
Trik dan tips kali ini maka hadir guna memphrase tulisan (kode) unik agar bisa valid terhadap format XHTML :) Contoh deh:

Unique Code	Write in XHTML
@	@
►	►
←	←

Yang sebelah kanan itu kode yang valid XHTML jika sobat mau menulis pada edit² daleman template contohnya. Memang kadang ada yang langsung secara otomatis terphrase, namun tidak sedikit yang tidak dapat terphrase oleh editor blog. Mari kita lanjutin gimana cara bikin toolsnya ah ;))

demo

Masukin semua bumbu ini dengan teknik Add a Gadget ► HTML/Javascript :D

<script type="text/javascript">
   $(document).ready(function() {
       $("#field").keypress(function(event) {
           $(this).val(String.fromCharCode(event.charCode));
           $("#codespan").html(event.charCode);
           $("#charspan").html(String.fromCharCode(event.charCode));
       });
   });
</script>

<style type="text/css">
.cont_inside {
   padding: 5px;
}
.lbl {
   font-size: 20px;
   padding: 2px 7px;
   background: #5566FF;
   color: #ffffff;
}
#field, .span {
   font-family: "Times New Roman";
   width: 20px;
   font-size: 20px;
   padding: 2px 7px;
   background: #000000;
   color: #ffffff;
   border: 1px solid #000000;
}
.span {
margin-left: 5px;
}
</style>

<div class="cont_inside">
<label for="field" class="lbl">Press a key &rarr;</label>
<input type="text" id="field" maxlength="1"/>
</div>
<div class="cont_inside">
<span class="lbl">Character Code: </span>
<span class="span" id="codespan"></span>
</div>
<div class="cont_inside">
<span class="lbl">String.fromCharCode</span>
<span class="span" id="charspan"></span>
</div>

Beres :P
Keterangan:

1. Kotak pertama.
Ketikan kode unik pada kotak pertama. Misalkan sobat mengetik pada keyboard Ctrl + (NumLock) 16
2. Kotak kedua.
Hasil generated dari kotak pertama. Sobat hanya tinggal menambahkan kode ini didepan &# pada belakang tambahkan ;
Jika hasil generated 15 maka menjadi &#15;
3. Kotak ketiga.
Hasil akhir proses.

Happy blogging \m/

Emoticon Pure CSS with jQuery Plugin

Pure CSS atau trik menggunakan dimana pemakaian kode banyak dengan kode-kode atribut CSS. Pernah membaca 45+ CSS Trick Must be Known, dimana Beben si bloglang anu ganteng kalem tea sedikit memaparkan apa-apa saja yang dapat dilakukan dengan kekuatan CSS. Mau membuat tab menu dengan CSS juga bisa pure Css tab menu, membikin tombol sexy bookmark murni CSS sexy bookmark using CSS atau kepengen single menu with hover single menu with hover sampai centered menu juga ada centered menu with css :-"
Promosi postingan sob, biasa untuk merefresh ;)) Sekarang bagaimana membuat CSS emoticon with jQuery plugin? Nah hayooo, sudah murni CSS ditambah dengan plugin lagih :-/ Trik emoticon ini juga sudah ada dalam postingan Beben yang sebelum-sebelumnya (silahkan diubek-ubek saja)

Postingan trick kali ini akan banyak menanamkan kode CSS dan script jQuery pada template kita jika memang ingin menggunakannya. Maka harap dipertimbangkan lagi kalau sobat mau menanamkannya pada template tercinta :x
Karena disini Beben hanya berbagi ternyata trik ini bisa juga dipasang pada template berbasis blogspot :D Si bloglang tea, no unique no post, no gaya no post too :)) Oke kita langsung saja pada inti permasalahan, buka halaman berikut guna mendapatkan link download dan demonya JQuery CSS Emoticons Plugin. Kalau sudah melihatnya kita lanjut pada sesi pemasangan kedalam blog tercinta :D Screenshot setelah praktek di dummie blog :)

Hihihi...lucu nyak kayak Beben :-" :">

CSS Kode

span.css-emoticon{font-family:"Trebuchet MS";font-size:.55em;font-weight:700;color:#000;display:inline-block;overflow:hidden;vertical-align:middle;transform:rotate(90deg);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);width:1.54em;height:1.54em;text-align:center;line-height:1.34em;-moz-border-radius:1.54em;-webkit-border-radius:1.54em;border-radius:1.54em;-moz-box-shadow:1px -1px 2px rgba(0,0,0,0.5);-webkit-box-shadow:1px -1px 2px rgba(0,0,0,0.5);box-shadow:1px -1px 2px rgba(0,0,0,0.5);border:1px solid rgba(0,0,0,0.25);background-color:#fc0;background-image:0 41% #fd5 56% #fea 100% );-webkit-transition-property:color, background, transform;-webkit-transition-duration:1s 1s;-webkit-transition-timing-function:linear, ease-in;padding:0}
span.css-emoticon.spaced-emoticon{padding-left:.2em;width:1.34em;letter-spacing:.2em}
span.css-emoticon.small-emoticon{font-size:.55em;width:1.82em;height:1.82em;line-height:1.72em;-moz-border-radius:1.82em;-webkit-border-radius:1.82em;border-radius:1.82em}
span.css-emoticon.small-emoticon.spaced-emoticon{padding-left:0;width:1.82em;letter-spacing:.1em}
span.css-emoticon.red-emoticon{background-color:#eb0542;background-image:0 41% #eb265a 56% #fa376e 100% )}
span.css-emoticon.pink-emoticon{background-color:#ff8fd4;background-image:0 41% #ff99d8 56% #ffade1 100% )}
span.css-emoticon.no-rotate{transform:rotate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.5);-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.5);box-shadow:1px 1px 2px rgba(0,0,0,0.5);font-size:.45em;width:2.2em;height:2.2em;line-height:1.9em;-moz-border-radius:2.2em;-webkit-border-radius:2.2em;border-radius:2.2em;background-image:0 41% #fd5 56% #fea 100% )}
span.css-emoticon.counter-rotated{transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform:rotate(-90deg);-moz-box-shadow:-1px 1px 2px rgba(0,0,0,0.5);-webkit-box-shadow:-1px 1px 2px rgba(0,0,0,0.5);box-shadow:-1px 1px 2px rgba(0,0,0,0.5);background-image:0 41% #fd5 56% #fea 100% )}
span.css-emoticon.un-transformed-emoticon,span.css-emoticon.animated-emoticon:hover{letter-spacing:inherit;color:inherit;overflow:visible;transform:rotate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);background:none;background-image:none;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;border-color:transparent}
span.css-emoticon.nintendo-controller{font-size:.8em;height:1.2em;line-height:1em;width:2.7em;vertical-align:bottom;border-radius:0;-webkit-border-radius:0;-moz-border-radius:0;background:0 9% #a5aabd 55% )}
span.css-emoticon.no-rotate.red-emoticon,span.css-emoticon.counter-rotated.red-emoticon{background-image:0 41% #eb265a 56% #fa376e 100% )}
span.css-emoticon.no-rotate.pink-emoticon,span.css-emoticon.counter-rotated.pink-emoticon{background-image:0 41% #ff99d8 56% #ffade1 100% )}
@media screen and -webkit-min-device-pixel-ratio0 {
span.css-emoticon.spaced-emoticon{width:1.4em}
}

CSS diatas sudah Beben kompress, letakinnya diatas kode ]]></b:skin>

jQuery Script

<script type='text/javascript'>
//<![CDATA[
/*
* jQuery CSSEmoticons plugin 0.2.9
*
* Copyright (c) 2010 Steve Schwartz (JangoSteve)
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Date: Sun Oct 22 1:00:00 2010 -0500
*/
(function(a){a.fn.emoticonize=function(m){var c=a.extend({},a.fn.emoticonize.defaults,m);var d=[")","(","*","[","]","{","}","|","^","<",">","\\","?","+","=","."];var l=[":-)",":o)",":c)",":^)",":-D",":-(",":-9",";-)",":-P",":-p",":-Þ",":-b",":-O",":-/",":-X",":-#",":'(","B-)","8-)",";*(",":-*",":-\\","?-)",": )",": ]","= ]","= )","8 )",": }",": D","8 D","X D","x D","= D",": (",": [",": {","= (","; )","; ]","; D",": P",": p","= P","= p",": b",": Þ",": O","8 O",": /","= /",": S",": #",": X","B )",": |",": \\","= \\",": *",": &gt;",": &lt;"];var j=[":)",":]","=]","=)","8)",":}",":D",":(",":[",":{","=(",";)",";]",";D",":P",":p","=P","=p",":b",":Þ",":O",":/","=/",":S",":#",":X","B)",":|",":\\","=\\",":*",":&gt;",":&lt;"];var h={"&gt;:)":{cssClass:"red-emoticon small-emoticon spaced-emoticon"},"&gt;;)":{cssClass:"red-emoticon small-emoticon spaced-emoticon"},"&gt;:(":{cssClass:"red-emoticon small-emoticon spaced-emoticon"},"&gt;: )":{cssClass:"red-emoticon small-emoticon"},"&gt;; )":{cssClass:"red-emoticon small-emoticon"},"&gt;: (":{cssClass:"red-emoticon small-emoticon"},";(":{cssClass:"red-emoticon spaced-emoticon"},"&lt;3":{cssClass:"pink-emoticon counter-rotated"},O_O:{cssClass:"no-rotate"},o_o:{cssClass:"no-rotate"},"0_o":{cssClass:"no-rotate"},O_o:{cssClass:"no-rotate"},T_T:{cssClass:"no-rotate"},"^_^":{cssClass:"no-rotate"},"O:)":{cssClass:"small-emoticon spaced-emoticon"},"O: )":{cssClass:"small-emoticon"},"8D":{cssClass:"small-emoticon spaced-emoticon"},XD:{cssClass:"small-emoticon spaced-emoticon"},xD:{cssClass:"small-emoticon spaced-emoticon"},"=D":{cssClass:"small-emoticon spaced-emoticon"},"8O":{cssClass:"small-emoticon spaced-emoticon"},"[+=..]":{cssClass:"no-rotate nintendo-controller"}};var f=new RegExp("(\\"+d.join("|\\")+")","g");var n="(^|[\\s\\0])";for(var g=l.length-1;g>=0;--g){l[g]=l[g].replace(f,"\\$1");l[g]=new RegExp(n+"("+l[g]+")","g")}for(var g=j.length-1;g>=0;--g){j[g]=j[g].replace(f,"\\$1");j[g]=new RegExp(n+"("+j[g]+")","g")}for(var k in h){h[k].regexp=k.replace(f,"\\$1");h[k].regexp=new RegExp(n+"("+h[k].regexp+")","g")}var e="span.css-emoticon";if(c.exclude){e+=","+c.exclude}var b=e.split(",");return this.not(e).each(function(){var o=a(this);var i="css-emoticon";if(c.animate){i+=" un-transformed-emoticon animated-emoticon"}for(var p in h){specialCssClass=i+" "+h[p].cssClass;o.html(o.html().replace(h[p].regexp,"$1<span class='"+specialCssClass+"'>$2</span>"))}a(l).each(function(){o.html(o.html().replace(this,"$1<span class='"+i+"'>$2</span>"))});a(j).each(function(){o.html(o.html().replace(this,"$1<span class='"+i+" spaced-emoticon'>$2</span>"))});a.each(b,function(q,r){o.find(a.trim(r)+" span.css-emoticon").each(function(){a(this).replaceWith(a(this).text())})});if(c.animate){setTimeout(function(){a(".un-transformed-emoticon").removeClass("un-transformed-emoticon")},c.delay)}})};a.fn.unemoticonize=function(b){var c=a.extend({},a.fn.emoticonize.defaults,b);return this.each(function(){var d=a(this);d.find("span.css-emoticon").each(function(){var e=a(this);if(c.animate){e.addClass("un-transformed-emoticon");setTimeout(function(){e.replaceWith(e.text())},c.delay)}else{e.replaceWith(e.text())}})})};a.fn.emoticonize.defaults={animate:true,delay:500,exclude:"pre,code,.no-emoticons"}})(jQuery);
//]]>
</script>

Sisipkan jQuery script diatas tepat dibawah jQuery inti, atau sobat dapat mencoba meletakannya diatas kode </head> Kalau sudah itu scroll kebawah dan cari code </body> Masukin script pemanggil ini diatasnya yah

<script  type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('.post-body').emoticonize({
//delay: 500,
//animate: false,
//exclude: 'pre, code, .no-emoticons'
});
})
//]]>
</script>

</body>

Nb:
>> //delay :500, : Jika sobat mengaktifkan kode ini dengan menghilangkan // maka efeknya ada delay dalam menampilkan kode emotikon.
>> //animate: false, : Jika diaktifkan maka saat cursor diarahkan pada emotikon tidak akan berubah.
>> //exclude: 'pre, code, .no-emoticons' : Tag mana saja yg tidak mau disisipkan kode emotikon.

Save

Kata siapa emoticon tidak bisa memakai CSS :))
Happy emoticon \m/

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:
<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:
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:
google

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/

Template Oh Template II

Sudah banyak template pilihan Beben ditawarkan kepada para sobat pelancong ke blog Prodigy of Head ini. Melihat perkembangan blogger ternyata sedikit banyak berimbas juga pada berkembangnya template. Melihat dan menelaah sekarang bertebaran web/blog yang menawarkan template oke punya b-)
Pada kesempatan sekarang Beben si bloglang anu ganteng kalem tea akan mencoba menawarkan kembali pilihan-pilihan template yang mungkin bisa sobat pakai. Dari template berpenampilan simpel sampai futuristik style ;))

CLEAR BLOGGER TEMPLATE

WATER SPILL

SMASH MAG

ROCKDAYS

COMAPNY YELLOW

REVIVE BLUE

BTUBE

WORK A HOLIC

FASHION BLOG

GENERALSITE

THE WALL

SOUNDBOX

BLUE JEANS

Demikianlah template tawaran Beben semoga ada yg cocok :) This image host by google, hack write in here Instant Previews Screenshot and look other template here Template Para Blogger.
Happy blogging...