Cara Memper Cantik Banner Iklan (Style BuySellAds)

Memper Cantik Banner Iklan Dengan (Style BuySellAds) - Saya yakin Anda semua akan memperhatikan efek yang saya pasang ke banner iklan saya. Efeknya sangat mengagumkan dan membawa perhatian disetiap ada pengunjung melihat penampilan iklan di Lora Malunk Blog.

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. Seperiti (Style BuySellAds). Jika anda melihat demonya anda lihat penampilan Iklan Saya yang ada di sebalah kanan.

Mari kita masuk ke tahap pelajaran :

Langkah 1
Masuk atau login ke akun blogger anda

Langkah 2
Silahkan masuk ke Menu Design atau Rancangan. Lalu Klik Edit HTML.

Langkah 3
Carilah kode ]]></b:skin> (Untuk mempercepat pencarian silahkan anda tekan tombol CTRL-F)

Langkah 4
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 -->

Langkah 5
Simpan template anda dan lihat hasilnya. OKE

Semoga Trick and Tips kali ini bermanfaat buat kita semua. Dan Jangan lupa untuk berlangganan artikel kami silahkan masukkan email anda dibawa ini. Anda akan mendapatkan Artikel terbaru dari saya dengan gratis. Tidak Dipunggut biaya. Ilmu sudah gratis, Mau langganan artikel saya juga gratis. Kenapa harus diperhitungkan. Mari kita lestarikan saling berlangganan agar tidak ada copy paste artikel tanpa sepengetahuan admin.

Cara Membuat Menu JQuery Accordion

Semangat buat berbagi Tips And Trik Blog ke sahabat blogger mania, Kali Lora Malunk Blog akan berbagi trik mengenai Membuat Menu  JQuery Accordion ini menggunakan kode javascript yang sangat sederhana sekali.

Tips ini akan membantu membangkitkan efek jQuery meciptakan sebuah fungsi indah dengan dibantu kode css yang menjadi pilar hingga terbentuk desain yang sangat menarik sekali.

Untuk Melihat Hasil Yang sudah Terjadi Silahkan Klik : D E M O

Mari kita memasuki tahap pembelajaran :

Langkah 1

Cari kode ]]></b:skin> pada "Edit Template"

Langkah 2

Copy Paste kode javascript dibawa ini dan letakkan di bawah kode ]]></b:skin>

<script type="text/javascript">
$(document).ready(function(){
$('.wadah').hide();
$('.sedul:first').addClass('active').next().show();
$('.sedul').click(function(){
if( $(this).next().is(':hidden') ) {
$('.sedul').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
return false;
});
});
</script>

Langkah 3
Memasukkan kode CSS dibawah ini tepat di atas kode ]]></b:skin>

