Hans.Community

Bersama Kita Saling Berbagi dan Saling Menghargai

  • RSS
  • Skype
  • Facebook
  • Yahoo

Cara Membuat Efek Lipat Keren Pada Blog

Salam hangat buat sobat semuanya,kita jumpa lagi dalam artikel baru saya yaitu Cara Membuat Efek Lipatan Buku Pada Halaman Blog,meski ini artikel sudah banyak di bahasdi blog lain namun tidak ada salahnya saya posting kembali karena artikel ini agak sedikit menarik di bandingkan yang lainnya apalagi blog sobat sudah di modifikasi dengan tampilan full css maka akan kelihatan lebih indah seperti yang ada pada blog saya ini....hehehehehe kepedean nih.baiklah buat sobat yang ingnin mencobanya bisa ikuti tutorialnya di bawah ini.

1. Seperti biasa login dulu sob.
2. Pilih menu Template dan pilih Edit HTML.
3. Cari kode <b:skin><![CDATA[,gunakan CTRL+F untuk memudahkan pencarian.
4. Letakan scrip di bawah ini tepat di atas kode <b:skin><![CDATA[

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


5.Kemudian cari lagi kode ]]><b:skin> dan letak scrip di bawah tepat di atas kode ]]><b:skin>

#pageflip {
position: relative;
}
#pageflip img {
border: none;
width: 200px; height:200px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 100px; height: 100px;
position: absolute;
right: 0; top: 0;
background: url(https://hanscommunity.googlecode.com/files/hans.png) no-repeat right top;
text-indent: 0px;



6. Terakhir cari lagi kode <body> dan letak scrip di bawah kode <body>
<div id='pageflip'>
<a href='http://hansmjlk.blogspot.com' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0SJr5vHB0_dmmnjnL0D0JTTIClmy6zaQM0hYG4PJSSeXyyOyMqeOBnAlYePIfv_F7i3ZSv-uROptDxvJPq9eHsPUspcVld_GBl4xUMq-p9eZCz2iAQQcdLfAgf-YJK77NcjFG8CyAh-a3/'/>
<span class='msg_block'/>
</a>
</div>
7. Lalu save dan lihat hasilnya.

Demikian tutorial kali ini terima kasih atas semuanya.

4 komentar

Daftar Isi



2 komentar

Cara Membuat Menu Drop Down Keren Di Atas Header

Salam Hangat Semuanya,kita jumpa lagi Dalam tutorial berikutnya yaitu tentang Cara Membuat Menu Drop Down Di Atas Header,meski sebelumnya saya sempat membahas tentang cara membuat menu drop down di blog,namun kali ini sedikit berbeda sebagai lanjutan dari postingan kemarin yaitu menu ini bisa di simpan di sesuai keinginan kita tepatnya di atas atau di bawah menu header,buta sobatyang ingin mencobanya silahkan perhatikan tutorialnya berikut ini.

1. Seperti biasa langkah pertama sobat login dulu ke akun sobat.
2. Kemudin pilih bagian Template,dan pilih Edit HTML.
3. Cari kode ]]></b:skin>,(gunakan CTRL+F supaya lebih mudah dalam pencarian).
4. Letakan kode di bawah ini tepat di atas kode ]]></b:skin>.




5. Kemudian pastekan scrip di bawah ini sesuai dengan keinginan sobat.
    Kode <header> jika menu ingin di tempatkan di atas header
    Kode </header> jika menu ingin di tempatkan di bawah header



keterangaan
untuk yang bertuliskan tanda # ganti dengan url label sobat
untuk yang bertuliskan folder ganti sesuai selera sobat


6. Kemudian simpan template dan lihat hasilnya.


Demikina tutorial dari saya terima kasih.

12 komentar

Cara Membuat Menu Slide Css diblog

Semakin pesatnya perubahan demi perubahan dalam tampilan blog guna memberikan kenyamanan dan kepuasan,seperti Cssscrollbar,Css reflect,cara membuat tabel dengan Css dan banyak lagi,memang saya akui penapilannya memberikan kepuasan degan tampilan yang penuh efek,untuk itu pada kesempatan ini saya akan sedikit berbagi dengan sobat yaitu Cara Membuat menu slid Dengan Css di blog,maksud dari menu slid yaitu ketika buka halam blog maka secara otomatis tabel menu akan hadir dari arah kanan menuju ke tengahuntuk lebih jelasnya silahkan sobat coba dan ikuti tutorialnya di bawah ini.

1.Seperti biasa login dulu ke blog sobat
2.Kemudian pilih menu Template > Edit HTML.
3.Cari kode ]]></b:skin> (Gunakan CTRL+F untuk memudahkan dalam pencarian kode tersebut)
4.Setelah ketemu letakan kode Css di bawah ini tepat di atas kode ]]></b:skin>.

