2 Cara Membuat Text Miror Pada Header Blog

Ya untuk sedikit mempercantik Header Blog Anda tidak ada salahnya anda mencoba membuat text miror atau tulisan yang memiliki bayangan dibawahnya seperti cermin. Langsung saja kita mulai Membuat Text Miror dengan Adobe Photoshop 7.0

1. Jalankan program Adobe Photoshop Anda.

2. Klik > File > New ( Ctr+n )

3. Berikan Lebar "800px" dan Tinggi "250px" atau sesuaikan dengan lebar/tinggi blog Anda.

4. Klik ' Horizontal Type Tool ' dan buatlah suatu tulisan. misalnya " COBA.com ".

5. Tekan Ctr+j (Copy) dan Ctr+t (Paste) > lalu klik kanan pada mouse > klik Vlip Vertika.

Maka akan text akan menjadi seperti ini :

6. Klik kanan pada layer COBA.com copy dan Pilih Blending Option.

7. Pada " Blending Option " pilih > " Gradient Overlay ". beri ukuran Angle = -90 dan Scale 150.

8. Masih dalam " Blending Option " klik pengaturan warna dan beri nilai " Location=75 " dengan cara menggeser ikon pensil.

. Apabila sudah klik "OK" dan jangan lupa untuk menggeser gambar sampai sama rata dengan menggunakan " Move Tool ( V ) " pada gambar.

9. Save ( Ctr+s ) dengan format dot JPG ( .jpg )

10. Dan hasilnya akan seperti ini :

Read more

11 Cara Membuat Menu Horizontal Drop Down

Oke kawan kita ketemu lagi ya, semoga pertemuan ini dapat menjadi salah satu ilmu yang bermanfaat demi kemajuan blogger indonesia. oke langsung saja hari ini saya akan memcoba membuat menu horizontal drop down, bagi teman - teman yang ingin membuat menu horizontal drop down silahkan coba cara berikut ini yang saya kutip dari tutorial-website:

Sebelum menjalankan langkah dibawah ada baiknya untuk membeckup template kesayangan dengan cara klik Download Template Lengkap pada Edit HTML.

dan apabila sudah melakukan langkah diatas langsung kita olah TKP :

1. Masuk ke halaman Dasboard > Tata Letak > Edit HTML > Ceklist 'Expand Template Widget'.

2. Gunakan Ctr+f pada kyboard untuk mencari ( Find ) kode.

3. Copy Paste kode berikut diatas kode </head>

<script type="text/javascript"
src="http://nestoriko.googlepages.com/chrome.js">
</script>

4. Setelah itu tambahkan kode CSS berikut diatas kode ]]></b:skin>


.chromestyle{
width: 100%;
font-weight: bold;
}

.chromestyle:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(http://nestoriko.googlepages.com/chromebg2.gif) center center repeat-x;
padding: 4px 0;
margin: 0;
text-align: left;
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #B5E2FE;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background: url(http://nestoriko.googlepages.com/chromebg2-over.gif) center center repeat-x;
}

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #B5E2FE;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA
,direction=135,strength=4);
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #B5E2FE;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{
background-color: #EBF7FF;
}


5. Jika langkah diatas telah selesai, sekarang carilah kode seperti ini :

<b:includable id='description'>

<div class='descriptionwrapper'>

<p class='description'><span><data:description/></span></p>

</div>

</b:includable>

</b:widget>

</b:section>

</div>

6. Dan Copy Pastekan kode berikut tepat dibawah kode diatas :

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://rifweb.blogspot.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Menu1</a></li>
<li><a href="#" rel="dropmenu2">Menu2</a></li>
</ul>
</div>

<!--menu drop down pertama -->
<div id="dropmenu1" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>


<!--menu drop down kedua -->
<div id="dropmenu2" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>



KET :
atau apabila ada kesusahan mencarinya letakan saja tepat dibawah kode </header>

7. Simpan Template dan Lihatlah Hasilnya.

Read more