Sabtu, 13 Agustus 2011

Cara Membuat Halaman Blog Melipat


Cara Membuat Halaman Blog Melipat,Seperti biasa, Login ke blogger --> Rancangan --> Edit HTML --> centang pada Expand Template Widget
1.Cari kode :<b:skin><![CDATA[
    Letakkan kode di bawah ini tepat di atas: <b:skin><![CDATA[

KODE HTML 1








<script   src='http://sites.google.com/site/software2iqbalinc/javascript/script_ditunjuk_ngelipet_t4belajarblogger.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);
} , function() {
$("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
$(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>

http://www.negrionta.co.tv
2.Cari kode :]]></b:skin>

    Letakkan kode di bawah ini juga tepat di atas: ]]></b:skin>

KODE HTML 2

#pageflip {
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSXyE25FcEU3kmjxH3N7PaLccsqOJLGrE7MCmxhkvvHzQHjsCawAJDCPn_Yst8G0RsiKsCDamQKs91Tdh6C61WE29nAnHGMhpfpbNjul0HXwaqf6l8ed_aHXOyHd2OGv9sqZb8hM9OuuZb/) no-repeat right top;
text-indent: -9999px;
}
3.Cari kode :<body>
   Letakkan kode di bawah ini tepat di bawah: <body>

KODE HTML 3

<div id='pageflip'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=tutorialbloggingdiblogger' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-MKl2z8VzalbOkrv61NHFYYLELdJI218PbU0Fg6LppYgVgf2WvFyFeU7B3gpFGjB40457oDJA-BffqmfII2qw1q3eVP3NW7YneE_IbBWvSfsW-xg1giO-0qbTC6cTRzm-33FA-dwnlFlZ/'/>
<span class='msg_block'/>
</a>
Langkah terakhir ; Jangan lupa di simpan atau di Save Template
Keterangan ; Sobat bisa mengganti kode diatas yang berwarna merah dengan Link yang kamu inginkan.. Saran ; Link RSS atau Link berlangganan.
Untuk mengganti gambar dinding, kamu bisa mengganti URL yang berwarna merah pada kode berikut:

#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSXyE25FcEU3kmjxH3N7PaLccsqOJLGrE7MCmxhkvvHzQHjsCawAJDCPn_Yst8G0RsiKsCDamQKs91Tdh6C61WE29nAnHGMhpfpbNjul0HXwaqf6l8ed_aHXOyHd2OGv9sqZb8hM9OuuZb/) no-repeat right top;
text-indent: -9999px;
}

Semoga bermanfaat...
Diposting oleh febry14 di 11.38 0 komentar

Rabu, 10 Agustus 2011

Cara Membuat Horizontal Tab Menu





Cara Membuat Horizontal Tab Menu bisa lihat demo di atas  , membuat tab horizontal berdasarkan kode css yang ada di template, kali ini kita akan buat tab baru dengan seluruh kode css baru yang sama sekali tidak berkaitan dengan seluruh kode css bawaan blogger baru. Sekaligus kita juga akan melakukan modifikasi pada kode html template supaya tab horizontal maupun berbagai menu yang lain bisa kita pasang di semua bagian yang dikehendaki. 


Horizontal tam menu ini masih menggunakan kode css tanpa tambahan sebuah script sehingga beban pada blog juga tidak akan terasakan, apalagi background image yang kita gunakan juga amatlah kecil. Pembuatan tab ini bisa juga dimanfaatkan sebagai bahan latihan buat sobat blogger untuk melangkah pada pembuatan menu yang lebih kompleks diposting selanjutnya. Meskipun demikian, tidak ada ruginya jika tab menu horizontal ini digunakan untuk menambah kelengkapan blog sekaligus memperindah karena tampilannya yang sangat menarik. 


Semua kode tinggal sampeyan copy dan simpan melalui penambahan widget blog tanpa harus upload satupun gambar/images karena semua sudah dalam bentuk siap pakai. Beberapa perubahan terutama dilakukan untuk menempatkan tab pada posisi yang paling ideal dengan cara merubah margin di kode cssnya. Untuk link dan nama link-nya silahkan dirubah sesuai blog yang sobat punya.


Copy Paste Kode CSS di bawah ini:

KODE CSS


