NGAWAK

Gear Machine Berputar Dengan CSS

Selasa, 19 Februari 2013

Gear berputar, kali inilah yang akan di share D-G BLOG. Sebenarnya ini sih post kurang kerjaan karena saya kagak ada ide lagi jadi menggunakan css simple. Sebenarnya ini hanya kumpulan dari keyframes dan animation saja. Namun dengan ini kalian bisa mengkreasikannya dan merubahnya menjadi yang kalian inginkan.
Kalau untuk demo tidak saya buat namun bentuknya 100% mirip dengan gambar diatas.

Kalau mau buat ini dia CSS dan HTMLnya

CSS

Didalam kode tersebut terdapat css keyframes dan transformation. Dan kalian dapat mengganti gambarnya dengan link gambar sesuka kalian dan waktu berputarnya.

Namun sayangnya kode atau gear ini hanya dapat muncul di firefox dan google chrome dan sejenisnya dan Kecuali IE.

Jadi ini hanya post simple semoga bermanfaat.
Sekian dari D-G BLOG
Terima kasih

Border Pelangi Dengan CSS

Jumat, 15 Februari 2013

Kali ini D-G BLOG akan mengeshare salah satu jenis border ciptaan ane. Meskipun kalian pernah melihat di blog lain namun saya telah membuatnya sendiri. Yaitu border pelangi. Karena jika saya perhatikan template blogger selalu menggunakan border 1 warna ataupun bergradient jadi saya memikirkan bagaimana membuat itu menarik.
Jadi saya membuatnya border pelangi meskipun tidak dengan kombinasi "mejikuhibiniu".
Sebenarnya ini adalah ajaran dari bang johanes yaitu trick css pseudo, jadi saya kembangkan ide tersebut menjadi sebuah border.
Previewnya seperti ini

(Klik Gambar Untuk Memperbesar)
Keren bukan ?
Kombinasi 7 warna pelangi digabungkan menjadi 1 border, ingin membuatnya?
Hanya tinggal mengcopy kode berikut, yaitu:
CSS

HTML

div id="pelangi">
<p>Tulislah kata kata yang kalian inginkan didalam border. D-G BLOG</p>
</div>
</div>

Jadi Cara menggunakan nya ada banyak salah satunya adalah

Meletekan css itu diatas ]]></b:skin>
Dan menaruh HTML di posisi yang diinginkan

Sekian dari D-G BLOG
Semoga Bermanfaat

Menu Blog Dengan CSS

Senin, 11 Februari 2013

Kali ini D-G BLOG akan posting cara membuat menu, namun menunya bukan menu biasa melainkan menggunakan css dan hover. Jadi dijamin keren dan dengan tampilannya lingkaran dan rapi jadi cocok kalian gunakan. Sebelum kalian melihat caranya kalian bisa melihat dulu demonya, seperti dibawah ini
Memang di blog lain ada yang mengeshare seperti ini namun yang saya share disini sudah saya edit sedikit sedikit sesuai keinginan saya.
Kalau begitu ini cara membuatnya.
1. Masuk ke www.blogger.com
2. Edit HTML
3. Cari kode ]]></b:skin>
4. Letakan kode berikut diatasnya

.DGBLOG:after {
visibility: hidden;
display: block;
font-size: 0;
line-height: 0;
content: " ";
clear: both;
height: 0;
width: 0;
}
.DGBLOG  { display: inline-block; }
* html .hapus { height: 1%; }
.DGBLOG  { display: block; }
ul.system-menu {
    margin: 0 auto 10px;
    padding: 0;
    position: relative;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    width: 390px
    }
ul.system-menu li {
    list-style-type: none;
    margin: 0 5px 0 0;
    padding: 0;
    float: left;
    position: relative;
    width: 70px;
    height: 80px;
    -moz-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    -webkit-transition: all 500ms linear;
    transition: all 500ms linear
    }
ul.system-menu li a {
    position: absolute;
    margin: -30px 0 0 -43%;
    text-decoration: none;
    font: bold 13px/40px Arial, sans-serif;
    padding: 0;
    background: #21D319;
    color: transparent;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    display: block;
    width: 50px;
    height: 50px;
    text-align: center;
    top: 45%;
    left: 50%;
    outline: none;
    border: 5px inset #F8FBFC;
    -moz-box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52);
    -webkit-box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52);
    box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52);
    -moz-transition: all 100ms linear;
    -o-transition: all 100ms linear;
    -webkit-transition: all 100ms linear;
    transition: all 100ms linear
    }
ul.system-menu li a:hover {
    line-height: 130px;
    color: #000;
    border-color: #C5B386;
    background: #FAC800;
    -moz-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s
    }
ul.system-menu li span.pembuka {
    position: absolute;
    left: 50%;
    margin: 0 0 0 -29%;
    top: 11px;
    width: 25px;
    height: 30px;
    background: #949596;
    -moz-box-shadow: 3px -3px 0 0 #ECECEC;
    -webkit-box-shadow: 3px -3px 0 0 #ECECEC;
    box-shadow: 3px -3px 0 0 #ECECEC
    }
