Download Lagu Sheila On 7 Album Berlayar

Download Lagu Sheila On 7 Album Berlayar ~ Sheila On 7 Album Berlayar (2011) Free Download Mediafire 5O7 berikut ini merupakan link download Album Sheila On 7 yang terbaru yang dikeluarkan tahun 2011, berhubung saya nge-fans sama band ini jadi saya lampirkan link download Albumnya.

Download Lagu Sheila On 7 Album Berlayar - tapi sebaiknya anda membeli CD Aslinya untuk menghargai karya mereka. Band asal jogja ini tetap tampil dengan gayanya yang simple dan konsep yang bagus.

Berikut ini daftar lagu lengkap yang terdapat alam album sheila on 7 tahun 2011:

1. Hari Bersamanya
2. Pasti Ku Bisa
3. Hujan Turun
4. Berlayar Denganku
5. Kamus Hidupku
6. Bait Pertama
7. Have Fun
8. On the Phone
9. Perfect Time

Download Lagu Sheila On 7 Album Berlayar

Download

Lagu Sheila On 7 Album Berlayar

Download

Link Alternative

Download Pengajian KH. Anwar Zahid Terbaru

Download Pengajian KH. Anwar Zahid (Kulhu ae Lek) ~ Kyai gokil dan Lucu KH. Anwar Zahid Mediafire - Kyai asal bojonegoro yang terkenal dengan kata-kata Qulhu ae Lek, Kesuen. .  heee

Bulan Romadhon 2012 bisa untuk menambah koleksi dan keimanan kita, silahkan download lewat mediafire dibawah ini. Koleksi dibawah ini merupakan *.mp3 untuk yang berbentuk video silahkan di search di You Tube telah banyak tinggal anda download.

Download Pengajian KH. Anwar Zahid (Kulhu ae Lek)

Download 

[Temandang]

Mediafire

Download

[Mulung]

Ziddu

Download

[Sumberjo]

Ziddu

Marhaban Ya Ramadhan Selamat Berpuasa 2012

Marhaban Ya Ramadhan dan Selamat Berpuasa - Ibadah Puasa 21 Juli 2012 Saya lalui di tempat KKN. Tahun 2012 ini saya sedang KKN sehingga melalui ibadah puasa di sebuah desa di kecamatan Jabung tepatnya di Desa Sidomulyo Dusun Jilu.

Saya EFfand Bocah Nozh selaku Admin dari Blog ini mengucapkan Selamat menunaikan Ibadah Puasa Marhaban ya Ramadhan. 

Saya juga meminta maaf kepada teman-teman blogger yang mungkin ada karya atau apapun yang tersangkut di blog ini dan belum sempat ijin kepada empunya di karenakan banyak hal. Semoga semuanya mengiklaskan.

Marhaban Ya Ramadhan Selamat Berpuasa

Semoga dihari pertama ini kita bisa memberika yang terbaik dari diri kita untuk mengamalkan ibadah Puasa ditahun ini dan dapat menjadi tolok ukur dari hidup kita dan waktu yang sangat cocok untuk benar-benar mendekatkan diri kita secara lebih kepada Alloh SWT.

Marhaban Ya Ramadhan Selamat Berpuasa 2012.

Admin,

Effand Bocah Nozh

Download Contoh Laporan KKN 2012 Mediafire

Download Contoh Laporan KKN Kelompok dan Pribadi - Membuat Laporan Kukerta atau KKN (Kuliah Kerja Nyata) Individu adalah kewajiban bagi para peserta KKN yang telah melakukan Pengamdian di suatu desa tertentu. Masa yang di beriikan disetiap kampus berbeda ada yang mulai 1 minggu sampai beberapa bulan.

Contoh Laporan KKN  Kelompok Pribadi

Berikut ini saya share Contoh Laporan KKN untuk Pribadi maupun Kelompok silahkan anda Download Contoh Laporan KKN Kelompok Pribadi melalui Mediafire.

Contoh ini merupakan hasil googling kemaren saya dapatkan dari pelangibiru.net.

Download

Laporan Pribadi

Download

Laporan  Kelompok

Jangan Lupa komentar atau like jika file diatas berguna untuk anda

Download Cara Mudah Membaca Alquran Flash

Download Cara Mudah Membaca Alquran Flash - Aplikasi Flash Untuk Mudah membaca Alqur'an saya share koleksi software atau lebih tepatnya aplikasi ini untuk anda yang ingin memberi pengajaran kepada anak-anak anda atau untuk diri anda sendiri.

