[CSS3] cross browser css transform skew

Hello, kembali lagi dengan saya idjunk. mulai sekarang saya akan merubah gaya postingan saya menjadi lebih sederhana karena saya pikir malah jadi pusing sendiri mikir kata - kata formal. Lagipula blog ini cuma buat arsip siapa tau nanti selepas SMA dibutuhkan.

langsung saja, saya sendiri tidak bisa menjelaskan apa sih css transform skew, jadi langsung saja ke prakteknya ya.

contoh css transform skew

berikut adalah cssnya :

.contoh_transform
{
width: 100px;
height: 100px;
background: red;
 filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=1,
            M12=0,
            M21=0.5,
            M22=1,
            SizingMethod='auto expand');
-webkit-transform: matrix(1,0.5,0,1,0,0);
-moz-transform: matrix(1,0.5,0,1,0,0);
-ms-transform: matrix(1,0.5,0,1,0,0);
-o-transform: matrix(1,0.5,0,1,0,0);
transform: matrix(1,0.5,0,1,0,0);
}

keterangan:


sekian artikel tentang cross browser css transform skew dari saya, jika ada pertanyaan silahkan tinggalkan komentar pada form di bawah.

Readmore...

custom domain blogspot

custom domain adalah salah satu opsi yang disediakan pihak Blogger yang memperbolehkan usernya untuk membuat blog dengan domain sendiri. dengan domain sendiri, blog kamu akan terlihat lebih profesional atau jika memanfaatkan blog sebagai media bisnis maka kamu akan terlihat lebih profesional walaupun dengan budget yang kecil - kecilan.

pertama, silahkan masuk ke control panel domainmu. lalu masuk ke DNS management. ikuti instruksi di bawah untuk menyetting CNAME dan A-records.

CNAME
di bagian Name, masukkan "WWW" (tanpa tanda kutip) dan masukkan "ghs.google.com" (tanpa tanda kutip) di bagian Host Name.
untuk membuat blog dengan subdomain, silahkan masukkan nama subdomain dibagian Name.
contoh :

A-records (optional)
fungsi ini digunakan untuk meredirect nama domain non-www ke www. jadi jika kamu tidak merubah ini maka domain kamu hanya bisa dibuka dengan awalan www, sedangkan jika tidak menggunakan www akan muncul error.
untuk menyetting a-records, silahkan masukkan kode seperti di bawah ini :


sekian artikel tentang cara membuat custom domain dari saya. jika ada pertanyaan silahkan tinggalkan komentar pada form di bawah.

Readmore...

memasang breadcrumb di blogspot

breadcrumb adalah suatu navigasi yang dibuat untuk memudahkan pembaca melacak link induk dari suatu halaman web. breadcrumb biasanya diletakkan di bagian atas suatu laman web.

yup, breadcrumb mungkin cukup penting bagi sebagian narablog yang mementingkan kemudahan navigasi dalam blognya. selain itu penggunaan breadcrumb juga membuka peluang untuk menambah pageview ke laman yang berkaitan dengan laman yang dibaca.

langsung saja ke tutorialnya. tidak lupa back up dulu templatemu guna menghindari hal - hal yang tidak diinginkan.

pertama, centang pada Expand Template Widget

lalu copy kode di bawah ini, kemudian paste tepat di atas ]]>

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;color:#888;font-size:13px;border-bottom:1px dotted #ccc;font-weight:normal}

lalu, cari kode dibawah ini

<b:includable id='main' var='top'>

kemudian ganti dengan kode di bawah ini

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

kemudian save template. tunggu beberapa hari, maka link kamu yang keindex google akan menjadi berformat breadcrumb.

sekian artikel mengenai cara memasang breadcrumb di blogspot dari saya, jika ada pertanyaan silahkan tinggalkan komentar melalui form di bawah ini :

Readmore...

[CSS3] font face

font face merupakan fitur terbaru dari css yang memudahkan kamu dalam menggunakan jenis huruf yang tidak normal dalam menulis di internet. untuk blogspot sendiri sudah mendukung custom font ini dalam template bawaannya. namun kamu juga bisa menggunakan cara manual jika kamu menggunakan template buatan sendiri, mendownload di internet, atau jenis font yang diinginkan tidak terdapat dalam database blogger. ok, di sini saya akan menggunakan google webfont sebagai contoh. namun pada umumnya kamu bisa menggunakan layanan lain yang bertebaran di internet.

pertama, silahkan masuk ke google webfont. lalu klik di start choosing fonts.

pilih huruf yang kamu inginkan, klik add to collection. kamu bisa memilih beberapa huruf di bagian ini.



setelah selesai memilih, klik use di pojok kanan bawah. di sini kamu akan ditunjukkan jumlah waktu yang dibutuhkan jika menggunakan font yang dipilih. gunakanlah font yang loading time nya ringan.



langsung menuju ke step 3, silahkan copy script yang ada pada tab standard. lalu paste pada templatemu di bawah tag <head>
contoh :

<link href='http://fonts.googleapis.com/css?family=Italiana' rel='stylesheet' type='text/css'/>

silahkan copy css yang ada pada step 4, lalu paste pada bagian yang diinginkan.
contoh :

*
{
 font-family: 'Italiana', serif;
}

sekian artikel mengenai css font face dari saya, jika ada pertanyaan silahkan tinggalkan komentar melalui form di bawah ini :

Readmore...

blogger search form

Hello, kali ini saya akan menuliskan artikel mengenai blogger search form. Pada dasarnya blogger telah menambahkan secara default search form pada laman dasar widget. Namun, kita juga bisa menggunakan non default search form sehingga kita bisa melakukan kustomisasi sendiri. berikut merupakan beberapa hasil kustomisasi saya dalam menggunakan search form :