.boxtama {
background:#333;
width: 220px;
margin: 0 auto;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
border-top:3px solid #777;
font-size:12px;
}
.boxtama .wadah {
margin: 0 0 5px 2px;
padding: 0;
overflow: hidden;
font-size: 16px;
width: 214px;
clear: both;
background: #bbb;
border: 1px solid #d6d6d6;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.boxtama .wadah .anakwadah {
padding:15px 8px 10px;
}
.boxtama .wadah .anakwadah p {
padding: 5px 0;
margin: 5px 0;
font:12px normal;
color:#000;
}
.boxtama .wadah h3 {
font: 18px normal Georgia;
margin: 0 0 10px;
padding: 0 0 5px 0;
border-bottom: 1px dashed #ddd;
color: #993333;
}
.boxtama .wadah img {
float: left;
margin: 10px 8px 0px 0;
padding: 3px;
background: #ddd;
border: 1px solid #444;
width:60px;
height:60px;
}
.boxtama .wadah .anakwadah ul {
padding:0;
margin:0;
list-style:none;
}
.boxtama .wadah .anakwadah li {
background:url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/miniArrow-gubhugreyot.png) top left no-repeat;
background-position:5px 5px;
list-style:none;
margin:0px;
padding:0px;
border-bottom:1px dotted #999;
transition:0.4s;
-o-transition:0.4s;
-moz-transition:0.4s;
-webkit-transition:0.4s;
}
.boxtama .wadah .anakwadah li:hover{
background:url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/miniArrowHov-gubhugreyot.png) top left no-repeat;
background-position:10px 5px;
}
.boxtama .wadah .anakwadah li a {
font-family:Trebuchet MS;
padding:0 0 0 25px;
font-size:11px;
color:#222;
font-weight:500;
text-decoration:none;
}
.boxtama .wadah .anakwadah li a:hover {
color:red;
}
h4.sedul {
padding: 0;
margin: 0 0 5px 0;
background: #666 url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/bgOrangeV34H2-gubhugreyot.gif) bottom left repeat-x;
height: 36px;
line-height: 36px;
width: 220px;
font-size: 14px;
font-weight: bold;
float: left;
}
h4.sedul:hover { /* hor.png */
padding: 0;
margin: 0 0 5px 0;
background:#660000 url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/bgFadeBlue-gubhugreyot.png) left center no-repeat;
background-position:-1px 0;
border-right:1px solid #999;
}
h4.sedul a {
background: url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/ArrowRedRight-gubhugreyot.png) left center no-repeat;
background-position:8px 5px;
border-left:2px solid #fff;
border-right:2px solid #fff;
font-family:Droid Serif;
font-size:14px;
color:/*silver*/ #003366;
text-decoration: none;/*opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50); */
display: block;
padding: 0 0 0 45px;
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
h4.sedul a:hover {
background:#000 url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/ArrowRightDownAnima-gubhugreyot.gif) left center no-repeat;
background-position:8px 5px;
color:red;
text-shadow:0px 1px 1px #888;
opacity:1.0;
filter:alpha(opacity=100);
}
h4.active {
background:url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/bgblueV35H1-gubhugreyot.gif) top left repeat-x;
}

Langkah 4

Melanjutkan dengan mencari kode <head> . Letakkan kode Jquery dibawah ini tepat diatasnya kode . <head>

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

Langkah 5

Simpan Template / (Save Template)

Langkah 6

Masuk ke menu Rancangan Add Gadget "HTML/Javascript"

Langkah 7

Lalu Copy paste kode dibawah ini, ke kolom "HTML/JavaScript"

<div style="float:left;background:#111;padding:3px;border:2px solid #666;">

<div class="boxtama"><h4 class="sedul"><a class="pilih" href="#">Theme - Template</a></h4>
<div class="wadah">
<div class="anakwadah">
<h3>Tutorial Blog Up To Date</h3>
<ul class="accor">
<li><a href="http://lora-malunk.blogspot.com/2012/03/membuat-related-posts-slide-out-boxez.html" target="_blank">Membuat Related Posts</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/mempercantik-tampilan-entri-popular-new.html">Modifikasi Entri Populer</a></li>
<li><a href="http://lora-malunk.blogspot.com">Tips And Trik Blog</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/membuat-google-custom-seacrh-sendiri.html" target="_blank">Membuat Google Custom</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/membuat-foto-menjadi-teks.html">Foto Menjadi Teks</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/cara-memanggil-robot-mbah-google-ke.html">Memanggil Robot Google</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/cara-mengatasi-feedburner-yang-error.html" target="_blank">Tips Feedburner Eror</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/membuat-slide-show-foto-dengan-efek.html">Membuat Slide Show</a></li>
<li><a href="http://lora-malunk.blogspot.com">Lora Malunk Blog</a></li>
</ul>
</div>
</div></div></div>

Catatan Akhir :

- Ganti URL yang saya cetak tebal dan berwana merah dengan URL Artikel Anda.

- Untuk merubah lebar kolom (width) : Anda harus merubah kode dibawah ini dan angka tersebut mempunyai selisih 6px dengan yang di atas dan di bawahnya:

.boxtama {
width: 220px;

.boxtama .wadah {
width: 214px;

h4.sedul {
width: 220px;

Silahkan dibaca juga Tutorial yang lain yang sangat menarik dan patut dipelajari bersama. Melalui link di bawah ini:

Membuat Slide Show Foto Dengan Efek Jquery

Cara Update Status Dengan Simbol Lucu

Membuat Related Posts Slide Out Boxez

Berhubung postingan kali ini ada permintaan dari sahabat blogger yang melalui email, karena fitur ini berasal dari Tympanus dan di tutorial tersebut tidak penjelasan yang sangat relefan bagaimana cara menerapkan dan memperaktekkan trik ini di Blogger jadi disini saya akan membahas bagaimana Cara Membuat Related Posts Slide Out Boxes di Blogger.

Baiklah, tips kali ini related posts harus kita edit secara manual, Berikut screenshot dari Tympanus dan DEMO.

LANGKAH 1
Masuk ke Menu Template/Rancangan > Edit Html

LANGKAH 2
Cari kode <b:skin> dan letakan kode CSS berikut diatas kode <b:skin>

<link href="http://tympanus.net/Tutorials/RelatedPostsSlideOuts/css/style.css" media="screen" rel="stylesheet" type="text/css"></link>

LANGKAH 3
Selanjutnya cari Kode </body> dan letakan kode JavaScripts berikut tepat diatas kode </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script>//<![CDATA[
$(function() {
/**
* the list of posts
*/
var $list = $('#rp_list ul');
/**
* number of related posts
*/
var elems_cnt = $list.children().length;

/**
* show the first set of posts.
* 200 is the initial left margin for the list elements
*/
load(200);

function load(initial){
$list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px');
var loaded = 0;
//show 5 random posts from all the ones in the list.
//Make sure not to repeat
while(loaded < 5){
var r = Math.floor(Math.random()*elems_cnt);
var $elem = $list.find('li:nth-child('+ (r+1) +')');
if($elem.is(':visible'))
continue;
else
$elem.show();
++loaded;
}
//animate them
var d = 200;
$list.find('li:visible div').each(function(){
$(this).stop().animate({
'marginLeft':'-50px'
},d += 100);
});
}

/**
* hovering over the list elements makes them slide out
*/
$list.find('li:visible').live('mouseenter',function () {
$(this).find('div').stop().animate({
'marginLeft':'-220px'
},200);
}).live('mouseleave',function () {
$(this).find('div').stop().animate({
'marginLeft':'-50px'
},200);
});

/**
* when clicking the shuffle button,
* show 5 random posts
*/
$('#rp_shuffle').unbind('click')
.bind('click',shuffle)
.stop()
.animate({'margin-left':'-18px'},700);

function shuffle(){
$list.find('li:visible div').stop().animate({
'marginLeft':'60px'
},200,function(){
load(-60);
});
}
});
//]]></script>

LANGKAH  4
Sekarang letakan struktur HTML ini juga diatas kode </body>

<li>
<div>
<img height='72' width='72' alt='JUDUL IMG' src='URL-IMAGE'/>
<span class='rp_title'>JUDUL POST</span>
<span class='rp_links'>
<a href='LINK ARTIKEL ANDA' target='_blank'>Tutorai Blog</a>
<a href='LINK DEMO' target='_blank'>Tips and Trik</a>
</span>
</div>
</li>

Anda bisa menambahkan beberapa struktur minimal 5. Dalam JavaScript mendefinisikan bahwa hanya menampilkan 5 posting, Anda harus mengganti teks berwana dan di cetak tabal dengan link posts, link image dan judul.


LANGKAH 5
Simpan Template anda


Sekian Terima Kasih

Cara Membuat Menu Animasi CSS3

Kali ini aku ingin membuat posting mengenai Cara Membuat Menu Animasi CSS3, yang hasilnya akan terlihat seperti gambar disamping, sebelumnya aku pernah membuat postingan Membuat Menu Dropdown dengan CSS3 dimana dalam postingan tersebut, kita bisa langsung mengenerate kode CSS3 dari bentuk yang kita inginkan.

Akan tetapi 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">
.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>

Masukkan ke Gadget HTML/JavaScript

Yang perlu diperhatikan dari kode diatas adalah kode yang berwarna merah, dan angka yang ada disekitarnya.

1. angka 0.5s menandakan waktu perubahan dari animasi
2. angka 25deg menandakan rotasi perputaran dari area menu
3. angka 0deg menandakan bentuk akhir dari rotasi perputaran dari area menu
4. untuk huruf menuqu1 dan menuqu2 merupakan kode untuk kondisi dari properti yang telah di tentukan pada kode CSS3-nya

Membuat Menu Chunky CSS3

Menu adalah bagian dari yang terpenting bagi pembuatan web atau blog. tanpa menu jangan harap web atau blog anda disegani oleh pengunjung. Maka dari itu kami akan memberikan suatu cara atau trik Membuat Menu Chunky CSS3 dengan menu tersebut web atau blog anda sedikit banyak terbantu. Akan tetapi sebelum anda melakukan trik tersebut, alangkah baiknya anda lihat dulu demo, agar tau bentuk dan model menunya seperti apa.

D E M O

Setelah anda melihat demonya, kalau anda tertarik dengan Menu Chunky CSS3 saya akan memberikan triknya berikut ini :

Langkah 1

Silahkan Copy Code Css Di bawah ini dan Letakan Di atas Code ]]></b:skin>

#top_navigation {
background : transparent;
width: 800px;
height : 77px;
list-style : none;
margin-top : 7px;
margin-bottom : 11px;
width : 100%;
}
ul.nav {
background : transparent;
width: 800px;
height : 57px;
line-height : 31px;
list-style : none;
padding : 0 10px;
font-size : 14px;
}
ul.nav li {
display : inline;
padding : 0;
background : transparent;
}
ul.nav a {
background : transparent;
height : 30px;
font-size : 16px;
color : #808080;
float : left;
padding : 11px 19px 11px 16px;
text-decoration : none;
border-top: 1px solid #252525;
border-bottom : 4px solid #252525;
border-left : 1px solid transparent;
border-right : 1px solid transparent;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}
ul.nav a:hover {
background : #252525;
border-top : 1px solid #252525;
border-bottom : 4px solid #000;
border-left : 1px solid #252525;
border-right : 1px solid #252525;
color : #FFF;
padding : 11px 19px 11px 16px;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}

