Sabtu, 30 April 2011

Javascript Oh Javascript

Javascript merupakan satu jenis script yang memang cukup terkenal dikalangan developer. Karena hasil proses yg didapatkan bisa mencengangkan mata. Bertrilyun-trilyun web script diluaran sana bisa kita lihat dan tentunya dengan trik beraneka ragam pula ;)) Sobat bisa melihat contoh dari pemakaian bentuk Javascript Motion TweenJavascript Motion Tween!
Kalau script sudah menginduk macam (jQuery) biasanya tinggal plugin or snippet dalam mengembangkan apa yg sobat inginkan. Tapi jika javascript enaknya bisa berdiri sendiri, tumpuk jadi satu dengan pemanggilan beragam jadi deh kue apem :) Contoh simpel bagaimana membuat double klik pada mouse bisa langsung ke atas dengan Javascript.<script type='text/javascript'>
function dblclick() {
window.scrollTo(0,0)
}
if (document.layers) {
document.captureEvents(Event.ONDBLCLICK);
}
document.ondblclick=dblclick;
</script>
Dengan meletakan script diantara/didalam tag <head> ... </head> sobat sudah dapat menggunakan fitur tersebut. Kalau tau shortcut keyboard tinggal pencet saja tombol Home :)) loncat deh ke atas juga :D Menarik kan sob berbicara script, walo saya juga kagak bisa dan tidak mengerti =)) Disinilah peran Beben Koben si bloglang anu ganteng kalem tea berperan...walking² ampe kojor buat berbagi \m/
Mau yang lebih keren javascriptnya :-/

Javascript Link Snowing yaitu menampilkan taburan salju dikala mouse diarahkan terhadap sebuah syntax link.

Javascript Link Snowing

Letakan script diatas tag </body>
<script type='text/javascript'>
//<![CDATA[
// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=35

// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")

// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

// Set the letter that creates your snowflake (recommended:*)
var snowletter="*"

// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.9

// Set the maximal-size of your snowflaxes
var snowmaxsize=20

// Set the minimal-size of your snowflaxes
var snowminsize=5

// Set the width of the snowing-zone (pixels)
var snowboxwidth=175


// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var marginleft
var margintop
var snowingzone=1
var posleft
var postop
var is_snowing=false
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera

function randommaker(range) {
rand=Math.floor(range*Math.random())
return rand
}

function startsnow() {
is_snowing=true
if (ie5 || opera) {
margintop = postop+15
marginbottom = document.body.clientHeight
marginleft = posleft
marginright = posleft+snowboxwidth
}
else if (ns6) {
margintop = postop+15
marginbottom = window.innerHeight
marginleft = posleft
marginright = posleft+snowboxwidth
}
var snowsizerange=snowmaxsize-snowminsize
for (i=0;i<=snowmax;i++) {
crds[i] = 0;
lftrght[i] = Math.random()*15;
x_mv[i] = 0.03 + Math.random()/10;
snow[i]=document.getElementById("s"+i)
snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
snow[i].size=randommaker(snowsizerange)+snowminsize
snow[i].style.fontSize=snow[i].size+"pt"
snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
snow[i].sink=sinkspeed*snow[i].size/5
snow[i].posx=randommaker(snowboxwidth)+marginleft-2*snow[i].size
if (ie5 || opera) {
if (snow[i].posx>=document.body.clientWidth-2*snow[i].size) {
snow[i].posx=snow[i].posx-snowboxwidth
}
}
if (ns6) {
if (snow[i].posx>=window.innerWidth-2*snow[i].size) {
snow[i].posx=snow[i].posx-snowboxwidth
}
}
snow[i].posy=randommaker(marginbottom-margintop)+margintop-2*snow[i].size
snow[i].style.left=snow[i].posx+"px"
snow[i].style.top=snow[i].posy+"px"
snow[i].style.visibility="visible";

}
movesnow()
}

function stopsnow() {
is_snowing=false
}

function movesnow() {
if (is_snowing) {
for (i=0;i<=snowmax;i++) {
crds[i] += x_mv[i];
snow[i].posy+=snow[i].sink
snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+"px";
snow[i].style.top=snow[i].posy+"px"

if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
snow[i].posx=randommaker(snowboxwidth)+marginleft-2*snow[i].size
if (ie5 || opera) {
if (snow[i].posx>=document.body.clientWidth-2*snow[i].size) {
snow[i].posx=snow[i].posx-snowboxwidth
}
}
if (ns6) {
if (snow[i].posx>=window.innerWidth-2*snow[i].size) {
snow[i].posx=snow[i].posx-snowboxwidth
}
}
snow[i].posy=randommaker(marginbottom-margintop)+margintop-2*snow[i].size
}
}
var timer=setTimeout("movesnow()",50)
}
else {
for (i=0;i<=snowmax;i++) {
snow[i].style.visibility="hidden";
}
}
}

function getcoordinates(e) {
if (ie5 || opera) {
posleft=document.body.scrollLeft+window.event.x;
postop=document.body.scrollTop+window.event.y;
}
if (ns6) {
posleft=e.pageX
postop=e.pageY
}
}

for (i=0;i<=snowmax;i++) {
document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"px'>"+snowletter+"</span>")
}
if (browserok) {
document.onmousemove=getcoordinates
}
//]]>
</script>
Script yg diberi warna silahkan ganti sesuai selera, keterangannya diatasnya tuh (walo bahasa kumpeni) ;)) Mau dihosting itu si java silahkan. Ini script yg sudah Beben minimize Javascript Link Snow Minimize →

var snowmax=35
var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")
var snowletter="*"
var sinkspeed=0.9
var snowmaxsize=20
var snowminsize=5
var snowboxwidth=175
var snow=new Array()
var marginbottom
var marginright
var marginleft
var margintop
var snowingzone=1
var posleft
var postop
var is_snowing=false
var timer
var i_snow=0
var x_mv=new Array();var crds=new Array();var lftrght=new Array();var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera
function randommaker(range){rand=Math.floor(range*Math.random())
return rand}
function startsnow(){is_snowing=true
if(ie5||opera){margintop=postop+15
marginbottom=document.body.clientHeight
marginleft=posleft
marginright=posleft+snowboxwidth}
else if(ns6){margintop=postop+15
marginbottom=window.innerHeight
marginleft=posleft
marginright=posleft+snowboxwidth}
var snowsizerange=snowmaxsize-snowminsize
for(i=0;i<=snowmax;i++){crds[i]=0;lftrght[i]=Math.random()*15;x_mv[i]=0.03+Math.random()/10;snow[i]=document.getElementById("s"+i)
snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
snow[i].size=randommaker(snowsizerange)+snowminsize
snow[i].style.fontSize=snow[i].size+"pt"
snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
snow[i].sink=sinkspeed*snow[i].size/5
snow[i].posx=randommaker(snowboxwidth)+marginleft-2*snow[i].size
if(ie5||opera){if(snow[i].posx>=document.body.clientWidth-2*snow[i].size){snow[i].posx=snow[i].posx-snowboxwidth}}
if(ns6){if(snow[i].posx>=window.innerWidth-2*snow[i].size){snow[i].posx=snow[i].posx-snowboxwidth}}
snow[i].posy=randommaker(marginbottom-margintop)+margintop-2*snow[i].size
snow[i].style.left=snow[i].posx+"px"
snow[i].style.top=snow[i].posy+"px"
snow[i].style.visibility="visible";}
movesnow()}
function stopsnow(){is_snowing=false}
function movesnow(){if(is_snowing){for(i=0;i<=snowmax;i++){crds[i]+=x_mv[i];snow[i].posy+=snow[i].sink
snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+"px";snow[i].style.top=snow[i].posy+"px"
if(snow[i].posy>=marginbottom-2*snow[i].size||parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){snow[i].posx=randommaker(snowboxwidth)+marginleft-2*snow[i].size
if(ie5||opera){if(snow[i].posx>=document.body.clientWidth-2*snow[i].size){snow[i].posx=snow[i].posx-snowboxwidth}}
if(ns6){if(snow[i].posx>=window.innerWidth-2*snow[i].size){snow[i].posx=snow[i].posx-snowboxwidth}}
snow[i].posy=randommaker(marginbottom-margintop)+margintop-2*snow[i].size}}
var timer=setTimeout("movesnow()",50)}
else{for(i=0;i<=snowmax;i++){snow[i].style.visibility="hidden";}}}
function getcoordinates(e){if(ie5||opera){posleft=document.body.scrollLeft+window.event.x;postop=document.body.scrollTop+window.event.y;}
if(ns6){posleft=e.pageX
postop=e.pageY}}
for(i=0;i<=snowmax;i++){document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"px'>"+snowletter+"</span>")}
if(browserok){document.onmousemove=getcoordinates}
Penempatannya saja diperhatikan yah :) Pemakaiannya nanti sobat didalam penulisan sebuah syntax link, hanya perlu membubuhkan sedikit atribut tambahan.
onMouseOver="startsnow()" onMouseOut="stopsnow()"
Nah itu, jadi secara keseluruhan seperti:<a href="http://beben-koben.blogspot.com" title="Prodigy of Head" onMouseOver="startsnow()" onMouseOut="stopsnow()">Sample Link Writing<a>So...eazy right! Yah sudahlah jika mau script-script lain yang menarik lagi silahkan deh acak² blog sobat kita ini Javascript Codes. See you in my next posted from the bloglang walking² in the house...
Happy Javascript \m/

