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
View 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
Letakin script plugin tersebut dibawah script jQuery inti →
//<![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>Kode CSS
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('http://3.bp.blogspot.com/-yl6foC85E0U/TbRPUVi8GPI/AAAAAAAABWI/yd3Bi5BkHoY/s1600/close.png') no-repeat center center;
border: none;
margin-left: 5px;
position: absolute;
width: 20px;
height: 20px;
cursor: pointer;
}Kode HTML
<div id='stickybar'>Masukin didalam tag <body> template. Awas jangan bentrok ama penutup tag lainnya ;))
This is Demo for Sticky trending Bar <a href='your add url here'>Your title goes here</a>
<input type="button" id="closebtn" />
</div>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/
| ▼ ▲ | Sticky Bar with jQuery Plugin | 9 Komentar |
| ▼ ▲ | Gado-Gado Blogger | 6 Komentar |
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.<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>
<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.<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>
Float Javascript
Membuat satu tampilan yg dapat ditutup kembali dengan menggunakan javascript (Resource by: Vagabundia) Disini Beben memasukan cbox yg ditampilinnya gan...Ganti cboxnya & sesuaikan deh lebar, tinggi, warna latar dll.<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&boxtag=7c3kfw&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&boxtag=7c3kfw&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>
Show/Hide with jQuery Plugin
Sama dengan float javascript fungsinya, tapi ini menggunakan jQuery plugins.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.<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&boxtag=7c3kfw&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&boxtag=7c3kfw&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>
Dah jangan banyak-banyak nanti muntah :-&
Happy gado-gado \m/
| ▼ ▲ | Mercedes-Benz Mobil Mewah Terbaik Indonesia | 17 Komentar |
Mercedes-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 (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'sTidak 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 Peluk hangat >:D< dari Beben Koben untuk Mercédès putri Emil Jellinek :x

Contoh mobil mercedes-benz gaya punya







Berikut fanpage mercedes-benz di facebook
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/
| ▼ ▲ | Widget Blogwalking Lebih Mudah | 13 Komentar |
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 :xHal-hal yang mesti dilakuin:
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/
| ▼ ▲ | Ringkasan JSON Menjadi Beginih!!! | 7 Komentar |
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
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
.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 = "http://3.bp.blogspot.com/_hljKDuw-cxQ/SsmfbhHhGrI/AAAAAAAAOU0/vCmT5Y4wzEo/s00/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>
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>Jika sukses maka isi dari postingan baru itu nanti akan berisikan seluruh postingan yang ada di blog b-) JASON memang gila :))
<div style="clear:both;"></div>
<div id="paginacion"></div>
<div id="totales"></div>
Thanks for Vagabundia for the great tut's, and don't forget to visit that blog and give your feedback :x
Happy blogging \m/
| ▼ ▲ | Linear and Gradient Fitur of CSS3 | 10 Komentar |
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
Linear Gradient
Embah GoogLe
Prodigy of Head
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:
Welcome and happy CSS3 \m/
| ▼ ▲ | Modification Gadget From Google Friend Connect | 11 Komentar |
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:- Seting blog jika sudah memiliki account google, kalau belon silahkan sign-up di Google Friend Connect.
- Cari gadget (Recent Visitor) di galeri gadget dan kemudian klik "Buat kode HTML"
- Copy kode dan paste ke blogsite di mana sobat ingin gadget ini muncul
- Enjoy!
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)
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.xmlConfiguration 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
Scroller
URL untuk mode inihttp://www.eaglewebapp.com/ewa/gfc/scroller/scroller.xmlConfiguration 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)
Happy google friend connect gadget \m/
| ▼ ▲ | Embed Flash for Decoration | 5 Komentar |
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/
| ▼ ▲ | Email Ohh Email @ | 6 Komentar |
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
- Contoh reCAPTCHA BeBen...xxx...@gmail.com
Keuntungan
- Melindungi privasi kita dan menghindari spam.
- Tidak perlu register.
- Tidak perlu daftar (No Sign-Up).
- Cek email yg masuk bisa via RSS, widget and Browser Web.
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.comPertama-tama sobat agan silahkan buat alamat terlebih dahulu di Mailinator. Bebas namanya mau apa juga, kemudian rangkai ke widget berikut
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/
| ▼ ▲ | Menghias Blog Gaya Punya | 5 Komentar |
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
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%;
}
Kode HTML
<div id="fixed-footer"></div>Simpan di tag <body>Atau mau seperti ini!Kode CSS
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/
| ▼ ▲ | SEO Source From Beben Koben | 9 Komentar |
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?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 ;))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.
Halaman ini akan terus diupdate sejalan bloglang menemukan sumber yg gaya punya b-)
- Web Work Shop 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 :))
- Google About Kalau web satu ini malah lebih komplit, sampai artikel mengenai pembuatan blog basics blogspot juga dibahas ;)) Silahkan diacak-acak juga deh sono :)
- Google Tutor Web mengulas daleman google tapi bukan partnernya si Om :P
- Tech Crunch Hohoho jangan pernah melewatkan web yg satu ini ah. Prikitiw punya deh :x
Happy seo \m/
| ▼ ▲ | Facebook Comments Box Plugin for Blogger | 10 Komentar |
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.
- Pertama facebook comments for develop. Untuk membuat kotak komentar ini diperlukan yg namanya APP_ID (aplikasi ID)
- Kedua facebook comments not develop. Kalau ini tidak membutuhkan APP_ID tapi berfungsi sama.
Sekarang sesi script guna mendapatkan kotak komentar
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/
| ▼ ▲ | Hello Bar Widget for Blogger | 5 Komentar |
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
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 ;)<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>
Happy Hello Bar \m/
| ▼ ▲ | Smarter Related Posts Google Blogger Widget | 2 Komentar |
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 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<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>
Coba sekarang pasang yang ini ;))
Keterangan:<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>
- titles Pada posisi angka 0 berarti tidak aktif, kalo dibikin menjadi 1 = aktif.
- thumbs Sama jika pada 0 = non aktif, 1 = aktif.
- thumb_size 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.
- max_posts Jumlah postingan yg dipanggil.
- max_tags Ini tidak tauk buat apaan, soalnya pas praktek tidak keliatan efeknya :P
- show_n Jumlah rotasi pada saat tampilan. Default point = 5.
- stay_time Waktu jeda ketika sedang tampil dan akan berganti ke post selanjutnya.
- animate Jenis animasi: width, fontSize, lineHeight, height, dan opacity.
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
.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>
Happy relates posts \m/
| ▼ ▲ | Custome Search Google API Key jQuery Ekstrim | 6 Komentar |
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
Lihat script<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>
<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:
Dengan 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='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>
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!!!Bloglangdemo
Good luck..
Happy custome search google \m/
| ▼ ▲ | Three Great News from Dynamic Drive | 2 Komentar |
Lama tidak mengunjungi web script berikut ternyata sudah update lumayan banyak. Tiga kabar (three news) sekaligus menggebrak dunia perscriptan dihadirkan kali ini bersama Beben Koben si bloglang anu ganteng kalem tea b-) Pertama-tama bagi sobat suka dengan menu bergaya lava website Dynamic Drive mengeluarkan jQuery Gooey (Lava Lamp) Menu. Menu full stylish oke punya kan. Kita comot satu dari Dynamic Drive Help Forums mengenai jQuery marquee banner. Bisa bolak balik marquee disini jika kita mengarahkan cursor mouse kekiri/kekanan :D Trik disini metode yg dipakai adalah Add a Gadget ► HTML/Javascript ;)) Biar cepet, mudah, kalau mau delete tinggal remove kan bos :))
jQuery Banner Marquee
Jika mau memakai langsung beserta script crawler.js monggo. Kalau mau menghosting sendiri, berikut scriptnya yg sudah dipress crawler.js<script type="text/javascript" src="https://sites.google.com/site/jquery9/crawler.js">
/*
Text and/or Image Crawler Script ©2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1
This Notice Must Remain for Legal Use
*/
</script>
<script type="text/javascript">
marqueeInit({
uniqueid: 'mymarquee',
style: {
'padding': '2px',
'width': '100%',
'height': 'auto'
},
inc: 9, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 4,
neutral: 150,
savedirection: false
});
</script>
<div class="marquee" id="mymarquee">
<a href="http://URL-BLOG.blogspot.com/" title="your-title">
<img border="0" src="http://URL-IMAGE.jpg" alt="" />
</a>
<a href="http://URL-BLOG.blogspot.com/" title="your-title">
<img border="0" src="http://URL-IMAGE.jpg" alt="" />
</a>
<a href="http://URL-BLOG.blogspot.com/">
<img border="0" src="URL-IMAGE.jpg" alt="" />
</a>
<a href="http://URL-BLOG.blogspot.com/" title="your-title">
<img border="0" src="http://URL-IMAGE.jpg" />
</a>
<a href="http://URL-BLOG.blogspot.com/" title="your-title">
<img border="0" src="http://URL-IMAGE.jpg" alt="" />
</a>
</div>
Terdapat settingan didalam script pemanggil, silahkan atur² menurut kebutuhan. Seperti 3 opsi gerakan mouse itu tuh ;)
Terakhir yg ketiga nih mengenai HTML5 Notepad. Global fungsinya yaitu menuliskan sebuah pesan diboard dengan menggunakan hard disk pengguna sebagai metode penyimpanan. Isi tidak akan berakhir (hilang) sampai dihapus secara eksplisit oleh kita. Cocok buat private messages gitoooh sob, kalo urgent ;)) :D Note: In IE8+ and FF3+, the script only works when viewed online (http web address)HTML5 Notepad
Download first right click, and select "Save As":Jika sobat mendownload murni bawaan dynamic drive web css maka full CSS3 atribut yg digunakan. Sama Beben si bloglang ganteng kalem tea direset menjadi CSS standar yg mana nanti sobat dapat mengkreasikannya sendiri. Okay :-bd
Perhatikan script yg diberi warna (paling bawah bos) Pilihlah salah satu saja.
.notepad {
border:1px solid gray;
background:#ffe;
width:280px;
padding:7px 10px;
position:absolute;
cursor:move;
}
.notepad h3 {
margin:5px 0;
}
.notepad .close {
float:right;
font-weight:bold;
text-align:center;
display:block;
cursor:pointer;
}
.notepad form {
margin:0;
padding:0;
}
.notepad form fieldset {
margin-top:1em;
}
.notepad form legend {
font-weight:bold;
}
.notepad form input[type=text] {
width:98%;
}
.notepad form textarea {
width:98%;
height:150px;
}
.notepad form a.control {
text-decoration: none;
padding: 2px 20px;
text-align:center;
margin:5px 0;
display:block;
margin-top:5px;
font:bold 13px Verdana;
border: 1px solid #778;
color: #fff;
border:1px solid gray;
background: #006600;
}
.notepad form a.delete {
background: #444;
}
.notepad:before { /*top left tape effect*/
content: '';
position:absolute;
width: 120px;
height: 25px;
}
</style>
<script language='javascript'>
/***********************************************
* HTML5 Notepad- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var notepad={padHTML:'<div class="notepad"><span class="close" title="Close Notepad">X</span><h3 class="title">Note Pad</h3>'
+'<p>Use the below to save snippets of commonly entered text for quick reuse later. The contents are saved perpetually until deleted by you.</p>'
+'<form><!--noteHTML goes here--></form>'
+'</div>',noteHTML:'<fieldset><legend>Note Title (optional):</legend>'
+'<input type="text" /><br />'
+'<b>Note content:</b><br />'
+'<textarea></textarea>'
+'</fieldset>'
+'<a href="#" class="control save">Save</a>',zIndex:10,loadpad:function(id,position){var $=jQuery
function loadnote(){var notevalue=largestorage["notepad_"+id]
if(notevalue){notevalue=notevalue.split("|||")
$pad.find('.title').text(notevalue[0])
formfields.$subject.val(notevalue[0])
formfields.$content.val(notevalue[1])}}
function savenote(){$pad.find('.title').text(formfields.$subject.val())
largestorage["notepad_"+id]=formfields.$subject.val()+"|||"+formfields.$content.val()}
function positionpad(x,y){var windowmeasure={w:$(window).width(),h:$(window).height(),left:$(document).scrollLeft(),top:$(document).scrollTop()}
var paddimensions={w:$pad.outerWidth(),h:$pad.outerHeight()}
var xpos=(x=="center")?windowmeasure.w/2-paddimensions.w/2:(x=="left")?10:(x=="right")?windowmeasure.w-paddimensions.w-25:parseInt(x)
var ypos=(y=="center")?windowmeasure.h/2-paddimensions.h/2:(y=="top")?10:(y=="bottom")?windowmeasure.h-paddimensions.h-25:parseInt(y)
xpos=xpos+windowmeasure.left
ypos=ypos+windowmeasure.top
$pad.css({left:xpos,top:ypos})}
if($('div#'+id).length==1||!window.localStorage&&!window.globalStorage){$('div#'+id).css({display:'block',visibility:'visible'})
return}
var $pad=$(this.padHTML).appendTo(document.body).attr('id',id).css({zIndex:this.zIndex})
var pad=$pad.get(0)
$(this.noteHTML).appendTo($pad.find('form:eq(0)'))
var padpos=position||['right','center']
positionpad(padpos[0],padpos[1])
var formfields={$subject:$pad.find('input[type="text"]:eq(0)'),$content:$pad.find('textarea:eq(0)')}
var buttons={$save:$pad.find('a.save')}
var largestorage=window.localStorage||(window.globalStorage?globalStorage[location.hostname]:{})
$pad.bind('keydown cut paste',function(e){var target=e.target
var $target=$(target)
if(target.tagName=="TEXTAREA"||(target.tagName=="INPUT"&&target.type=="text")){if(buttons.$save.css('opacity')!=1)
buttons.$save.css({opacity:1}).attr({title:'Click to Save Contents'}).text('Save')}})
$pad.bind('mousedown',function(e){var $startpos=$pad.offset()
$pad.css({zIndex:notepad.zIndex++})
$pad.bind('selectstart',function(){return false}).css('MozUserSelect','-moz-none').find('input, textarea').bind('selectstart',function(e){e.stopPropagation()}).css('MozUserSelect','text')
$pad.data({dragdata:{startpos:{left:$startpos.left,top:$startpos.top},startmousepos:{left:e.clientX,top:e.clientY}}})
$(document).bind('mousemove.dragpad mouseup.dragpad',function(e){if(e.type=="mousemove"){var startpos=$pad.data('dragdata').startpos
var startmousepos=$pad.data('dragdata').startmousepos
var dx=e.clientX-startmousepos.left,dy=e.clientY-startmousepos.top
$pad.css({left:startpos.left+dx,top:startpos.top+dy})}
else if(e.type=="mouseup"){$(document).unbind('mousemove.dragpad mouseup.dragpad')}})})
$pad.find('.close').bind('click',function(e){var padid=$(this).parents('.notepad').attr('id')
notepad.unloadpad(padid)})
$pad.find('form').bind('mousedown',function(e){e.stopPropagation()})
buttons.$save.click(function(e){buttons.$save.css({opacity:0.5}).attr({title:'Contents Saved'}).text('Saved')
savenote()
e.preventDefault()})
loadnote()
if(largestorage["notepad_"+id])
buttons.$save.css({opacity:0.5}).attr({title:'Contents Saved'}).text('Saved')},unloadpad:function(id){jQuery('div#'+id).remove()}}
</script>
<script language='javascript'>
jQuery(function($){ //on document.ready
notepad.loadpad('mynotepad1') //load "mynotepad1" when document loads
})
</script>
<a href="javascript:notepad.loadpad('mynotepad2')">Mynotepad2</a><script language='javascript'>
jQuery(function($){ //on document.ready
notepad.loadpad('mynotepad1') //load "mynotepad1" when document loads
})
</script>
Ini akan membuka board setelah beres loading blogsite sobat.<a href="javascript:notepad.loadpad('mynotepad2')">Mynotepad2</a>
Yang ini via klik dulu baru muncul deh boardnya. Sok mau mana yg dipakainya deh, terserah agan agin :P Good luck, and demikian three great news from dynamic drive.
Happy salma \m/





















