1 Cara Pasang Box Shadow Hover di Blog

Baiklah pada kesempatan kali ini utta' ingin share lagi nich,.. mengenai trik CSS pada Box Shadow Hover. biasa utta senang banget bermain-main dengan CSS3, selain memiliki efek bagus, tampilan blog kita juga akan tampak lebih keren pastinya, lihat saja template utta sekarang..keren ngga?? hehe,.. :D

Berikut ini screen Demonya :

Contoh Sebelum Hover :

Contoh saat hover :

gimana??tertarik untuk mencobanya,..
sebelum kita ke tutorial pembuatannya, saya ingin jelaskan, disini utta hanya ingin memberikan trik pemasangan Box shadow hover pada kotak postingan saja,..
dan box shadow ini sendiri dapat dipasang dimana aja, seperti di kotak 'posting','sidebar' 'komentar' maupun pada 'footer', dari kita saya mau pasang dimana...

Untuk lebih jelasnya sobat perhatikan kode-kode berikut ini :

:::Kode CSS sebelum Hover:::

margin:1em 0 1em 0;
line-height:1.6em;
margin: 20px 4px;
border: 1px solid #999;
padding: 10px 6px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;
-moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;
-webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;
-o-transition: 1s ease-out;
-moz-transition: 1s ease-out;
-webkit-transition: 1s ease-out;

:::Kode CSS saat Hover:::

border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #F70000;
-moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #F70000;
-webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #F70000;

KET:
Sobat perhatikan teks yang berwarna merah, itu adalah warna box shadow. dan dapat anda ganti dengan warna kesukaan sobat sendiri.
untuk melihat-lihat warna lainnya Klik Disini.

Baiklah, kita lansung kelangkah pembuatannya..
Ikuti langkah-langkah berikut :

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin> .

.post-body {
margin:1em 0 1em 0;
line-height:1.6em;
margin: 20px 4px;
border: 1px solid #999;
padding: 10px 6px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;
-moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;
-webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;
-o-transition: 1s ease-out;
-moz-transition: 1s ease-out;
-webkit-transition: 1s ease-out;
}
.post-body:hover {
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #F70000;
-moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #F70000;
-webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #F70000;
}

6. Terkhir Preview dulu,. jika berhasil. baru Save template..

Jika sobat masih bingung, sobat tinggal meninggalkan pesan pada kotak komentar

Semoga bermanfaat,..

Read more »»   

0 Membuat Back To Top Dengan Smoothscroll jQuery

hehehe kemarin saya juga dah posting tentang cara pasang back top di blog dan sekarang saya posting cara Membuat Back To Top Dengan Smoothscroll jQuery .

Back To Top merupakan sebuah aplikasi tambahan (widget/plugin) untuk ditempatkan di dalam sebuah blog dan sepertinya saat ini memang sudah tidak asing lagi di telinga kita dan mungkin saja kita sendiri sudah sering menjumpai widget Back To Top ini.

yang ini akan sedikit berbeda back top yang ini ketika sobat klik maka dia akan perlahan-lahan naik ke atas dengan smooth (lembut dan santai).

Fungsi:

Memudahkan kita khususnya para pengunjung blog untuk kembali ke halaman atas, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali keatas, cukup dengan mengklik tulisan "Back To Top".
 
Buat teman-teman yang ingin membuatnya silahkan ikuti langkah-langkah di bawah ini:

1. copy script di bawah ini

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://raezen.fileave.com/scrolltop.js" type="text/javascript"></script>

     2. paste kan

<head>

      3. sealesai ^__^

Mudah Bukan !
sealamat mencoba dan selamat bereksperimen!!!

Read more »»   

0 Cara Memasang Flag Counter Di Blog

Counter Adalah Alat Bantu Hitung yang di gunakan di beberapa blog.. ada yang di hitung Berdasarkan Pageviews dan Visitor / Perorangan. Oke, Gak Usah Basa-Basi Kelamaan inilah Counter yang di pakai di beberapa blog + cara penggunaannya

- COUNTER PAGEVIEWS -

Overstock.com Coupon

counter pageview alias yang dihitung berdasarkan berapa kali blog anda di buka.. ini caranya..

1. Klik -disini- dan klik Create Your Free Web Counter !

2. Pilih Jenis Tampilan yang anda mau.. dan klik Use selected style & Go to Step 2.

3. Isi Data Anda dan untuk Starting Count isi dengan angka 1 untuk Increment on** jangan di ubah.
^{4. Buka Tab Baru, Login Ke Blogger dan Edit Tata Letak, Tambah Gadget, HTML / Javascript}

^{5. copy HTML yang muncul ke HTML / Javascript dan Save..}

^{- COUNTER VISITOR / PERORANGAN -}

^{counter visitor adalah Counter yang di hitung berdasarkan IP Address.. Uniknya disini kita bisa melihat darimana asal negara orang itu, sok, begini caranya..}