Jumat, 29 April 2011

Sticky Bar with jQuery Plugin

Menengok blog sobat Beben Animes Moy4n kayaknya dia keseng-sem sama trik menghias blog ;)) Membuat garis lurus tipis transparan dengan posisi fixed dibawah. Biar cantik mungkin dikasih line lempeng² macam entuh :"> Karena Beben Koben si bloglang anu ganteng kalem tea ini selalu mementingkan gaya dalam hal trik apapun juga, maka cekarang cama eikeh dikacih deh yang gaya punya buat garis lurus fixed bottom dan bisa transparan jiga discroll kebawah, lalu bisa ditutup juga b-) \m/ Tentunya dengan bantuan jQuery tercintah duong :x yg sering kita panggil jQuery plugin :P Pokonya mah fungkeh coy...cek get dot

sticky-barView Live demo
How bro and bri, are you like that with "Sticky Trending Bar Using jQuery And CSS" You want get that!!! Don't move your channel, panteungin terus blog full stylish ini. Mari kita acak-acak cara dan memasukan kedalam blogspot :-"

jQuery Plugin

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
(function() {
//settings
var fadeSpeed = 300, fadeTo = 0.5, topDistance = 30;
var sibar = function() { $('#stickybar').fadeTo(fadeSpeed,1); }, stbar = function() { $('#stickybar').fadeTo(fadeSpeed,fadeTo); };
var inside = false;
//do
$(window).scroll(function() {
position = $(window).scrollTop();
if(position > topDistance && !inside) {
//add mouseover events
stbar();
$('#stickybar').bind('mouseenter',sibar);
$('#stickybar').bind('mouseleave',stbar);
inside = true;
}
});
//close
$('#closebtn').live('click', function(event) {
$('#stickybar').toggle('show');
});
})();
});
//]]>
</script>
Letakin script plugin tersebut dibawah script jQuery inti →
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'></script>
, kalau mau mencoba bisa sobat letakin diatas tag </body>

Kode CSS

#stickybar {
background: #333;
font-size: 15px;
color: #FFF;
padding: 10px 20px;
position: fixed;
bottom: 0;
left: 0;
z-index: 2000;
width: 100%;
text-align: center;
}
#stickybar a {
color: #FFF;
text-decoration: none;
}
#stickybar a:hover {
color: red;
}
#closebtn {
background: #333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9c1QCICH469iclD_OCJdgfJH-Mxhih5q0bgcEvkSuzM5F3dK4iQJWv_JOH9bssdWQxcGzQPraxFswsxSNV9f2R0f5QFGccjq5RaZxLH-11Du-PC02U5vzCKOMn-6ksv2lWtxw9Y9LCaA/s1600/close.png') no-repeat center center;
border: none;
margin-left: 5px;
position: absolute;
width: 20px;
height: 20px;
cursor: pointer;
}
Tauk dong harus dimana memasukan kode CSS pada basis blogspot, yaaa benar sekali diatas genteng =)) </b:skin>

Kode HTML

<div id='stickybar'>

This is Demo for Sticky trending Bar <a href='your add url here'>Your title goes here</a>

<input type="button" id="closebtn" />

</div>
Masukin didalam tag <body> template. Awas jangan bentrok ama penutup tag lainnya ;))

SAVE!

Enjoy it my broder moy4n, you now have the great sticky bar with jQuery plugin on your blog. Come else blogger, put it too in your blog b-)
Resource by: BloggerMint.
Happy sticky \m/

Kamis, 28 April 2011

Gado-Gado Blogger

Dalam memberikan judul artikel Beben Koben si bloglang anu ganteng kalem tea suka sedikit kebelinger sob. Jadi ya asal jeplak saja kasih title sebuah postingan. Tapi bukan tidak berbobot loh isi artikelnya :D Karedok Info, Balakutak Posted dan no title beberapa postingan aneh yang mungkin saja mencengangkan isinya ;))
Kenapa Beben suka begitu!!! Karena dalam berwalking kesana kemari tak ayal ada saja yg dicomot tutorial lalu dikumpulkan dulu, jadi banyak end belon dipostingkan bro? Layaknya kali ini, mau share jejak² hasil comotan artikel dari web/blog yg entah dimana keberadaannya :D

Jurus-jurus kali ini tidak jauh kok sob, cara pemasangan standard, paling banter yaaa via Add a Gadget ► HTML/Javascript.

Javascript Watch

Jam dengan 11 negara berbeda. Gadget type method added.
<table border="0" width="200" cellspacing="0" cellpadding="3">
<form name="where">
<tr>
<td width="100%">
<select name="city" size="1" onchange="updateclock(this);">
<option value="" selected />Local time
<option value="0" />London GMT
<option value="1" />Rome
<option value="7" />Bangkok
<option value="8" />Hong Kong
<option value="9" />Tokyo
<option value="10" />Sydney
<option value="12" />Fiji
<option value="-10" />Hawaii
<option value="-8" />San Francisco
<option value="-5" />New York
<option value="-3" />Buenos Aires
</select>
</td>
</tr>

<tr>
<td width="100%">
<script language="JavaScript">
/*
Drop Down World Clock- By Learn iran
Portions of code by Kurt @ http://www.webloger.5u.com/
Repost by @ http://beben-koben.blogspot.com/
This credit notice must stay intact
*/

if (document.all||document.getElementById)
document.write('<span id="worldclock" style="font:bold 16px Arial;"></span><br>')

zone=0;
isitlocal=true;
ampm='';

function updateclock(z){
zone=z.options[z.selectedIndex].value;
isitlocal=(z.options[0].selected)?true:false;
}

function WorldClock(){
now=new Date();
ofst=now.getTimezoneOffset()/60;
secs=now.getSeconds();
sec=-1.57+Math.PI*secs/30;
mins=now.getMinutes();
min=-1.57+Math.PI*mins/30;
hr=(isitlocal)?now.getHours():(now.getHours() + parseInt(ofst)) + parseInt(zone);
hrs=-1.575+Math.PI*hr/6+Math.PI*parseInt(now.getMinutes())/360;
if (hr < 0) hr+=24;
if (hr > 23) hr-=24;
ampm = (hr > 11)?"PM":"AM";
statusampm = ampm.toLowerCase();

hr2 = hr;
if (hr2 == 0) hr2=12;
(hr2 < 13)?hr2:hr2 %= 12;
if (hr2<10) hr2="0"+hr2

var finaltime=hr2+':'+((mins < 10)?"0"+mins:mins)+':'+((secs < 10)?"0"+secs:secs)+' '+statusampm;
if (document.all)
worldclock.innerHTML=finaltime
else if (document.getElementById)
document.getElementById("worldclock").innerHTML=finaltime
else if (document.layers){
document.worldclockns.document.worldclockns2.document.write(finaltime)
document.worldclockns.document.worldclockns2.document.close()
}

setTimeout('WorldClock()',1000);
}