Download Cara Mudah Membaca Alquran dengan Aplikasi Flash dan suara sehingga ini dapat membuat anda lebih tertarik dan menyenangkan.

File saya Upload di mediafire agar anda Download lebih cepat dan segera menggunakannya.

Download Cara Mudah Membaca Alquran Flash

Silahkan Anda menuju link Download yang sudah saya siapkan dibawah ini.

Download
Pass : bocahnoz

Daftar 20 Situs Lagu yang di Blokir Kominfo

20 Situs Lagu yang di Blokir Kominfo

Daftar 20 Situs Download Lagu yang di Blokir Kominfo - Situs-situs Download lagu mp3 yang di Blokir Kominfo merupakan buntut dari maraknya penyebaran lagu atau mp3 gratisan yang banyak di media-media seperti blog dan web.

"Ada tiga langkah yang kita sepakati waktu itu, pertama kampanye stop illegal downloading, kedua proses blokir terhadap situs yang melakukan pembajakan musik, dan terakhir melakukan penegakan hukum bagi pelakunya," tegas Tifatul.

Tapi ya termasuk saya sendiri juga suka download lagu di situs-situs yang telah diblockir namun ini juga merupakan penegakan hukum yang di inginkan oleh yang mempunyai karya tersebut.

Bagi band Indie ini sebenarnya lumayan merugikan, karena media promosi mereka adalah sebenarnya men submit karya mereka ke situs-situs ini.

1. gudanglagu.com
2. gudanglagu.net
3. mp3gratis.net
4. mp3lagu.com
5. warungmp3.com
6. pandumusica.info
7. musik-corner.com
8. mp3bos.com
9. mp34shared.com
10. musik-flazher.com
11. index-of-mp3.com
12. misshacker.com
13. trendmusik.com
14. abmp3.com
15. katalogmp3.info
16. mp3bear.com
17. mp3downloadlagu.com
18. freedownloadmp3.com
19. dewamp3.com
20. plasamusic.com

Jadi jangan heran jika ketika anda buka web mereka terdapat error.

referensi : http://inet.detik.com

Cara Membuat Text Shadow CSS Efek Blur

Membuat Text Shadow Efek Blur

Cara Membuat Text Shadow Efek Blur ~ Tutorial CSS 3 Efek Shadow Text On Mouse Blur sekarang kita belajar lagi menggunakan CSS dengan memanfaatkan fasilitas Text Shadow menjadi Blur. Efek Shadow ini banyak digunakan pada Blogazine untuk lebih menghidupkan Blog / Web mereka.

Tutorial CSS 3 Efek Text Shadow On Mouse Blur ini akan menjadi berubah ketika cursor didekatkan ke Text. Memanfaatkan Hover yang ada pada CSS Tutorial ini bagus untuk Blog bercitra Dark atau Gelap sehingga kelihatan menyala. Namun tidak menutup kemungkinkan untuk dipasang pada Blog bergaya simple dengan dasar putih.

Anda bisa melihat contohnya seperti pada gambar diatas, tulisan yang menyamping dengan aturan kemiringan dan efek shadow juga Blur yang terkombinasi dengan baik.

Demo klik [+]

HTML 

<div id="wrapper" contenteditable="true" spellcheck="false">      
        <p>Where</p>
        <p>are the</p>
        <p>trees</p>
</div>

​CSS

/* Wrapper ------------------------------------------------------ */
body {
    margin: 0;
    width: 100%;
    height: 100%;
    text-align: center;
 
    background-color: hsla(30,20%,95%,.9);
 
    /* Pixel pattern only enabled for WebKit because of performance */  
    background-size: 2px 3px;
    background: hsla(30,20%,95%,.9) -webkit-linear-gradient(45deg, hsla(0,0%,0%,0)  0px,
                                                                    hsla(0,0%,0%,0)  1px,
                                                                    hsla(0,0%,0%,.1) 2px,
                                                                    hsla(0,0%,0%,.1)  3px);
    display: -webkit-box;
    display:    -moz-box;
    display:     -ms-box;
    display:      -o-box;
    display:         box;
 
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-box-align: center;
         -o-box-align: center;
            box-align: center;
 
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-box-pack: center;
         -o-box-pack: center;
            box-pack: center;
    }