Langkah 2
Simpanlah Templates anda yang baru saja ditambahkan CSS3

Langkah 3
Copy Code HTML Di bawah ini dan Letakan Di Add Gadget ->> HTML/Javascript

<div id="top_navigation">
<ul class="nav">
<li><a href="#"> Home </a></li>
<li><a href="#"> Your Blog </a></li>
<li><a href="#"> About You </a></li>
<li><a href="#"> More stuff </a></li>
<li><a href="#"> Contact </a></li></ul></div>

Langkah 4
Sampai disini dulu trik kali ini selamat mencoba

Membuat Galeri Foto Dengan CSS

Siang ini saya akan memberikan suatu Trik and Tip yang sangat sederhana meskipun cuacanya agak panas. tapi semangat untuk berbagi kesahabat blogger tetap berjalan sebagaimana mestinya.

Nah Trik kali ini Cara Membuat Galeri Foto dengan CSS, Mungkin ada sahabat yang masih belum tau bagaimana cara membuatnya. Santai...Santai....Santai (Kata Bung Rhoma) Lora Malunk Akan memberikan Trik dan Tipnya.

Lihat Dulu dan di teliti Cewek-cewek dibawah ini. ada yang menarik. Silahkan Diklik Fotonya.

Kumpulan Foto Dian Pelangi

Dian Pelangi Artis Model

Kumpulan Foto Nabila Syakieb

Foto Terbaru Aura Kasih

Kalau Sudah Melihat DEMONYA, Langsung saja :

Langkah 1
Copy Paste Kode dibawah ini ke Gadget (HTML/JavaScript), Bisa juga di pasang ke dalam Postingan.

<html>
<head>
<style type="text/css">
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
</style>
</head>
<body>