window.onload=WorldClock
//-->
</script>

<!--Place holder for NS4 only-->
<ilayer id="worldclockns" width=100% height=35><layer id="worldclockns2" width=100% height=35 left=0 top=0 style="font:bold 16px Arial;"></layer></ilayer>

</td>
</tr>
</form>
</table>
Kalo jam dan tanggal lokal begini kodenya Click here expand

<table><tbody>
<tr> <td><script type="text/javascript">
<!--
function makeArray() {
for (i = 0; i<makeArray.arguments.length; i++)
this[i + 1] = makeArray.arguments[i];
}

var months = new makeArray('Januari','Februari','Maret','April','Mei',
'Juni','Juli','Augustus','September','Oktober','November','Desember');
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;

document.write(day + " " + months[month] + " " + year);
//-->
</script> | </td><td><div id="jam">
<script language="javascript">
function jam(){
var waktu = new Date();
var jam = waktu.getHours();
var menit = waktu.getMinutes();
var detik = waktu.getSeconds();
if (jam < 10){
jam = "0" + jam;
}
if (menit < 10){
menit = "0" + menit;
}
if (detik < 10){
detik = "0" + detik;
}
var jam_div = document.getElementById('jam');
jam_div.innerHTML = jam + ":" + menit + ":" + detik;
setTimeout("jam()", 1000);
}
jam();
</script></div>
</td>
</tr>
</tbody></table>

Random Post Widget

Menampilkan postingan secara acak.
<div id="RandomPost" style="text-align:center"></div>
<script type="text/javascript">
function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Get Try Random Post'; document.getElementById('RandomPost').appendChild(a); } </script>
<script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>
Gantilah tulisan Get Try Random Post sesuai selera.

Float Javascript

Membuat satu tampilan yg dapat ditutup kembali dengan menggunakan javascript (Resource by: Vagabundia) Disini Beben memasukan cbox yg ditampilinnya gan...
<style>
#float-X {
background-color: #555;
border: 3px solid #666;
top: 5px;
padding: 5px;
position: fixed;
right: 5px;
width: 275px;
z-index: 1;
}
#float-X a {
text-align:center;
display: block;
color: red;
font-weight: bold;
}
</style>

<div id="float-X">

<div id="cboxdiv" style="text-align: center; line-height: 0">
<iframe frameborder="0" width="275" height="305" src="http://www6.cbox.ws/box/?boxid=294584&amp;boxtag=7c3kfw&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" id="cboxmain"></iframe><iframe frameborder="0" width="275" height="80" src="http://www6.cbox.ws/box/?boxid=294584&amp;boxtag=7c3kfw&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#ababab 1px solid;border-top:0px"></iframe>
</div>

<a href="javascript:void(0);" onclick="document.getElementById('float-X').style.display='none';">CLOSE</a>
</div>
Ganti cboxnya & sesuaikan deh lebar, tinggi, warna latar dll.

Show/Hide with jQuery Plugin

Sama dengan float javascript fungsinya, tapi ini menggunakan jQuery plugins.
<style>
#notification {
width: 350px;
height: 391px;
position: absolute;
top: 5px;
right: 5px;
padding:5px;
background: #debe94;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius: 10px;
display: none;
}

#notification #close {
display: block;
width: 30px;
height: 30px;
text-indent: -1000em;
background: url(http://dev.css-zibaldone.com/onwebdev/post/jquery-gmail/close.png) no-repeat 0 0;
position: absolute;
bottom: -3px;
left: -1px;
}
</style>


<div id="notification">
<a href="#" id="close">Close</a>

<iframe frameborder="0" width="350" height="305" src="http://www6.cbox.ws/box/?boxid=294584&amp;boxtag=7c3kfw&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" id="cboxmain"></iframe>
<iframe frameborder="0" width="100%" height="80" src="http://www6.cbox.ws/box/?boxid=294584&amp;boxtag=7c3kfw&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#ababab 1px solid;border-top:0px"></iframe>

</div>

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

<script type="text/javascript">
$(function() {

function notifyEmail() {

var $notification = $('#notification');
var $close = $('#close', '#notification');

$close.click(function(event) {

$notification.fadeOut(500);
event.preventDefault();
});

$notification.fadeIn(500, function() {

});


}

setTimeout(notifyEmail, 1000);


});
</script>
Ganti frame cboxnya, hostingkan gambar close ke hosting sobat masing², script warna biru jika sudah ada jangan dipasang lagi, lebar, tinggi warna etc seting suka2.
Dah jangan banyak-banyak nanti muntah :-&
Happy gado-gado \m/

Rabu, 27 April 2011

Mercedes-Benz Mobil Mewah Terbaik Indonesia

mercedes-benzMercedes-Benz adalah satu nama jaminan merk dagang mobil mewah, dengan dukungan technology high class, team solid, terbukti bahwa Mercedes Benz merupakan perusahaan mobil tertua dalam bidangnya, maka pantaslah menjadi mobil terbaik di Indonesia ini. Bermula dengan nama Daimler Chrysler dikenal juga sebagai Daimler-Benz hingga sampai sekarang khalayak luas mengenalnya dengan nama Mercedes-Benz b-)

Mercedes-Benz dalam setiap mengeluarkan mobil baru andalannya selalu mengusung kepada kenyamanan konsumen dengan kemanjaan fitur berkelas sehingga tak salah motto "Mercedes-Benz Mobil Mewah Terbaik Indonesia" layak disandang.

Ketangguhan mesin produk merk mersi (kalangan umum bicara) dapat ditengok pada jenis bus. Lihat saja bergelimpangan bus antar kota antar propinsi mempercayakan mesinnya kepada Mercedes :-" Di kelas MPV nongol jagoan dengan nama Viano AMBIENTE, serta tidak kurang 14 class mercedes-benz (A-Class, B-Class, C-Class, E-Class, M-Class, R-Class, S-Class, SL-Class, SLK-Class, CL-Class, CLS-Class, G-Class, GL-Class, and SLS AMG) ditawarkan kepada calon pemakainya ;)

Canda gurau kalangan badung bicara Beben Koben si bloglang anu ganteng kalem tea :D

Jika bermain ke tempat hiburan malam, end banyak cewek-cewek genitnya! Din..din..din japanese klakson berbunyi, keluar cewek genit 2 orang dengan gaya genitnya. Din...din germany klakson berdering...satu lusin cewek genit berdatangan :)) Suara klakson saja sudah menandakan class boo :)) :)>-Just Beben joke's
Tidak diragukan lagi memang Mercedes-Benz mobil mewah terbaik Indonesia. Hanya dengan memandang gambar mobilnya saja sudah terasa luxury didalam mobil tersebut, wait finish loading this blog and try it (click image) for feel in dashboard mercedes Apalagi kesampaian mempunyai mobil itu, yaaa kalau disuruh milih mah kepengen SLS AMG ;)) :"> tariiikkk jabriiig kumis kali jabrig!!!

Peluk hangat >:D< dari Beben Koben untuk Mercédès putri Emil Jellinek :x

Logo SEO Olympic Kontes 2011

Contoh mobil mercedes-benz gaya punya

mercedes-benz-sls-amgmercedes-benz-CLS-classmercedes-benz-a-classmercedes-benz-mpvsmercedes-benz-GL-classmercedes-benz-G-class


