Saatnya
jalan-jalan bersama bloglang. Koben akan membawa sobat menjelajah, melihat, dan menyikat kreasi dari para sang kreator :D
Jalan-jalan kali ini akan menghabiskan rokok [-X dan kopi ~O)
Di awali dari @thegaw owner by
tylergaw.com memberikan beberapa project-project keren
Projects that keep Tyler Gaw (scroll ke bagian bawah guna melihat artikel tentang tutorial CSS keren) Tutorial seputar tema
slider
coba kerenan mana menurut kalian
How To Create Slide Show With Pure CSS3 atau
Pure CSS3 Accordion Style Featured Post Slider (dont forget to read all article in there)
Kalau Koben sendiri menjatuhkan pilihan ttg slider effect pada
tEffects jQuery plugin Trick hover
dari ke empat belah sisi dalam satu kotak
Multi direction hover!
From
google service we are talk about
Google Maps Services you can visit here
gmaps.js and it's a good too
Map Channels, free mapping tools Untuk meningkatkan skill kita dalam mempelajari
CSS why aren't to learn:
Dalam urusan
pembuatan tombol sobat silahkan sikat di
Create Striking Button in CSS3 Using Tutorials Kepingin menjadi rapih tampilan produk-produk kalian, you can read it
JavaScript libraries that make Pinterest Perjalanan di akhiri dengan tutorial ringan seputaran dunia CSS! Membuat hover link
blink-blink.
Hover it and look a blitchKetika di sorot akan terlihat efek CSS3 transition.
a.blitch {
color: #fff;
text-decoration: none;
padding: 2px 10px;
margin: 0 10px 0 0;
display: inline-block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #d00;
border: 1px solid #333;
-moz-transition: background-color 0.2s linear 0s;
-webkit-transition: background-color 0.2s linear 0s;
}
a.blitch:hover{
color: #eee;
background: #eee;
background: -moz-linear-gradient(top, #555, #333);
border:1px solid #000;
background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333));
}
MARKUP HTML<a href="/" class="blitch" title="">Your title here</a>Membuat tombol like Facebook use only CSS
#eFBe {
border: 1px solid rgb(211, 211, 211);
background-color: rgb(241, 241, 241);
background-image: url("http://s-static.ak.fbcdn.net/rsrc.php/v2/y5/x/jZBV2CzYMZK.png");
background-repeat: no-repeat;
background-position: 7px 5px;
padding-left: 39px;
height: 23px;
padding-top: 10px;
font-size: 12px;
font-family: verdana;
color: rgb(85, 85, 85);
width: 55px
}
SYNTAX HTML<div id="eFBe">
<a title="" href="YOUR-URL-HERE">TITLE HERE</a>
</div>Membuat tulisan bergaya keyboard
Beben Koben.keyKB {
background: #fff;
border:1px solid gray;
font-size:1.1em;
margin:2px 3px;
padding:1px 5px;
font-family: "monospace", courier, courier new;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
}
Cara pemakaian<span class='keyKB'>TEXT HERE</span>Itu versi sederhananya, bagaimana versi
HTML kbdBeben Kobenkbd {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 12px;
padding: 1px 2px 4px 2px;
margin-bottom: 0;
vertical-align: middle;
line-height: 12px;
font-family: inherit;
display: inline-block;
color: #000;
border-radius: 3px;
clear: both;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
background: #B6B6B6;
background: #cdcdcd;
background: -moz-linear-gradient(left, #cdcdcd 0, #e7e7e7 30%, #e7e7e7 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #cdcdcd), color-stop(30%, #e7e7e7), color-stop(100%, #e7e7e7));
background: -webkit-linear-gradient(left, #cdcdcd 0, #e7e7e7 30%, #e7e7e7 100%);
background: -o-linear-gradient(left, #cdcdcd 0, #e7e7e7 30%, #e7e7e7 100%);
background: -ms-linear-gradient(left, #cdcdcd 0, #e7e7e7 30%, #e7e7e7 100%);
background: linear-gradient(left, #cdcdcd 0, #e7e7e7 30%, #e7e7e7 100%)
}
kbd span {
padding: 4px 6px;
display: block;
border-radius: 2px;
background: #CCC;
background: #e7e7e7;
background: -moz-linear-gradient(left, #e7e7e7 0, #e7e7e7 70%, #cdcdcd 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0, #e7e7e7), color-stop(70%, #e7e7e7), color-stop(100%, #cdcdcd));
background: -webkit-linear-gradient(left, #e7e7e7 0, #e7e7e7 70%, #cdcdcd 100%);
background: -o-linear-gradient(left, #e7e7e7 0, #e7e7e7 70%, #cdcdcd 100%);
background: -ms-linear-gradient(left, #e7e7e7 0, #e7e7e7 70%, #cdcdcd 100%);
background: linear-gradient(left, #e7e7e7 0, #e7e7e7 70%, #cdcdcd 100%)
}
Cara pemakaian<kbd><span>YOUR TEXT HERE</span></kbd>Happy blogging \m/
<div id='DVS_content'>
<div class='social_share_dd'>
<div class='addthis_toolbox addthis_default_style'>
<a class='addthis_button_compact'></a>
<a class='addthis_counter addthis_bubble_style'></a>
<a class='addthis_button_preferred_3'></a>
<a class='addthis_button_preferred_11'></a>
<a class='addthis_button_preferred_12'></a>
<script type='text/javascript' src='http://s7.addthis.com/js/300/addthis_widget.js'></script>
</div>
</div>
<div class='dvs_random_posts'>
<div class='randpostscroll' id='recommend'>
<div class='boxBody'>
<div id='scrollRow'>
<a class='goLeft' id='slide_left' href='javascript:void(0);'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUchAy_eX3dlxrW8_THOHkK8Swg5_Yc0TMgFlq7Rmbc3Eny1_OOc3xQ1X4Q4e-Kx78CVcRZhQWFgaZ7qx06ZkNCjQCkV0uyHDR2cN4UjRbInnYYoid4E7jSaaIKb1oKI9xrYnEmR0Qauw/s1600/leftgree.png' width='13' height='17' style='padding-top:3px' /></a>
<a class='goRight' id='slide_right' href='javascript:void(0);'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja7ENEXXYPDaMRRIZxm1eZhAQGcT1sLMiW76Nq0rjay3ux-xb-kXhga4bUy3BdwbZsE1P-Jq0v-WZxrNFLQ_Ad6X75hyigGemXXxwGAbUwTHbwFP3Gy07KcEyw27MFJVvEE3YyFbQHEs8/s1600/rightgree.png' width='13' height='17' style='padding-top:3px' /></a>
<div id='gscroll'>
<div id='gsub'>
<script type='text/javascript'>
var randarray=new Array();var l=0;var flag;var numofpost=7;function nooprandomposts(json)
{var total=parseInt(json.feed.openSearch$totalResults.$t,10);for(i=0;i<numofpost; )
{flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray)
{if(l==randarray[j])
{flag=1}}
if(flag==0&&l!=0)
{randarray[i++]=l}}
document.write('<ul id="holder1">');for(n in randarray)
{var p=randarray[n];var entry=json.feed.entry[p-1];for(k=0;k<entry.link.length;k++)
{if(entry.link[k].rel=='alternate')
{var item="<li><div class='slidercontent'>"+"<a href="+entry.link[k].href+">"+entry.title.$t+"</a> </div></li>";document.write(item)}}}
document.write('</ul>')}
</script>
<script type='text/javascript' src='/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts'></script>
<ul id='holder2'></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='dvs_cret'><script type='text/javascript' src='http://dvslabs.googlecode.com/files/scrollercontroll.js'></script>
</div>
<div class='dvs_mp3_player'>
<object type='application/x-shockwave-flash' data='http://dl.dropbox.com/u/54221966/dewplayer-vol.swf?mp3=http://a.tumblr.com/tumblr_m95mddcnAz1rqgo6wo1.mp3' width='227' height='21' id='dewplayer-vol' style='margin-top:2px; margin-left:-3px'><param name='wmode' value='transparent' /><param name='movie' value='http://dl.dropbox.com/u/54221966/dewplayer-vol.swf?mp3=http://a.tumblr.com/tumblr_m95mddcnAz1rqgo6wo1.mp3' /></object>
</div>
<div class='go_up'>
<a title='Go to Top' href='#' onclick='MGJS.goTop();return false;'>
<img class='go_up' border='0' width='19' height='18' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrdgiOaYCE_qhUpZWSEeLDjUUkFdA3Ur6OI2n9aIQTwRhmURdyft8bfL7ntJMazyd3t4EXVEmE65jjn0Sr45IOLWYZBYllcUsGX4OpJU5J5jdMItkxplsx-08V8YjYZKsTxliO-ks2ptA/s1600/up2.png' /></a>
</div>
<div class='tootoop'>
<a href='#' onclick='document.getElementById("DVS_scroll_env").style.display="none";return false;'title='Close'>
<img class='tootoop' border='0' width='13' height='13' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiccWNirp-d_7u0cAYyxvAi9oaMLNVtnqxlr1-lrpE_qT0VbJaV49zX8tY9vI0lLbmTfb_6KUM-iaYRKg_nTUXBeGxBbeIT2Uez3gN85Pe_dyggiiwyobq1gSKyyp6m0YV6ZexANrokvIw/s1600/close.png' /></a>
</div>
</div>
</div>
<script type='text/javascript'>
if (screen.width >= 800) {
document.write ("<style type='text/css' media='screen'>#DVS_scroll_env{width:100%;height:29px;padding-top:4px;margin:0;background:blue url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpzUTzDbbXNHsnp-8CDrDT0kzEiExDsAmU-LpKcb3pZruTWLgqMlN_frB_ZzV6i5IWDZm_GJKbtAO40BsjyglpdKGZo6UB8LFLsaUVhruKZhiDFjzq5KSY1NGezCpgQCdULt1oKzdhT9I/s1600/bg.png) right top;position:fixed;bottom:0px;left:0px;z-index:99999;}</style>");
}else{document.write ("<style type='text/css'media='screen'>#DVS_scroll_env{visibility:hidden;display:none}</style>");}
</script>
<!-- Floating Random Post Mp3 Player Share Button by http://www.intert3chmedia.net -->
<noscript><style type='text/css' media='screen'>#DVS_scroll_env{visibility:hidden;display:none}</style><h5 align="center">Your browser does not support JavaScript!</h5></noscript>