<form expr:action="data:blog.homepageUrl + &quot;search/&quot;" id="search1" method="get">
<input class="search-input" id="q" name="q" onblur="if (this.value == '') {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}" type="text" value="Search" />
<input class="search-icon" name="submit" src="http://dryicons.com/images/icon_sets/stickers_icon_set/png/16x16/search_magnifier.png" type="image" />
</form>


<style>
#search1 {
background: #333;
width: 300px;
padding: 5px;
position: relative;
}
#search1 .search-input {
width: 275px;
border: none;
padding: 5px 20px 5px 5px;
}
#search1 .search-icon {
position: absolute;
right: 10px;
top: 13px;

}
</style>

<form expr:action="data:blog.homepageUrl + &quot;search/&quot;" id="search2" method="get">
<input class="search-input" id="q" name="q" onblur="if (this.value == '') {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}" type="text" value="Search" />
<input class="search-icon" name="submit" src="http://dryicons.com/images/icon_sets/stickers_icon_set/png/16x16/search_magnifier.png" type="image" />
</form>

<style>
#search2 {
background-color: lightcyan;
width: 300px;
padding: 5px;
position: relative;
border-radius: 3px;
box-shadow: 1px 1px 1px lightblue;
}
#search2 .search-input {
width: 275px;
border: none;
padding: 5px 20px 5px 5px;
}
#search2 .search-icon {
position: absolute;
right: 10px;
top: 13px;

}
</style>

<form expr:action="data:blog.homepageUrl + &quot;search/&quot;" id="search3" method="get">
<input class="search-input" id="q" name="q" onblur="if (this.value == '') {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}" type="text" value="Search" />
<input class="search-icon" name="submit" src="http://dryicons.com/images/icon_sets/stickers_icon_set/png/16x16/search_magnifier.png" type="image" />
</form>

<style>
#search3 {
width: 500px;
position: relative;
}
#search3 .search-input {
width: 420px;
border: 1px #888 solid;
padding: 5px;
border-radius: 3px;
}
#search3 .search-icon {
background: #efefef;
padding: 5px 20px;
position: absolute;
right: 0px;
top: 2px;
border-radius: 3px;
box-shadow: 1px 1px 1px #777;
}
</style>

sekian artikel tentang blogger search form dari saya, jika ada pertanyaan silahkan tinggalkan komentar melalui form di bawah ini :

Readmore...

[CSS3] elegant css3 button

Hello, nggak kerasa sekarang saya telah membuat blog kesekian setelah blog - blog sebelumnya yang gagal. kali ini saya akan membagikan beberapa koleksi elegant css3 button hasil utak atik sendiri. button di bawah mungkin akan terlihat kurang sempurna di beberapa browser lama. langsung saja berikut adalah kode untuk elegant css3 button


1. Red Button

<button class="red button">This is red Button</button>
<style>
.button {
border: 0px;
padding: 5px;
border-radius: 2px;
box-shadow: 1px 1px 3px #666;
font-weight: 900;
}
.button:active {
color: #fff;
box-shadow: none;
}
.red
{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='darkred', endColorstr='red');
background-image: -webkit-gradient(linear, left top, left bottom, from(darkred), to(red));
background-image: -moz-linear-gradient(top, darkred, red);
background-image: -o-linear-gradient(top, darkred, red);
background-image: -ms-linear-gradient(top, darkred, red);
color: rgba(255,255,255,0.6);
}
</style>

2. Blue Button

<button class="blue button">This is blue Button</button>
<style>
.button {
border: 0px;
padding: 5px;
border-radius: 2px;
box-shadow: 1px 1px 3px #666;
font-weight: 900;
}
.button:active {
color: #fff;
box-shadow: none;
}
.blue
{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='darkblue', endColorstr='blue');
background-image: -webkit-gradient(linear, left top, left bottom, from(darkblue), to(blue));
background-image: -moz-linear-gradient(top, darkblue, blue);
background-image: -o-linear-gradient(top, darkblue, blue);
background-image: -ms-linear-gradient(top, darkblue, blue);
color: rgba(255,255,255,0.6);
}
</style>

3. Yellow Button

<button class="yellow button">This is yellow Button</button>
<style>
.button {
border: 0px;
padding: 5px;
border-radius: 2px;
box-shadow: 1px 1px 3px #666;
font-weight: 900;
}
.button:active {
color: #fff;
box-shadow: none;
}
.yellow
{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='orange', endColorstr='chocolate');
background-image: -webkit-gradient(linear, left top, left bottom, from(orange), to(chocolate));
background-image: -moz-linear-gradient(top, orange, chocolate);
background-image: -o-linear-gradient(top, orange, chocolate);
background-image: -ms-linear-gradient(top, orange, chocolate);
color: rgba(0,0,0,0.6);
}
</style>

4. Green Button

<button class="green button">This is green Button</button>
<style>
.button {
border: 0px;
padding: 5px;
border-radius: 2px;
box-shadow: 1px 1px 3px #666;
font-weight: 900;
}
.button:active {
color: #fff;
box-shadow: none;
}
.green {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='darkblue', endColorstr='blue');
background-image: -webkit-gradient(linear, left top, left bottom, from(darkgreen), to(green));
background-image: -moz-linear-gradient(top, darkblue, blue);
background-image: -o-linear-gradient(top, darkblue, blue);
background-image: -ms-linear-gradient(top, darkblue, blue);
color: rgba(255,255,255,0.6);
}
</style>

sekian koleksi elegant css3 button dari saya. apabila ada pertanyaan, silahkan tinggalkan komentar pada form di bawah.

Readmore...