Berikut fanpage mercedes-benz di facebook

mercedes-benz_mobil_terbaik_indonesia

Bagi sobat blogger, ayuk ikutan kontes SEO-nya jangan baca sajah, siapa tauk kalian yang beruntung SEO Olympic Mercedes Benz 2011!

Salam mercedes benz \m/

Selasa, 26 April 2011

Widget Blogwalking Lebih Mudah

Rehat sejenak dulu dari masalah tutorial dan gadget. Mentok belom lagi menemukan yang gaya punya. Coba acak-acak arsip blog ini, apakah sobat pernah membaca postingan yang sangat menakjubkan ini Shoutbox for Promotion Your Blog ?
Sekarang Beben Koben si bloglang anu ganteng kalem tea mau berbagi lagi teknik menterkenalkan blog kita tercinta ke seantero jagat :)) Seperti Beben bilang, sangkin banyaknya web perkumpulan untuk menyatukan para blogshpere membuat kita harus pandai-pandai memilah and memilih yg mana yang oke punya. Carilah yg cocok dengan platform dasar tema blog. Beben ngikutin beberapa seperti colony company, atau jika broder mau contoh list directory juga tersedia Looking for...!

Bukan bloglang kalau tidak menyuguhkan yg unik², aneh, cool end full stylish. Blogwalking ke blogger malaysia tidak sengaja menemukan technique blogwalking yg yahut :D Sudah dikemas dalam bentuk widget lagi ;)) memudahkan kita menyikatnya :)) Memang blog walking to malaysia selalu ada hasil, betul 3x...:P Satu contoh koloni kompeni tempat blogger malaysia nongkrong Gengblogger.com, tertarik masuk kesana :-?
Inti postingan kali ini, from Yiedpozi [Dot] Com - with title's "100 Bloggers Diperlukan or Blogwalking Lebih Mudah Dengan..." Ayooo lanjutkan bacanya how to get this amazing gadget prikitiwww :x

Hal-hal yang mesti dilakuin:

  1. Buat satu post yang bertajuk 'Blogwalking Lebih Mudah Dengan...'
  2. Jangan lupa link'kan ke entri sumber.
  3. Pasang widget blogwalking di blog. Masuk sini dan klik button "Add To Your Blog/Install" untuk pasang widget.
  4. Submit permalink post di ruangan komentar.
  5. Enjoy it...betul betul betul!!!
Example widget:

Klik² deh itu yg bertuliskan List Blogwalking. Hati-hati tapinya bos, soalnya yang kebuka nanti akan langsung 5 biji blog =))
Happy blogwlaking \m/

Senin, 25 April 2011

Ringkasan JSON Menjadi Beginih!!!

Kumpulan blogger berikut emang gaya punya Bloggers de Buffalo State, dengan menampilkan postingan yang berbobot euy :-bd Sobat tidak asing lagi dengan fasilitas JSON! Sobat kita Vagabundia telah membuat satu terobosan dengan penggunaan fitur JASON tersebut guna menjadi sebuah arsip, ditambah page navigation dengan tampilan ringkasan beserta thumbnail b-)
So, link jason dipadukan dengan link blog dihasilkan karya cipta "Ringkasan masukan dengan pagination menggunakan JSON" Utuh dalam satu postingan yg mana bisa kita jadikan kolom archive dengan menjadikan post static page ;) ;)) Pertama-tama memang sedikit bingung, lalu Beben Koben si bloglang anu ganteng kalem tea langsung menuju DEMO dan diacak-acak deh sampai bisa :D

Screenshot Demo Original Screenshot Demo Practice

Apabila sobat bisa mempraktekan dengan gaya pencipta silahkan langsung saja. Tapi jika roaming dengan segala macam kendala yg ada mari kita lanjutkan acara selanjutnya :P

Bumbu-bumbu

<style>
.paginaposts {
border:1px solid #555;
float: left;
height:35px;
width:197px;
margin:1px;
padding:5px;
}

.paginaposts a {
color:#DDD;
display:block;
font-size:11px;
text-decoration:none;
}

.paginaposts img {
float: left;
height:30px;
width:30px;
}

.paginaposts h6 {
float:right;
height:45px;
width:145px;
margin:0;
}

.paginaposts:hover {
border:1px solid #33F;
}

#paginacion {
color:#BBB;
font-family:Arial;
font-size:24px;
font-weight:700;
height:35px;
line-height:28px;
text-align:center;
padding:20px 0;
}

#paginacion span,#paginacion a {
border:1px solid #444;
color:#BBB;
display:inline-block;
font-family:Arial;
font-size:24px;
font-weight:700;
margin:0 2px;
padding:0 5px;
}

#paginacion span.actual {
color:#FFF;
padding:0 5px;
}

#paginacion a:hover {
color:#FFF;
}

#paginacion .antesdespues {
border:none;
}

#paginacion .antesdespues:hover {
}

#paginacion span.deshabilitado {
border:none;
color:#666;
}

#totales {
text-align:center;
}
</style>

<script type='text/javascript'>
var firsttime = 0;
var paginaactual = 1;
var postporpagina = 60;
var cantidadpaginas = 0;
var cantidadposts = 0;
var maxpaginas = 10;
var minpaginas = 5;

function showpageposts(json) {
var entry, posttitle, posturl, postimg;
var salida = "";
if(cantidadpaginas==0) {
cantidadposts = parseInt(json.feed.openSearch$totalResults.$t);
cantidadpaginas = parseInt(cantidadposts / postporpagina) + 1;
}
for (var i = 0; i < postporpagina; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisG_RCORNU6cMQ_3ozas0VvCgQbX9mzCIFQ0XgpylbjXAjjQDn6NupJ9aTs9N52jkBUBHiIJ0Zmfsk21XZO9gRxOhRpmBhLokznWseLOn_KKdq6w_kaTJmH-K6cfX7Y5Gea3EJN7qnNZC_/s0/vagaPlantilla_resumenpostsnoimage.gif";
}
salida += "<div class='paginaposts'>";
salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
salida += "</div>";
}
document.getElementById("resultados").innerHTML = salida;
paginacion();
}

function paginacion() {
contadorP = 0;
salida = "";
if(paginaactual>1) {
salida += "<a class='antesdespues' href='javascript:incluirscript(" + parseInt(paginaactual-1) + ")'>Previous</a>";
} else {
salida += "<span class='deshabilitado'>Previous</span>";
}
if (cantidadpaginas<(maxpaginas+1)) {
for (contadorP = 1; contadorP <= cantidadpaginas; contadorP++){
if (contadorP==paginaactual) {
salida += "<span class='actual'>" + contadorP + "</span>";
} else {
salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
}
}
} else if(cantidadpaginas>(maxpaginas-1)) {
if(paginaactual<minpaginas) {
for (contadorP=1; contadorP<(maxpaginas-2); contadorP++){
if (contadorP == paginaactual) {
salida += "<span class='actual'>" + contadorP + "</span>";
} else {
salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
}
}
salida += " ... ";
salida += "<a href='javascript:incluirscript(" + parseInt(cantidadpaginas-1) + ")'>" + parseInt(cantidadpaginas-1) + "</a>";
salida += "<a href='javascript:incluirscript(" + cantidadpaginas + ")'>" + cantidadpaginas + "</a>";
} else if(cantidadpaginas-(minpaginas-1)>paginaactual&&paginaactual>(minpaginas-1)) {
salida += "<a href='javascript:incluirscript(1)'>1</a>";
salida += "<a href='javascript:incluirscript(2)'>2</a>";
salida += " ... ";
for (contadorP=paginaactual-2; contadorP<=paginaactual+2; contadorP++) {
if (contadorP==paginaactual) {
salida += "<span class='actual'>" + contadorP + "</span>";
} else {
salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
}
}
salida += " ... ";
salida += "<a href='javascript:incluirscript(" + parseInt(cantidadpaginas-1) + ")'>" + parseInt(cantidadpaginas-1) + "</a>";
salida += "<a href='javascript:incluirscript(" + cantidadpaginas + ")'>" + cantidadpaginas + "</a>";
} else {
salida += "<a href='javascript:incluirscript(1)'>1</a>";
salida += "<a href='javascript:incluirscript(2)'>2</a>";
salida += " ... ";
for (contadorP=cantidadpaginas-(minpaginas+1); contadorP<=cantidadpaginas; contadorP++) {
if (contadorP==paginaactual) {
salida += "<span class='actual'>" + contadorP + "</span>";
} else {
salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
}
}
}
}
if (paginaactual<contadorP-1) {
salida += "<a class='antesdespues' href='javascript:incluirscript(" + parseInt(paginaactual+1) + ")'>Next</a>";
} else {
salida += "<span class='deshabilitado'>Next</span>";
}
document.getElementById("paginacion").innerHTML = salida;
var iniciopagina = (paginaactual * postporpagina) - (postporpagina - 1);
var finalpagina = paginaactual * postporpagina;
var totales = "Total Entry Post: " + cantidadposts + " - Show The Entry " + iniciopagina + " a " + finalpagina;
document.getElementById("totales").innerHTML = totales;
}