<div class="img">
<a target="_blank" href="Lora-malunk_big.htm">
<img src="klematis_small.jpg" alt="loramalunkblog" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="Lora-malunk_big.htm">
<img src="klematis2_small.jpg" alt="loramalunkblog" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="Lora-malunk_big.htm">
<img src="klematis3_small.jpg" alt="loramalunkblog" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="Lora-malunk_big.htm">
<img src="klematis4_small.jpg" alt="loramalunkblog" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

Langkah 2
Ingat...! Jangan asal Copy Paste dibaca dan diteliti dulu sebelum anda melakukan Trik ini.

Langkah 3
Tulisan yang saya cetak TEBAL anda ganti
1. Yang Berwarna Hitam : Ganti dengan URL Iklan/Postingan anda
2. Yang Berwarna Biru : Ganti dengan URL Gambar
3. Yang Berwarna Merah : Ganti description sesuka anda

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 :

Langkah 1
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}

Langkah Selanjutnya 2
Anda cari kode dibawah

<b:includable id='comments' var='post'>

Langkah 3
Sisipkan kode dibawah ini tepat bawah kode langkah 2:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>

Cara Membuat Tombol Red More Sederhana

Trik kali ini sangat simpel, praktis dijamin pasti cantik dan keren Cara Membuat Tombol Red More Sederhana. Langsung saja menuju ke TKP.

Langkah 1
Login ke dashboard>> desain>> edit HTML>> periksa model utilitas ekspansi. Cari baris berikut:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>


Langkah 2
Ganti semua di kode yang atas dengan kode dibawah ini:

<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>&#272;&#7885;c ti&#7871;p</a><b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>&#272;&#7885;c ti&#7871;p</a>
</b:if></b:if><div class='clear'/>


Langkah 3
Masukkan Kode CSS dibawah ini tepat di atas kode </b:skin>