ul.system-menu li span.satu, ul.system-menu li span.dua, ul.system-menu li span.tiga {
    position: absolute;
    background: #F0F0F0;
    padding: 2px;
    width: 15px;
    left: 3px
    }
ul.system-menu li span.satu {
    top: 5px
    }
ul.system-menu li span.dua {
    top: 13px
    }
ul.system-menu li span.tiga {
    top: 22px
    }
.empat, .lima, .enam {
    position: absolute
    }
.empat {
    border: 15px solid;
    border-color: transparent transparent #EEE transparent;
    top: -7px;
    left: 10px
    }
.lima {
    padding: 4px;
    background: #EEE;
    height: 5px;
    top: 22px;
    left: 14px
    }
.enam {
    padding: 4px;
    background: #EEE;
    height: 5px;
    top: 22px;
    left: 28px
    }
.abot, .abit {
    position: absolute;
    left: 15px
    }
.abot {
    width: 20px;
    height: 20px;
    background: #EEE;
    top: 20%;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px
    }
.abit {
    border: 10px solid;
    border-color: transparent transparent #EEE transparent;
    top: 33%
    }
.a, .b, .c, .d {
    position: absolute;
    padding: 5px;
    background: #FFF7F7;
    top: 26%
    }
.a {
    left: 25px;
    background: #39FF13
    }
.b {
    top: 27px;
    left: 13px;
    background: #0070FF
    }
.c {
    left: 25px;
    top: 27px;
    background: #FFE000
    }
.d {
    left: 13px
    }
.e, .f {
    position: absolute
    }
.e {
    width: 15px;
    height: 17px;
    background: rgb(171, 185, 163);
    top: 35%;
    left: 32%;
    border: 2px solid rgb(255, 255, 255)
    }
.f {
    border: 10px solid;
    border-color: transparent transparent rgb(255, 255, 255) transparent;
    top: -2px;
    left: 30%
    }
ul.system-menu:hover li:not(:hover) {
    -moz-transform: rotate(360deg) scale(0.7);
    -ms-transform: rotate(360deg) scale(0.7);
    -o-transform: rotate(360deg) scale(0.7);
    -webkit-transform: rotate(360deg) scale(0.7);
    transform: rotate(360deg) scale(0.7)
}

5. Taruh Kode berikut dibagian yang anda inginkan untuk meletakan menu tersebut

NB:Kebetulan kode ini bertabrakan dengan kode di template D-G BLOG sehingga menyebabkan menu tersebut tercampur dengan bullet dan teksnya tidak mau hilang. Jadi kalau hal ini terjadi di blog kalian berarti template kalian bertabrakan dengan kode ini;

Dengan begitu maka menu tersebut akan terpasang, jadi sekarang kalian dapat memvariasikan menu di blog kalian.
Semoga artikel ini bermanfaat.
Sekian dari D-G BLOG
Terima kasih
Jika kurang mengerti comment.

Membuat Menu Kaleng Tersembunyi Di Header Dengan CSS

Rabu, 06 Februari 2013

Kali ini D-G Blog akan update postingan mengenai menu, dan menu kali ini menggunakan css. Bagi kalian yang bosan dengan menu yang biasa aja, kalian harus mencoba menu bagus , keren dan luar biasa berikut.
Kelebihan:

1. Bersembunyi ketika tidak terkena mouse
2. Selalu mengikuti scrool sepanjang halaman blog
3. Bisa ditaruh gambar.

Keren bukan?

Kalau begitu langsung saja caranya ya

1. Masuk ke www.blogger.com

2. Ke tata letak

3. HTML / Java Script

4. Pastekan kode berikut

<style>

ul#navigation {

position: fixed;

margin: 0px;

padding: 0px;

top: 0px;

right: 0px;

list-style: none;

z-index:999999;

width: 993px;

}

ul#navigation li {

width: 103px;

display:inline;

float:left;

border:0;

}

ul#navigation li a {

display: block;

float:left;

margin-top: -2px;

width: 100px;

height: 25px;

background-color:#000000;

background-repeat:no-repeat;

background-position:50% 10px;

border:1px solid #BDDCEF;

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

-webkit-border-bottom-right-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-bottom-left-radius: 10px;

text-decoration:none;

text-align:center;

padding-top:80px;

opacity: 0.96;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);

}

ul#navigation li a:hover{

background-color:#BDBDBD;

}

ul#navigation li a span{

letter-spacing:2px;

font-size:11px;

color:#FFFFFF;

font-family:trebuchet-ms, arial, tahoma, Sans-Serif;

font-weight:bold;

text-shadow: 0 -1px 1px #fff;

}

ul#navigation .rss a{

background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/RSS.png);

}

ul#navigation .facebook a {

background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/Facebook.png);

}

ul#navigation .twitter a {

background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/Twitter.png);

}

ul#navigation .g-mail a{

background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/Google.png);

}

ul#navigation .y-mail a{

background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/Yahoo.png);

}

ul#navigation .youtube a{

background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/YouTube.png);

}

</style>

</script>