<sup>1. Klik -disini- dan klik GET YOUR OWN FLAG COUNTER disini ada dua pilihan yaitu Flag Map & Top Countries..

Untuk Flag Countries
Map Size : Di Sesuaikan Ukuran Blog
Label : Visitor</sup> 

 Klik Show Pageview Count  Dan 

Lalu Copy Code For Website Ke Blog Anda..
Jadilah Seperti ini :

Untuk Top Countries

Maximum Flag : 248

Coloums : 2

Label : Visitor

Klik

 Show Country Codes

 Show Pageview Count

 Dan

Lalu Copy Code For Website ke blog anda..
Jadilah Seperti Ini :

Read more »»   

0 Cara Membuat Pesan Pembuka dan Penutup di Blogspot

Langkah - langkah sebagai berikut :

1. Login Ke Blogger
2. Klik Rancangan
3. Klik Tambahkan Gadget >> HTML/JavaScript
4. Copy Kode Dibawah ini ke >> HTML/JavaScript

 <SCRIPT quality='high' type='text/javascript'>
var name = prompt("TEKS PESAN PEMBUKA 1", "NAMA SOBAT DISNI ");
alert("Salam kenal ya "+name)
//
alert ("TEKS PESAN PEMBUKA 2. Kami sarankan anda memakai browser Mozilla Firefox. ")
// goodbye alert
function goodbye(){
alert('TEKS PESAN PENUTUP DISINI');
}
parent.window.onunload=goodbye;
//<![CDATA[
//]]>
//<![CDATA[
//]]>
</SCRIPT>


      5. Simpan Template


Note : Silahkan sobat ganti tulisan berwarna biru dengan yang sobat inginkann.

Read more »»   

0 Membuat Marquee ( Text Berjalan ) versi 2

kemarin saya sudah posting cara membuat marque (text berjalan).dan kali ini saya akan posting tentang Membuat Marquee ( Text Berjalan ) versi 2 bedanya hanya yang versi 2 ini bisa kita atur sesuai selera kita.

Kita yang berkecimpung dalam dunia blog, kita dapat menuangkan ucapan tersebut pada halaman blog dengan mengaplikasi script marquee pada blog kita.

Salah satu contoh aplikasi marquee yang dapat kita terapkan dengan format seperti di bawah ini.

<marquee direction="left" scrollamount="4"><font color="black" face="broadway" size="3">
teks atau tulisan yang ingin ditampilkan
</font>
</marquee>

Keterangan

• <Direction >> arah gerakan, dapat kita ganti dengan RIGHT
• Scrollamount >> semakin kecil nilanya semakin cepat gerakannya, dapat kita ubah sesuai kebutuhan
• Size >> ukuran huruf, semakin besar nilanya semakin besar pula ukuran hurufnya
• Color >> warna huruf, dapat diubah sesuai selera masing-masing
• Face >> jenis font, dapat diubah sesuai selera

Di mana kita menempatkanya pada blog kita? Sedapat mungkin di tempat yang “strategis” sehingga mudah dilihat pengunjung yang datang ke blog kita. Pada tips ini, Tips Blog mencoba menempatkan di tempat sedemikian rupa sehingga mudah dilihat. Anda pun dapat menempatkan di tempat lain sesuai selera Anda.

• 
  
• Klik Tata Letak (layout)
• Klik Edit HTML
• Kemudian cari kode <body>
• Kemudian tempatkan kode html di atas tadi persis di bawah kode <body>
• Kemudian Simpan Template 

nanti contohnya akan jadi seperti ini:




teks atau tulisan yang ingin ditampilkan




Selamat Mencoba !!!

Read more »»   

0 Membuat Marquee ( Text Berjalan )

Marquee adalah teks berjalan dalam bahasa html. Kalo kita lihat marquee menurut semantik sepertinya ga ada hubungan dengan teks berjalan, tapi kalo diperhatikan lagi… mmmmh memang ga ada hubungannya ^_^ (sepertinya). Tapi kalo kita mau perhatikan lebih dalem, Marquee mempunyai arti “Tenda Besar,” atau “tempat berteduh seperti atap dimuka pintu masuk sebuah gedung” Mmmmh… apa hubungannya dengan marquee sebagai teks berjalan…? Setidaknya menurut saya memang ada, melalui “tenda” tersebut orang lalu lalang berjalan.
Berikut ini contoh-contoh sebagian kecil penggunaan marquee pada teks.
Berikut ini contoh-contoh sebagian kecil penggunaan marquee pada teks.


Marquee 1.0
Teks Anda
Marquee 1.0 ini merupakan marquee standar agar teks Anda bisa berjalan secara default (dari kanan ke kiri).

Tag Html
<marquee>Teks Anda</marquee>

Marquee 1.0.1
Teks Anda
Marquee 1.0.1 adalah pengembangan dari 1.0, keistimewaannya jika Anda arahkan mouse pada teks tersebut maka dia akan istirahat dan berhenti dari perjalanannya yang panjang.

