Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

Wednesday, February 13, 2013

Add Social Media Share Widget To Blogger With Cool Hover Effect

Posted by at 4:10 AM · 0 comments



crtl  +  f  ]]></b:skin>

/*  -------------ScriptJabbers Social Share Widget----------------- */ 
#search{width:350px; border:1px solid #E0DFD9;background:urlundefined(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQoBEmCww6zy0uyh3tej3I5Xgh5wUeok4GKZj_Gl_E7o3jAf6NCZIiiibv4DA_r8WVYjq4BeGJOCBYxzCUBRNjPtpM0-1mm1drJQzMblmgTCbBgi8E_Bfs5G9-6k-Sb9d93KS4BshGwLg/s1600/search-bg.png) left top repeat-x;height:32px;padding:0;text-align:left;overflow:hidden} 
#search #s{width:80%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left} 
#search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px} 
#search-wrap{padding:15px 0} 
.topsearch #search{margin-top:0;margin-bottom:10px}
.social-connect-widget{background:#FFF;border:1px solid #E7E6DE;padding:10px} 
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#F5F4EF} 
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E} 
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04} 
.social-connect-widget img{vertical-align:middle;margin-right:5px}

HTML

<div class='topsearch'> 
<div class='clerfix' id='search'> 
<form action='/search' id='searchform' method='get'> 
<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search here...&quot;;}' onfocus='if (this.value == &quot;Search here...&quot;) {this.value = &quot;&quot;}' type='text' value='Search here...'/> 
<input class='search-image' src='http://i1304.photobucket.com/albums/s526/aditya29best/Widget%20Create/search_zpsa5bb4010.png' title='Search' type='image'/> 
</form> 
</div> 
</div> 
<div style='clear:both;'/>
<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'> 
<a expr:href='data:blog.homepageUrl   &quot;feeds/posts/default&quot;'><img alt='RSS Feed' src='http://i1304.photobucket.com/albums/s526/aditya29best/Widget%20Create/social-connect-rss_zpsb476b1b8.png' title='RSS Feed'/></a><a expr:href='data:blog.homepageUrl   &quot;feeds/posts/default&quot;'>Subscribe to our RSS Feeds!</a> 
</div> 

<div class='social-connect-widget' style='margin-bottom:10px;'> 
<a href='http://twitter.com/USERNAME'><img alt='Follow Us on Twitter!' src='http://i1304.photobucket.com/albums/s526/aditya29best/Widget%20Create/social-connect-twitter_zpsd7b1aef5.png' title='Follow Us on Twitter!'/></a><a href='http://twitter.com/USERNAME'>Follow Us on Twitter!</a> 
</div>
<div class='social-connect-widget' style='margin-bottom:10px;'> 
<a href='http://facebook.com/USERNAME'><img alt='Be Our Fan!' src='http://i1304.photobucket.com/albums/s526/aditya29best/Widget%20Create/social-connect-facebook_zps162d5155.png' title='Be Our Fan'/></a><a href='http://facebook.com/USERNAME'>Follow us on Facebook!</a> 
</div>
<div style='clear:both;'/>
<div class='addthis_toolbox'>   
<div class='custom_images'> 
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='http://i1304.photobucket.com/albums/s526/aditya29best/Widget%20Create/twitter_zpsa3dece11.png' width='32'/></a> 
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='http://i1304.photobucket.com/albums/s526/aditya29best/Widget%20Create/delicious_zpsdbe8541c.png' width='32'/></a> 
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='http://i1304.photobucket.com/albums/s526/aditya29best/Widget%20Create/facebook_zps221dd318.png' width='32'/></a> 
<a class='addthis_button_digg'><img alt='Digg' height='32' src='http://i1304.photobucket.com/albums/s526/aditya29best/Widget%20Create/digg_zps5bff6553.png' width='32'/></a> 
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='http://i1304.photobucket.com/albums/s526/aditya29best/Widget%20Create/stumbleupon_zpsb966d226.png' width='32'/></a> 
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='http://i1304.photobucket.com/albums/s526/aditya29best/Widget%20Create/favorites_zps07620dc3.png' width='32'/></a> 
<a class='addthis_button_more'><img alt='More' height='32' src='http://i1304.photobucket.com/albums/s526/aditya29best/Widget%20Create/more_zps50cf1bbc.png' width='32'/></a> 
</div> 
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/> 
</div> 
<div style='clear:both;'/>