function incluirscript(pagina) {
if(firsttime==1) {removerscript();}
document.getElementById("resultados").innerHTML = "<div id='loadingscript'>cargando ...</div>";
document.getElementById("paginacion").innerHTML = "";
document.getElementById("totales").innerHTML = "";
var iniciopagina = (pagina * postporpagina) - (postporpagina - 1);
var archivo = "http://YOUR-NAME.blogspot.com/feeds/posts/default?start-index=" + iniciopagina;
archivo += "&max-results=" + postporpagina;
archivo += "&orderby=published&alt=json-in-script&callback=showpageposts";
var nuevo = document.createElement('script');
nuevo.setAttribute('type', 'text/javascript');
nuevo.setAttribute('src', archivo);
nuevo.setAttribute('id', 'TEMPORAL');
document.getElementsByTagName('head')[0].appendChild(nuevo);
firsttime = 1;
paginaactual = pagina;
}

function removerscript() {
var el = document.getElementById("TEMPORAL");
var padre = el.parentNode;
padre.removeChild(el);
}

onload=function() { incluirscript(1); }
</script>
Kode CSS sama Beben diminimalis, silahkan variasikan sendiri variabel CSS diatas. Script yg diberi warna biru ialah gambar default jika nanti pada postingan tidak ada gambar. Script warna merah ganti dengan URL blog sobat. Masukan kesemuanya itu dengan metode Add a Gadget ► HTML/Javascript

Buatlah satu postingan baru. Disinilah kunci dari generated hasil bumbu² diatas itu (Make a New Post) Buatlah kata-kata pembuka sesuka hati, jangan terlalu banyak dan bertele-tele :D Kemudian masukan kode HTML ini kedalam postingan...

<div id="resultados"></div>
<div style="clear:both;"></div>
<div id="paginacion"></div>
<div id="totales"></div>
Jika sukses maka isi dari postingan baru itu nanti akan berisikan seluruh postingan yang ada di blog b-) JASON memang gila :))
Thanks for Vagabundia for the great tut's, and don't forget to visit that blog and give your feedback :x
Happy blogging \m/

Minggu, 24 April 2011

Linear and Gradient Fitur of CSS3

Menengok artikel dari master doyok mengenai Membuat Background Linear Blogspot teringat kembali pada postingan Beben Koben si bloglang anu ganteng kalem tea about CSS3 Radial Effect. Ternyata memang sedang hangat-hangatnya fitur satu ini dibahas. Selain belom semua jenis browsingan support terhadap variabel yang ada, namun melihat perkembangannya CSS3 model ini terbagi menjadi 2 jenis linear gradients and radial gradients. Radialnya udah pernah diposting tuh ama Beben :D lalu doyok linearnya ;))
Sekarang mari kita tengok versi web developer serta issue dari fitur tersebut. Keren, top, menarik, bikin cuamik, and full stylish b-) Agar terlihat cool Beben akan berikan contoh beberapa disini yah seperti biasa ;)) :"> :D

Color Stops Example

Rotation


Prodigy of Head

Linear Gradient

Ben Tools
Embah GoogLe
Prodigy of Head

Beben Koben si Bloglang anu Ganteng Kalem Tea!

Hihihi bagus kan sob kreasinya, walo sedikit muter mengkreasikan variabel kodenya :-s

Supaya tidak pusing bikin seperti itu, ada tools onlinenya sob :P Tools CSS Gradient Generator. Kalau mau mencoba tool yg lainnya tentu endak kalah keren agan agin bisa try it CSS3 Generator :-"
Resource by:

Don't forget to look the greats collect CSS web by Beben Koben All About CSS.
Welcome and happy CSS3 \m/

Sabtu, 23 April 2011

Modification Gadget From Google Friend Connect

recent-visitor Lagi asyik mengangkat tema menghias blog agar bisa tampil beda nih Beben Koben si bloglang anu ganteng kalem tea :D Postingan sebelumnya sudah dikasih yang berbasis embed flash kepada agan agin sekalian. Bagian komentar pernah juga facebook comments, menyapa pengunjung dengan hello bar widget serta seabrek hiasan lainnya, monggo diacak-acak saja kotak search blog ini :P
Kesempatan sekarang Beben akan berbagi memodifikasi salah satu fasilitas paman google! Widget yg akan dikuak yaitu dari Gadget Friend Connect. Kurang lebih terdapat 15 biji gadget yg dapat sobat sikat :-" dengan fasilitas google friend connect.

Namun cuman satu gaya yg akan dibahas disini ;)) soalnya ada itu ajah bos :"> Merombak Gadget Recent Visitors google friend connect :-bd

Standar instalasi:

Ikuti langkah-langkah berikut untuk menginstal gadget ini di blogsite sobat:
  1. Seting blog jika sudah memiliki account google, kalau belon silahkan sign-up di Google Friend Connect.
  2. Cari gadget (Recent Visitor) di galeri gadget dan kemudian klik "Buat kode HTML"
  3. Copy kode dan paste ke blogsite di mana sobat ingin gadget ini muncul
  4. Enjoy!
Singkat begini, masuk pada langkah pertama diatas ► pilih blog yg mau ditanam gadget recent visitor ► klik ramban galeri gadget ► klik tab menu semua gadget ► scroll paling bawah ► there is :P
Dapat tuh gadgetnya, sekarang baru masuk ke inti perombakan total, let's get de done \m/

Tiga gaya sobat bisa pilih Screensaver, Scroller, and Cloud b-) Gampang kok mengaturnya, nanti broder² tinggal ganti script yg dibedakan warnanya saja ;)

Screensaver

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-XXXXXXXXXXXXXXXXXX" style="width:300px;"></div>
<script type="text/javascript">
var skin = {};
skin['ALTERNATE_BG_COLOR'] = '#000000';
skin['BG_COLOR'] = '#ffffff';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
{ id: 'div-XXXXXXXXXXXXXXXXXX',
url:'http://www.eaglewebapp.com/ewa/gfc/screensaver/screensaver.xml',
site: 'YOUR GOOGLE FRIEND CONNECT SITE ID',
'prefs':{'screenWidth':'300','rows':'5','waitTime':'5','useEffects':'1'}
}, skin);
</script>

Configuration and customization

Ketika beres instal, broodeh dapat mengatur parameter berikut:
  • screenWidth: width of the screen (pixel);
    constraint: screenWidth >= 200px
  • rows: rows of faces that will be showed in the gadget;
    constraint: 2 <= rows <= 15
  • waitTime: waiting time between two effects (seconds);
    constraint: 1 <= waitTime <= 10
  • useEffects: Yes/No, it says if the animation for images has to be used or not;
    constraint: useEffects = 1 (Yes) | 0 (No)