<style type="text/css">
.bgsGRmnu{
padding: 0;
float: left;
font: bold 13px Arial;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
border-left:1px solid white;
background: black url(http://i1107.photobucket.com/albums/h397/GRbaru/Horizontal_Menu/bgBlueRedLineVertV31H1.png) top center repeat-x;
}
.bgsGRmnu li{
display: inline;
}
.bgsGRmnu li a{
float:left;
color:#aad6fe;
padding:9px 11px;
text-decoration:none;
border-right:1px solid white;
}
.bgsGRmnu li a:visited{
color:#4fcafe;
}
.bgsGRmnu li a:hover, .bgsGRmnu li .current{
color: red;
text-shadow:-1px -3px 1px #fff;
-moz-text-shadow:-1px -3px 1px #fff;
-webkit-text-shadow:-1px -3px 1px #fff;
background: transparent url(http://s1107.photobucket.com/albums/h397/GRbaru/Horizontal_Menu/GraybgNaviV31H318.jpg) center center repeat-x;
}
.boksmnu{
padding:0 0 2px;
border-bottom:2px solid red;
border-left:15px solid #000;
border-right:15px solid #000;
padding-left:1px;
height:35px; background:#000;
float:left;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-goog-ms-border-top-left-radius: 10px;
-goog-ms-border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
</style>

<div class="boksmnu" style="top:-30px;left:10px;margin:0px 10px 20px 0px;">
<ul class="bgsGRmnu">
<li><a href="Link-1">Link Title-1</a></li>
<li><a href="Link-2">Link Title-2</a></li>
<li><a href="Link-2">Link Title-3</a></li>
<li><a href="Link-2">Link Title-4</a></li>
<li><a href="Link-2">Link Title-5</a></li>
<li class="current"><a href="http://febry14-putramakkah.blogspot.com/">gubhug reyot</a></li>
</ul>
</div>


Silahkan buka link di bawah ini untuk mengikuti tutorial menarik lainnya:
http://www.negrionta.co.tv


Semoga bermanfaat..

Diposting oleh febry14 di 13.45 0 komentar

Selasa, 02 Agustus 2011

Cara membuat Text shadow animasi with hover

Cara membuat Text shadow animasi with hover , bagi sobat blogger yang ingin berkreasi dengan text-shadow bukan hanya dengan gambar tetapi dengan tulisan.


Sekarang mari kita mulai pembahasan CSS3 yang bisa membuat Text-shadow animation with hover:
Saya yakin sobat semua sudah tau apa itu text shadow jadi tidak perlu di bahas pabila belum tau silahkan di baca terlebih dahulu tentang text shadow di blog ini.
untuk animasi yang pertama adalah menghilangkan tulisan dan merubahnya menjadi kalimat yang baru. Prinsipnya adalah kita harus mengetahui warna background dari post article seperti blog ini backgroundnya post hentry adalah #000 yang berarti hitam, ini berfungsi untuk menutup saat menghover, silahkan arahkan kursor ke kalimat di bawah:



BIASAKAN BERKOMENTAR !!
UNTUK TUTORIAL SELANJUTNYA TERIMAKASIH


Copy Paste Kode CSS3 di bawah ini:

KODE CSS3

<style type="text/css"> .stevevai{margin:0 auto;text-align:left;font-size:large;color:#FF0000;text-shadow:1px 2px 1px blue;overflow:hidden}.rumpun{background:#000; color:#FCE514;font-size: 1em; font-family:'arial';text-shadow:1px 2px 4px #FF0000;font-size:1em;}#vanhalen{position:relative;}#vanhalen img{-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 300ms;}#vanhalen .rumpun{position:absolute;top:0;left:0;opacity: 0;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 300ms;}#vanhalen .rumpun:hover{autowidth:0px; autoheight:0px;margin:0 auto;width:300px;height:200px;opacity: 4.9;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 300ms;}</style><div class="stevevai" id="vanhalen"> BIASAKAN BERKOMENTAR !! <div class="rumpun">UNTUK TUTORIAL SELANJUTNYA TERIMAKASIH</div></div>
http://www.negrionta.co.tv



Happy Blogging
Semoga bermanfaat ...!!
Diposting oleh febry14 di 11.44 0 komentar
Langganan: Postingan (Atom)
putra makkah © 2011 Template by:
Negrionta Community