#wrapper {
    position: relative;
    background :#333;
    /z-index: 0;
    text-align: center;
    font-weight: bold;
    font-family: "Yanone Kaffeesatz", "Lucida Grande", Lucida, Verdana, sans-serif;
    margin: 0 auto;
    width: 600px;
    padding: 7em 0;
    background: url(bg.jpg) no-repeat center center;
    border-radius: 4px;
    box-shadow: inset 0 -1px 0  hsla(0,0%,0%,.2), 0 21px 8px -12px rgba(0,0,0,.2);
 
    -webkit-perspective: 350;
       -moz-perspective: 350;
        -ms-perspective: 350;
         -o-perspective: 350;
            perspective: 350;
    }
 
    #wrapper:focus {
        outline: none;
        }

#wrapper p {
    font-size: 10em;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-shadow:     rgba(0,0,0,0.1) 0 20px 80px;
    -webkit-transition: -webkit-transform .1s ease-in; /* only WebKit because of performance */
    }

/* Hover ------------------------------------------------------ */
#wrapper:hover p {
    color: hsla(0,0%,0%,0);
 
    -webkit-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
       -moz-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
        -ms-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
         -o-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
            transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
 
    -webkit-transition: -webkit-transform .1s ease-out; /* only WebKit because of performance */
    }
#wrapper:hover p:nth-child(1) {
    font-size: 9em;
    text-shadow:     #fff 0 0 10px,
                    #fff 0 4px 3px, #ddd 0 9px 3px,  #ccc 0 12px 1px,
                    rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,100,0.2) 0 15px 80px;
    text-indent: 0.3em;
    }
#wrapper:hover p:nth-child(2) {
    font-size: 10em;
    text-shadow:     #fff 0 0 1px,
                    #eee 0 4px 3px, #ddd 0 9px 3px,  #ccc 0 12px 1px,
                    rgba(0,0,0,0.2) 0 14px 3px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,100,0.2) 0 15px 80px;
    }
#wrapper:hover p:nth-child(3) {
    font-size: 11em;
    text-shadow:     #fff 0 0 2px,
                    #fff 0 4px 5px, #ddd 0 9px 5px,  #ccc 0 12px 10px,
                    rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,100,0.2) 0 15px 80px;
    }

/* Middle ------------------------------------------------------ */
#wrapper p:nth-child(2):hover {
    text-shadow:     #fff 0 -5px 1px,
                    #eee 0 -1px 3px, #ddd 0 4px 3px,  #ccc 0 7px 1px,
                    rgba(0,0,0,0.2) 0 15px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,0,0.2) 0 15px 80px;
    }
 
#wrapper p:nth-child(2):active {
    text-shadow:     rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,0,0.2) 0 15px 80px;
    }
/*effand bocah nozh*/
#wrapper p::selection {
    background-color: red;
    }

Silahkan dicomot dan dimodifikasi gan, jangan lupa Es Degan nya di tinggalin dibawah biar tambah Brrrr ..
Ref : http://simurai.com

Cara Membuat List Styles Dengan CSS

Cara Membuat List Styles Dengan CSS

Cara Membuat List Styles Dengan CSS ~ Tutorial Membuat List Menu Hover berikut adalah tutorial CSS untuk membuat List Menu Hover, triks ini saya dapat dari http://designshack.net anda bisa mencobanya dan tentunya tetap untuk mampercantik blog kita.

Tutorial Membuat List Menu Hover sudah banyak juga diterangkan di blog-blog lain sehingga jika disini beda bisa anda terapkan di blog anda.

Tidak ada salahnya juga anda memodifikasinya agar lebih jan jos tenan.

Oke sekarang anda bisa mencobanya, berikut ini script yang bisa anda pakai dan modifikasi :

HTML :

<div>
  <h2>List Hover</h2>
  <ul>
    <li><a href="#">Demo 1</a></li>
    <li><a href="#">Demo 2</a></li>
    <li><a href="#">Demo 3</a></li>
    <li><a href="#">Demo 4</a></li>
    <li><a href="#">Demo 5</a></li>
  </ul>
</div>​

CSS :

div {
  width: 200px;
}

h2 {
  font: 400 40px/1.5 Helvetica, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
  border-bottom: 1px solid #ccc;
}

li:last-child {
  border: none;
}

li a {
  text-decoration: none;
  color: #000;
  display: block;
  width: 200px;

  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}