Example (kalau jalan)

Cloud

Scriptnya sama dengan screensacer, sobat hanya perlu mengganti URL http://www.eaglewebapp.com/ewa/gfc/screensaver/screensaver.xml denganhttp://www.eaglewebapp.com/ewa/gfc/cloud/cloud.xml

Configuration and customization

  • cloudWidth: width of the cloud (pixel); Required
    constraint: cloudWidth >= 100px
  • cloudHeight: height of the cloud; Required
    constraint: cloudHeight >= 60px
  • maxDisplay: number of recents friends that will be showed in the gadget;
    constraint: 1 <= maxDisplay <= 20
  • xAxis: x-scaling;
    constraint: 1 <= xAxis <= 3
  • yAxis: y-scaling;
    constraint: 1 <= yAxis <= 3
Example:

Scroller

URL untuk mode inihttp://www.eaglewebapp.com/ewa/gfc/scroller/scroller.xml

Configuration and customization

  • imgHeight: height of each scrolling image (pixel); Required
    constraint: imgHeight >= 20px
  • scrollerWidth: width of whole Scroller gadget (pixel); Required
    constraint: scrollerWidth >= 100 px
  • maxDisplay: number of recents friends that will be showed in the gadget;
    constraint: 1 <= maxDisplay <= 200
  • speed: scrolling speed;
    constraint: 1 <= speed <= 3
  • showEndcaps: to show/hide encaps;
    constraint: showEndcaps = 1 (Yes) | 0 (No)
  • showInnerLines: to show/hide inner horizontal lines;
    constraint: showInnerLines = 1 (Yes) | 0 (No)
  • endcapsBg: endcaps colors;
    constraint: 1 <= endcapsBg <= 3 (1: default=#E0ECFF, 2: Black, 3: White)
Example:

Demikian bos, for details and resource this article from Eagle Web App.
Happy google friend connect gadget \m/

Jumat, 22 April 2011

Embed Flash for Decoration

Kita semua mengetahui bahwasannya menggunakan flash sangatlah membebani dalam urusan loading. Jadi banyak para pakar sangat menganjurkan kalau bisa hindari penggunaan fasilitas flash yang berlebihan :D
Walau dilarang, tapi Beben Koben si bloglang anu ganteng kalem tea mau berbagi macam-macam embed berbasis flash. Cocok dalam mendekorasi blog supaya terlihat gaya punya b-) Mungkin disimpan dibagian header template sobat agar menarik pelancong. Tinggal bisa-bisanya kita saja kok kalo urusan gaya menggaya ;))

Web rujukan ini berisi juga website flash lain oke banget bro. Mau ngacak kayaknya ada juga tutorial mengenai cara bikin flashnya :D Tapi disini bloglang hanya akan berbagi contoh embed flashnya :-" :"> Tinggal klik...klik...maen² deh :))

Walking Faces Sticks

Hihihi :D how...how!!!

Lev Dropin Letters

Lev Text Space

Lev Emotion Fractal

Diatas merupakan beberapa contoh flash yg dapat sobat pakai. Mau download terus dihosting sendiri juga bisa. Sok mampir kemari deh supaya bisa melihat buanyak ragamnya Levitated :)
Happy flash \m/

Kamis, 21 April 2011

Email Ohh Email @

Electronic mail atau email bisa juga kayak begini penulisannya E-Mail merupakan kunci utama dalam kita mau bereksplor ria didunia maya. Mau bikin anu, harus ada email, mau ini harus ada juga, pokoknya setiap yang melakukan register pasti si email dibutuhkan. Sangkin penting keberadaannya tidak sedikit dari para pengembang menawarkan kepada para pemakai guna mengamankan form email tersebut. Ben Tools tempat tools pilihan Beben Koben si bloglang anu ganteng kalem tea mengumpulkan tools pilihan selama berblog walking pernah memosting beberapa keamanan ber-e-mail.

Pengamanan email menggunakan address encoder, memakai image serta pemakaian reCAPTCHA Protection.

  • Example Encoder Email
  • beben.koben@gmail.com
  • Image 'xample
  • mail
  • Contoh reCAPTCHA
  • BeBen...xxx...@gmail.com
Kali ini ada satu tawaran menarik, dimana kita bisa membuat sebuah email dengan domain @mailinator.com bos :-j

Keuntungan

  1. Melindungi privasi kita dan menghindari spam.
  2. Tidak perlu register.
  3. Tidak perlu daftar (No Sign-Up).
  4. Cek email yg masuk bisa via RSS, widget and Browser Web.
Intinya kita bisa melihat mengecek email yang masuk diblog/web tanpa harus login jika menggunakan alamat ini @mailinator.com sob ;) Yuk lanjutin supaya lebih jelasnya :D
TERMS OF SERVICE: By using this service, you agree to the following terms: Mailinator® and ManyBrain, Inc. makes no warranty of reliability or suitability for any purpose. Its availability or existence may be removed at any time by its owners. Any email sent through Mailinator may or may not be available for viewing. You agree to not use Mailinator directly or indirectly for any unlawful purpose. You understand that any messages sent through Mailinator are in public view and anyone can see them. You understand that Mailinator/ManyBrain has no control over material put into mailboxes. You agree to hold ManyBrain, Inc./Mailinator harmless from any damages caused by loss of emails, content within emails, damage to your computer or innocence from viewing emails, direct or indirect use of this system, or anything else you can think of. Use at your own risk.www.mailinator.com
Pertama-tama sobat agan silahkan buat alamat terlebih dahulu di Mailinator. Bebas namanya mau apa juga, kemudian rangkai ke widget berikut
<iframe width='350' height='250' marginwidth='0' marginheight='0' scrolling='no' frameborder='0' src='http://www.mailinator.com/widget/mailin8r.jsp?w=350&h=250&b=YOUR-EMAIL-NAME&f=true'></iframe>
Replace YOUR-EMAIL-NAME dengan nama yg dibuat tadi. Ketika nanti mengecek inbox, akan ada tulisan Alternate Address for this Inbox!!!

Jadi sobat bisa memberikan 2 buah alamat. Contoh yang Beben buat nih.

Check your inbox!


Name when i make it beben-koben@mailinator.com and this my alternate name M8R-7ttekv@mailinator.com Tanpa login bisa lihat email yang masuk loh bos :-O :)) Gunakanlah dengan bijak fasilitas ini :)
Happy email \m/

Rabu, 20 April 2011

Menghias Blog Gaya Punya

Banyak jalan menuju Roma beribu cara bisa kita gunakan untuk memperindah blog kita tersayang. Dari cara sederhana sampai cara yang membutuhkan kerja kepala sedikit muter² hingga menggeleyeng kesana kemari. Siapa yang tidak mau memiliki blogsite yg dipuji banyak orang :D Kalau sobat mengerti dengan kode CSS bisa menghias blog dengan itu. Kalau mengerti script apalagi ;)
Yang tinggal hanya urusan kreatifitas masing-masing :D

Seperti menghias blogspot dengan kode CSS sederhana berikut ini!

Kode CSS

#fixed-footer {
background: url("http://your-link-image/fade_footer.png") repeat-x scroll 0 0 transparent;
bottom: 0;
height: 35px;
left: 0;
position: fixed;
width: 100%;
}
Taruh diatas tag </b:skin>

Kode HTML

<div id="fixed-footer"></div>Simpan di tag <body>Atau mau seperti ini!

Kode CSS

#foot-bar {
background: url("http://your-link-image/foot-bar.png") repeat-x scroll 0 0 transparent;
top: 0;
height: 4px;
left: 0;
position: fixed;
width: 100%;
}

Kode HTML

