Latest Post
Cara Memasang Menu Navigasi Slide Out Di Blog
Penulis coxelgokil pada Kamis, 28 November 2013 jam 07.02
Aneka
macam menu sudah sering kita pasang di blog elain untuk mempermudah
mencari daftar isi juga sebagai penghias tampilan blog seperti yang akan
kita bahas kali ini gimana cara pasang Menu navigasi slide out DI BLOG.
Simak cara berikut ini :
- Login dulu ke blogger.com.
- Masuk rancangan lalu Edit HTML jangan lupa download lengkap dulu template untuk menjaga kemungkinan salah.
- Cari kode ]]></b:skin>.
- Lalu pasang kode Css berikut tepat di atas nya :
- Lalu cari kode </head> lalu masuk kan kode Script di bawah ini tepat di atas kode </head> :
- Cari kode </body> lalu masukkan kode di bawah ini tepat di atas kode </body>.
/*----------------Beautiful Slide Out Navigation-------------------------------*/.headerfixed{width:600px;height:56px;position:absolute;top:50%;left:10px;background:#fff url(title.png) no-repeat top left;}ul#navixed {position: fixed;margin: 0px;padding: 0px;top: 0px;right: 10px;list-style: none;z-index:999999;width:721px;}ul#navixed li {width: 103px;display:inline;float:left;}ul#navixed li a {display: block;float:left;margin-top: -2px;width: 100px;height: 25px;background-color:brown;background-repeat:no-repeat;background-position:50% 10px;border:1px solid #BDDCEF;-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;text-decoration:none;text-align:center;padding-top:80px;opacity: 0.7;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}ul#navixed li a:hover{background-color:#000;}ul#navixed li a span{letter-spacing:2px;font-size:11px;color:#FFF;}ul#navixed .home a{background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC7o9V4P0FgoZrqQ6ma__Rt1hWidbWtcEtYHrXt3mYBIQvfyr6z7vwcr-GiVcfwOwQK81o9Aw-gfe3qmiIQ2kafJijy4nW1n0jWxe5Fh7_ONFTvXlrgA2qKplLSjij-FC-5QToOYqmmqw/s1600/home.png);}ul#navixed .about a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLsS1iI-59ba6kHWLD6kleWukzlybVSyIC3YFHnB6VxXxxeLdhg7eiDomYLTVtVy501sCTFYrLv4EtUFzfUUz2sowOBkNTOQaiSErcBgeP9L0IVx1oPv6_4gu9MjYSbTIOYtxk6od8Qds/s1600/id_card.png);}ul#navixed .search a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3WiGpZPtlY4Ccpm80APaTFqnfKj1Tqop-ulbl2t9raYqayCaSKAVwBI7DhNsvp9ksTT4oDIl7L4PuJY4TuslqqULedAnSur7YpW1HZYsCL04mZsahuJY02knPjmOwXSzpXo0CQlzdFGs/s1600/search.png);}ul#navixed .podcasts a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiztviK6p8GGSgL2h8Id2dN0evwGstqgrQjIs0gJ68jbn0umvNIunsfm_BHSyWx860x4qhMNSX1t9c7eflalqkysNT0N3Rd-VpZcRDuI0AJHkg4td6FSuKNlpKXQpzh-gDXBtMbpKS1Be4/s1600/ipod.png);}ul#navixed .rssfeed a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQz0peYPEACU7oT2twTHwXaSfx1ZclS93-ykEcvstuhqfI6sRvvDoD7nWFRoD_dl7JYLTgATifk7W6QGDnfk70ykG4lpTDJU_2RrBKWF5rkLlJuQ_71vA3zG67yXuGXcDjCqQtqe2t5yY/s1600/rss.png);}ul#navixed .photos a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5MAPvzRnftUxbZtOgJ_eTY4j6oL1EIMXrre8w3g_d3GDZc7a887cEJSqounMccO_Apz8FbkqbJr1tYj-KbmS5E2GRMnHKeQNyrcT7WqHqxhzMHykY16xrEXQBTC-G8Y6P1f5LbjSj3wI/s1600/camera.png);}ul#navixed .contact a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl_WsVPAjeUYtPvx_zrrp3Suv3QJ_TP3OBRLyofJWvW07haEBmFTu-QATtOa2vhih4EShACDg5pMsYpApS4tv0BY6UBhbd3eYPhWCXhjagdiUJ462J7xWZHd-4l-0FT38zAR3ZU4Vvrj0/s1600/mail.png);}
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/><script src='http://kangmahfid.googlecode.com/files/jcolor.js'/><script type='text/javascript'>$(function() {var d=300;$('#navixed a').each(function(){$(this).stop().animate({'marginTop':'-80px'},d+=150);});$('#navixed > li').hover(function () {$('a',$(this)).stop().animate({'marginTop':'-2px'},200);},function () {$('a',$(this)).stop().animate({'marginTop':'-80px'},200);});});</script>
<ul id='navixed'><li class='home'><a href='#'><span>Home</span></a></li><li class='about'><a href='#'><span>About</span></a></li><li class='search'><a href='#'><span>Search</span></a></li><li class='photos'><a href='#'><span>Photos</span></a></li><li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li><li class='podcasts'><a href='#'><span>Podcasts</span></a></li><li class='contact'><a href='#'><span>Contact</span></a></li></ul>
- Selesai jangan lupa Save Templat.
Cara Membuat Kotak Komentar Di Blog Dengan Background Bergambar
Langsung saja simak langkahnya berikut ini :
- Seperti biasa anda Log In dulu ke Blogspot.
- Klik Rancangan / Tata Letak--> Edit HTML.
- Jangan lupa untuk memberikan tanda chacklist pada tulisan "Expand Template Widget".
- Cari Kode berikut :
<div class='comment-form'>
- Setelah anda menemukan kode tersebut, anda dapat menggantinya dengan Kode dibawah ini.
<div id='ib-form'>
- Selanjutnya anda menambahkan kode dibawah ini dan letakkan sebelum kode ]]></b:skin>.
#ib-form iframe{Silahkan dicoba,
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9NOTRJu2DwmWRr15zVlQ3JOcleKiSvwQarvNrPVrDdQ4XBaYP2TtevKLrf7Q4ArkGCCJS1tA2wDrod-3lTK6Xfx8IbTOwt5Ty_jiOKAPWnjafQWUdMFZQ3vaPAJOxVj2h3Y5ULmAWtal0/s1600/Komentar+Lora+Malunk.jpg) no-repeat bottom right;
border:7px solid #C7C7C7;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#7EB2AC;
width:95%;height:250px;}
#ib-form iframe:hover{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9NOTRJu2DwmWRr15zVlQ3JOcleKiSvwQarvNrPVrDdQ4XBaYP2TtevKLrf7Q4ArkGCCJS1tA2wDrod-3lTK6Xfx8IbTOwt5Ty_jiOKAPWnjafQWUdMFZQ3vaPAJOxVj2h3Y5ULmAWtal0/s1600/Komentar+Lora+Malunk.jpg) no-repeat bottom right;
border:7px solid #7EB2AC;}
#ib-form a{
color:#7EB2AC;}
Sumber : http://lora-malunk.blogspot.com/2011/04/memodif-kotak-komentar-blogger.html
Cara Membuat Menu Sliding Vertikal Dengan CSS Bag. 1
Masih dalam pembahasan Cara Membuat Menu, sekarang Menu Sliding Vertikal Dengan CSS. Langsung saja masuk ke pembahasan :
- Masuk ke akun Blogger anda.
- Masuk Ke Menu Rancangan atau Design.
- Masuk ke EDIT HTML.
- Silahkan Copy Paste kode dibawah ini tepat diatas kode ]]></b:skin>.
h2.slideInfoa {normal font:18px/25px georgia, serif; color:#000;}
h2.slideInfoa span {padding:0 80px;}
.slideHolder {height:498px; width:250px; margin:0 40px; padding:2px; font-family:georgia, serif; border:1px solid #888; float:left;}
.slideOuter {height:498px; width:250px; overflow:hidden; margin:0;}
.slideOuter .slide {padding:0; margin:0; list-style:none;
height:800px; width:250px; overflow:hidden;}
.slideOuter .slide li {display:block; float:left; height:98px;
border-bottom:2px solid #fff; width:250px; overflow:hidden;
background:red;
-webkit-transition: 0.75s;
-moz-transition: 0.75s;
-o-transition: 0.75s;
transition: 0.75s;
}
.slideOuter .slide li.p5 {height:318px;}
.slideOuter .slide.current li {height:43px;}
.slideOuter .slide.current li.current {height:318px;}
.slideOuter .slide.current li.p5 {height:318px;}
.slideOuter .slide li.p1
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiFVILDpxH4ZCTIc1iPC0jm_v2f5ttQK6YUQIroZ-RahqyR7adpn6NSVI_FueW0B-WXP8fP21Xv0Gh5caO4xSXlb6o_KexUUq0bQi3CaLb_lrbZGkjeXPxH_zn5f35BzwHh3xiR_jOPzI/s400/pic1.jpg);}
.slideOuter .slide li.p2
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiSWysI8KL8FG48acbCjKQGAMBJIkonzhcAT1RlCqwusiAM_RymnAIQhfmYQpN8jaqdma6kPco0XJHY6AUukxXgB-AaP_sU990PScQ3WQqfHK-543d4T4PttDD1OwGulveYPZGPUthQjA/s400/pic2.jpg);}
.slideOuter .slide li.p3
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGGuhL6uAvfTw8YhMR-nDGLcjy4kXIYD8h_MceLPD2V1pIL_bl4bLYPxNyDeSK25vl_LNNUnyMcOF8asWivCp3CBFypPuYQYa4GXA-iL3eEIHOOCe9_-fMSfp7TWGtYaP7QRB50iD6m88/s400/pic3.jpg);}
.slideOuter .slide li.p4
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwhEhpYNe-S7mRxj0K_moO0keNzCg1ZJen3Ue9lEIilJlCl0o940lXs2ZbAQOqzbjEJaRpkDvAXyAaRbw09LEhfTvZRC6_D6C3npv7Le03-aexCtvhmPg1353XqosQc0sEwzJPCpfaFos/s400/pic4.jpg);}
.slideOuter .slide li.p5
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKBWIsFMeOIbCYyqDVBB65TgR_LMGLwBhgi-d3HzfjDVINzz3mmCQKAd3NW5ENsjhqLmfKCJdbATEa6DWyAhouYVVviHPnxz2h_qlISaUredcbbR3r2oXE3pKGDEDwbqEQNqoaYwI71b4/s400/pic5.jpg);}
.slideOuter .slide:hover li.p1,
.slideOuter .slide:hover li.p2,
.slideOuter .slide:hover li.p3,
.slideOuter .slide:hover li.p4 {height:43px;}
.slideOuter .slide:hover li.p1:hover,
.slideOuter .slide:hover li.p2:hover,
.slideOuter .slide:hover li.p3:hover,
.slideOuter .slide:hover li.p4:hover {height:318px;}
.slideOuter .slide li h1 {padding:0 15px; margin:0; font-size:24px;
line-height:43px; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);}
.slideOuter .slide li {color:#fff;}
.slideOuter .slide li.p2 h1 {color:#c60;}
.slideOuter .slide li.p3 h1 {color:#040;}
.slideOuter .slide li.p4 h1 {color:#400;}
.slideOuter .slide li.p5 h1 {color:#000;}
.slideOuter .slide li p {font-weight:bold; padding:0 5px 20px 15px;
margin:0; font-size:12px; line-height:17px; text-shadow: 0px 2px 4px
rgba(0, 0, 0, 0.6);}
.slideOuter .slide li a {display:block; color:#fff; padding:0 15px;
margin:0; font-size:14px; line-height:25px; width:230px;
font-weight:bold; text-decoration:none;}
.slideOuter .slide li a:hover {text-decoration:underline;}
.clear {clear:left;}
- Setelah anda selesai memasukkan kode diatas. Sekarang memasukkan kode dibawah ini dengan cara menambahkan Gadget HTML/JavaScript.
<div id="infoa">
<div class="slideHolder">
<div class="slideOuter">
<ul class="slide current">
<li class="p1">
<div>
<h1>Landscapes</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#url">Quisque tincidunt</a>
<a href="#url">Donec tempor</a>
<a href="#url">Sed placerat leo vel</a>
<a href="#url">Curabitur ac bibendum</a>
<a href="#url">Duis nec diam</a>
<a href="#url">Sed quis massa</a>
</div>
</li>
<li class="p2 current">
<div>
<h1>Portraits</h1>
<p>Vestibulum scelerisque quam a dui interdum semper.</p>
<a href="#url">Quisque tincidunt</a>
<a href="#url">Donec tempor</a>
<a href="#url">Curabitur aliquet</a>
<a href="#url">Curabitur</a>
<a href="#url">Class aptent</a>
<a href="#url">Vestibulum</a>
</div>
</li>
<li class="p3">
<div>
<h1>Flowers</h1>
<p>Mauris pellentesque, ligula eget molestie suscipit.</p>
<a href="#url">Nunc accumsan</a>
<a href="#url">Sed varius</a>
<a href="#url">Vestibulum</a>
<a href="#url">Phasellus quis</a>
<a href="#url">Maecenas</a>
<a href="#url">Nullam ligula</a>
</div>
</li>
<li class="p4">
<div>
<h1>Abstracts</h1>
<p>Cum sociis natoque penatibus et magnis dis parturient montes.</p>
<a href="#url">Duis nec diam</a>
<a href="#url">Ut sagittis</a>
<a href="#url">Sed a lorem</a>
<a href="#url">Mauris id mi</a>
<a href="#url">Donec sit amet</a>
<a href="#url">Aliquam placerat</a>
</div>
</li>
<li class="p5">
<div>
<h1>Seascapes</h1>
<p>Aenean quis lacus id eros lobortis dapibus sed non nisi.</p>
<a href="#url">Donec fringilla</a>
<a href="#url">Quisque vel</a>
<a href="#url">Duis at magna</a>
<a href="#url">Maecenas rutrum</a>
<a href="#url">Ut iaculis tristique</a>
<a href="#url">Suspendisse</a>
</div>
</li>
</ul>
</div>
</div>
</div> <!-- end of infoa -->
- Simpan template anda dan lihat hasilnya.
Sekian terima kasih trik kali ini.
Sumber : http://lora-malunk.blogspot.com/2012/05/menu-sliding-vertikal-dengan-css.html
Cara Membuat Back To Top Dengan Sub Menu Bag. 2
Cara Membuat Back To Top dengan Sub Menu Navigasi, untuk dapat memasang menu ini silahkan perhatikan tutorial dibawah ini.
1. Login Ke akun bloganda.
2. Setelah itu pilih rancangan Edit HTML.
3. Centang kotak {Expand Template Widget}.
4. Kemudian cari kode </body> dan copy kode dibawah ini sebelum kode </body>.
<!-- zFPmenu lora-malunk START -->
<div id="zfpm_div" style="display:none;">
<div id="zfpm_upperBox"> Place ads, text message, or anything here.
</div>
<ul id="zfpm_ul">
<!-- Your menus start -->
<li><a href="">YOUR MENU 1</a></li>
<li class="dir"><a href="">YOUR MENU 2 (containing submenu)</a>
<ul>
<li class="dir"><a href="">YOUR SUBMENU 2.1 (containing sub-submenu)</a>
<ul>
<li><a href="">YOUR SUB-SUBMENU 2.1.1</a></li>
<li><a href="">YOUR SUB-SUBMENU 2.1.2</a></li>
</ul>
</li>
<li><a href="">YOUR SUBMENU 2.2</a></li>
<li><a href="">YOUR SUBMENU 2.3</a></li>
</ul>
</li>
<li><a href="">YOUR MENU 3</a></li>
<!-- Your menus end -->
</ul></div>
<script type="text/javascript">
var zfpm_colorTheme = 'light'
var zfpm_shareBox = 'no';
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://zfpmenu.googlecode.com/svn/trunk/js/zfpmenu.js"></script>
<!-- lora-malunk.blogspot.com END -->
5. Kemudian Simpan Template anda dan lihat hasilnya.
Sekian,
Cara Membuat Menu Horizontal Keren
Langsung saja berikut caranya :
1. Masuk/login dulu ke www.blogger.com anda.
2. Masuk ke Dashboard - Design - Edit HTML.
3. Kasih centang Expand Widget Templates.
4 . Cari kode ]]></b:skin> (Gunakan Ctrl+F biar cepet).
5. Copy dan Paste kode di bawah ini tepat di atas kode ]]></b:skin>.
/* Ini adalah kode untuk menu aselole - Mulai */6. Setelah itu cari Code dibawah ini :
#menu-asoy {
list-style-type:none; margin:-10px 0 0 0;
padding:0;
}
#menu-asoy li {
float:left;
padding-left:0;
margin:0 0px 0 0;
position:relative;
width:100px;
height:3em;
z-index:100;
background:transparent;
}
#menu-asoy li dl {
position:relative;
top:0;
left:0;
}
#menu-asoy li a, #menu-asoy li a:visited {text-decoration:none;}
#menu-asoy li dd {display:none;}
#menu-asoy li a:hover {border:0;}
#menu-asoy li:hover dd, #menu-asoy li a:hover dd {display:block;}
#menu-asoy li:hover dl, #menu-asoy li a:hover dl {padding-bottom:10px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizx6AOmR7gM8VUVO-n3DNjankzZuGCydJx6YaeCRYql7a_tsWnudEL2iwdU0nAdUQOfWRT8rGQr5Mz_90lJ-ZuVSkKVJS0CxXJ91A4-5HvY5NzmBDoUNME_tP0vGjISG66zkPcRQ5fD2Or/s1600/over.png) no-repeat transparent;
}
#menu-asoy table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
#menu-asoy dl {width: 100px; margin: 0; padding: 0;}
#menu-asoy dt {height:28px; width: 90px; margin:0; padding: 5px 5px 5px 5px; font-size: 17px; color: transparent; text-align:center;}
#menu-asoy dt a, #menu-asoy dt a:visited {display:block; color: #000000;}
#menu-asoy dt a, #menu-asoy dt a:hover {display:block; color: #000000;}
#menu-asoy dd {width: 110px; margin:0; padding:0; color: #000000; font-size: 1em; text-align:left; border-bottom: 1px solid #373737; border-right:
1px solid #373737; border-left: 1px solid #373737;
-webkit-box-shadow: 0px 3px 2px #000000;
-moz-box-shadow: 0px 3px 2px #000000;
box-shadow: 0px 3px 2px #000000;
}
#menu-asoy dd.last {border-bottom:10px solid #6b3d26;}
#menu-asoy dd a, #menu-asoy dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 5px; width:100px;
background:#242424;}
#menu-asoy dd a:hover {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 5px; width:100px; background:#6b3d26;}
#menu-asoy{
width: 100%;
padding-left:0px;
margin:0;
background:url(#) no-repeat center top;
}
/* akhir - Ini adalah kode untuk menu aselole */
<b:section class="main" id="main" showaddelement="no">kemudian ganti dengan kode
<b:section class="main" id="main" showaddelement="yes">7. Klik SAVE TEMPLATE.
8. Masuk ke Dashboard > Design > Page Elements.
9. Klik Add a Gadget.
10. Pilih Gadget baru : HTML/JavaScript.
11. Klik HTML/JavaScript, nanti mucul penampakan seperti ini .
12 Title kosongkan, kemudian Content isi dengan Code di bawah ini:
<div id='menu-asoy'><br/>13. Lalu SAVE TEMPLATE anda.
<ul id='menu-asoy'>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href='http://lora-malunk.blogspot.com/'>Home</a></dt>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href='#'>Arsip</a></dt>
<dd><a href='LinkSubMenu1'>SubMenu1</a></dd>
<dd><a href='LinkSubMenu1'>SubMenu1</a></dd>
<dd><a href='LinkSubMenu1'>SubMenu1</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href='#'>Conten</a></dt>
<dd><a href='LinkSubMenu2'>SubMenu2</a></dd>
<dd><a href='LinkSubMenu2'>SubMenu2</a></dd>
<dd><a href='LinkSubMenu2'>SubMenu2</a></dd>
<dd><a href='LinkSubMenu2'>SubMenu2</a></dd>
<dd><a href='LinkSubMenu2'>SubMenu2</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href=''>Other</a></dt>
<dd><a href='LinkSubMenu3'>SubMenu3</a></dd>
<dd><a href='LinkSubMenu3'>SubMenu3</a></dd>
<dd><a href='LinkSubMenu3'>SubMenu3</a></dd>
<dd><a href='LinkSubMenu3'>SubMenu3</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<br/><br/><br/><br/>
</div>
Semoga berhasil,
Sumber : http://lora-malunk.blogspot.com/2011/09/cara-membuat-menu-horizontal-dengan.html
Cara Membuat Tombol Add Comment Dengan Efek Jquery Slider
Trik kali ini saya akan Membuat Sebuah Tombol Add Comment dengan Efek Jquery
yang sempet di reques oleh temen Blog, Tip ini cocok untuk blog yang
komentarnya banyak, maka pembaca membantu untuk menyeret bagian bawah
untuk diposting komentar. Berikut efek tambahan Jquery slider, yang
efeknya di ambil dari tombol Back To Top atau Kembali ke Atas.
Mari kita simak bersama trik kali ini :
- Masukkan CSS dibawah ini tepat di atas kode </b:skin>.
a.add_comment{text-decoration:none;color:#fff}
.add_comment{float:right;padding:6px 10px;margin:20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;text-align:center;display:inline-block;background:#d43131;background:-moz-linear-gradient(top,#ffaa9a,#f8674b 5%,#d54746);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffa493),color-stop(.03,#f8674b),to(#d54746));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8674b',EndColorStr='#d54746'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8674b',EndColorStr='#d54746')";-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #d1371c;border-bottom:1px solid #9f220d;color:#FFF;text-shadow:0 1px 1px #6f3a02}
.add_comment:hover{background:#c92929;background:-moz-linear-gradient(top,#ff9986,#ee5f43 5%,#d04443);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fa8772),color-stop(.03,#ee5f43),to(#d04443));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee5f43',EndColorStr='#d04443'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee5f43',EndColorStr='#d04443')";border-bottom:1px solid #9f220d}
.add_comment:focus{padding:7px 11px;color:#FFF;text-shadow:0 -1px 1px #894906;border:none;background:#bc2323;background:-moz-linear-gradient(top,#d04443,#ee5f43 95%,#d04443);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#d04443),color-stop(.9,#ee5f43),to(#d04443));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#d04443',EndColorStr='#ee5f43'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#d04443',EndColorStr='#ee5f43')";box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7;-webkit-box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7;-moz-box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7}
- Anda cari kode dibawah:
<b:includable id='comments' var='post'>
- Sisipkan kode dibawah ini tepat bawah kode langkah 2:
<b:if cond='data:blog.pageType == "item"'>Sekian,
<a class='add_comment' href='#comment-form'>Add a comment</a>
<div class='clear' />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$('.add_comment').click(function(){$('html,body').animate({scrollTop:$(".comment-form").offset().top},1000);});</script></b:if>
Sumber : http://lora-malunk.blogspot.com/2011/10/membuat-tombol-add-comment-dengan-efek.html
Cara Membuat Menu Animasi CSS3
Kali ini aku ingin membuat posting mengenai Cara Membuat Menu Animasi CSS3, yang hasilnya akan terlihat seperti gambar disamping.
Yang patut diingat, tidak semua browser support Menu CSS3, untuk melihat tabel browser mana saja yang support dengan CSS3, bisa dilihat di www.findmebyip.com
Pertanyaanya adalah Bagaimana proses diatas bisa sampai terjadi?
Yang perlu anda sisipkan adalah kode CSS3 dan HTML di bawah ini:
<style type="text/css">Masukkan ke Gadget HTML/JavaScript.
.menuqu ul li{display: inline;}
.menuqu1 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #4FCF26; border: 2px solid #fff; list-style: none;
-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);
}
.menuqu2 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #BFDCFF; border: 2px solid #fff; list-style: none;
-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(25deg);-moz-transform:rotate(25deg);-o-transform:rotate(25deg);
}
.menuqu1:hover, .menuqu2:hover{ background: #F0BFFF; color:#ccc;
-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg)
}
</style>
<div class="menuqu">
<ul>
<li class="menuqu1"><a href='http://lora-malunk.blogspot.com'>Home</a></li>
<li class="menuqu2"><a href='URL 1'>Menu1</a></li>
<li class="menuqu1"><a href='URL 2'>Menu2</a></li>
<li class="menuqu1"><a href='URL 3'>Menu3</a></li>
<li class="menuqu2"><a href='URL 4'>Menu4</a></li>
<li class="menuqu1"><a href='URL 5'>Menu5</a></li>
</ul>
</div>
Yang perlu diperhatikan dari kode diatas adalah kode yang berwarna merah, dan angka yang ada disekitarnya.
- angka 0.5s menandakan waktu perubahan dari animasi.
- angka 25deg menandakan rotasi perputaran dari area menu.
- angka 0deg menandakan bentuk akhir dari rotasi perputaran dari area menu.
- untuk huruf menuqu1 dan menuqu2 merupakan kode untuk kondisi dari properti yang telah di tentukan pada kode CSS3-nya.
Sumber : http://lora-malunk.blogspot.com/2011/11/cara-membuat-menu-animasi-css3.html
Cara Mempercantik Banner Iklan Dengan CSS
Dengan mempercantik penampilan banner iklan dengan efek Style BuySellAds
tentu membawakan rejeki kita tambah lancar, karena dari pihak pengiklan
akan senangan melihat iklannya dipercantik dengan efek-efek yang bagus.
Mari kita masuk ke tahap pelajaran :
- Masuk atau login ke akun blogger and.
- Silahkan masuk ke Menu Design atau Rancangan. Lalu Klik Edit HTML.
- Carilah kode ]]></b:skin> (Untuk mempercepat pencarian silahkan anda tekan tombol CTRL-F).
- Setelah menemukan kode diatas, silahkan copy paste kode dibawah ini tepat diatas kode ]]></b:skin>.
<!-- Start Css http://lora-malunk.blogspot.com -->
.bsap a{text-shadow:1px 1px 1px #111 !important;color:#eee !important;padding:7px !important;margin:0 10px 10px 0px !important;overflow: visible !important;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:80px;-webkit-border-bottom-right-radius:80px;-moz-border-radius-topleft:80px;-moz-border-radius-bottomright:80px;border-top-left-radius:80px;border-bottom-right-radius:80px;}
.bsap a:hover{-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;}
.bsap a img{border: 0 none !important;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);padding:3px !important;}
.bsap .even{margin-right:0 !important;}
.bsap .ad1{background:#e42b2b !important}
.bsap .ad2{background:#ff8400 !important}
.bsap .ad3{background:#a800ff !important}
.bsap .ad4{background:#49a7f3 !important}
.bsap .ad5{background:#41d05f !important}
.bsap .ad6{background:#B24700 !important}
.bsap .ad7{background:#FFE500 !important}
.bsap .ad8{background:#007D47 !important}
.bsap .ad9{background:#330000 !important}
.bsap .ad10{background:#990000 !important}
.bsap .ad11{background:#f70000 !important}
.bsap .ad12{background:#80FEC8 !important}
<!-- End Css http://lora-malunk.blogspot.com -->
- Simpan template anda dan lihat hasilnya.
Semoga Trick and Tips kali
ini bermanfaat buat kita semua.
Cara Membuat Tombol Slide Dengan Efek JQuery
Tutorial kali ini saya akan memberikan suatu Trik Cara Membuat Tombol Slide Dengan Efek Jquery. Trik ini sangat menarik sekali kalau kita terapkan kedalam blog, karena sedikit banyak akan memperindah penampilan blog anda.
Mari kita simak trik kali ini, dan langkah pertama yang harus anda lakukan adalah :
- Arahkan tombol ke "Desain / Rancangan".
- lalu tekan "Edit HTML".
- Cari kode ]]></b:skin>.
- Copy dan Pastekan kode dibawah ini tepat di atas kode ]]></b:skin>.
#panel {
background: #D3D3D3;
height: 190px;
color:#000;
display: none;
margin-top:15px;
}
.slide-panel {
margin: 0;
padding: 0;
border-top: solid 0px #422410;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizVnbZa2UZu6i6l8BeXHb0866aPgOLkfO9-KD3z_bouzMMb0cjfvcGo1SHdcNsoUTOm5xlaqF51cYz2Ac5S26kw7YqGV10didHTM8sow2jaN0ujs-BqF3Y7P_FiAnuyoCWTLG99ZPbsA0C/s144/orange-slide.png) no-repeat center top;
}
.btn-slide {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrsh2CQxF9nhiZcF2GHXdLFud_96VGlE1U6X75cg_NdK6WrVdV3qcRhFC0b-e4SibaAhr-OWOgowF5HQNghPyGY869gvdPpvfdsDUOwxBVkyRDNa5TeOEn8t1ACVghB1BScv__FiCLTpbR/s800/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 8px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
- Berikutnya anda cari code </head>.
- Copy Paste kode dibawah ini tepat di atasnya kode .
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
- Sekarang tugas anda adalah memasukkan kode dibawah ini. Dengan kemauan anda di mana saja dalam template Anda, atau tambah widget dan dalam post editor. Sesuka anda.
<div id="panel">
YOUR CONTENT HERE</div>
<div class="slide-panel">
<a href="#" class="btn-slide">Slide Panel</a>
</div>
- Jangan lupa untuk mengganti tulisan YOUR CONTENT HERE dengan isi conten yang anda mau masukkan kedalam tombol slide dan terakhir Simpan template anda dan lihat hasilnya, SEMPURNA
Catatan: Anda dapat mengganti kode yang berwarna hijau dengan warna sesuka anda untuk mengubah latar belakang panel. Demikian pula, warna teks dengan memvariasikan kode yang berwarna pink. Untuk mengubah ketinggian panel, bervariasi kode yang berwarna Biru. Anda juga dapat mengubah warna dari tombol geser dengan memvariasikan URL dengan warna merah. Kami telah menyediakan enam tombol yang berbeda di bawah ini. Pilih satu dari slot yang menarik bagi Anda!
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRxwp3sN6u_lxOFAfDfVfEnytUM_xOprgxXd6jFYKac6f5Cl0F8E5DLDeRLuy0GVJKSXoM8AAWONd8gnJ1q8pRQXZcp0Oc6f5B63GL6n1Iu2lAzuyIQKE7sMxUTyZ_UGosfjdOtoxdpjP0/s1600/blue-slide.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXJ4h_a1wW-BnObp5MZDcLmPD0PmQxlGMRWwreb-oj8Pdt4l23DAHYUoyMehT8uMofAgIwdEM2d88RAB95f-W5qqd5gge_yE4gec-kmhFyPbT22q8FX6fcPT_rxFim2U7XflkKO04c7Zu9/s1600/orange-slide.png
Cara Membuat Galeri Foto Melingkar Dengan Jquery
Plugin ini benar-benar keren
Anda dapat membuat lingkaran dari elemen html banyak yang Anda
didefinisikan, yang berarti Anda tidak harus membuat formula untuk
mengatur semua posisi elemen untuk membuat bentuk lingkaran.
Mari kita langsung Ke TKP :
- Anda Cukup Copy Paste Kode dibawah ini, Terserah anda mau ditaru dimana di postingan juga bisa di widget (HTML/JavaScript) juga bisa.
<!DOCTYPE html>Sekian semoga bermanfaat,
<html>
<head>
<title>JQuery Circle Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript" src="jQuery.radmenu.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
var posc = $("#radial_container").position();
var left = $(window).width() / 2;
if ($.browser.opera) {
$("#big").css({"left": left - 122, "top": posc.top - 13});
} else {
$("#big").css({"left": left - 122, "top": posc.top + 3});
}
jQuery("#radial_container").radmenu({
listClass: 'list',
itemClass: 'item',
radius: 220,
animSpeed:800,
centerX: 0,
centerY: 150,
selectEvent: "click",
onSelect: function($selected) {
var imgindex = $selected.index() + 1;
$(".my_class").removeClass("selected");
$(".img"+imgindex).addClass("selected");
$("#big").css("background-image", "url('images/"+imgindex+".jpg')");
},
angleOffset: 0
});
jQuery("#radial_container").radmenu("show");
});
</script>
<style>
body{
background: #f3f3f3;
}
#radial_container {
position:relative;
margin: 0 auto;
top: 80px;
height: 20px;
width: 20px;
}
.radial_div_item {
}
.radial_div_item.active {
z-index: 100;
}
.my_class {
cursor: pointer;
height: 75px;
width: 75px;
border: 5px solid #333;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius: 45px;
-webkit-box-shadow: 1px 1px 10px rgba(0,0,0,.5);
-moz-box-shadow: 1px 1px 10px rgba(0,0,0,.5);
box-shadow: 1px 1px 10px rgba(0,0,0,.5);
position: relative;
text-align: center;
font-size: 12px;
font-weight: bold;
font-family: "Arial";
}
.my_class:hover {
border-color: #0066cc;
}
.my_class:active {
-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
-moz-box-shadow: 1px 5px 1px rgba(0,0,0,.5);
box-shadow: 1px 1px 5px rgba(0,0,0,.5);
top: 2px;
border-color: #e3e3e3;
}
.img1 { background-image: url("images/thumbs/1.jpg"); }
.img2 { background-image: url("images/thumbs/2.jpg"); }
.img3 { background-image: url("images/thumbs/3.jpg"); }
.img4 { background-image: url("images/thumbs/4.jpg"); }
.img5 { background-image: url("images/thumbs/5.jpg"); }
.img6 { background-image: url("images/thumbs/6.jpg"); }
.img7 { background-image: url("images/thumbs/7.jpg"); }
.img8 { background-image: url("images/thumbs/8.jpg"); }
.img9 { background-image: url("images/thumbs/9.jpg"); }
.img10 { background-image: url("images/thumbs/10.jpg"); }
.selected {
border-color: #0066cc;
}
#big {
position: relative;
border: 5px solid #0066cc;
width: 300px;
height: 300px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border-radius: 200px;
-webkit-box-shadow: 1px 1px 10px rgba(0,0,0,.5);
-moz-box-shadow: 1px 1px 10px rgba(0,0,0,.5);
box-shadow: 1px 1px 10px rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div id="radial_container">
<ul class="list">
<li class="item"><div class="my_class img1"></div></li>
<li class="item"><div class="my_class img2"></div></li>
<li class="item"><div class="my_class img3"></div></li>
<li class="item"><div class="my_class img4"></div></li>
<li class="item"><div class="my_class img5"></div></li>
<li class="item"><div class="my_class img6"></div></li>
<li class="item"><div class="my_class img7"></div></li>
<li class="item"><div class="my_class img8"></div></li>
<li class="item"><div class="my_class img9"></div></li>
<li class="item"><div class="my_class img10"></div></li>
</ul>
</div>
<div id="big"></div>
</body>
</html>
Sumber : http://lora-malunk.blogspot.com/2011/10/membuat-galeri-foto-melingkar-dengan.html
Langganan:
Postingan (Atom)
