Ada satu kabar bagus dari web yang suka didatengin ma Beben si bloglang ganteng kalem tea sob
mengenai "disposableWebPage" Apa yg dimaksud dengan disposableWebPage itu :-/ Singkat mengenai penjelasannya sebagai berikut! Sebuah halaman web pakai halaman, kita dapat membuat di situs ini dengan jangka waktu maksimum 90 hari. Setelah itu, halaman akan dibuang secara otomatis dalam dua minggu :D Seperti fungsi draft yg ada pada blogger :-bd Apabila kita mempunyai rancangan (schedule) berupa tulisan (artikel/postingan) dapat menyimpannya di web tersebut. Dengan tampilan seperti web wikipedia dapat diedit dengan mudah. Tersedianya sarana berbagi dan bookmark membuat lebih funsional abis layanan satu ini b-) Kita dapat melakukan registrasi jika memang perlu, dan tidak juga tidak apa-apa.

CONTOH!
| ▼ ▲ | 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
Semoga bermanfaat, and happy coded :D<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!------- Content Home Here ------->
</b:if><b:if cond='data:blog.url != data:blog.homepageUrl'>
<!------- Content Here ------->
</b:if><b:if cond='data:page.type == "archive"'>
<!------- Content Archieve Here ------->
</b:if><b:if cond='data:page.type != "archive"'>
<!------- Content Item Here ------->
</b:if><b:if cond='data:page.type == "item"'>
<!------- Content Post Page Here ------->
</b:if><b:if cond='data:page.type != "item"'>
<!------- Content Here ------->
</b:if><b:if cond='data:blog.url == "Page URL on which you want to display"'>
<!------- Content URL Here ------->
</b:if><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><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><b:if cond='data:blog.url == data:blog.homepageUrl'>
Halaman HomePage
baris1
baris2
<b:else/>
Bukan halaman HomePage
baris3
baris4
</b:if><b:widget id='something' locked='' title='' type=''>Membungkus (wrapping) conditional tags dapat dilakukan sbb:
<b:includable id='main'>
<!------- Content Here ------->
</b:includable>
</b:widget><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>
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.
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>/*
* @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>
$(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>
Kode 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--
| ▼ ▲ | 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 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 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
$(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><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 |

- Avanza
- Kijang Innova
- Yaris
- Camry
- Alphard
- Fortuner
- Rush
- Vios
- Corolla Altis
- Hilux
- Dyna
- Prius
- Etc

| ▼ ▲ | 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
Kode Kalkulator
| ▼ ▲ | 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);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
-webkit-transform:scale(1.5);
-o-transform:scale(1.5);<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:
<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... Centang Expand Widget pada bagian edit template sobat...
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² :-bdJavascript
Letakan javascript berikut dibawah tag <head> atau diatas tag penutup </head>
//<![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><b:includable id='comments' var='post'>Nanti sobat akan menemukan kode seperti ini<div class='comments' id='comment'>Sisipkan kode ramuan kedalamnya menjadi
Scroll kebawah, dan temukan kembali kode
<div class='comments' id='comments'>
<div id='topc'>
....
....</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
#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
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 [..]
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>
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... 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) :PCUREKKK!!! 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 [..]Up Side Callout
Kode CSS
Seperti biasa yah diletakinnya sebelum/diatas kode ]]></b:skin>
{
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
<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
Kode CSS
{
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
<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>
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>
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;
}
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"
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.
Happy jQuery plug-in :D<?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>
| ▼ ▲ | 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:
<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...
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"<textarea rows="2" cols="25" readonly="readonly">Prodigy of Head is blog tutorial from great webs and blogs collected</textarea><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:
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:<a href="javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&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>
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:
Dev Tools via Prompt:
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>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;
}
Kode HTML
Kalau urusan ini, letakan didalam antara tag <body> dan </body><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>
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...
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 :-OLorem 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.





