<div id="foot-bar"></div>Nih link gambarnya, sok silahkan ambil image.
Dengan itu saja sobat sudah memiliki perhiasan sederhana tapi gaya punya b-) Kebayang dong bila disandingkan dengan tawaran widget bertebaran buanyak diluaran sana :-? Seperti gadget berikut ini ;))

Meluncur bro widgetindex.blogspot.com :)) Kalau mau memerlukan gambar/image sobat sabit bisa merujuk kesini deh ;))Happy hias berhias blogspot \m/

Selasa, 19 April 2011

SEO Source From Beben Koben

Mungkin bagi para blogger indonesia tidak awam lagi dengan blog Kang Rohman? Dimana saat ini beliau mengupas habis mengenai Belajar SEO Blogger. Dasar pemikiran utama dalam SEO, sudah dipaparkan, mengenal SEO On Page dan Off Page juga sudah, kenali jumlah kompetitor dan pencarian, serta nama domain terdapat keyword Utama ada disana :) Bila kita membicarakan mengenai SEO tidak akan dimengerti dengan secepat kita menghapal tugas dari dosen. Singkat kata sobat hanya bisa menerka, mengikuti, mempraktekan and mencoba terus bagaimana konten satu web/blog dapat lebih baik dimata Search Engine.

Kata Optimization yang berarti optimalisasi tidak dapat dihasilkan dengan jalan instant apapun :-? Sebenarnya basics SEO itu hanya sedikit yg mana disini pokoknya saja :D Kalau jelasnya Beben Koben si bloglang anu ganteng kalem tea juga tidak tauk :P

Apa itu Search Engine Optimization?

Search engine optimization adalah proses mencapai peringkat teratas di search engine untuk istilah yang paling relevan situs web dalam pencarian. Istilah pencarian yang paling relevan adalah ungkapan bahwa orang yang paling mungkin untuk mengetik ke mesin pencari saat mencari website apa yang ditawarkan. Ini adalah istilah pencarian yang sangat penting untuk peringkat tinggi, dan ini adalah istilah pencarian yang menargetkan mesin pencari optimasi.

Banyak begitu banyak jika kita membaca mengenai optimasi blog/web. Paling besar target mungkin search via by google. Oleh karena itu, Beben hanya akan berbagi website yang mana membahas abis tentang si paman google ini :D Jadi sobat sabit bisa membaca sampai puas lalu direnungkan and dipraktekan deh ;))
Halaman ini akan terus diupdate sejalan bloglang menemukan sumber yg gaya punya b-)
  1. Web Work Shop
  2. Halaman utama langsung memaparkan google articles dan search engine optimization articles. Lalu agan agin bisa lihat kesisi kiri web tersebut ada apa disana ;) Acak acak dah sono :))
  3. Google About
  4. Kalau web satu ini malah lebih komplit, sampai artikel mengenai pembuatan blog basics blogspot juga dibahas ;)) Silahkan diacak-acak juga deh sono :)
  5. Google Tutor
  6. Web mengulas daleman google tapi bukan partnernya si Om :P
  7. Tech Crunch
  8. Hohoho jangan pernah melewatkan web yg satu ini ah. Prikitiw punya deh :x
Segitu saja dulu yak, bagi-bagi seo artikel from the greats source. Nanti ditambah agih kalo 'udah 'apet...to be continued!!!
Happy seo \m/

Senin, 18 April 2011

Facebook Comments Box Plugin for Blogger

Hihihi, Beben Koben si bloglang anu ganteng kalem tea selaku raja bloglang in the house kembali membawa kabar hangat...hangat yaitu mengenai facebook comments plugin for blogger or facebook comments box :D Dari katanya saja sudah ada facebook and comments berarti kotak komentarnya si jejaring sosial FB bisa menclok di blog ;))
Perlu sobat ketahui bahwa terdapat dua versi kotak komentar FB yang bisa diapliasikan kedalam blogger ini.
  1. Pertama facebook comments for develop.
  2. Untuk membuat kotak komentar ini diperlukan yg namanya APP_ID (aplikasi ID)
  3. Kedua facebook comments not develop.
  4. Kalau ini tidak membutuhkan APP_ID tapi berfungsi sama.
Sebenarnya sama-sama saja sih kode script yg digunakannya. Hanya saja ada perbedaan sedikit (secuil) dalam pemanggilan syntax link post :D Kalo mau menggunakan APP_ID ya harus buat dulu di Create an App!
Sekarang sesi script guna mendapatkan kotak komentar buku wajah untuk blogspot.

Script facebook comments for develop

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=YOUR_APP_ID&xfbml=1"></script><fb:comments expr:xid="data:post.id" numposts="10" width="425" publish_feed="true"></fb:comments>Ganti deh itu YOUR_APP_ID.
Resource by: 9lessons.

Script facebook comments for non develop

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"></script><fb:comments expr:href="data:post.url" num_posts="10" width="500"></fb:comments>Ini tidak memerlukan APP_ID.
Resource by: ETBlue
Perbedaannya terdapat pada pemanggilan syntax link expr:xid="data:post.id" and expr:href="data:post.url"

Jadi mudeung kan sob, kalo begini perbedaan dari komentar buat develop or non develop :) Jika sudah begini tinggal kreasi sobat dalam penerapannya. Beben Koben mah diaduin saja itu si ke-2 script diatas :-"

Script facebook comments develop/non develop + Like FB

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"/><fb:like expr:href="data:post.url" font="tahoma" show_faces="false" width="450"/><fb:comments expr:href="data:post.url" num_posts="10" width="500"/>Kalao pakai yg ini plus ada tombol likes ;)) Sok lah kreasikan sendiri...
Happy facebook comments on blogger \m/

Minggu, 17 April 2011

Hello Bar Widget for Blogger

hello-bar Kembali membicarakan mengenai widget/gadget, yang mungkin merupakan cara termudah dalam menghiasi blog kita tercinta :x Ada secara manual kita sendiri yg memasukannya, atau langsung metode add to blogger. Beben Koben si bloglang anu ganteng kalem tea mau share widget hello bar nich sob.
Gadget dimana menampilkan seutas say hello kepada para pengunjung. Keberadaannya diatas membuat pelancong pasti melihatnya. Bisa diminimize juga loh ;)) Terdapat dua cara settingan jika nanti sobat sudah mendaftar disana. Cara pertama, ialah dengan membuat kata-kata message manual disertai link tujuan. Cara kedua meng-add link Url feedburner punya kalian sendiri. Jadi nanti pesan di bar hellonya, artikel terakhir dari feedburner sobat :)

Lakukan register terlebih dahulu Get More Clicks with Hello Bar. Klik Request Invite isikan Name, Email, beserta company. Lalu tunggu besok or someday guna diverifikasi, jika sukses maka email balasan akan terkirim. Coba bayangkan jika agan agin punya web/blog lebih dari satu lalu dimasukin widget ini guna mempopulerkan salah satu blog/web andalannya ;)
Beben sudah bikin untuk blog Prodigy of Head, berikut scriptnya

<script type="text/javascript" src="//www.hellobar.com/hellobar.js"></script>
<script type="text/javascript">
new HelloBar(18167,14405);
</script>
<noscript>The Hello Bar is a simple web toolbar that engages users and communicates a call to action.</noscript>
Dimacukin via Add a Gadget ► HTML/Javascript taraaa look up your blog, there show say Hello Hello Bar :D Diterapinnya mending diblog lain (Example) dengan tujuan feed blog andalan Be a Creative and good luck ;)
Happy Hello Bar \m/

Sabtu, 16 April 2011

Smarter Related Posts Google Blogger Widget