Tag Html
<marquee onmouseover="this.stop()" onmouseout="this.start()">Teks Anda</marquee>

Marquee 1.0.2
Teks Anda
Marquee 1.0.2 jika Anda menggunakan teks Arabic yang dimulai dari kanan ke kiri, maka Anda membutuhkan Marque ini yang berjalan sebaliknya; dari kiri ke kanan, contoh dengan teks arabic:
مرقو ادلح تيكس برجالان

Tag Html
<marquee direction="right">Teks Anda</marquee>

Marquee 2.0
Teks Anda
Marquee 2.0 Marquee ini tidak memiliki kemampuan magic seperti David Coperfield marquee sebelumnya yang bisa menembus ruang, Marquee 2.0 ini kerjaannya bolak-balik dari ruang kotak yang kasat mata.

Tag Html
<marquee behavior="alternate">Teks Anda</marquee>

Marquee 2.0.1
Teks Anda
Marque 2.0.1 Pengembangan dari marquee sebelumnya, dengan pancingan scrollamount dia menjadi sangat agresif

Tag Html
<marquee behavior="alternate" scrollamount="18">Teks Anda</marquee>

Marquee 2.0.2
Teks Anda
Marquee 2.0.2 Masih pengembangan dari Marquee 2.0 dengan sentuhan on-mouse-over stop dan on-mouse-out start, seperti marquee 1.0.1 jika Anda arahkan mouse pada teks maka dia akan berhenti.

Tag Html
<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">Teks Anda</marquee>

Marquee 3.0
Teks Anda
Marquee 3.0 Dia adalah marquee climbing, marquee pendaki ini suka sekali ketinggian, sehingga kita lihat arah teksnya pun ke atas (up) . Jika Anda memiliki teks yang banyak, maka marquee ini merupakan pilihan yg tepat dan sangat cocok sebagai teman pendamping hidup Anda.

Tag Html
<marquee direction="up">Teks Anda</marquee>

Marquee 3.0.1
Teks Anda
Marquee 3.0.1 Pengembangan dari marquee sebelumnya yang tidak mempunyai batas ruang, marquee ini kita batasi ruang kasatnya sehingga memliki height 100 saja. Demikian dengan kemampuan scrollamountnya kita perlambat. Dan kita kasih on mouse stop/start juga.

Tag Html
<marquee direction="up" onmouseover="this.stop()" width="100%" scrollamount="2" onmouseout="this.start()" height="100">Teks Anda</marquee>

Marquee 3.0.2
Teks Anda

Marquee 3.0.2 Masih pengembangan dari marquee sebelumnya, hanya saja teks berada di tengah ruang kasat.

Tag Html 
<marquee direction="up" width="100%" scrollamount="2" height="100" align="center">Teks Anda</marquee>



Marquee 3.0.3

Teks Anda
Marquee 3.0.3 Pengembangan juga dengan arah berlawanan dari marquee sebelumnya, marquee ini senang sekali berjalan menurun. Sehinggan teks yang kita lihat berjalan dari atas ke bawah. Kemampuan scrollamountnya tidak kita batasi sehingga terlihat agresif dengan ruang kasat yang kecil. Silahkan Anda perlambat sendiri.

Tag Html
<marquee direction="down" width="100%" height="100">Teks Anda</marquee>

Demikian tips sederhana ini, silahkan Anda coba….! Jika ingin manambahkan marquee yang lain silahkan tulis komentar.
Keep Blogging ^_^

Sumber : adjiebrotot

Read more »»   

0 cara membuat Cursor Bertabur Bintang

bintang adalah salah satu cara untuk mempercantik tampilan blog.karena saat cursor di geser kursor tersebut akan mengeluarkan bintang-bintang. Contohnya Bisa kalian lihat disini.

Setelah melihat Contohnya Tertarik tidak sobat untuk membuatnya ?jika tertarik silakan ikuti tutorial Cara Membuat Cursor Bertabur Bintang di bawah ini untuk Membuat Cursor Bertabur Bintang.


1.Login ke blogger.

2.Klik Tatat Letak.

3.Klik Tambah Gadget.

4.Pilih HTML/javascript.



5.Letakkan HTML di bagian paling atas..

6.Pilih lalu Copy dan paste kode di bawah ini ke dalah kotak HTML/javascript tadi .

Bintang biru

<script src="http://denisahlan.netau.net/bintang.biru.js" type="text/javascript"></script>

Bintang  hijau


<script src="http://denisahlan.netau.net/bintang.hijau.js" type="text/javascript"></script>

Bintang  merah

<script src="http://denisahlan.netau.net/bintang.merah.js" type="text/javascript"></script>

Bintang  putih

<script src="http://denisahlan.netau.net/bintang.putih.js" type="text/javascript"></script>

Bintang ungu
<script src="http://denisahlan.netau.net/bintang.ungu.js" type="text/javascript"></script>

Sumber : adjiebrotot

Read more »»