Labels: ,

Monday, February 11, 2013

Menyesuaikan Cloud Label di Blogger

Posted by at 5:51 AM · 0 comments

Di dalam pengaturan pastikan untuk memilih tampilan cloud. Anda dapat mengatur opsi lain sesuai kebutuhan Anda. Lihat gambar di bawah sebagai contoh:

sekarang edit template anda dan letakkan CSS dibawah ini diatas ]]></b:skin> :


/*-----Custom Labels Cloud widget by http://logcyber.blogspot.com/----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out; 
-o-transition: all 0.5s ease-out; 
-webkit-transition: all 0.5s ease-out; 
-ms-transition: all 0.5s ease-out; 
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg); 
-o-transform: rotate(7deg); 
-webkit-transform: rotate(7deg); 
-ms-transform: rotate(7deg); 
transform: rotate(7deg); 
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1; 
}

.label-size a  {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover  {
text-decoration: none;
}



Labels: , , ,

Sunday, February 10, 2013

25 Menu Navigasi "Vertikal" Untuk Blogger - CSS-HTML Menu Tab

Posted by at 2:56 AM · 0 comments






Cara Tambah Sebuah Menu Navigasi Vertikal CSS Untuk Blogger?


Paste kode CSS untuk menu yang dipilih tepat di atas ]]> </ b: skin>
 


Untuk kode HTML bisa ada dua posisi baik sidebar kanan atau sidebar kiri. Tergantung berapa banyak kolom yang Anda miliki.

Jika Anda memiliki sidebar kanan kemudian paste kode HTML di bawah <div id='sidebar-wrapper'> atau ini <div id='sidebar-wrapper-right'>
Jika Anda memiliki sidebar kiri kemudian paste kode HTML di bawah <div id='sidebar-wrapper-left'>

Catatan: - Karena kebanyakan template menggunakan coding yang berbeda karena itu jika Anda tidak bisa menemukan kode diatas maka jangan khawatir hanya berbagi URL blog Anda di kotak komentar dan saya akan melihat template coding dan akan memberitahu Anda langsung yang kode untuk mencari!




DEMO

Navigation Menu #1

Navigation Menu 1 
CSS CODE:

HTML CODE:

Navigation Menu #2

Navigation Menu 2
CSS Code:

HTML Code:

Navigation Menu #3

Navigation Menu 3
CSS Code:

HTML Code:


Navigation Menu #4

Navigation Menu 4
CSS Code:

HTML Code:

Navigation Menu #5

Navigation Menu 5
CSS Code:

HTML Code:

Navigation Menu #6

Navigation Menu 6
CSS Code:

HTML Code:

Navigation Menu #7

Navigation Menu 7
CSS Code:

HTML Code:

Navigation Menu #8

Navigation Menu 8
CSS Code:

HTML Code:

Navigation Menu #9

Navigation Menu 9
CSS Code:

HTML Code:

Navigation Menu #10

Navigation Menu 10
CSS Code:

HTML Code:

Navigation Menu #11

Navigation Menu 11
CSS Code:

HTML Code:

Navigation Menu #12

Navigation-Menu-With-No-image-used
CSS Code:

HTML Code:

Navigation Menu #13

CSS Menu Tabs 13
CSS Code:

HTML Code:

Navigation Menu #14

CSS Menu Tabs 14
CSS Code:

HTML Code:

Navigation Menu #15

CSS Menu Tabs 15
CSS Code:

HTML Code:

Navigation Menu #16

CSS Menu Tabs 16
CSS Code:

HTML Code:

Navigation Menu #17

CSS Menu Tabs 17
CSS Code:

HTML Code:

Navigation Menu #18


CSS Menu Tabs 18
CSS Code:

HTML Code:

Navigation Menu #19

CSS Menu Tabs 19
CSS Code:

HTML Code:

Navigation Menu #20

CSS Menu Tabs 20
CSS Code:

HTML Code:

Navigation Menu #21

CSS Menu Tabs 21
CSS Code:

HTML Code:

Navigation Menu #22

CSS Menu Tabs 22
CSS Code:

HTML Code:


Navigation Menu #23

CSS Menu Tabs 24
CSS Code:

HTML Code:

Navigation Menu #24

 CSS Menu Tabs 25
CSS Code:

HTML Code:

Navigation Menu #25

CSS Menu Tabs 26
CSS Code:

HTML Code:


Labels: , ,

Saturday, February 9, 2013

Cara Membuat Menu Tab Keren Pada Blog Dengan Sub Menu Pull Down Dan Ujung Sudut Melengkung.

Posted by at 3:38 AM · 0 comments
sisipkan rangkaian kode CSS berikut ini tepat di atas ]]></b:skin>

/*----------------------------------------------------------------
Kustomisasi Bilah Navbar Yang Terdapat Di Atas Header Halaman Blog
Oleh: jery agus
Blog: logcyber
URL : http://logcyber.blogspot.com/
-----------------------------------------------------------------*/