li a:hover {
  font-size: 30px; color:#026aba;
  background: #f6f6f6;
}​

Selesai sudah agan-agan, silahkan dicomot dan jangan lupa tinggalkan baunya dibawah untuk mempererat jalinan blogger Indonesia.

Demonya : Klik [+]

Membuat Text Shadow Dengan CSS

Tutorial Membuat Text Shadow menggunakan CSS 

Cara Membuat Text Shadow Dengan CSS ~ Tutorial Membuat Text Shadow menggunakan CSS lanjutan tutorial sebelumnya tentang text shadow, Kali ini untuk text shadow lanjutan untuk tambahan koleksi text shadow yang saya punya dan saya share saja agar temen-temen tahu bagi yang belum tahu dan yang sudah tahu harap di buat baca-baca saja, hee..

Tutorial Membuat Text Shadow menggunakan CSS ini saya adopsi dari tutorial dari website luar negeri yang menurut saya perlu saya share untuk pengetahuan kita semua.

Sekarang ayo kita lihat beberapa demonya :

CSS :

.shadow  { position:relative; display:block; color:#fff; }
.shadow span { position:absolute; display:block; top:0px;  }
.shadow:before { display:block; padding:1px; content: attr(title); color:#666;  } 

 HTML :

<p class="shadow" title="This is white text, on a white background. Yet with CSS Drop Shadows, you can read this, because of the black text-shadow."><span>This is white text, on a white background. Yet with CSS Drop Shadows, you can read this, because of the black text-shadow.</span></p>

Diatas hanya untuk contoh saja.

Sekarang Kita Belajar Membuat text Shadow Dengan CSS


1. Double Text

Double Text Shadow

Script : text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

2. Close and Heavy

Text Shadow  Close and Heavy

Script : text-shadow: 0px 4px 3px rgba(0,0,0,0.4),             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);









3. Text Shadow 3D

Text shadow 3 dimensi (3D)

Script : text-shadow: 0 1px 0 #ccc,   0 2px 0 #c9c9c9,  0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa,  0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3),  0 3px 5px rgba(0,0,0,.2),   0 5px 10px rgba(0,0,0,.25),  0 10px 10px rgba(0,0,0,.2),  0 20px 20px rgba(0,0,0,.15);

4. Text Shadow Glowing

Text Shadow Glowing

Script : text-shadow: 0px 0px 6px rgba(255,255,255,0.7);

5. Text Soft Embos

Membuat Text Shadow Dengan CSS

Script : color: rgba(0,0,0,0.6);

            text-shadow: 2px 8px 6px rgba(0,0,0,0.2),

            0px -5px 35px rgba(255,255,255,0.3);

6. Text Shadow Down

Shadow and down

Script : text-shadow: 0px 3px 0px #b2a98f,

                 0px 14px 10px rgba(0,0,0,0.15),

                 0px 24px 2px rgba(0,0,0,0.1),

                 0px 34px 30px rgba(0,0,0,0.1);

Oke kawand, diatas 6 tutorial CSS untuk membuat efek shadow dan masih bisa kamu modifikasi lagi. Tutorial sejenis akan saya lanjutkan ditutorial part ke-2.

Coming Soon...

Membuat Menu Blog Hover Dengan CSS

Membuat Menu Blog Hover Dengan CSS

Membuat Menu Blog Hover Dengan CSS ~ Tutorial Cara Membuat Menu di Blog ini bisa kita pakai di blog kita sebagai variasi untuk mempercantik blog kita. Menu yang ada diatas blog bisa kita tambahi script ini untuk memperindah blog kita tentunya.

Anda bisa membuat tampilannya dengan sedikit perubahan mungkin menambahi Hover, Text Shadow dan Box Efek shadow dengan CSS.

Anda bisa melihat contohnya di bawah ini.

• Button 1
• Button 2
• Button 3
• Button 4
• Button 5

Anda bisa melihat demonya diatas dan anda bisa memodifikasi nya agar sesuai dengan template blog Anda.

Script nya bisa anda copy dibawah ini
Embed Script CSS

ul {
  display: table;
  width: 400px;
}
li {
  display: table-cell;
  width: 20%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
}
ul:hover li {
  width: 15%;
}
li:hover {
  width: 40% !important;
  opacity: 0.7;
}
ul li:nth-of-type(1) { background: #FF4C4C; }
ul li:nth-of-type(2) { background: #FFBF49; }
ul li:nth-of-type(3) { background: #444444; }
ul li:nth-of-type(4) { background: #6FDC6F; }
ul li:nth-of-type(5) { background: #3AADFE; }

 HTML

 <ul>
        <li>Button 1</li>
        <li>Button 2</li>
        <li>Button 3</li>
        <li>Button 4</li>
        <li>Button 5</li>
</ul>

Langsung Praktek Gan. .

Membuat Text 3D dengan CSS [3 Dimensi]

Membuat Text 3D dengan CSS [3 Dimensi] - Text 3 Dimensi dengan CSS ini adalah kita memanfaatkan shadow yang terkombinasi sekian rupa sehingga bisa membentuk gambar / tulisan 3D. Banyak hal yang bisa dilakukan jika kita menggunakan fasikitas CSS ini, dari edit untuk box hingga Text.

Membuat Text 3D dengan CSS [3 Dimensi]

Oke Sekarang kita terapkan code CSS nya :

Embed Script :

h1 {
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

Dan sekarang kamu lihat hasilnya seperti berikut ini :

3D TEXT CSS

Hmm, gimana hasilnya lumayan kan, mangtabs jaya atau jan joss tanan, hee..
Oke sekian dulu turorial kali ini, lanjut lagi kapan-kapan. Selamat mencobanya.

Membuat Bingkai Border dengan CSS

Tutorial Membuat Bingkai Border dengan CSS - Bingkai dengan CSS di blogspot ini menggunakan fungsi border-corner yang ada dalam CSS. Bingkai Border ini didalamnya bisa kita isi text maupun Foto, anda tinggal mengisi dengan tulisan atau dengan URL Image anda. Sesuaikan dengan kebutuhan saja.

Membuat Bingkai Border dengan CSS bisa kalian lihat contoh imagenya dibawah ini :

Membuat Bingkai Border dengan CSS

Seperti itulah contohnya dari Membuat Bingkai Border dengan CSS 

DEMO :

TEXT silahkan Anda disini, silahkan anda isi misalnya "Membuat Bingkai Border dengan CSS" atau yang lain juga bisa. Bisa dijadikan modifikasi untuk template blog kamu, tinggal gimana kamu mengkreasikan ini. Membuat Bingkai Border dengan CSS ada 4 kertas dipojok yang digunakan untuk mengapit pigora ini, seperti ditempeli dengan Kertas.

1. HTML

<div class="tucked-corners top-corners">
    <span class="tucked-corners bottom-corners">
             Textmu atau Url Image    </span>
</div>

2. CSS

div.tucked-corners {
    background: #f6f6f6;
    height: 380px;
    margin: 50px auto;
    padding: 10px;
    position: relative;
    width: 580px;
    -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
       -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
            box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
}
span.tucked-corners {
    background: #999;
font-family: Arial, Helvetica, Sans-serif;
    font-size:14px;
    color:#FFF;
    display: block;
    height: 380px;
    position: relative;
    width: 580px;
    -webkit-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
       -moz-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
            box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
}
/* Top Corner Effect */
.top-corners:after,
.top-corners:before {
    background: #e6e6e6;
    content: '';
    height: 50px;
    position: absolute;
    top: -25px;
    width: 100px;
    z-index: 10;
    -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
       -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
            box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
}
.top-corners:after {
    left: -50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
.top-corners:before {
    right: -50px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
/* Bottom Corner Effect */
.bottom-corners:after,
.bottom-corners:before {
    background: #e6e6e6;
    content: '';
    height: 50px;
    position: absolute;
    bottom: -25px;
    width: 100px;
    -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
       -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
            box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
}
.bottom-corners:after {
    left: -50px;
    -webkit-transform: rotate(-135deg);
       -moz-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
         -o-transform: rotate(-135deg);
            transform: rotate(-135deg);
}
.bottom-corners:before {
    right: -50px;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
            transform: rotate(135deg);
}

Oke sekian dulu cara membuat Bingkai dengan CSS, tunggu tutorial selanjutnya.

Salam Blogger Donomulyo.

Membuat Slider Otomatis Dengan JQuery

Membuat Slider Otomatis Dengan JQuery - Cara membuat Slider otomatis menggunakan Jquery ini bisa anda manfaatkan untuk mempercantik Blog Anda. Slider Otomatis dengan J-Query dibawah ini mungkin cukup agag semrawut demonya, yang bisa anda lihat dibawah.

Berikut ini contoh Membuat Slider Otomatis Dengan JQuery:

Oke anda sudah melihat contohnya, jika anda tertarik silahkan ikuti caranya di bawah ini.

1. HTML

<div id="gallery">
    <a href="#" class="show">    <img src="images/flowing-rock.jpg" alt="Flowing Rock" alt="" title="" width="580" height="360" rel="<h3>Flowing Rock</h3>You can put html element
    inside the REL attribute."/></a>
    </a>
    <a href="#">        <img src="images/grass-blades.jpg" alt="Grass Blades" alt="" title="" width="580" height="360" rel="<h3>Grass Blades</h3>description"/>
    </a>
     ......    ......
    ......
   <div class="caption"><div class="content"></div></div>/div>
<div class="clear"></div>

2. CSS

#gallery {
    position:relative;
    height:360px
}
    #gallery a {
        float:left;
        position:absolute;
    }
   
    #gallery a img {
        border:none;
    }
   
    #gallery a.show {
        z-index:500
    }

    #gallery .caption {
        z-index:600;
        background-color:#000;
        color:#ffffff;
        height:100px;
        width:100%;
        position:absolute;
        bottom:0;
    }

    #gallery .caption .content {
        margin:5px
    }
   
    #gallery .caption .content h3 {
        margin:0;
        padding:0;
        color:#1DCCEF;
    }

 3. Javascript

$(document).ready(function() {    
   
    //Execute the slideShow
    slideShow();

});

function slideShow() {

    //Set the opacity of all images to 0
    $('#gallery a').css({opacity: 0.0});
   
    //Get the first image and display it (set it to full opacity)
    $('#gallery a:first').css({opacity: 1.0});
   
    //Set the caption background to semi-transparent
    $('#gallery .caption').css({opacity: 0.7});

    //Resize the width of the caption according to the image width
    $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
   
    //Get the caption of the first image from REL attribute and display it
    $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
    .animate({opacity: 0.7}, 400);
   
    //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
    setInterval('gallery()',6000);
   
}

function gallery() {
   
    //if no IMGs have the show class, grab the first image
    var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
   
    //Get next image caption
    var caption = next.find('img').attr('rel');
   
    //Set the fade in effect for the next image, show class has higher z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);

    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');
   
    //Set the opacity to 0 and height to 1px
    $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
   
    //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
    $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
   
    //Display the content
    $('#gallery .content').html(caption);
       
}

 Selesai, tutorial Membuat Slider Otomatis Dengan JQuery silahkan Anda coba semoga berhasil. ^_^

CSS 3 Animasi Lingkaran Zoom

CSS 3 Animasi Lingkaran Zoom - Efek Zoom Animation dengan CSS 3 merupakan tutorial yang saya bagikan di awal bulan Juli 2012 ini. Tidak banyak yang bisa saya bagikan, jadi silahkan di analisis sendiri code beserta scriptnya.

DEMO :

Ganti Disini

CSS 3 Animasi Lingkaran Zoom Lucu ya lingkarannya bisa berputar dan Zooming otomatis seperti Demo diatas, kalian bisa lihat bahwa lingkaran tersebut melakukan efek rotate dan skala secara otomatis.


CSS3 ini masih bisa anda kembangkan, silahkan anda manipulasi sesuka anda.
Script Embed

<style type="text/css">
#contenido{
width:700px;
margin:0 auto;
padding:50px;
position:relative;
background:#FFF;
}
.circulo {
display:table-cell;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
height:100px;
width:100px;
background:#dedede;
text-align:center;
vertical-align:middle;
}
.circulo span{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
@-webkit-keyframes rotar
{
0% {-webkit-transform:scale(1) rotate(0deg);}
50% {-webkit-transform:scale(1.5) rotate(180deg);}
100% {-webkit-transform:scale(1) rotate(360deg);}
}
@-moz-keyframes rotar
{
0% {-moz-transform:scale(1) rotate(0deg);}
50% {-moz-transform:scale(1.5) rotate(180deg);}
100% {-moz-transform:scale(1) rotate(360deg);}
}
.circulo
{
-webkit-animation:rotar 4s infinite;
-moz-animation:rotar 4s infinite;
}
</style>
<div id="contenido">
<div class="circulo"><Ganti Disini</div>
</div>

Oke Selamat Mencobanya.
Salam Blogger Donomulyo.