$(function() {

var d=300;

$('#navigation a').each(function(){

$(this).stop().animate({

'marginTop':'-80px'

},d+=150);

});

$('#navigation > li').hover(

function () {

$('a',$(this)).stop().animate({

'marginTop':'-2px'

},200);

function () {

$('a',$(this)).stop().animate({

'marginTop':'-80px'

},200);

}

);

});

</script>

<li class="facebook"><a target="_blank"href=" http:/davidgunawan123.blogspot.com ">Facebook</a></li>

<li class="twitter"><a target="_blank"href=" http:/davidgunawan123.blogspot.com ">Twitter</a></li>

<li class="g-mail a"><a target="_blank"href=" http:/davidgunawan123.blogspot.com ">Google</a>

<li class="y-mail a"><a target="_blank"href="https://www.Yahoo.com/bookmarks/">Yahoo</a>

<li class="youtube a"><a target="_blank" href=" http:/davidgunawan123.blogspot.com ">YouTube</a></li>

</li>

</li></ul>

Keterangan:
Kode kode yang saya beri warna merah, itu berarti diubah menjadi link yang kalian inginkan
Kode kode yang saya beri warna hijau, itu adalah link gambar facebook, twitter, dll dan bisa kalian ganti sesuai keinginan kalian.

Jika kalian ingin langsung menaruhnya di bagian HTML juga bisa, namun tidak saya sertakan di post ini, carilah ide pribadi karena saya agak sibuk mengenai pelajaran sekolah jadi saya kasih yang simple dan mudah saja.
Sekian dari D-G BLOG
Terima kasih.

10 Karakter Figuran Di Film Spongebob

Minggu, 03 Februari 2013

Kali ini D-G Blog akan share 10 karakter figuran di film spongebob nih, sory ya dah lama tidak posting, dan semoga posting ini bisa menghilangkan rindu kalian ke D-G BLOG. Spongebob adalah film yang tidak asing pastinya di telinga kalian, karena pastinya ini adalah film masa kecil kalian, film sehari hari kalian bukan.
Spongebob memiliki beberapa karakter utama, seperti

1. Spongebob squearepants
2. Patrick Star
3. Squidward Tentacles
4. Mr. Crab
5. Sandy
6. Plankton
7. Dll

Namun dibalik karakter tersebut, apakah kalian tau figuran figuran atau karakter pendukung di film spongebob yang sering muncul namun bukan karakter utama?
Kalau begitu simak saja post ini.
1. Fred Rechid

Nama: Fred Rechid

Jenis kelamin : Laki laki

Alamat: Bikini bottom

Karakter ini hampir selalu terlihat dalam semua episode spongebob tanpa kita sadari, seperti episode spongebob terbang, ataupun setiap yang berhubungan dengan krusty krab karakter ini hampir selalu ada.

2. Timmy Monroe

Jenis kelamin: laki laki

Pekerjaan: pelajar

Sifatnya tidak akur dengan patrick dan tuan crab

Dan dia merupakan anak dari fred rechid.

3.Lou

Alamat: bikini bottom dan Pasific Ocean

Pekerjaan: Penjual Eskrim, penjual koran, penjual hotdog dan rata rata semua penjual barang pasti Lou yang menjadi karakternya

4. Tom

Jenis kelamin: Laki laki

Alamat: Bikini bottom

Sifat : Mudah marah

Pekerjaan:Bartender, supir bus, kameramen breaking news dan pengunjung setiap krusty krab.

Episode paling dominan memuncukannya adalah ketika spongebob menjual coklat.

5. Nat Peterson

Jenis kelamin : Laki laki

Alamat : Bikini bottom

Pekerjaan: Bekerja di snail po company dan kadang kadang jadi supir bus.

6. Scooter Rechid

Jenis kelamin: Laki laki

Pekerjaan : Surfer

Alamat : Bikini Bottom

7. Jhonny Erain

Jenis kelamin: Laki laki

Pekerjaan : Pembaca berita di bikini bottom news

Alamat : Bikini Bottom

8. Pak tua jenkins

Jenis kelamin: Laki laki

Alamat : Panti Jompo Shady Soals Bikini Bottom

Pekerjaan: Petani

9. Mable Lobster/ Jenkins

Jenis kelamin: Perempuan

Alamat : Panti Jompo Shady Soals Bikini Bottom

Pekerjaan: -

Dan Mable lobster sudah beberapa kali menjadi janda, dia pernah menikahi Pak tua Jenkins dan Denny.

10. Sandals F. Bowl

Jenis kelamin: Laki Laki

Alamat : Bikini Bottom

Pekerjaan: -

Dan merupakan pelanggan setia Krusty Krab

Sekian Dari D-G Blog
Semoga bermanfaaat

SELAMAT DATANG

Tentang Taufik Blogger

NGAWAK

About Me

Gear Machine Berputar Dengan CSS

Border Pelangi Dengan CSS

Menu Blog Dengan CSS

Membuat Menu Kaleng Tersembunyi Di Header Dengan CSS

10 Karakter Figuran Di Film Spongebob

Labels

Archives

Labels

Labels

Labels