Tutorial Blog for Stylish Blogger: Oktober 2010

Bagi sobat blogger yang membutuhkan tools dan aplikasi buat memperindah blognya BEN_TOOLS

Buat kawan yang mau pasang iklan Silahkan hubungi pada halaman kontak yah...xixixi.

Tempatnya free download mp3 terlengkap Fortysix Mp3 dan bisa pesan pula. Pokok`e top margot top

Your ads here!!!

Assalamu'alaikum Wr Wb - Selamat datang di Blog berat dan aneh ♥ Semoga tidak mengurangi sobat untuk menjamahnya. Sssttt...MOZILLA pakainya yah...! Eit!!! Mampir lagi ya huehuehue. This is blog looks better in FIREFOX. Get MOZILLA™ Happy blogging - Wassalamu'alaikum Wr Wb ☺

▼ ▲

DisposableWebPage Like Draft Function on Blogspot

4 Komentar

▼ ▲

Conditional Tags On Blogger

4 Komentar

Memang susah-susah gampang duh :D Sebenarnya Beben si bloglang ganteng kalem tea tidak akan memosting satu artikel jika kurang gaya dan artikel tersebut hanya bisa dipahami jika cara untuk memahaminya memerlukan pembelajaran dari diri sendiri sobat. Kang Rohman pernah memosting menghilangkan widget, disana sudah sedikit diterangkan kode dan fungsinya. Tapi disini Beben akan berbagi dari sobat yg lain dan pernah memosting mengenai topik ini juga ;) Coba tengok postingan aku sebelumnya ini sob 1, 2, dan 3. Keterangan kode dan fungsinya sudah ready stock ;)) Cocok bagi blogger yg ingin serius berkecimpung di basis blogspot khususnya :-bd Sekarang mari kita komplitkan postingan dari KR diatas tadi yuk :P

Jika sobat ingin menampilkan sesuatu (widget, HTML, CSS, etc) pada halaman HOME.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!------- Content Home Here ------->
</b:if>

Mau menampilkan sesuatu di semua halaman kecuali HOMEPAGE

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<!------- Content Here ------->
</b:if>

Menampilkan hanya akan tampak pada halaman arsip (Archive Pages)

<b:if cond='data:page.type == &quot;archive&quot;'>
<!------- Content Archieve Here ------->
</b:if>Menampilkan ITEM selain di halaman arsip.
<b:if cond='data:page.type != &quot;archive&quot;'>
<!------- Content Item Here ------->
</b:if>Mau tampak pada hanya halaman post (post page)
<b:if cond='data:page.type == &quot;item&quot;'>
<!------- Content Post Page Here ------->
</b:if>Kebalikan dari point ke-5, tampil selain di halaman post.
<b:if cond='data:page.type != &quot;item&quot;'>
<!------- Content Here ------->
</b:if>Menampilkan pada url tertentu saja (bisa berupa halaman posting atau sesuatu seperti itu)
<b:if cond='data:blog.url == &quot;Page URL on which you want to display&quot;'>
<!------- Content URL Here ------->
</b:if>Menampilkan satu URL pada semua halaman.
Kita perlu mengedit pengisian link dengan URL yg dikehendaki!<b:if cond='data:blog.url != "Page_Url di mana tidak ingin ditampilkan pada item atau widget&"'>
Item tidak akan ditampilkan di halaman ini khusus URL
</b:if>Sama seperti pada point ke-9, tapi jika ingin lebih dari 1 URL.
<b:if cond='data:blog.url != "Halaman_Khusus_URL1"'>
<b:if cond='data:blog.url != "Halaman_Khusus_URL2"'>
<!------- Content URL1 dan URL2 Here ------->
</b:if>
</b:if>Bagaimana jika untuk menampilkan sesuatu di homepage dan sesuatu yang lain pada semua halaman lain.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Halaman HomePage
baris1
baris2
<b:else/>
Bukan halaman HomePage
baris3
baris4
</b:if>Struktur umum untuk wrapping (membungkus) widget dengan conditional tags pada setiap widget dan tidak akan tampak pada Blog Post Widget.
<b:widget id='something' locked='' title='' type=''>
<b:includable id='main'>
<!------- Content Here ------->
</b:includable>
</b:widget>Membungkus (wrapping) conditional tags dapat dilakukan sbb:<b:widget id='something' locked='' title='' type=''>
<b:includable id='main'>
<b:if cond='data:blog.url == "Content khusus URL"'>
<!------- Content Here ------->
</b:if>
</b:includable>
</b:widget>

Semoga bermanfaat, and happy coded :D
Source by: http://bloggerplugnplay.blogspot.com/2009/10/using-conditional-tags-in-blog-to.html




▼ ▲ Text On Moving Backgrounds with jQuery 3 Komentar


Sobat tercinta, jika Beben si bloglang ganteng kalem tea memberikan sebuah link dalam postingan harap kunjungi dan lihatlah ada apa disana looks around :-? Pokoknya mah gaya dan semoga ada manfaatnya bagi skill kita deh :D Menemukan artikel gaya dan unik punya itu susah loh sob, tak saban waktu kita bisa mendapatkannya. Mungkin dengan berlangganan/follow pada sebuah web/blog salah satu jalan kita untuk tetap mengikuti update postingannya kan? Maka dari itu, kreatif dan selektif dalam menjalankan dunia blog ^(khususnya) diperlukan oleh sobat-sobat Beben tercinta :x Satu artikel full stylish from web Gaya stylish nih coba disimak yah "Text Moving Backgrounds with jQuery"
Dengan sebuah image transparan (PNG/GIF) kita dapat membuat satu kreasi background bergerak dengan sentuhan jQuery b-) Beberapa alat yang dibutuhkan dalam karya ini:
Gambar latar belakang yang mantap punya.
Gambar depan transparan guna menampakan efek gerak.
Sedikit kode jQuery plug-in.
Biasanya kalau akan membuat file PNG yang berisi huruf anti-aliased dan meletakkannya didalam beberapa kontainer diatas latar belakang. Apa yang kita lakukan adalah menempatkan gambar penuh terhadap latar belakang, meliputi bagian yang tidak harus dilihat. Sama seperti sebuah topeng!
Kode CSS
.scrollBg {
background-image: url(background.jpg); 
background-color: #000000;
width: 487px;
height: 83px;
}
.scrollBg img {
display: block;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>Minimal versi jQuery yg dibutuhkan, jika sudah punya versi lebih baru jangan dipakai lagi, dan letakan di bawah kode tag <head>jQuery Plug-in
<script type="text/javascript" src="url_to_moving_background.js"></script><script type="text/javascript">
/*
* @author Alexander Farkas
* v. 1.21
*/

(function($) {
if(!document.defaultView || !document.defaultView.getComputedStyle){ // IE6-IE8
var oldCurCSS = jQuery.curCSS;
jQuery.curCSS = function(elem, name, force){
if(name === 'background-position'){
name = 'backgroundPosition';
}
if(name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[ name ]){
return oldCurCSS.apply(this, arguments);
}
var style = elem.style;
if ( !force && style && style[ name ] ){
return style[ name ];
}
return oldCurCSS(elem, 'backgroundPositionX', force) +' '+ oldCurCSS(elem, 'backgroundPositionY', force);
};
}
	
var oldAnim = $.fn.animate;
$.fn.animate = function(prop){
if('background-position' in prop){
prop.backgroundPosition = prop['background-position'];
delete prop['background-position'];
}
if('backgroundPosition' in prop){
prop.backgroundPosition = '('+ prop.backgroundPosition;
}
return oldAnim.apply(this, arguments);
};
	
function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
	
$.fx.step. backgroundPosition = function(fx) {
if (!fx.bgPosReady) {
var start = $.curCSS(fx.elem,'backgroundPosition');
if(!start){//FF2 no inline-style fallback
start = '0px 0px';
}
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.options.curAnim.backgroundPosition);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
fx.bgPosReady = true;
}
//return;
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];           
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
};
})(jQuery);
</script>
Ini kode script pemanggil dari plugin diatas...<script type="text/javascript">
$(document).ready(function() {
moveBgAround();
});

function moveBgAround() {
//give a random value from 0 to 400 for the X axis and the Y axis
var x = Math.floor(Math.random()*401);
var y = Math.floor(Math.random()*401);

//random generated time it takes to move
var time = Math.floor(Math.random()*1001) + 2000;

//make the background image move!
$('.scrollBg').animate({
backgroundPosition: '(' + (x * -1) + 'px ' + (y * -1) + 'px)'
}, time, "swing", function() {
moveBgAround();
});
}
</script>
Kalau menurut cara diletakan dibagaian tag <head> coba dahulu letakin diatas kode </body> Selama pengalaman kalau script plugin di basis blogspot dapat disana kita menempatkannya (just try it) :PKode HTML
Ini bagian dimana kita mau pakai, dalam penggunaan tinggal memakai...<div class='scrollBg'>
<img src='overlay.png' alt='' />
</div>
Itu jika kita memakai gambar background yg telah diletakan pada bagian CSS secara permanen. Jika kita ingin menggunakan background masing² maka HTML yg digunakan dapat memakai cara berikut...<div class='scrollBg' style='background-image: url(http://link-gambar-nanti-yg-bergeraknya.jpg)'>
<img src='http://link-gambar-transparan-yg-nanti-diberi-efek-oleh-gambar-pertama-diatas.png' alt='' />
</div>Good luck and happy blogging \m/





▼ ▲ No Gaya No Post 6 Komentar


Widget ini mungkin bisa sobat pakai dalam meningkatkan lalu lintas blog Clicksor Plugin. Dapatkan lebih banyak uang untuk blog Anda dan website hari ini. Dengan Publisher Plugins kami, pengguna Blogger, Wordpress, Drupal, dan Joomla sekarang dapat menempatkan iklan teks inline Clicksor dan iklan popunder dengan hanya satu klik. Meningkatkan pendapatan sobat sekarang dengan menambahkan plugin kita sendiri. Kalau yang tertarik silahkan registrasi disana yah :) Untuk mengetahui jumlah link lalu-lintas ke blog ataupun halaman, mungkin tertarik dengan widget keluaran Yahoo! ini Site Explorer. Temukan widget² keren dan gaya punya dengan mengetikan keyword "widget" pada kotak search blog aku yah :"> :D
Seperti kebiasaan Beben si bloglang ganteng kalem tea, selalu share/berbagi mengenai web/blog keren dalam mengembangkan skill kita dalam berblogging. Kalau selama ini Beben sering memberi tutorial mengenai script jQuery plug-in, maka kali ini bagi yang menyukai dengan Javascript siap-siap untuk tercengang :-O Web ini selain memberikan artikel Javascript yg gaya punya, coba tengok ini CSS tutorial, HTML tutorial, Site Design tutorial and etc. Sobat tinggal masuk ke bagian home, dan tengok ke sebelah kanan, ada apa disana B-) No Gaya No Post :))
--www.HowToCreate.co.uk--
See you...:(|)





▼ ▲ Background Scrolling Effect with jQuery 8 Komentar


Salah satu sobat Beben si bloglang ganteng kalem tea ada yang menanyakan "bagaimana cara membuat background awan yg ada dipost (yg jalan² itu mungkin ya)" Sebenarnya itu trik dari jQuery plug-in saja kok :D Sobat dapat melakukan beragam macam kreasi jika memang bisa bahasa script dari jQuery :) Jadi tinggal pintar² kita apa yg dibutuhkan. Karena dengan metode plugin ini sedikit memberikan warna bagi yg memang suka bergaya-gaya dengan blognya (kayak aku) :)) b-) Sedikit penjelasan mengenai jQuery plug-in sobat dapat membacanya jQuery Tutorial by w3school :-bd
Mari kita masuk ke inti dari pertanyaan sobat kita itu yah ;)) Untuk menggunakan trik ini sobat harus sudah memiliki script jQuery<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>Tanpa itu kita tidak akan bisa membuat trik ini sob ;;) Karena sedikit pengertian dari plugin ini yaitu memanggil efek dari script inti dengan script yg kita buat (semoga paham, kalau gak paham, telan saja paham) =)) Apa saja ramuannya dalam membuat "Create Background Scrolling Effect with jQuery" ini
Download dulu bahan-bahan berikut Igredient. Setelah itu ekstrak dan buka ramuannya yah! Untuk membaca keterangan lebih lanjut dari trik ini sobat bisa mengunjungi Queness. Setelah dibuka nanti ada jquery-1.3.1.min.js jika sudah punya versi lebih tinggi, tidak usah dipakai lagi (aturan plug-in nih) Sekarang bagaimana cara memasukannya ke blog kita ya sob :) Letakan script dan CSS berikut setelah kode ]]></b:skin>
<script type='text/javascript'>
$(document).ready(function () {
// speed in milliseconds
var scrollSpeed = 70;

// set the direction
var direction = 'h';

// set the default position
var current = 0;

function bgscroll(){

// 1 pixel row at a time
current -= 1;
   
// move the background with backgrond-position css properties
$('div.clouds').css("backgroundPosition", (direction == 'h') ? current+"px 0" : "0 " + current+"px");
}

//Calls the scrolling function repeatedly
var init = setInterval("bgscroll()", scrollSpeed);	
});
</script>

<style type='text/css'>
.clouds {background:#DEBE94 url(http://bg_clouds.png) repeat 0 bottom;
width:auto;
height:100%;
}
</style>
 Ganti link image dengan image awan! Save deh. Centang Expand Widget Templates pada edit template, lalu temukan ID bagian postingan sobat (berbeda setiap template)...biasanya dekat kode<div class='post-body entry-content'><data:post.body/> pokoknya bagian post. Tag dengan<div class="clouds"> lalu tutup dengan tag penutup</div>Good luck :D





▼ ▲ Mobil Keluarga Ideal Terbaik Indonesia 6 Komentar


Toyota Motor Corporation (TMC), adalah sebuah perusahaan mobil di Jepang, yang berpusat di Toyota, Aichi, memberikan pelayanan finansial, dan juga berpartisipasi dalam bidang bisnis lainnya. Salah satunya menjadi Mobil Keluarga Ideal Terbaik Indonesia!!!
Di saat negara eropa berlomba membuat mobil luxury (mewah) dengan tawaran serba wah memang tidak dapat disanggah oleh para konsumen. Tetapi di era sekarang bukanlah prioritas utama dalam mempunyai sebuah kendaraan idaman (roda empat) harus mobil yang high class :) Satu pabrikan asal Jepang dengan branding Toyota, tapatnya di Toyota, Aichi yang didirikan September 1933, dengan pendiri Mr. Sakichi Toyoda memberikan warna dalam memiliki Mobil Keluarga Ideal Terbaik Indonesia b-) Dengan memiliki market premium dalam bersaing dengan pabrikan high class lainnya :) pihak Toyota menawarkan pada konsumen bagaimana caranya mendapatkan mobil ideal bagi keluraga :) Lihat ragam yang ditawarkannya ini wahai keluarga Indonesia:Avanza
Kijang Innova
Yaris
Camry
Alphard
Fortuner
Rush
Vios
Corolla Altis
Hilux
Dyna
Prius
Etc
Dengan konsep yang diusung maka tidak heran Toyota merupakan salah satu pabrikan terbesar di dunia ini yang menjadi pilihan “Mobil Keluarga Ideal Terbaik Indonesia”





▼ ▲ Calculator 4 Komentar


Awalnya cuman iseng saja sob baca-baca artikel dari web www.createblog.com :-/ Soalnya web itu menerangkan mengenai Myspace Layouts, Hi5 Layouts, Friendster Layouts, Xanga Layouts, Blogger Layouts, Livejournal Layouts, Website Templates and CreateBlog Layouts :D Itu kategori layoutsnya saja sob... Karena emang lagi hobby baca kalau artikelnya gaya² yah keantengan deh look around. Jadi deh halaman postingan ini menjadi postingan bagian calculator :)) b-)

   
   
   
   Kode for Calculator
<form name="Calc" action=""><div><input type="text" name="Input" size="10" /></div><input type="button" name="one" value="1" onclick="Calc.Input.value += '1'" /> <input type="button" name="two" value="2" onclick="Calc.Input.value += '2'" /> <input type="button" name="three" value="3" onclick="Calc.Input.value += '3'" /> <input type="button" name="plus" value="+" onclick="Calc.Input.value += ' + '" /><br /><input type="button" name="four" value="4" onclick="Calc.Input.value += '4'" /> <input type="button" name="five" value="5" onclick="Calc.Input.value += '5'" /> <input type="button" name="six" value="6" onclick="Calc.Input.value += '6'" /> <input type="button" name="minus" value="-" onclick="Calc.Input.value += ' - '" /><br /><input type="button" name="seven" value="7" onclick="Calc.Input.value += '7'" /> <input type="button" name="eight" value="8" onclick="Calc.Input.value += '8'" /> <input type="button" name="nine" value="9" onclick="Calc.Input.value += '9'" /> <input type="button" name="times" value="x" onclick="Calc.Input.value += ' * '" /><br /><input type="button" name="clear" value="C" style="color:red" onclick="Calc.Input.value = ''" /> <input type="button" name="zero"  value="0" onclick="Calc.Input.value += '0'" /> <input type="button" name="comp"  value="="onclick="Calc.Input.value = eval(Calc.Input.value)" /> <input type="button" name="div" value="/" onclick="Calc.Input.value += ' / '" /></form>

Kode Kalkulator
<form name="kalkulator"><table width="222" bgcolor="#AA6600" border="3" bordercolor="#555" cellpadding="1" cellspacing="2"><tbody><tr><td><input size="25" length="25" value="" name="ans" style="background: none repeat scroll 0% 0% beige; -moz-background-inline-policy: continuous; color: black;" type="text"></td></tr></tbody></table><table width="222" bgcolor="#AA6600" border="3" bordercolor="#555" cellpadding="2" cellspacing="2"><tbody><tr><td align="center"><input onclick="document.kalkulator.ans.value+='7'" value="7" name="seven" type="button"></td><td align="center"><input onclick="document.kalkulator.ans.value+='8'" value="8" name="eight" type="button"></td><td align="center"><input onclick="document.kalkulator.ans.value+='9'" value="9" name="nine" type="button"></td><td align="center"><input onclick="document.kalkulator.ans.value+='/'" value="/" name="divide" type="button"></td></tr><tr><td align="center"><input onclick="document.kalkulator.ans.value+='4'" value="4" name="four" type="button"></td><td align="center"><input onclick="document.kalkulator.ans.value+='5'" value="5" name="five" type="button"></td><td align="center"><input onclick="document.kalkulator.ans.value+='6'" value="6" name="six" type="button"></td><td align="center"><input onclick="document.kalkulator.ans.value+='*'" value="*" name="multiply" type="button"></td></tr><tr><td align="center"><input onclick="document.kalkulator.ans.value+='1'" value="1" name="one" type="button"></td><td align="center"><input onclick="document.kalkulator.ans.value+='2'" value="2" name="two" type="button"></td><td align="center"><input onclick="document.kalkulator.ans.value+='3'" value="3" name="three" type="button"></td><td align="center"><input onclick="document.kalkulator.ans.value+='-'" value="-" name="subtract" type="button"></td></tr><tr><td align="center"><input onclick="document.kalkulator.ans.value=''" value="C" name="clear" type="button"></td><td align="center"><input onclick="document.kalkulator.ans.value+='0'" value="0" name="zero" type="button"></td><td align="center"><input onclick="document.kalkulator.ans.value=eval(document.kalkulator.ans.value)" value="=" name="equal" type="button"></td><td align="center"><input onclick="document.kalkulator.ans.value+='+'" value="+" name="add" type="button"></td></tr></tbody></table></form>
Bye...bye :-h





▼ ▲ Mixed Syntax for Image 4 Komentar


Postingan kali ini mengenai trik a:hover pada image (gambar) yang apabila akan manghasilkan efek bila disorot oleh mouse :-bd Jika sobat penggila jQuery dalam hal efek mengefek untuk image, bisa lihat yg Beben si bloglang ganteng kalem tea ini Cloud Zoom. Karena perkembangan browsingan telah memasuki era CSS3, maka untuk urusan a:hover ini bisa lebih mudah lagi sob A Hover for Image ;)) Beben mau berbagi lagi penulisan link buat gambar dengan variasi javascript sedikit yg akan memberikan efek layaknya fungsi hover :D Secara default jika sobat mau memberikan efek a:hover menggunakan CSS3, tinggal membubuhkan kode berikut-moz-transform:scale(1.5);
-webkit-transform:scale(1.5);
-o-transform:scale(1.5);Dengan kode itu sobat sudah memiliki efek gaya punya ;;) Jika mau gambar berupa link, dan setelah diklik gambar tersebut akan muncul maka syntax yg diperlukan<img alt="your title will show" title="click to load image" onclick="src='http://your-link-image.jpg'" border='0' style="color:#FF0000;text-decoration:underline;cursor:pointer">Demo:

Jika mau hovernya langsung berefek seperti ini, maka syntax yg dipakai [..]

<img onmouseover="height='75';" onmouseout="height='30';" src="http://your-link-image" border="0" height="30" title="your title" style="cursor:pointer">Supaya tidak dicuri gambar dengan klik kanan ;)) maka ada dua penulisan syntax for image...

<img oncontextmenu="return false;" src="http://your-link-image" border="0" height="30" title="your title" style="cursor:help">Tanpa alert windows!!!
<img oncontextmenu='alert("your title!!!"); return false;' src="http://your-link-iamge" border="0" height="30" title="your title" style="cursor:help">Dengan alert windows!!!
Semoga bermanfaat :)





▼ ▲ Images in Blogspot Comments Side 12 Komentar


Mari kita beri ucapan selamat kepada blogger berbasis blogspot dengan tampilan baru pada waktu kita memasuki sesi log-in <:-P :O) \:D/ =D> taraaa...

Artikel ini masih dari blog sobat yg notabene masih menggunakan klasik template :) Heres for original article http://categories.blogspot.com/2006/02/images-in-blogspot-comments.html Menampilkan tag gambar pada komentar dengan bantuan JavaScript sedikit CSS dan HTML juga :D Jadi kita hanya menggunakan syntax sederhana seperti ini[img]http://link-gambar.jpg[/img]Mari kita ramu dengan bumbu yg sudah Beben si bloglang ganteng kalem tea ulik² :-bd
Centang Expand Widget pada bagian edit template sobat...
Expand Widget Templates
Javascript
Letakan javascript berikut dibawah tag <head> atau diatas tag penutup </head><script type="text/Javascript">
//<![CDATA[
function commenthtml(string)
{
normaltitle = document.getElementById(string).innerHTML;
fattitle = "";
yy = normaltitle.length;
yy = yy+5
for( var xx = 0; xx < yy; xx++ )
{
nextone = normaltitle.slice(0,1)
normaltitle = normaltitle.slice(1)
if ( nextone=="[") {
if (normaltitle.indexOf("img]")=="0") {
if (normaltitle.indexOf("[/img]")!="-1") {
find=normaltitle.indexOf("[/img]");
doinsert = normaltitle.slice(0,find);
normaltitle = normaltitle.slice(find);
normaltitle = normaltitle.slice(6);
if (doinsert.indexOf("\"")=="-1") {
nextone="image";doinsert = doinsert.slice(4); doinsert = "<img src=\""+doinsert+"\">";
}}}
};
if (nextone=="image"){nextone=doinsert}
fattitle = fattitle.concat(nextone);
}
document.getElementById(string).innerHTML = fattitle;
}
//]]>
</script>
Setelah melakukan expand widget temukan kode ini<b:includable id='comments' var='post'>Nanti sobat akan menemukan kode seperti ini<div class='comments' id='comment'>Sisipkan kode ramuan kedalamnya menjadi<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<div id='topc'>
....
....
Scroll kebawah, dan temukan kembali kode</b:includable>Letakan tag penutup </div> tepat diatas kode tadi yah sob! Setelah itu save deh :) Sekarang untuk kode CSS dan HTML-nya yah...Kode CSS dan HTML
Masukan seluruh kode dengan melakukan Dashboard ► Design ► Page Elements ► Add a Gadget ► HTML/Javascript :D<style>
#imgfix {
background: url(http://link-your-button-image.png) no-repeat;
left: 0px;
top: 75px;
height: 35px;
width: 35px;
position: fixed;
z-index: 5000;
border: none;
}
#imgfix a {
display: block;
width: 100%;
height: 100%;
}
</style>

<div id="imgfix"><a href="#" onclick="commenthtml('topc');return false;" title=""></a></div>
Jadi nanti kalau pada kotak komentar sobat ingin memberitahukan sebuah image tinggal menuliskan syntax[img]http://link-image-on-comments-side.jpg[/img]
Tinggal memberi tag [img] dan ditutup kembali dengan tag [/img] Karena berkerja dg menggunakan javascript, maka efek akan berfungsi setelah load halaman beres 100% ;) Setelah full load 100% pada satu halaman, tekan/klik tombol yg tadi dibuat (lihat gambar diatas itu kan)
Good luck and see you \m/





▼ ▲ Mouseover Banner Advertising 6 Komentar


Bagaimana ini sob tidak ada artikel gaya-gaya :( Bisa hancur nih update postingan kalau begini inih :D Wadezzziiighhh !@#$%^&*()_+ Pernah melihat banner ter muter tidak sob :-/ Banner yg jika reloud/refresh halaman menjadi pindah-pindah gitooo posisinya sob. Sobat satu kita ini pernah memostingnya loh sob www.mybloggertricks.com sok datangin pasti bakal nemuin tutorial yg gaya² punya sob ;)) Dia kasih judul "Random Ad Banners Widget For Blogger"... Sekarang bagaimana jika banner yg kita miliki, bisa berubah-rubah walau hanya dengan gerakan mouse. Hayooo...:D Beben si bloglang ganteng kalem tea ini menemukannya sehabis korek-korek arsip dari sobat kita http://categories.blogspot.com Sangkin sudah BW gak nemuin artikel unik, arsip jadi sasaran sob =))
Jika sobat tidak mau ambil pusing letakan saja script dan kodenya semua pada bagian Add a Gadget pilih yg HTML/Javascript :D Nanti pas mouse dihadapkan pada banner, akan berganti dengan banner lain begitu seterusnya sebanyak banner yg dimiliki ;) Kode dan scriptnya [..]
<script style="text/javscript">
function rotate_banner(locator)
{
var pick=Math.round(1+((Math.random()*7)-0.5));
var banner=new Array(8)
banner[0]="<a href=\"HTTP://YOUR-LINK.COM/\"><img style=\" width: 100%;\" src=\"HTTP://YOUR-LINK-IMAGE.JPG\" alt=\"BLAH-BLAH\"></a>";
banner[1]="<a href=\"HTTP://YOUR-LINK.COM/\"><img style=\" width: 100%;\" src=\"HTTP://YOUR-LINK-IMAGE.JPG\" title=\"BLAH-BLEH\" alt=\"BLAH-BLAH\"></a>";
banner[2]="<a href=\"HTTP://YOUR-LINK.COM\" ><IMG SRC=\"HTTP://YOUR-LINK-IMAGE.JPG\" WIDTH=\"100%\" HEIGHT=\"60\" ALT=\"BLAH-BLAH\" BORDER=\"0\" ></A>";
banner[3]="<a href=\"HTTP://YOUR-LINK.COM\" ><IMG SRC=\"HTTP://YOUR-LINK-IMAGE.JPG\" WIDTH=\"100%\" HEIGHT=\"60\" ALT=\"BLAH-BLAH\" BORDER=\"0\" ></A>";
banner[4]="<a href=\"HTTP://YOUR-LINK.COM/\" ><img border=\"0\" src=\"HTTP://YOUR-LINK-IMAGE.JPG\" width=\"100%\" height=\"60\" alt=\"BLAH-BLAH\" /></a>";
banner[5]="<a href=\"HTTP://YOUR-LINK.COM/\" ><img border=\"0\" src=\"HTTP://YOUR-LINK-IMAGE.JPG\" width=\"100%\" height=\"60\" alt=\"BLAH-BLAH\" /></a>";
banner[6]="<a href=\"HTTP://YOUR-LINK.COM/\" ><img src=\"HTTP://YOUR-LINK-IMAGE.JPG\" border=0 width=\"100%\" height=\"60\"></a>";
banner[7]="<a href=\"HTTP://YOUR-LINK.COM\"><img src=\"HTTP://YOUR-LINK-IMAGE.JPG\" border=0 width=\"100%\" height=\"60\"></a>";
document.getElementById(locator).innerHTML = banner[pick];
}
</SCRIPT>

<span onmouseout="rotate_banner('b1')" id="b1">
<a href="HTTP://YOUR-LINK.COM/"><img src="HTTP://YOUR-LINK-IMAGE.JPG" title="" alt=""></a>
</span>
Gantilah link syntax dan aturlah width dan height sesuai kebutuhan. Untuk script berwarna biru itu nanti banner yg akan tampak pertama. Perhatikan script yg bertuliskan Math.random()*7 dan new Array(8) Itulah kode yg dirubah jika ingin menambahkan banner dan link ;) :-bd
Happy blogging and good luck \m/






▼ ▲ Purely CSS Callouts for Comment Style 12 Komentar


Sebelum acara mosting dimulai, ada pemberitahuan dari status blogger mengenai akan dinonaktifkannya fasilitas upload gambar selama sekitar 2 jam dikarenakan ada pembenahan rutin :) Blogger Status. Nah sekarang mari kita masuk ke sesi postingan yg sebenarnya ;)) Sobat pernah melihat bagian komentar pada blog salah satu master kita @Kang Rohman? Jika diperhatikan bagian komentarnya ada seni sedikit berupa gambar yg ada cureknya...halaaaahhhh...CUREKKK!!! Kalau dalam screenshot akan tampak seperti berikut kotak komentarnya:

Yup sobat, itu yg Beben si bloglang ganteng kalem tea maksudkan ;)) Ada seninya kan berupa gambar mengarahkan pada ID si komentarnya berupa gambar curek dikit :D =)) Ternyata eh ternyata, setelah BW kesana kemari itu dapat dibuat hanya dengan menggunakan CSS tanpa menggunakan gambar >:) Tertarik!!! cek di dot [..]
Sama sang kreasinya karya ini dikasih judul "Purely CSS Callouts" ;)) Secara default kode ini akan ada dua jenis sob. Ada yg cureknya mengarah keatas ( Up Side Callout) dan kebawah ( Down Side Callout) :P
Up Side Callout
@BebenKoben Said:
Lorem ipsum (abreviadamente, lipsum) es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final. En este caso se le conoce también como greeking en inglés.
Kode CSS
Seperti biasa yah diletakinnya sebelum/diatas kode ]]></b:skin>.calloutUp
{
height: 0;
width: 0;
border-bottom: 12px solid #ffffff;
border-left: 12px dotted transparent;
border-right: 12px dotted transparent;
left: 0px;
top: 0px;
margin-left: 20px;
z-index: 10;
}
.calloutUp2
{
position: relative;
left: -10px;
top: 2px;
height: 0;
width: 0;
border-bottom: 10px solid #9999ff;
border-left: 10px dotted transparent;
border-right: 10px dotted transparent;
z-index: 11;
}
.divContainerUp
{
background-color: #9999ff;
border: solid 1px #ffffff;
position: relative;
top: -1px;
z-index: 9;
width: 98%;
padding: 4px;
}
Kode HTML
Kalau urusan ini bisa diedit-edit sesuai ID pada bagian komentar sobat masing-masing :) Dengan ID yg ada pada CSS diatas berarti yaa sama :D<h3>Up Side Callout</h3>
<div><a href="#">Beben Koben</a> Said</div>
<div class="calloutUp">
<div class="calloutUp2">
</div>
</div>
<div class="divContainerUp">
Al estar escrito en un lenguaje clásico (el más usado está derivado del latín clásico) suele despertar curiosidad saber qué significa. Sin embargo el significado del texto no tiene importancia debido a que si un texto es legible los usuarios suelen centrarse en lo que dice el texto y no en el diseño, que es el objetivo en este caso.
</div>
Down Side Callout
Lorem ipsum (abreviadamente, lipsum) es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final. En este caso se le conoce también como greeking en inglés.
@BebenKoben Said:
Kode CSS
.calloutDown
{
height: 0;
width: 0;
border-top: 12px solid #ffffff;
border-left: 12px dotted transparent;
border-right: 12px dotted transparent;
left: 0px;
top: 0px;
margin-left: 20px;
z-index: 11;
}
.calloutDown2
{
position: relative;
left: -10px;
top: -12px;
height: 0;
width: 0;
border-top: 10px solid #9999ff;
border-left: 10px dotted transparent;
border-right: 10px dotted transparent;
z-index: 10;
}
.divContainerDown
{
background-color: #9999ff;
border: solid 1px #ffffff;
position: relative;
top: 1px;
z-index: 3;
width: 98%;
padding: 4px;
}
Kode HTML
<h3>Down Side Callout</h3>
<div class="divContainerDown">
Lorem ipsum (abreviadamente, lipsum) es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final. En este caso se le conoce también como greeking en inglés.
</div>
<div class="calloutDown">
<div class="calloutDown2">
</div>
</div>
<div>
<a href="#">Beben Koben</a> Said</div>
Nah kode CSS sudah ada, kode HTML juga sudah ada, tinggal kreatifitas sobat untuk memasukan ke bagian komentarnya :)) Good luck and happy blogging \m/
Original article:www.dailycoding.com





▼ ▲ Make a Button With Image 8 Komentar


Blog walking tidak menemukan artikel gaya punya harus jadi kreatif nih sob ;)) Muter-muter otak sampai mau butek dan pecah =)) Okelah para pengunjung setia blog Beben si bloglang ganteng kalem tea ini sudahkan membaca artikel variety button :-/ Lebih kurangnya menggunakan trik tersebut, mari kita membuat tombol (button) dengan variasi kata-kata yang mengikuti nanti didalam gambar tombolnya :-?? Sedikit bingung mungkin kalau diterangkan dengan kata-kata. Pada praktek saja agar bisa tergambar dengan seksama yah ;)) Secara default kita membutuhkan satu gambar dengan resolusi 214 x 118

Gambar tersebut bagian panah yg bawah kita beri warna merah, hijau, ataupun sesuai selera saja :) Mari kita coba dengan memberi warna merah yah sob ;) Misalanya seperti ini:

Letakan kode CSS berikut sebelum/diatas kode ]]></b:skin>
a.button {
display:block;
width:173px;
height:59px;
padding-right:50px;
line-height:60px;
font-family: Impact, Arial, sans-serif;
font-size:25px;
color:#FFFFFF;
text-align:center;
text-transform: uppercase;
background:url(http://image-gambar-214x118.jpg) no-repeat top center;
text-decoration:none;
}
a.button:hover {
background-position:bottom center;
color:#FF0000;
}
Ketika akan memosting, sobat hanya tinggal menuliskan syntax link menjadi<a class="button" title="your title" href="http://your-link.com">Your Words</a>
Sobat perhatikan pada kode CSS yg diberi huruf tebal, nah itu yg perlu diselaraskan dengan gambar sobat ciptakan ;) Serta kata Your Words didalam syntax link itu nanti yg akan tampak pada gambar, dan disorot kode warna pada CSS yg berfungsi sesuai dg warna gambar kreasi sobat.
Happy blogging and salam blogger \m/





▼ ▲ James Cook University Singapore 4 Komentar


Sebuah universitas yang didirikan pada tahun 2003, yang sudah go internasional dan berada pada peringkat 4% didunia dalam bidangnya :) Kampus yang terletak di 600 Upper Thomson Rd. tersedia fasilitas berstandar internasional :-bd Dengan pesatnya persaingan di bidang pendidikan ini, maka ada baiknya sobat-sobat perhitungkan yang mau menjadi ahli dalam bidang makanan JCU Singapore ini menjadi pilihan ;) Sambil rekreasi ke luar negeri terus belajar dan mendapatkan gelar top, wah enak itu mah lah b-) top markotop...prikitiwww :x Oke mari kita tengok siapa, mengapa, dan program apa saja yang ditawarkan oleh penyelenggara kontes "Pesta Blogger 2010 Merayakan Keragaman"
 Siapakah JCU Singapore 
 Mengapa JCU Singapore 
 Program Studi JCU Singapore? 
Negara tetangga kita ini Singapore, kecil negaranya tapi memiliki prestasi di berbagai bidang sob :) Sirkuit F1 satu saja ada di negara tersebut :)) :-bd Sip deh, pokoknya silahkan bagi yang mau bergabung di JCU Singapore cepat buruan daftar. Moga-moga ajah aku menjadi salah satu pemenangnya ah :)>-
Bagi sobat yang mau ikutan kontes ini juga silahkan kunjungi halaman berikut ini JCU Singapore Contest.





▼ ▲ jQuery Panel Gallery Plugin 0 Komentar


Postingan gaya lagi mengenai jQuery plug-in yaitu jQuery Panel Gallery Plugin 2.0 \m/ Kita dapat menerapkan efek khusus pada gambar apapun, membuat sebuah array efek, dari membiarkan memilih plugin efek. Hal ini, dikombinasikan dengan plugin pilihan memberi kita jumlah yang tidak terbatas kombinasi yg akan digunakan. Versi 2.0 masih memiliki kemampuan untuk menghentikan sementara transisi hanya dengan menempatkan mouse diatas gambar. Memiliki 59 efek array yg dapat dipilih sesuai kemauan kita b-) Mau efek fade, boxSouthEast, boxRandom, panelZipperDown,true, panelZipperRight,true, panelTeethDown,true, panelTeethRightReveal, etc.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="pg.min.js"></script>
<script type="text/javascript">
$(function(){
 $('#YOUR-ID').panelGallery({
  viewDuration: 2500,
  transitionDuration: 500,
  boxSize: 40,
  boxFadeDuration: 500,
  boxTransitionDuration: 50
 });
});
</script>
<b:skin><![CDATA[/*
#YOUR-ID {
 margin: 0;
 -moz-box-shadow: 0px 0px 10px #333;
 -webkit-box-shadow:  0px 0px 10px #333;
 box-shadow:  0px 0px 10px #333;
}
]]></b:skin>

</head>

<body>
<div id="YOUR-ID">
<img alt="" src="/jquery/demo/1/image1.jpg" width="760" height="200" />
<img alt="" src="/jquery/demo/1/image2.jpg" width="760" height="200" />
<img alt="" src="/jquery/demo/1/image3.jpg" width="760" height="200" />
<img alt="" src="/jquery/demo/1/image4.jpg" width="760" height="200" />
<img alt="" src="/jquery/demo/1/image5.jpg" width="760" height="200" />
<img alt="" src="/jquery/demo/1/image6.jpg" width="760" height="200" />
<img alt="" src="/jquery/demo/1/image7.jpg" width="760" height="200" />
<img alt="" src="/jquery/demo/1/image8.jpg" width="760" height="200" />
<img alt="" src="/jquery/demo/1/image9.jpg" width="760" height="200" />
<img alt="" src="/jquery/demo/1/image10.jpg" width="760" height="200" />
</div>

</body>
</html>
Happy jQuery plug-in :D





▼ ▲ Textarea Style 3 Komentar


Waduh sudah pusing sob cari-cari artikel gaya punya nih #:-S Kesana kemari enggak ketemu-ketemu juga :-< textarea :D Kadang-kadang pas BW masih melihat yang pakai trik ini masih ada kekurangan ;) Seperti bisa dihapus gitu tulisan yg ada. Memang tidak salah, tapi kan alangkah baiknya jika tulisan tersebut tidak dapat berubah-rubah. Biasanya textarea ini dipakai dalam pertukaran banner gitoh :P Secara default kode textarea seperti berikut:
Prodigy of Head is blog tutorial from great webs and blogs collected<textarea rows="2" cols="25">Prodigy of Head is blog tutorial from great webs and blogs collected</textarea>Kalau sobat hapus tulisan yg ada dikotak itu, maka akan terhapus ;) bisa berabe kan tuh kode yg sudah ada jadi tidak berfungsi ;)) Bagaimana kalau yg ini...
Enter Your Content Here...
Dengan hanya menyorotnya kita sudah terfokus pada tulisan yg ada didalam kotak itu yah :-"
<textarea rows="2" cols="25" onfocus="this.select()" onmouseover="this.focus()" style="display: inline;" name="txt" onclick="this.focus();this.select()">Enter Your Content Here...</textarea>Sebenarnya cukup mudah agar tulisan yg ada didalam kotak tidak dapat terhapus (tanpa sengaja)... Kita tinggal membubuhkan attribute kedalam kode yg sudah ada dengan menambahkan kode readonly="readonly"
Prodigy of Head is blog tutorial from great webs and blogs collected<textarea rows="2" cols="25" readonly="readonly">Prodigy of Head is blog tutorial from great webs and blogs collected</textarea>Enter Your Content Here...<textarea rows="2" cols="25" onfocus="this.select()" onmouseover="this.focus()" style="display: inline;" name="txt" onclick="this.focus();this.select()" readonly="readonly">Enter Your Content Here...</textarea>Dan kode² tersebut kalau divariasikan dengan kode input bagaimana hasilnya yah ;)) Seperti contoh berikut yg ada di blog si Beben bloglang ganteng kalem tea :D

Klik buat mengambil banner & link BEBEN
Be Creative and happy blogging \m/






▼ ▲ FAVELETS 4 Komentar


Sobat mungkin sudah tauk dong dengan yang namanya bookmark :-/ Satu layanan berupa syntax link isinya script dipanggil dengan bahasa link HALAAAH ~!@#$%^& 8-} Pokoknya dengan fungsi ini semua terlihat menjadi mudah sob ;) Sobat mau ngapain saja juga bisa, seperti bugs pada mozilla gitoh :-B Dikarenakan link ini memanggil kinerja dari script yg terhosting entah dimana, maka harus sabar menunggu loading dari satu web/blog yg akan diprosesnya. Ingat dengan membaca artikel ini diharapkan sobat akan menjadi ahli web di masa depan, dan khususnya menjadi master di dunia blogger \m/ Untuk melihat koleksi dan contohnya, sobat bisa dilihat dipostingan Beben si bloglang ganteng kalem tea Brainy Bookmarlable Links. For example from mozilla developer like this:
<a href="javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&amp;&amp;F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');">Mozilla Bugs</a>
Nah seperti itu sob :D Biasanya fasilitas ini diciptakan dari web-web yg sudah top markotop dalam menciptakan script² hebat ^:)^ Jika sobat memperhatikan dengan seksama resource web yg Beben sudah kasih, ada juga kok :-" Koleksi ini biasanya disebut Favelets category...Seperti biasa list dalam postingan seperti ini akan terus di update...hohohoho. Koleksi favelets dari centricle.com:Search via Prompt:
Search Google
 Search Google Groups
Search Google Images
Google Current Site
Dictionary Lookup
Thesaurus Lookup
Search PHP.net
Lookup PHP Function
Search eBay
 Search OLGA
Search IMDB
Define Acronym
Search for Selected:
Search Google
Search Google Groups
Search Google Images
Google Current Site
Dictionary Lookup
Thesaurus Lookup
Search PHP.net
Lookup PHP Function
Search eBay
Search OLGA
Search IMDB
Define Acronym
Web Development Tools:
Tidy HTML
Validate Markup
Validate CSS
Check Links
Check Uptime
Webhost Info
Dev Tools via Prompt:
Tidy HTML
Validate Markup
Validate CSS
Check Links
Check Uptime
Safe Browser
Webhost Info
Look for details Centricle Favelets. Lihat sebelah kanan dari web ini dan cari faveletsnya yah SlayerOffice. Dikarenakan tutorial blog sudah susah cari²nya :D maka artikelnya ya seperti ini ya ;)) Semoga bermanfaat...
No Gaya No Post, Happy Blogging \m/





▼ ▲ CSS3 Mega Drop-Down Menu 7 Komentar


Sering digunakan pada e-commerce atau situs skala besar, menu mega menjadi lebih dan lebih populer, karena mereka menawarkan solusi yang efektif untuk menampilkan banyak konten sekaligus menjaga tata letak yang bersih. Dalam tutorial ini, sobat akan belajar bagaimana membangun sebuah menu drop-down mega menggunakan fitur CSS3. Tutorial datang dari web top markotop Nettuts+ "Cara Membangun Kick-Butt CSS3 Menu Mega Drop-Down" Karena menggunakan CSS3, jadi mungkin rada banyak nih kode-kode untuk CSS-nya :D Tapi yg penting hasilnya kan sob :-bd b-)

Kode CSS
Seperti biasa letakan diatas/sebelum kode ]]></b:skin>ul, li {
font-size:14px; 
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
text-align:left;
}
#menu {
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;

/* Rounded Corners */

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

/* Background color and gradients */

background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

/* Borders */

border: 1px solid #002232;
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
 
/* Background color and gradients */
 
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
 
/* Rounded corners */
 
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}

#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px; 
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
padding-right:21px;
background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("img/drop.png") no-repeat right 7px;
}
.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
 
/* Gradient background */

background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

/* Rounded Corners */

-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;
top:auto;
}

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

#menu .menu_right {
float:right;
margin-right:0px;
}
#menu li .align_right {

/* Rounded Corners */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}

#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}

.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
.imgshadow { /* Better style on light background */
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;

/* Rounded Corners */

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

/* Shadow */

-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}

#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;

/* Rounded Corners */

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}
Gantilah link gambar itu dengan gambar yg sudah dihosting :P Gambar tersebut, gambar panah ;)Kode HTML
Kalau urusan ini, letakan didalam antara tag <body> dan </body><ul id="menu">
<li><a href="#" class="drop">Home</a><!-- Begin Home Item -->
<div class="dropdown_2columns"><!-- Begin 2 columns container -->
<div class="col_2">
<h2>Welcome !</h2>
</div>
<div class="col_2">
<p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p>             
<p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p>             
</div>

<div class="col_2">
<h2>Cross Browser Support</h2>
</div>
<div class="col_1">
<img src="img/browsers.png" width="125" height="48" alt="" />
</div>
<div class="col_1">
<p>This mega menu has been tested in all major browsers.</p>
</div>
</div><!-- End 2 columns container -->
</li><!-- End Home Item -->

<li><a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item -->
<div class="dropdown_5columns"><!-- Begin 5 columns container -->
<div class="col_5">
<h2>This is an example of a large container with 5 columns</h2>
</div>
<div class="col_1">
<p class="black_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p>
</div>
<div class="col_1">
<p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p>
</div>
<div class="col_1">
<p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p>
</div>
<div class="col_1">
<p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p>
</div>
<div class="col_1">
<p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p>
</div>
<div class="col_5">
<h2>Here is some content with side images</h2>
</div>
<div class="col_3">
<img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a href="#">Read more...</a></p>
<img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a href="#">Read more...</a></p>
</div>
<div class="col_2">
<p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p>
</div>
</div><!-- End 5 columns container -->
</li><!-- End 5 columns Item -->

<li><a href="#" class="drop">4 Columns</a><!-- Begin 4 columns Item -->
<div class="dropdown_4columns"><!-- Begin 4 columns container -->
<div class="col_4">
<h2>This is a heading title</h2>
</div>
<div class="col_1">
<h3>Some Links</h3>
<ul>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
</ul>   
</div>
    
<div class="col_1">
<h3>Useful Links</h3>
<ul>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
</ul>   
</div>
    
<div class="col_1">
<h3>Other Stuff</h3>
<ul>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
</ul>   
</div>
<div class="col_1">
<h3>Misc</h3>
<ul>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">More...</a></li>
</ul>   
</div>
</div><!-- End 4 columns container -->
</li><!-- End 4 columns Item -->

<li class="menu_right"><a href="#" class="drop">1 Column</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="simple">
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">More...</a></li>
</ul>   
</div>
</div>
</li>

<li class="menu_right"><a href="#" class="drop">3 columns</a><!-- Begin 3 columns Item -->
<div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->
<div class="col_3">
<h2>Lists in Boxes</h2>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
</ul>   
</div>
            
<div class="col_1">
<ul class="greybox">
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
</ul>   
</div>
            
<div class="col_1">
<ul class="greybox">
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">More...</a></li>
</ul>   
</div>
<div class="col_3">
<h2>Here are some image examples</h2>
</div>
            
<div class="col_3">
<img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="#">Read more...</a></p>
<img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="#">Read more...</a></p>
</div>
       
</div><!-- End 3 columns container -->
</li><!-- End 3 columns Item -->
</ul>
Nah kalau mau detail lebih lengkapnya yg menyangkut dengan issue IE tidak support terhadap CSS3 datang saja ke sumber aslinya dah Nettuts+.
Happy enjoy CSS3 and happy blogging with si bloglang ganteng kalem tea :D \m/





▼ ▲ HTML5 0 Komentar


Sebenarnya kurang paham Beben si bloglang ganteng kalem ini mengenai HTML5 :D Ya simpelnya kali perubahan directory yang sudah ada ke directory yg lebih baru ;)) Dari penulisan kode HTMl pasti sudah ada yg berubah, dan apalagi yak :"> Pokonya mah pasti bakalan lebih seru sob kalau sudah final result nih :x Karena tidak mengerti maka dengan itu bloglang nge-BW kesana kemari mencari rujukan² mengenai HTML5 ini. Nah ini sebagai perkenalan mengenai HTML5 Robert's talk. Dari issue web W3C menahan penggunaan HTML5 InfoWorld!!! dan yg bikin bingung itu ada beberapa versi penggunaannya sob :-s
Dari web net.tutsplus.com bercerita "Start Using HTML5 WebSockets Today" Nettuts+. Smashing search result with start html5 keyword Start HTML5!!! From Six Revisions menjabarkan bagaimana state of HTML5 apps Six Revisions :) Sampe ke database utuk HTMl5 ini ada loh sob Dark Crimson Blog :D Sehingga kita membutuhkan trik, tips dan teknik dalam hal beginian W3Avenue. Adapun persiapan mengenai issue ini tuh, seperti penjabaran berikut WDVL... Jadi pertanyaannya mengapa kita menggunakan HTML5 will work for art??? Sebagai contoh dalam membuat template HTML5 CSS3 Kamikazemusic.com ;) Lanjut brooo :))
Untuk membuat jQuery html5form Matias Mancini. Seperti yg Beben bilang ada perbedaan penerapan dan pemakaian, ini lain lagi nih Rey Bango :-" Download the HTML5 Quick Learning Guide (pdf) Nah sekarang kita tunggu saja bagaimana blogspot menanggapi issue² ini yah sob :)
Semoga bermanfaat and salam blogger \m/





▼ ▲ No Gaya No Post 5 Komentar


Tak ayal benar nih perkembangan pada dunia web, khususnya blog :D makin gaya punya dan full stylish b-) Beben tidak tauk juga nih sudah sampai mana perkembangannya mah ;)) Kalau seorang developer serius mah pasti memperhatikan dari semua sudut, tapi kalau aku kan seorang bloglang yg bisa cuman pakai doang :)) Pertama dari perkenalan Surfin’ Safari, mengenai CSS gradients sob ;) Ternyata kalau dengan sentuhan kreatifitas yg kita miliki bisa menghasilkan efek seperti sebuah script :-" Beneran ini mah enggak bohong loh!!! kayaknya perlu bukti ini mah...
Sebuah pelangi yang terbuat dari gradient...!!!
Here Developer Mozilla and here too Developer Mozilla too. Kalau sudah tauk trik dan caranya, sobat tinggal datangin saja web ini dan baca² bagaimana caranya membuat slick menu menggunakan CSS3 tadi Insicdesigns. Bagaimana :-/ keren dan gaya punya kan :-? :)) Denbagus Blog bercerita mengenai 10 teknik CSS tebaik tanpa javascript!!! Kemarin aku kasih link mengenai script-scriptan kan Leigeber, nah bonusnya lagi Fabulant!!! Ubek dah mau yg mana itu script =))
Sampai jumpa lagi :-h no gaya no post =))





▼ ▲ LEIGEBER 2 Komentar


Tak tahu mau kemana lagi cari-cari web/blog developer yang mempunyai artikel gaya punya :D Mungkin semua resource sudah Beben postingkan ;) Makanya susah juga ini untuk uptodate postingan, karena susahnya cari² web yg mantap punya b-) Mungkin sebelum-sebelumnya dalam hal script, pasti Beben si bloglang ganteng kalem tea ini memberikan jQuery script!!! Nah kali ini ada script yg minimalis dalam hal kode-kodenya tapi memberikan hasil tak jauh beda dengan jQuery :-bd Dari slideshow, WYSIWYG editor, flash charts, scrolling dan lain-lain... Sedikit mengenai about that web...
Michael Leigeber dari Refina  seorang perancang dan coding website selama lebih dari 7 tahun dengan menggunakan. NET, PHP, Java, XHTML, CSS dan JavaScript. Dia telah bekerja pada berbagai proyek dari intranet besar pada 500 toko-toko e-commerce.
Begitulah kira-kira apa yg di translate oleh google :D Baca dan kunjungi webnya guna memperoleh artikel² khususnya mengenai javascript Tiny :-" Introduce my friends Leigeber a web development blog.
See you and happy blogging :-h





▼ ▲ K A R M A 7 Komentar


Welcome to Prodigy of Head
Tulisan kalau browsingan sudah support dengan CSS3 akan bisa diputar-putar (rotation) macam contoh tulisan disebelah kiri itu :-/ Bisa menaruh bayangan (shadows), column (kolom) menggunakan murni CSS, dan banyak lagi kreatifitas yg dapat kita ciptakan :D Semua ramuan CSS3 yg masih digojlog pada sebuah lab ini akan terus dioptimalkan sampai kemana ini rumus² yg ada, berefek langsung pada browsingan saat ini b-) Perlu diingat yah, di lab ini yg digojlog itu bukan CSS doang...HTML, Javascript ama PHP. Sampai sliding labels form juga ada loh :-O
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Bagus yak ;)) (*) Buka web berikut guna memperdalam gaya², jurus², trik dan tips apapun CSS Karma.