a.jump-link {color:#fff;text-decoration:none}

.jump-link {
float:right;
padding:6px 12px;
margin:20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
display:inline-block;
background: #f48423;
background: -moz-linear-gradient(top, #ffdf9e, #f5b026 5%, #f48423);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffd683), color-stop(.03, #f5b026), to(#f48423));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5b026', EndColorStr='#f48423'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5b026', EndColorStr='#f48423')"; /* IE8 only */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border:1px solid #e6791c;
border-bottom:1px solid #d86f15;
color:#FFF;
text-shadow: 0 1px 1px #6f3a02; }

.jump-link:hover {
background: #eb7d1d;
background: -moz-linear-gradient(top, #ffdf9e, #f1a91a 5%, #f07810);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffdf9e), color-stop(.03, #f1a91a), to(#f07810));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1a91a', EndColorStr='#f07810'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1a91a', EndColorStr='#f07810')"; /* IE8 only */
border-bottom:1px solid #d86f15; }

.jump-link:focus {
padding:7px 13px;
color:#FFF;
text-shadow: 0 -1px 1px #894906;
border:none;
background: #e47412;
background: -moz-linear-gradient(top, #f07810, #f1a91a 95%, #f07810);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f07810), color-stop(.9, #f1a91a), to(#f07810));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f07810', EndColorStr='#f1a91a'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f07810', EndColorStr='#f1a91a')"; /* IE8 only */
box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7;
-webkit-box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7;
-moz-box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7; }


Langkah 4
Simpan Templates anda dan lihat hasilnya sangat sempurna.

THANK'S YOU

Daftar Situs Penyedia Pembuatan Menu CSS Gratis

Keuntungan besar Membuat Menu CSS adalah bahwa: (1) sangat estetika, dan memberikan Anda sebuah situs terlihat profesional, (2) umumnya sangat ringan, (3) yang mudah untuk ditambahkan, (4) dan bisa cocok di mana saja. Selain itu, kami menemukan berbagai besar dari mereka secara gratis. Di sini saya membuat Sembilan (9) Daftar Situs Penyedia Pembuatan Menu CSS Gratis:

13 STYLES

CSS MENU BUILDER

CSS MENU MAKER

DYNAMIC DRIVE

CSS PLAY 

CSS PORTAL

EXPLODING BOY

IZZY MENU

STYLED MENUS

Semoga Daftar Situs Penyedia  Pembuatan Menu CSS ini, Bermanfaat buat kita semua. sukses selalu.

Membuat Menu Dropdown dengan CSS3

Kali saya akan memberikan cara membuat menu dropdown dengan css. Menu Dropdown ini sangat menarik sekali karena murni memakai CSS tidak ada tambah code.

D E M O

Mari kita simak bersama-sama trik kali ini.

Langkah 1
Index. HTML

<div class="wrapper">
<ul>
<li id="a"><a href="#a">Web Design</a>
<div>
<hr/><b>HTML:</b> <a href="#">Tutorials</a> | <a href="#">Resources</a>
<hr/><b>CSS:</b> <a href="#">Tutorials</a> | <a href="#">Examples</a>
<hr/><b>CMS:</b> <a href="#">Drupal</a> | <a href="#">Wordpress</a>
</div>
</li>
<li id="b"><a href="#b">Graphic Design</a>
<div>
<hr/><b><a href="#">Printmaking</a></b>
<hr/><b><a href="#">Visual Arts</a></b>
</div>
</li>
<li id="c"><a href="#c">Animation &amp; Graphics</a>
<div>
<hr/><b>2D Animation:</b><br /> <a href="#">Analog animation</a> | <a href="#">Flash animation</a>
<hr/><b>3D Animation:</b><br /> <a href="#">Motion capture</a> | <a href="#">Photo realistic</a>
</div>
</li>
<li id="d"><a href="#d">Design Resources</a>
<div>
<hr/><b><a href="#">w3schools.com</a></b>
<hr/><b><a href="#">alistapart.com</a></b>
<hr/><b><a href="#">smashingmagazine.com</a></b>
</div>
</li>
</ul>
</div>

Langkah 2
Index. CSS

.wrapper {
width: 600px;
position: absolute; }
.wrapper ul {
list-style: none; }
.wrapper ul li {
background-color: #F8F8F8;
border: 1px solid #a9a9a9;
display: block;
float: left;
font: bold 12px arial;
height: 30px;
line-height: 30px;
overflow: hidden;
padding-left: 15px;
position: absolute;
width: 135px;
z-index: 10000;
-webkit-box-shadow:0px 3px 5px #cacaca;
-moz-box-shadow:0px 3px 5px #cacaca;
box-shadow:0px 3px 5px #cacaca;
background: linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);}
.wrapper ul li:hover {
background: linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);}
.wrapper ul li:first-child {
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px; }
.wrapper ul li:last-child {
-moz-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0; }
.wrapper ul li#b {
margin-left: 151px; }
.wrapper ul li#c {
margin-left: 302px; }
.wrapper ul li#d {
margin-left: 453px; }
.wrapper ul li a {
display: block;
text-decoration: none;
color: #303030; }
.wrapper ul li div {
text-align: left;
font: normal 11px arial;
line-height: 19px;
margin: 10px 0; }
.wrapper ul li div a {
display: inline; }
.wrapper ul li div a:hover {
text-decoration: underline; }
.wrapper ul li div hr {
border: none;
border-top: 1px dotted #a0a0a0;
margin: 5px 0;
width: 95%; }
.wrapper ul li:hover:target {
display: inherit;
padding: 0px;
padding-left:15px;
opacity: .97;
-moz-opacity: .97;
-webkit-transition: height 0.4s ease-in; }
.wrapper ul li#a:hover:target {
height: 130px;
width: 350px;
background: #f0f9ff; }
.wrapper ul li#b:hover:target {
height: 105px;
background: #ffffd6; }
.wrapper ul li#c:hover:target {
height: 145px;
width: 200px;
background: #f8ffe8; }
.wrapper ul li#d:hover:target {
height: 140px;
width: 165px;
position: relative;
float: right;
margin-right: -5px;
z-index: 0;
text-align: center;
background: #f9f286; }

Cara Membuat Menu Horizontal Dengan Model Aselole

1. Masuk/login dulu ke www.blogger.com dengan akun masing2.
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 */
#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/AVvXsEi9Ij1XRMnLuEjvLjuwnO88kOQUZE0sWn6psj9HFsRA4P9BYLI4HiRmPmcEweiBYSZ6tVxiM-EzvD7PNcomrzdcdMFKkrBPxf1X2U9jkSFC-mJCR3xDjJQqyJwtq8MAEoHM9MPddt_bo4lv/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 */

6. Setelah itu cari Code dibawah ini

<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/>
<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>

13. Lalu SAVE TEMPLATE anda.

SEMPURNA......

Cara Membuat Back To Top Dengan Sub Menu

Cara Membuat Back To Top dengan Sub Menu Navigasi, untuk dapat memasang menu ini silahkan perhatikan tutorial dibawah ini.

1. Login Ke akun blog masing-masig

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 100%

Cursor Following Menu

LIVE DEMO

DOWNLOAD

Sebuah menu navigasi website yang mengikuti kursor, dibuat dengan kerangka jQuery dan CSS yang mudah untuk menerapkan dan mengkonfigurasi.

Gagasan di balik script adalah untuk menciptakan sebuah navigasi mengambang yang mengikuti kursor yang bergerak di seluruh halaman. Tujuannya adalah untuk membuat menu itu sendiri seminimal mungkin dengan animasi "rahasia" mengambang untuk menghindari penonjolan diri dan membantu kegunaan. Hasil akhirnya fitur markup sederhana, dua tingkat navigasi dan gaya melalui css. Sebuah fitur tambahan termasuk dalam plugin adalah fungsi yang menjiwai halaman untuk jangkar poin yang dapat Anda uji pada demo satu halaman.

Bagaimana menggunakannya

Di dalam tag kepala dokumen Anda melampirkan stylesheet menu (malihu.cfm.css) yang memegang gaya untuk menu dan beban baik jquery.min.js (langsung dari Google) dan jquery.easing.1.3.js plugin yang menambahkan kustom meringankan untuk animasi kita. 

• Di dalam tag body, masukkan markup menu
• Anda dapat memiliki sub single-level pada pilihan menu dengan menambahkan daftar unordered tambahan di dalam daftar item. 
• Tambahkan script menu dan plugin di akhir dokumen, tepat sebelum tag penutup tubuh. 
• Anda dapat dengan mudah mengkonfigurasi menu dengan mengubah variabel masing-masing sesuai dengan keinginan Anda.

Membuat Back To Top Dengan Css

Back To Top mungkin hampir semua sobat blogger sudah mengenalinya. Tools yang satu ini memang bisa dibilang dapat menyamankan para pengunjung blog kita karena dengan adanya tools ini maka apabila pengunjung blog sedang berada di paling bawah blog maka hanya dengan mengklik tombol Back To Top ini pengunjung dapat dengan mudahnya langsung kembali ke atas.

Sekarang Langsung Saja Ke Tutorialnya :

1. Login Ke Blogger

2. Lalu Masuk Ke Tata Letak Atau Rancangan >> Edit HTML

3. Setelah Itu Sobat Harus mencari kode ]]></b:skin> Di Halaman Edit HTML Sobat Lalu tambahkan kode di bawah ini tepat di atasnya.

#csstop {

overflow: hidden;

float:right;

width:50px;

height:50px;

clear:both;

}

4. Setelah itu cari kode </body> lalu tambahkan juga kode yang ada di bawah ini tepat di atasnya.

<a id="csstop" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-9teLTcOhL3gmfeOuKNXFKVh8zWWaAWHDxmYFseNFymQcZHEyc77bbVCbT2UOHUi-v7w9Apiizssm3fvjG4dKNbUIXhgzCFbF-FigTc1vzW7r7uCt7ArPbptHuHOJ7wK1hKkJ67ZxSZ8/s400/1280228738_Upload.png" alt="lora-malunk.blogspot.com"/></a>

5. Setelah itu sobat dapat menyimpannya kembali teamplate yang sudah di pasang Back To Top Css.