related-post Ketimbang enggak mosting, lebih baik share cara masukin smarter related posts google blogger widget karya More Tech Tips! Kalau kepengen mirip google banget bisa dilooking New Related Articles Widget. Seperti yang ada diblog ini Prodigy of Head Related Posts Integration Blogger Widget.
So...kembali ke proyek postingan terkait miliknya moretechtips. Related posts ini berotasi alias bergonti-ganti, dapat berupa tulisan tampilannya ataupun image. Karena metode Add a Gadget ► HTML/Javascript memudahkan dalam penerapannya sob :D Buka artikel berikut guna melihat ke-4 demo Related Posts Widget for Google Blogger v2.0 Setup! Default coded your got
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js"></script>

<div class="related-posts-widget">
<!-- {
blog_url:'http://YOUR-NAME-BLOG.blogspot.com'
,thumbs:0
} -->
loading..
</div>
Script warna biru jika sudah tertanam ditemplate tidak usyah dipakai lagi yah :) YOUR-NAME-BLOG replace with your link blog. Dengan script itu saja sobat sudah memiliki related posts. Tapi tidak akan berotasi alias menjedog menjentul gan :D

Coba sekarang pasang yang ini ;))

<script type="text/javascript" src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js"></script>
<div class="related-posts-widget">
<!-- {
blog_url:'http://YOUR-NAME-BLOG.blogspot.com'
,titles:0
,thumbs:1
,thumb_size:'s104-c'
,max_posts:10
,max_tags:10
,show_n:4
,stay_time:9000
,animate:'width'
} -->
loading..
</div>
Keterangan:
  1. titles
  2. Pada posisi angka 0 berarti tidak aktif, kalo dibikin menjadi 1 = aktif.
  3. thumbs
  4. Sama jika pada 0 = non aktif, 1 = aktif.
  5. thumb_size
  6. Ukuran (image) jika thumbs diaktifkan. Default size 's72-c' Kalau mau uncropped (tidak dipotong) tinggal ganti 's72' Untuk ukuran cropped & uncropped: 32, 48, 64, 72, 104, 144, 150, 160. Uncropped saja: 94, 110, 128, 200, 220, 288, 320, 400, 512, 576, 640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600.
  7. max_posts
  8. Jumlah postingan yg dipanggil.
  9. max_tags
  10. Ini tidak tauk buat apaan, soalnya pas praktek tidak keliatan efeknya :P
  11. show_n
  12. Jumlah rotasi pada saat tampilan. Default point = 5.
  13. stay_time
  14. Waktu jeda ketika sedang tampil dan akan berganti ke post selanjutnya.
  15. animate
  16. Jenis animasi: width, fontSize, lineHeight, height, dan opacity.
Mungkin segitu menurut Beben Koben si bloglang anu ganteng kalem tea setingan seperlunya. Kalau mau detailsnya yaaa silahkan deh baca sendiri ke sumber pencipta ;)) :D

Terdapat link css hostingan<link type="text/css" href="http://blogger-related-posts.googlecode.com/svn/v2/style1.css" rel="stylesheet" />
Menurut hemat Beben mending sobat pakai ini

<style>
.related-posts-widget ul {
list-style-type:none;
margin:0;
padding:0;
width:XXpx;
height:XXpx;
}
.related-posts-widget ul li{
float:left;
margin:0 0 3px 3px;
}
.related-posts-widget img{
border:silver 3px solid;
}
</style>
Masukin deh bareng ketika Add a Gadget ► HTML/Javascript bersama script related postnya. Kreasikan deh itu kode CSS sesuai selera b-)



Happy relates posts \m/

Jumat, 15 April 2011

Custome Search Google API Key jQuery Ekstrim

Menarik juga ternyata memperhatikan google custom search. Yaitu satu layanan servis paman googel guna membuat kotak pencarian (search action) pada blog. Keuntungannya banyak jika sobat blogger memakai custome search ini :) Yang jelas terlihat bahwa halaman blog telah terindeks sama om google :)) Karena kinerjanya menggunakan API Key, maka harus buat terlebih dahulu alias sign up :D

Start with this link to sign up for a Google API Key. Scroll kebawah lalu add blog/web sobat disana dengan menceklis tanda guna agreement ;) nah nanti ada deh kotak paling atas API Key-nya, lalu masukan deh kedalam blogsite.

Thank You for Signing Up for a Google Maps API Key!

Your key is:

ABQIAAAA6Eeb3axyTxk80ElqSOuy2iM5bQjXopWOWqsivw...

Your coded like this<script src='https://www.google.com/jsapi/?key=ABQIAAAA6Eeb3axyTxk80ElqSOuy2iM5bQjXopWOWqsivw...' type='text/javascript'/>
Masukan dibawah tag <head> Selamat sobat sudah mempunyai API Key sendiri :-bd Sekarang mari kita masuk ke acara inti mengCustome Google Search biar lebih ekstrim \m/

Tadi selayang pandang bagaimana mendapatkan ApiKey, now get your google custome search. Untuk mendapatakannya sobat harus bikin di halaman Google Custom Search. Klik sana klik sini beres deh. Kalau sudah beres (sdh punya) klik tulisan "manage your existing search engines" ► Click Control panel ► perhatikan sisi sebelah kiri, cari bertulisankan Get Code diklik ► munculah coded-nya :) Default coded

<div id="cse" style="width: 100%;">Loading</div>
<script src="//www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'id', style : google.loader.themes.MINIMALIST});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXXXXXXX:_xxxxxxxxxx');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.setAutoComplete(true);
customSearchControl.draw('cse', options);
}, true);
</script>

<style type="text/css">

/* here default style CSS */

</style>
Lihat script <script src="//www.google.com/jsapi" type="text/javascript"></script>
Jika didalam template sudah ada itu (script pada awal disuruh buat tadi) tidak usah dipasang lagi. Begitu jg dengan aturan lain yg memang harus menyertakan API Key!!!
Kalau dengan kode default maka hasil generated pencarian akan tampak seperti:

google-custome-searchDengan tambahan sedikit script snippet, maka ekstrim result dihasilkan meliputi blog kita sendiri, Web, News, Blog, Image, Book and Video b-)

Full kinerja Script Snippet

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

<script src='https://www.google.com/jsapi/?key=ABQIAAAA6Eeb3axyTxk80ElqSOuy2iM5bQjXopWOWqsivw...' type='text/javascript'></script>

<script type='text/javascript'>
google.load("search", "1", {"language" : "id"});

// Call this function when the page has been loaded
function initialize() {
var searchControl = new google.search.SearchControl();

// site restricted web search
var siteSearch = new google.search.WebSearch();
siteSearch.setUserDefinedLabel("YOUR-BLOG-NAME.blogspot.com");
siteSearch.setUserDefinedClassSuffix("siteSearch");
siteSearch.setSiteRestriction("YOUR-BLOG-NAME.blogspot.com");
searchControl.addSearcher(siteSearch);

//Search API Topics
searchControl.addSearcher(new google.search.WebSearch());
searchControl.addSearcher(new google.search.NewsSearch());
searchControl.addSearcher(new google.search.BlogSearch());
searchControl.addSearcher(new google.search.ImageSearch());
searchControl.addSearcher(new google.search.BookSearch());
searchControl.addSearcher(new google.search.VideoSearch());
//others
//searchControl.addSearcher(new google.search.LocalSearch());
//searchControl.addSearcher(new google.search.PatentSearch());

// create a drawOptions object
var drawOptions = new google.search.DrawOptions();
// tell the searcher to draw itself in tabbed mode
drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
searchControl.draw(document.getElementById("searchcontrol"), drawOptions);
}
google.setOnLoadCallback(initialize);
</script>

<p>Type in a search below!</p>
<div id="searchcontrol"></div>
Perhatikan
Kedua script diatas (berwarna merah) kebanyakan sudah terpasang, maka itu jangan dipasang lagi. Sobat hanya tinggal menanamkan script dibawahnya saja setelah mengganti YOUR-BLOG-NAME.blogspot.com dengan link sendiri. Ingat..ingat..ingat!!! Cermatlah, cermatlah!!!Bloglang
demo
Good luck..
Happy custome search google \m/