jQuery Auto Hide Box with Controll

jQuery auto hide box with controll merupakan sebuah desain yang berfungsi menampilkan box yang didalamnya berisi berbagai informasi dalam bentuk teks, image atau kode html. Box ini akan terlihat selama beberapa saat setelah blog dibuka. Lama waktu box terlihat serta posisi box dapat diatur melalui javascript, sedang ukuran box diatur dengan kode CSS. Jika dalam blog anda sudah menggunakan jQuery versi 1.3.2 hingga versi 1.7.1, maka anda cuma perlu menambah javascript dan kode css saja, karena dalam satu blog hanya memerlukan 1 buah jQuery. Untuk menghilangkan box dari halaman blog secara manual, jQuery auto hide box with controll dilengkapi dengan sebuah controll. Conroll tersebut terletak di ujung kanan-bawah box. Dengan sekali klik maka box akan menghilang tanpa perlu menunggu auto hide bekerja.

Tutorial :
Back to tutorial

Come up calm, at TV may not mean not may have a party with friend. in a few photo that taken at a online forum, pretty artist Naysila Mirdad, always come up elegant, sweet and polite in every the character at sinetron appear a little dare at several photos.
In these days of g-strings and styles are becoming fashion chain

CLOSE

mitrabarayaonline Auto Hide Box bisa di gunakan untuk menyampaikan pesan, iklan atau bentuk yang lain, dimana materi di dalamnya bisa berupa gabungan teks dan image.
Box akan menghilang setelah 40 detik. Apabila ingin menghilangkannya secara manual silahkan:

CLOSE

Create body background using javascript

Umumnya, membuat atau menambah sebuah background image pada body dilakukan menggunakan kode CSS, namun kali ini kita akan membuatnya menggunakan javascript. Sangat simple dan amat mudah menggunakannya. Letakkan dan simpan javascript di atas kode </body> dan segera buka blog untuk melihat bagaimana javascript ini bekerja. Jika anda tak merubah image yang digunakan sebagai background pada javascript, maka halaman blog anda akan terlihat seperti di blog ini (lihat di sisi kanan dan kiri halaman yang background-nya terlihat seperti dari bahan serat kayu/wood.

Template Tata Letak :

Javascript :

<script type="text/javascript">
if (document.all||document.getElementById)
document.body.style.background="url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_jEff7c7LPmhXMT0ssWC26Fxd-Ze1YNxM2EIbkePziDiUwwC3kWKWMl4mehkmFhZaUKSXV_Oe-_PiBKtH9eebnVgifqxloAp7c4DIz6yZuvYPMXKTTIX9lzUxBSRyWLadanZdjb89OeVy/s128/CRINKLEP.JPG') center repeat"
</script>

Blogger Template Designer :

Javascript :

<script type="text/javascript">
document.write("<style>.body-fauxcolumn-outer .cap-top{z-index:0;opacity:0.0;filter:alpha(opacity=0);</style>");
if (document.all||document.getElementById)
document.body.style.background="url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_jEff7c7LPmhXMT0ssWC26Fxd-Ze1YNxM2EIbkePziDiUwwC3kWKWMl4mehkmFhZaUKSXV_Oe-_PiBKtH9eebnVgifqxloAp7c4DIz6yZuvYPMXKTTIX9lzUxBSRyWLadanZdjb89OeVy/s128/CRINKLEP.JPG') white center repeat"
</script>

Baraya Tutorial :
Back to tutorial

Create heading style with effect using CSS3

Lightbox demo dan tutorial

Link di atas adalah salah satu contoh penggunaan heading style with effect yang dimanfaatkan sebagai sebuah link. Jika anda mengarahkan cursor pada link di atas maka akan terlihat effek yang tercipta berupa opacity effect yang digabungkan dengan css3 transition. Pada dasarnya heading style with effect dapat digunakan tidak hanya sebagai sebuah pembentuk/box bagi judul/title sebuah paragraf saja namun bisa dimanfaatkan untuk banyak hal dalam blog. Termasuk di bawah ini, yang digunakan sebagai sebuah judul/title.

Kode CSS Heading Style with Effect

Kode CSS :

h4.baraYAhead{
        font-family:Times New Roman; 
        font-size:18px; 
        font-weight:bold; 
        padding:5px  0; 
        border-bottom:1px solid #aaa; 
        border-left:30px solid #aaa; 
        opacity:0.7;
        filter:alpha(opacity=70);
        border-top-left-radius:4px;
        border-bottom-left-radius:4px;
}
h4.baraYAhead:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
        border-color:#900;
}
h4.baraYAhead,h4.baraYAhead span{
        transition:0.8s linear;
        -o-transition:0.8s linear;
        -moz-transition:0.8s linear;
        -webkit-transition:0.8s linear;
        -ms-transition:0.8s linear;
}
h4.baraYAhead span{
        border-top-right-radius:5px;
        padding:3px 10px;
        margin-left:3px;
        margin-top:-5px;
        display:block;
        color:#900;
        border-top:3px solid #888;
        border-right:2px silid #888;
        background:#555;
}
h4.baraYAhead:hover span{
        color:#orange;
        background:#aaa;
}

Tutorial :

Back to tutorial » Heading style with effect