ul#navigation {
position:fixed;
margin:0px;
padding:0px;
top:0px;
right:10px;
list-style:none;
z-index:999999;
width:820px;
font:normal 11px Arial,Sans-Serif;
-webkit-animation:2s fxhompinav ease-in-out;
-moz-animation:2s fxhompinav ease-in-out;
-ms-animation:2s fxhompinav ease-in-out;
animation:2s fxhompinav ease-in-out;
}
ul#navigation li {
width:103px;
display:inline;
float:left;
margin:0 0 0 2px;
}
ul#navigation li a {
display:block;
float:left;
margin-top:-78px;
width:100px;
height:22px;
background-color:#8e8f91;
background-repeat:no-repeat;
background-position:50% 150px;
border:3px solid #303030;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-khtml-border-bottom-right-radius:10px;
-khtml-border-bottom-left-radius:10px;
border-radius:0px 0px 10px 10px;
color:#ccc;
text-decoration:none;
text-align:center;
text-shadow:0 1px 1px #000;
padding-top:85px;
-webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
-moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
-o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
}
ul#navigation li a:hover {
margin-top:-3px;
background-position:50% 10px;
color:#fff; position:relative;
}
ul#navigation li a:hover:after {
content:"";
width:0px;
height:0px;
position:absolute;
top:100%;
left:45%;
margin-top:-10px;
border-width:5px;
border-style:solid;
border-color:transparent transparent #1e1d1d transparent;
}
ul#navigation li:nth-child(1) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr7CY7bQ2qJmAO82LpKsu9YvDPNJnw-MAB42lu-FSzqOsbITBtFVEloL4y0uKvyZE5CHm0wQ-ptb05J0SVTQ_zVhVU6O7ot6Iin187vYLyfMWqdQBwrZu4rp5r2GMdJBKrUlQZua2SPYA/s1600/home.png);
}
ul#navigation li:nth-child(2) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyt-CRUxM6WZE94CBRW5iDgLIZHW3DMKfeQmsj-LvCInt7d2AaidNN1hlxXL0gJJqZP_rK7jw3JbetvMyedkkaPgiWQyGEM44081yj9FlLll4_rT9Yl-ZxUWwzIT5RpZJy-qvIhFz9KVc/s1600/user.png);
}
ul#navigation li:nth-child(3) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAIF9tByzfIKvRB5fSCgM4xOeNq6AWLZGGD84RNtLFZPJyWM0KUIbOOGz4YBZyfinoeJrkp8VJ0xGQqhyphenhyphenL08GAvJvdbIhDuCJX7ZZVqTg2HnXrXgfgGZ8Q3xKJdr5JowGeiPOW80aQ6VA/s1600/mail.png);
}
ul#navigation li:nth-child(4) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIM_wkrYNLuYrtr8ZzYx6gJXwZSxCMVhPfHQ3yY0HqRsrIQrjp8u9vksLyVM451BnSdAN-TfdEJNxFrETm-gky35ufD1e5yCnWLw6sQ5zR7C9qELTfX7ILB6pMWAu2OZkVdq2BXcGjNSk/s1600/rss.png);
} ul#navigation li:nth-child(5) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3_NWAKLCRKU2u0S0A4VjHEKA4YvqMK8lpIpd8nFKwkCmmeYvsqt45wrGEfWBCeu_JzIoKbLMOj_3Odk-UaSFjzUO4ce9owGp0ajCy-8Dfnds7mr_OEp278gV4A0vy502UGS4q-gEHy9k/s1600/link.png);
}
ul#navigation li:nth-child(6) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGLfTdMfQhIz4arGuxMbgMZgHBhcLKU8G_FB8zul8CChNzPZMQxryE1SUy_QXgxB4aoqhyphenhyphenmIBKFObFKUnr0n0emd9pRvCzJjpy7gBhnbNB4OsJ2yeMzMZqn96HbNKAgeBAEFJ9FcoVA2Q/s1600/color.png);
}
@-webkit-keyframes fxhompinav {
from{margin-right:-1000px;} to {margin-right:0px;}
}
@-moz-keyframes fxhompinav {
from{margin-right:-1000px;} to {margin-right:0px;}
}
@-ms-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;}
}
@keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;}
}


5.Kemudian cari lagi kode </body>dan pastekan kode Css di bawah ini.



<ul id='navigation'>
<li><a href='Alamat Url'>Home</a></li>
<li><a href='Alamat Url'>Blogging</a></li>
<li><a href='Alamat Url'>Contact</a></li>
<li><a href='Alamat Url'>Windows</a></li>
<li><a href='Alamat Url'>Link Exchange</a></li>
<li><a href='Alamat Url'>Internet</a></li>
</ul>


6.kemudian simpan template dan lihat hasilnya

Itulah artikel dari saya semoga ada manpaatnya terima kasih.

1 komentar
http://hansmjlk.blogspot.com
Logo Design by FlamingText.com
Logo Design by FlamingText.com
Diberdayakan oleh Blogger.