/* Keterangan:
   Fungsi kode CSS berikut ini adalah untuk mengatur setelan
   yang digunakan pada bilah navigasi pengganti navbar
-----------------------------------------------------------*/
.bilah-menu-atas {
width: 100%; 
min-width: 968px;
position: fixed;
top: 0px; 
left: 0px;
right: 0px;
height: 29px;
font: 13px Arial;
z-index: 99;
white-space: nowrap;
background: #1975D1;
background: -moz-linear-gradient(center top , #1975D1 0%, #00478F 100%);
background: -webkit-gradient(linear, left top, left bottom, from(#1975D1), to(#00478F));
box-shadow: 0px 2px 4px rgb(14, 90, 140);
border-bottom: 1px solid     #4D94DB;
}

.kolom-utama { 
z-index: 100;
width: 968px;
height: 27px;
margin: 0px auto;
padding: 0px;
}

.kolom-menu {
width: auto;
height: auto;
margin: 0px;
float: left;
display: inline;
}

.kolom-menu ul {
height: auto;
margin: 0px;
padding: 0px;
}

/* Keterangan:
   Fungsi kode CSS berikut ini adalah untuk mengatur setelan
   yang digunakan pada tab menu
-----------------------------------------------------------*/
.kolom-menu ul li {
float: left;
position: relative;
list-style: none outside none;
margin-right: 1px;
margin-left: 1px;
padding-left: 1px;
padding-right: 1px;
height: 25px;
border-top: none;
border-bottom: 1px solid #3385D6;
border-left: 1px solid #3385D6;
border-right: 1px solid #3385D6;
border-radius: 0px 0px 3px 3px;
-moz-border-radius: 0px 0px 3px 3px;
-webkit-border-radius: 0px 0px 3px 3px;
background: #005CB8;
background: -moz-linear-gradient(center top , #005CB8, #003D7A) repeat scroll 0% 0%;
background: -webkit-gradient(linear, left top, left bottom, from(#005CB8), to(#003D7A));
}

/* Keterangan:
   Setelan warna huruf dapat diubah dengan mengganti kode warna
   yang terdapat pada color: #ffffff;
----------------------------------------------------------------------*/
.kolom-menu ul li a {
color: #ffffff;
font-weight: bold;
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
text-decoration: none;
display: inline-block;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 10px;
position: relative;
}

/* Keterangan:
   Rangkaian CSS di bawah ini digunakan untuk menentukan
   setelan warna latar menu ketika disorot dengan memakai mouse pointer
----------------------------------------------------------------------*/
.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
border-radius: 0px 0px 2px 2px;
-moz-border-radius: 0px 0px 2px 2px;
-webkit-border-radius: 0px 0px 2px 2px;
background: #CC0066;
background: -moz-linear-gradient(center top , #CC0066, #8F0047) repeat scroll 0% 0%;
background: -webkit-gradient(linear, left top, left bottom, from(#CC0066), to(#8F0047));
}

/* Fungsi CSS di bawah ini untuk mengatur setelan Sub Menu Pertama, Kedua dan Ketiga
   Keterangan:
   Warna garis dan background dapat diubah dengan mengganti
   kode warna yang terdapat pada border: 1px solid #4D94DB; dan background: #005CB8;
-----------------------------------------------------------------------------------*/
.kolom-menu ul li ul,
.kolom-menu ul li:hover li ul, 
.kolom-menu ul li:active li ul, 
.kolom-menu ul li:focus li ul,
.kolom-menu ul li ul li:hover li ul, 
.kolom-menu ul li ul li:active li ul, 
.kolom-menu ul li ul li:focus li ul {
z-index: 100;
position: absolute;
left: -3000px;
height: auto;
width: auto;
margin-right: 10px;
padding-bottom: 1px;
border: 1px solid #4D94DB;
background: #005CB8;
white-space: normal;
text-align: justify;
padding: 2px 0px;
}

.kolom-menu ul li ul li, 
.kolom-menu ul li ul li ul li,
.kolom-menu ul li ul li ul li ul li {
border: none; background: inherit; height: auto;
border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;
}

.kolom-menu ul li ul li a, .kolom-menu ul li ul li ul li a,
.kolom-menu ul li ul li ul li ul li a {
margin-right: 0px; border: none; padding-right: 0px;
}

.kolom-menu ul li ul li a:hover, .kolom-menu ul li ul li a:focus,
.kolom-menu ul li ul li ul li a:hover, .kolom-menu ul li ul li ul li a:focus,
.kolom-menu ul li ul li ul li ul li a:hover, .kolom-menu ul li ul li ul li ul li a:focus {
border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;
}

/* Kode CSS untuk setelan lebar kolom dan posisi sub menu pertama
----------------------------------------------------------------*/
.kolom-menu ul li ul li a { width: 150px; }

.kolom-menu ul li:hover ul, 
.kolom-menu ul li:active ul, 
.kolom-menu ul li:focus ul {
top: auto; left: 0px; 
}

/* Kode CSS untuk setelan lebar kolom sub menu kedua
---------------------------------------------------*/
.kolom-menu ul li ul li ul li a { width: 150px; }

/* Keterangan:
   Posisi Sub Menu Kedua = Lebar Kolom Sub Menu Pertama + 12px
   Sehingga jika lebar kolom sub menu pertama adalah 150px,
   maka posisi sub menu kedua adalah 162px
--------------------------------------------------------------*/
.kolom-menu ul li ul li:hover ul, 
.kolom-menu ul li ul li:active ul, 
.kolom-menu ul li ul li:focus ul {
top: -1px; left: 162px;
}

/* Kode CSS untuk setelan lebar kolom sub menu ketiga
----------------------------------------------------*/
.kolom-menu ul li ul li ul li ul li a { width: 150px; }

/* Keterangan:
   Posisi Sub Menu Ketiga = Lebar Kolom Sub Menu Kedua + 12px
   Sehingga jika lebar kolom sub menu kedua adalah 150px,
   maka posisi sub menu ketiga adalah 162px
------------------------------------------------------------*/
.kolom-menu ul li ul li ul li:hover ul, 
.kolom-menu ul li ul li ul li:active ul, 
.kolom-menu ul li ul li ul li:focus ul {
top: -1px; left: 162px;
}



cari kode </body> dan agan taukan yg harus dilakukan...



<div class="bilah-menu-atas" id="bilahmenuatas">
<div class="kolom-utama">
<div class="kolom-menu">
<ul>
<li><a href="http://eltelu.blogspot.com/"><img alt="L3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioPlieV-3IMLskL_ar2-3pOWwYxemaaHUUrxQy30L25bozpgKFaYE3oH1qlUScrxzLaEtdnSWaIb4fSIuM5J1apBGp_GV-MOLhx7NE-GGTXt6JgVnA4U0uSp0EePKO_RnNRN98bjl1W4E/s800/Beranda.png" height="13px" border="0" width="24px"></a></li>
<li><a href="#">Tab Menu Kiri 1</a>
<ul>
<li><a href="http://eltelu.blogspot.com/">Sub Menu Tingkat 1.a</a></li>
<li><a href="http://eltelu.blogspot.com/">Sub Menu Tingkat 1.b</a></li>
<li><a href="#">Sub Menu Tingkat 1.c</a>
<ul>
<li><a href="http://eltelu.blogspot.com/">Sub Menu Tingkat 2.a</a></li>
<li><a href="http://eltelu.blogspot.com/">Sub Menu Tingkat 2.b</a></li>
<li><a href="#">Sub Menu Tingkat 2.c</a>
<ul>
<li><a href="http://eltelu.blogspot.com/">Sub Menu Tingkat 3.a</a></li>
<li><a href="http://eltelu.blogspot.com/">Sub Menu Tingkat 3.b</a></li>
<li><a href="http://eltelu.blogspot.com/">Sub Menu Tingkat 3.c</a></li>
<li><a href="http://eltelu.blogspot.com/">Sub Menu Tingkat 3.d</a></li>
</ul>
</li>
<li><a href="http://eltelu.blogspot.com/">Sub Menu Tingkat 2.d</a></li>
</ul>
</li>
<li><a href="http://eltelu.blogspot.com/">Sub Menu Tingkat 1.d</a></li>
</ul>
</li>
<li><a href="http://eltelu.blogspot.com/">Tab Menu Kiri 2</a></li>
<li><a href="http://eltelu.blogspot.com/">Tab Menu Kiri 3</a></li>
</ul>
</div>
<div class="kolom-menu" style="float: right;">
<ul style="float: right;">
<li><a href="http://eltelu.blogspot.com/">Tab Menu Kanan 1</a></li>
<li><a href="http://eltelu.blogspot.com/">Tab Menu Kanan 2</a></li>
</ul>
</div>
</div>
</div>




demo

Labels: , ,

Image Bubbles using CSS3 transform and transitions

Posted by at 2:21 AM · 0 comments 
<style type="text/css">

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}

.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-moz-transition:-moz-transform 0.1s ease-in; /*animate transform property */
-webkit-transition:-webkit-transform 0.1s ease-in; 
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

</style>



<ul class="bubblewrap">
<li><a href="#"><img src="http://dynamicdrive.com/cssexamples/media/stumbleupon.png" title="Add to Stumbleupon" /></a></li>
<li><a href="http://logcyber.blogspot.com/"><img src="http://dynamicdrive.com/cssexamples/media/facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://logcyber.blogspot.com/"><img src="http://dynamicdrive.com/cssexamples/media/digg.png" title="Add to Digg" /></a></li>
<li><a href="http://logcyber.blogspot.com/"><img src="http://dynamicdrive.com/cssexamples/media/twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://logcyber.blogspot.com/"><img src="http://dynamicdrive.com/cssexamples/media/rss.png" title="Add RSS Feed" /></a></li>
</ul>


demo


Labels: , ,

Friday, February 8, 2013

Slide Out Sidebar Content

Posted by at 6:36 AM · 0 comments
Left Sidebar
.sidebar .widget{
border:2px inset #FF0000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
height:250px;
overflow:auto;
-o-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
-webkit-transition:all 1s ease-out;
}
.sidebar .widget:hover{-moz-box-shadow:0 0 70px #F80505;-webkit-box-shadow:0 0 70px #F80505;box-shadow:0 0 40px #F80505;
background:#000 url(http://i1206.photobucket.com/albums/bb455/binkbenk/blogger-2.png)no-repeat center;
font-size:large;
width:500px;
margin-left:25px;
border:4px dotted #FF0000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius: 10px;
}


Right Sidebar



.sidebar .widget{
border:2px inset #FF0000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
height:250px;
overflow:auto;
 -o-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
-webkit-transition:all 1s ease-out;
}
.sidebar .widget:hover{-moz-box-shadow:0 0 70px #F80505;-webkit-box-shadow:0 0 70px #F80505;box-shadow:0 0 40px #F80505;
background:#000 url(http://i1206.photobucket.com/albums/bb455/binkbenk/blogger-2.png)no-repeat center;
font-size:large;
width:500px;
margin-left:-225px;
border:4px dotted #FF0000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius: 10px;
}


Langkah pemasangannya :

  1. Login ke blog Sobat
  2. Masuk Rancangan Pilh Edit HTML
  3. Copy kode diatas dan pastekan diatas kode  ]]></b:skin>
Labels: , ,

Wednesday, February 6, 2013

CSS Drop Down Multi Sub Menu

Posted by at 4:37 AM · 0 comments
Tambah  Gadget HTML/javascript\


<style type="text/css">
/* =======================
Original : www.stunicholls.com
edit by : http://logcyber.blogspot.com/
======================== */
#nav,
#nav {padding: 0 2px; margin:0 10px; list-style:none; font: 16px Comic Sans MS; -moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px; border:4px inset white;background:-moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f); background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); position:relative; z-index:200;}
#nav {height:35px;}

#nav ul {padding: 5px 2px; margin:10px 0; list-style:none; font: 12px Comic Sans MS; -moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px; border:2px inset white;background:-moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f); background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f));}

#nav li {float:left;}
#nav li li {float:none;}
/* a hack for IE5.x and IE6 */
* html #nav li li {float:left;}

#nav li a {display:block; float:left; color:#fff; margin:0 25px 0 10px; height:25px; line-height:25px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}

#nav li:hover {position:relative; z-index:300;}
#nav li:hover ul {left:0; top:22px;}
/* another hack for IE5.5 and IE6 */
* html #nav li:hover ul {left:10px;}

#nav ul {position:absolute; left:-9999px; top:-9999px;}
/* yet another hack for IE5.x and IE6 */
* html #nav ul {width:1px;}

/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:-15px; margin-left:100%; top:-1px;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:none; color:#b75;}


/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
/* show next level */
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:-15px; margin-left:100%; top:-1px;}

/* keep further levels hidden */
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}

/* show path followed */
#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:none; color:#b75;}

/* hide futher possible paths */
#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#fff;}

#nav a:hover{transform:rotate(5deg); -moz-transform:rotate(5deg); -webkit-transform:rotate(5deg); -o-transform:rotate(5deg);
-moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px; background:red; border-color: #fff; border-style: inset; border-width: 2px 4px;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;font-size: 20px;font-family:Verdana;}

#nav ul a:hover{transform:rotate(-5deg); -moz-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); -o-transform:rotate(-5deg);
-moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px; background:red; border-color: #fff; border-style: inset; border-width: 2px 4px;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;font-size: 30px;font-family:Verdana;}
</style>

<ul id="nav">
<li><a href="http://www.blogger.com">Home</a></li>
<li><a href="http://www.blogger.com">About us »</a>
<ul>
<li><a href="http://www.blogger.com">Who we are</a></li>
<li><a href="http://www.blogger.com">What we do</a></li>
<li><a href="http://www.blogger.com">Where to find us</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com">Products »</a>
<ul>
<li><a href="http://www.blogger.com">Tripods »</a>
<ul>
<li><a href="http://www.blogger.com">Monopods</a></li>
<li><a href="http://www.blogger.com">Tripods</a></li>
<li><a href="http://www.blogger.com">Adjutable head</a></li>
<li><a href="http://www.blogger.com">Fixed</a></li>
<li><a href="http://www.blogger.com">Flash mount</a></li>
<li><a href="http://www.blogger.com">Floating head</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com">Films »</a>
<ul>
<li><a href="http://www.blogger.com">35mm</a></li>
<li><a href="http://www.blogger.com">Color Print</a></li>
<li><a href="http://www.blogger.com">Black and White</a></li>
<li><a href="http://www.blogger.com">Roll</a></li>
<li><a href="http://www.blogger.com">Color Slide</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com">Cameras »</a>
<ul>
<li><a href="http://www.blogger.com">Compact »</a>
<ul>
<li><a href="http://www.blogger.com">Canon</a></li>
<li><a href="http://www.blogger.com">Nikon</a></li>
<li><a href="http://www.blogger.com">Minolta</a></li>
<li><a href="http://www.blogger.com">Pentax</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com">Digital »</a>
<ul>
<li><a href="http://www.blogger.com">Canon</a></li>
<li><a href="http://www.blogger.com">Nikon »</a>
<ul>
<li><a href="http://www.blogger.com">Lenses »</a>
<ul>
<li><a href="http://www.blogger.com">Standard</a></li>
<li><a href="http://www.blogger.com">Telephoto</a></li>
<li><a href="http://www.blogger.com">Wide Angle</a></li>
<li><a href="http://www.blogger.com">Fish Eye</a></li>
<li><a href="http://www.blogger.com">Mirror</a></li>
<li><a href="http://www.blogger.com">Macro</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com">Speedlight</a></li>
<li><a href="http://www.blogger.com">Coolpix »</a>
<ul>
<li><a href="http://www.blogger.com">Coolpix S10</a></li>
<li><a href="http://www.blogger.com">Coolpix L2</a></li>
<li><a href="http://www.blogger.com">Coolpix S500</a></li>
<li><a href="http://www.blogger.com">Coolpix P5000</a></li>
<li><a href="http://www.blogger.com">Coolpix 4600</a></li>
<li><a href="http://www.blogger.com">Coolpix S6 Silver</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com">D200</a></li>
<li><a href="http://www.blogger.com">D80</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com">Minolta</a></li>
<li><a href="http://www.blogger.com">Pentax</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com">SeLLeR »</a>
<ul>
<li><a href="http://www.blogger.com">Canon</a></li>
<li><a href="http://www.blogger.com">Nikon</a></li>
<li><a href="http://www.blogger.com">Minolta</a></li>
<li><a href="http://www.blogger.com">Pentax</a></li>
<li><a href="http://www.blogger.com">Panasonic</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.blogger.com">Flash</a></li>
<li><a href="http://www.blogger.com">Video</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com">FAQs »</a>
<ul>
<li><a href="http://www.blogger.com">Cameras</a></li>
<li><a href="http://www.blogger.com">Film types</a></li>
<li><a href="http://www.blogger.com">Digital Photography</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com">Privacy »</a>
<ul>
<li><a href="http://www.blogger.com">Privacy Policy</a></li>
<li><a href="http://www.blogger.com">Privacy Statement</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com">Contact us</a></li>
</ul>



Labels: , ,

Sunday, February 3, 2013

Efek Thread Comment Bertingkat Hanya dengan CSS

Posted by at 6:36 PM · 0 comments
salin kode ini dan letakkan di atas kode ]]></b:skin> atau </style>:


/* Efek thread-comment bertingkat hanya dengan CSS
 * Level tingkatan dibuat dengan cara menuliskan margin-left dengan nilai yang berbeda
 */
.comments .thread-toggle {
  margin-bottom:10px;
}

.comments .comment-thread.inline-thread .comment .comment-block {
  margin-left:52px;
}

.comments .comment-thread.inline-thread .comment {
  margin:0px 0px 5px 30%; /* Level 6+ */
  background-color:#222;
  border:1px solid #333;
  padding:10px 15px;
  color:#ccc;
}

.comment .comment-thread.inline-thread .comment:nth-child(6) {margin:0px 0px 5px 25%;} /* Level 6 */
.comment .comment-thread.inline-thread .comment:nth-child(5) {margin:0px 0px 5px 20%;} /* Level 5 */
.comment .comment-thread.inline-thread .comment:nth-child(4) {margin:0px 0px 5px 15%;} /* Level 4 */
.comment .comment-thread.inline-thread .comment:nth-child(3) {margin:0px 0px 5px 10%;} /* Level 3 */
.comment .comment-thread.inline-thread .comment:nth-child(2) {margin:0px 0px 5px 5%; } /* Level 2 */
.comment .comment-thread.inline-thread .comment:nth-child(1) {margin:0px 0px 5px 0%; } /* Level 1 */
Klik Simpan Template.
Labels: , ,

Wednesday, January 30, 2013

Styling Striped TABLE Using Only CSS

Posted by at 5:12 AM · 0 comments




CSS:

    /* Very Best Table Styling */
    ol{margin:1em 1em 1em;padding:1em 1em 1em;}
    table
    {text-align:left;font-size:13px;font-family:Monaco,Monospace !important;
    color:#CFDBEC;text-shadow:1px 2px 1px #000, 0px -1px 2px #000, 1px 1px 2px #000;
    background-color:#2f2f2f;
    border-collapse:collapse;
    width:100%;
    border:none;
    }
    thead,thead th
    {color:#0075B5;font-size:15px;font-family:dungeon;font-weight:bold;line-height:28px;text-align:left;padding:1em 1em 1em;background:#0f0f0f;
    }
    td, th
    {padding:1em 1em 1em;
    }
    * html tr.odd td, tbody tr.odd td, #middle
    {
    background:rgba(0, 0, 0, 0.15);
    }
    tfoot td,tfoot tr
    {background:rgba(0, 0, 0, 0.15);
    padding-bottom:1.5em;
    }
    tfoot
    {background:rgba(0, 0, 0, 0.5);color:#FFDEAD;
    }

HTML:

    <table><col> <col id="middle"> <col> <thead>
    <tr><th>Ingredients</th><th>Serves 12</th><th>Serves 24</th></tr>
    </thead> <tfoot>
    <tr><td colspan="3"><ol>
    <li>Combine milk and spices including vanilla bean in a heavy saucepan and let them infuse over lowest possible heat for 5 minutes. Meanwhile, combine yolks and sugar in a large bowl and whisk until mixed.</li>
    <li>Bring milk to a boil and gradually whisk it into the yolk mixture. Return the mixture to the saucepan. Cook over medium heat, stirring steadily with a wooden spoon, for 2 to 3 minutes, or until foam subsides and mixture thickens to consistency of heavy cream. (Mixture should thickly coat the back of a wooden spoon.) Do not boil, or mixture will curdle.</li>
    <li>Strain mixture into a large bowl and let cool to room temperature. Stir in rum, brandy, half-and-half, vanilla and nutmeg.</li>
    <li>Refrigerate eggnog for at least 2 hours, preferably overnight. Just before serving, dust top of eggnog with additional nutmeg.</li>
    </ol>
    </td></tr>
    </tfoot> <tbody>
    <tr><td>milk</td><td>1 quart</td><td>2 quart</td></tr>
    <tr class="odd"><td>cinnamon sticks</td><td>2</td><td>1</td></tr>
    <tr><td>vanilla bean, split</td><td>1</td><td>2</td></tr>
    <tr class="odd"><td>cloves</td><td>5</td><td>10</td></tr>
    <tr><td>mace</td><td>10 blades</td><td>20 blades</td></tr>
    <tr class="odd"><td>egg yolks</td><td>12</td><td>24</td></tr>
    <tr><td>cups sugar</td><td>1 ½ cups</td><td>3 cups</td></tr>
    <tr class="odd"><td>dark rum</td><td>1 ½ cups</td><td>3 cups</td></tr>
    <tr><td>brandy</td><td>1 ½ cups</td><td>3 cups</td></tr>
    <tr class="odd"><td>vanilla</td><td>1 tbsp</td><td>2 tbsp</td></tr>
    <tr><td>half-and-half or light cream</td><td>1 quart</td><td>2 quart</td></tr>
    <tr class="odd"><td>Freshly grated nutmeg to taste</td><td></td><td></td></tr>
    </tbody> </table>

Labels: , ,
Subscribe to: Posts (Atom)