Showing posts with label menu. Show all posts
Showing posts with label menu. Show all posts

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

Widget Pengatur Ukuran & Warna Text posting

Posted by at 6:49 AM · 0 comments


Masukkan kode di bawah ini diatas kode </head>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

lalu simpan template....

dan tambahkan ini di layout - gadget anda....

<!-- http://TheUnnecessaryWorld.co.cc -->

<style type="text/css">

/** TUW Font Color and Size Change widget begins **/

#tuw-font-change-widget {width: auto;}

#tuw-font-change-widget h2 {margin: 0 0 8px 0 !important;font: 12px 
Tahoma !important;font-weight: normal !important;border: 0 !important;}

#tuw-font-change-widget ul {width: auto; overflow: hidden;margin: 0 0 
20px !important;padding: 0 !important;list-style; none !important;}

#tuw-font-change-widget ul li {width: 20px !important;height: 20px 
!important;overflow: hidden;margin: 0 10px 0 0 !important;padding: 2px 
!important;display: block !important;float: left !important;border: 1px 
solid #CCCCCC !important;}

#tuw-font-change-widget ul li a {width: 20px !important;height: 20px 
!important;display: block !important;line-height: 18px 
!important;text-align: center !important;color: #FFFFFF 
!important;font-size: 11px !important;font-family: Tahoma 
!important;text-decoration: none !important; outline: 0 !important;}

#fcw-black { background: #000000 !important; } #fcw-white { background: 
#088A08 !important; } #fcw-blue { background: #0066CC !important; } 
#fcw-gray { background: #666666 !important; }

#fcw-color a { text-indent: -999px !important; }

#fcw-size a { text-indent: 0 !important; background: #333333 !important; }

/** TUW Font Color and Size Change widget begins **/

</style>

<script type="text/javascript">

$(document).ready(function(){

// Change Font Color -- begins

$(" #fcw-color #fcw-black ").click(function() {

$(" .post-body ").css({ color: "#000000" });

return false;

});



$(" #fcw-color #fcw-white ").click(function() {

$(" .post-body ").css({ color: "#088A08" });

return false;

});



$(" #fcw-color #fcw-blue ").click(function() {

$(" .post-body ").css({ color: "#0066CC" });

return false;

});



$(" #fcw-color #fcw-gray ").click(function() {

$(" .post-body ").css({ color: "#666666" });

return false;

});

// Change Font Color -- ends



// Change Font Size -- begins

$(" #fcw-size #fcw-10 ").click(function() {

$(" .post-body ").css({ fontSize: "10px" });

return false;

});



$(" #fcw-size #fcw-12 ").click(function() {

$(" .post-body ").css({ fontSize: "12px" });

return false;

});



$(" #fcw-size #fcw-14 ").click(function() {

$(" .post-body ").css({ fontSize: "14px" });

return false;

});



$(" #fcw-size #fcw-16 ").click(function() {

$(" .post-body ").css({ fontSize: "16px" });

return false;

});

// Change Font Size -- ends

});

</script>

<!-- TUW Blogger Change Font color and size widget begins -->

<div id="tuw-font-change-widget">

<div class="tuw-fcw">

<h2> Ganti warna tulisan </h2>

<ul id="fcw-color">

<li> <a id="fcw-black" href="#">black</a> </li>

<li> <a id="fcw-white" href="#">green</a> </li>

<li> <a id="fcw-blue" href="#">blue</a> </li>

<li> <a id="fcw-gray" href="#">gray</a> </li>

</ul>

</div>



<div class="tuw-fcw">

<h2> Ganti ukuran tulisan </h2>

<ul id="fcw-size">

<li> <a id="fcw-10" href="#">10</a> </li>

<li> <a id="fcw-12" href="#" title="Default Size">12</a> </li>

<li> <a id="fcw-14" href="#">14</a> </li>

<li> <a id="fcw-16" href="#">16</a> </li>

</ul>

</div>

</div>

<!-- TUW Blogger Change Font color and size widget ends -->

<!-- Code ends -->

Labels: , , ,

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: , ,

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: , ,

Tuesday, January 29, 2013

3D Touch Carousel with jquey

Posted by at 7:25 PM · 0 comments


CSS:

<!-- CSS  -->
<style>
.carousel-title{
height:40px;
width:350px;
padding:5px;
}
.carousel-title span, .carousel-title a {
color: #FFFFFF;
font-family: 'Volkhov',sans-serif;
font-size: 24px;
text-shadow: 1px 1px 1px #E0D1BC;
}
.carousel-subtitle{
color: #FFFFFF;
font-size: 14px;
padding:5px;
}
</style>

<link rel="stylesheet" type="text/css" href="http://3.s3.envato.com/files/37836635/css/theme1/style.css" />


SCRIPT:
    <script type="text/javascript" src="http://3.s3.envato.com/files/37836635/js/jquery.js"></script>

    <script type="text/javascript" src="http://3.s3.envato.com/files/37836635/js/carousel.js"></script>



MARKUP HTML: 
1. Live Example 3D CSS3 CAROUSEL. 
    
<div id="3DC3Cut" style="width:900px; height:600px;overflow:visible;margin:0 auto;background-color:#000">    
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects1.jpg" />
<span data-start="{width:0}" data-stop="{width:300}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Custom title with Transitions</span>
</span>
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="500" class="carousel-subtitle">
CSS3 Transition supported
</span></div>

<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects2.jpg" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Multiple titles with multiple transitions</span>
</span>
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="500" class="carousel-subtitle">
Set up links, images and other in the titles
</span></div>

<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects3.jpg" />
<span data-start="{height:0,padding:0}" data-stop="{height:40,padding:5}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>jQuery easing support</span>
</span>
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="500" class="carousel-subtitle">
MouseWheel support with no plugins
</span></div>

<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects5.jpg" />
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Small script with just 14k</span>
</span>
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="500" class="carousel-subtitle">
Fast and Optimized
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects6.jpg" />
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Touch gestures support</span>
</span>
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="500" class="carousel-subtitle">
Android, ISOX
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects7.jpg" />
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Find more plugins on my page</span>
</span>
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="500" class="carousel-subtitle">
Fine Zoom
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects8.jpg" />
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="500" class="carousel-title">
<span>Visit <a href="http://www.albanx.com">my web site</a></span>
</span></div>

</div>

<script tyle="text/javascript">
$("#3DC3Cut").carousel3d({
mode:'3d',
autoPlay:1,
autoPlayInterval:3000,
navigation:'mouseover',
orientation:'H'
});
</script>


2. Live Example SIMULATED 3D CAROUSEL.
<div id="S3DCut" style="width:1100px;height:500px;overflow:visible;margin:0 auto;background-color:#000">    
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/mercury.png" />
<span data-start="{width:0}" data-stop="{width:300}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Mercury</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/venus.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Venus</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/earth.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Earth</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/mars.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Mars</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/jupiter.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Jupiter</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/saturn.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Saturn</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/uranus.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Uranus</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/neptun.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Neptun</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/pluton.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Pluton</span>
</span></div>

</div>

<script tyle="text/javascript">
$("#S3DCut").carousel3d({
mode:'2d',
autoPlay:-1,
autoPlayInterval:2000,
navigation:'mouseover',
perspective:500,
animationSpeed:20,
centerImg:'http://3.s3.envato.com/files/37836635/images2/sun.png',
reflectionHeight:0,
responsive:false,
radiusZ:1000,
radiusX:1000
});
</script>


3. Live Example X AXIS ROTATION.
<div id="XARut" style="width:700px;height:400px;overflow:visible;margin:0 auto;">    
               
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects1.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects2.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects3.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects5.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects6.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects7.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects8.jpg" />

</div>

<script tyle="text/javascript">
$("#XARut").carousel3d({
mode:'3d',
autoPlay:1,
autoPlayInterval:3000,
navigation:'mouseover',
positionY:100,
rotateX:-20
});
</script>


4. Live Example 3D Vertical Mode.
<div id="3DVMut" style="width:700px;height:400px;overflow:visible;margin:0 auto;">    
               
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects1.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects2.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects3.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects5.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects6.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects7.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects8.jpg" />

</div>

<script tyle="text/javascript">
$("#3DVMut").carousel3d({
mode:'3d',
autoPlay:1,
autoPlayInterval:3000,
navigation:'mouseover',
orientation:'V'
});
</script>

5. Live Example Mini Banners Rotator.
a.HTML untuk  bagian atas.


<div class="MBRutaka" style="width:300px; height:100px;overflow:visible;margin:0 auto">    
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects1.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects2.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects3.jpg" />
</div>
<script tyle="text/javascript">
$(".MBRutaka").carousel3d({
mode:'3d',
autoPlay:1,
autoPlayInterval:2000,
navigation:false,
orientation:'H'
});
</script>


b.HTML untuk bagian bawah.

<div class="MBRutaka2" style="width:300px; height:100px;overflow:visible;margin:0 auto">    
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects5.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects6.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects7.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects8.jpg" />
</div>
<script tyle="text/javascript">
$(".MBRutaka2").carousel3d({
mode:'3d',
autoPlay:-1,
autoPlayInterval:1500,
navigation:false,
orientation:'H',
positionY:0,
rotateX:-20,
overflow:'visible'
});
</script>




Labels: , ,

Create Collapsing Site Navigation With jQuery

Posted by at 4:37 AM · 0 comments

CSS:

.cc_menu{
width:700px; /*140px * 5*/
height:600px;
position:relative;
font-size:14px;
text-transform:uppercase;
color:#fff;
}
.cc_item{
text-align:center;
width:140px;
height:600px;
float:left;
border-bottom:1px solid #000;
background:#444 url(http://tympanus.net/Tutorials/CollapsingSiteNavigation/images/bg.png) repeat top left;
position:relative;
-moz-box-shadow:3px -3px 10px #000;
-webkit-box-shadow:3px -3px 10px #000;
box-shadow:3px -3px 10px #000;
}
span.cc_title{
color:#fff;
font-size:16px;
top:200px;
left:5px;
position:absolute;
padding:3px 0px;
background:#111;
width:130px;
display:block;
z-index:11;
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
}
.cc_submenu ul{
list-style:none;
width:140px;
margin:0;
padding:0;
height:0px; /*increase to 200px to slide up*/
overflow:hidden;
text-align:left;
background:#000;
position:absolute;
left:0px;
bottom:0px;
opacity:0.7;
z-index:13;
}
.cc_submenu ul li{
color:#ddd;
cursor:pointer;
padding:10px;
}
.cc_item img{
position:absolute;
width:140px;
height:600px;
top:-600px;
left:0px;
}
.cc_content{
width:600px;
height:600px;
border-bottom:1px solid #000;
position:absolute;
left:-700px;
background:#444 url(http://tympanus.net/Tutorials/CollapsingSiteNavigation/images/bg.png) repeat top left;
overflow:hidden;
-moz-box-shadow:4px 0 7px #000;
-webkit-box-shadow:4px 0 7px #000;
box-shadow:4px 0 7px #000;
}
.cc_content div{
display:none;
margin:20px;
}
.cc_content p{
background:#000;
padding:20px;
opacity:0.7;
}
span.cc_back{
position:absolute;
bottom:10px;
right:10px;
cursor:pointer;
color:#ddd;
}

SCRIPT:

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

<script src="http://tympanus.net/Tutorials/CollapsingSiteNavigation/js/cufon-yui.js" type="text/javascript"></script>
<script src="http://tympanus.net/Tutorials/CollapsingSiteNavigation/js/Liberation_Sans.font.js" type="text/javascript"></script>

<script type="text/javascript">
Cufon.replace('span');
Cufon.replace('li');
Cufon.replace('h1');
Cufon.replace('p');
</script>

<!-- The JavaScript -->
<script type="text/javascript">
$(function() {
//all the menu items
                var $items         = $('#cc_menu .cc_item');
                //number of menu items
                var cnt_items    = $items.length;
                //if menu is expanded then folded is true
                var folded        = false;
                //timeout to trigger the mouseenter event on the menu items
                var menu_time;
                /**
                bind the mouseenter, mouseleave to each item:
                - shows / hides image and submenu
                bind the click event to the list elements (submenu):
                - hides all items except the clicked one,
                and shows the content for that item
                */
                $items.unbind('mouseenter')
                      .bind('mouseenter',m_enter)
                      .unbind('mouseleave')
                      .bind('mouseleave',m_leave)
                      .find('.cc_submenu > ul > li')
                      .bind('click',function(){
                    var $li_e = $(this);
                          //if the menu is already folded,
                          //just replace the content
                    if(folded){
                        hideContent();
                        showContent($li_e.attr('class'));
                    }   
                          else //fold and show the content
                        fold($li_e);
                });
               
                /**
                mouseenter function for the items
                the timeout is used to prevent this event
                to trigger if the user moves the mouse with
                a considerable speed through the menu items
                */
                function m_enter(){
                    var $this     = $(this);
                    clearTimeout(menu_time);
                    menu_time     = setTimeout(function(){
                    //img
                    $this.find('img').stop().animate({'top':'0px'},400);
                    //cc_submenu ul
                    $this.find('.cc_submenu > ul').stop().animate({'height':'200px'},400);
                    },200);
                }
               
//mouseleave function for the items
                function m_leave(){
                    var $this = $(this);
                    clearTimeout(menu_time);
                    //img
                    $this.find('img').stop().animate({'top':'-600px'},400);
                    //cc_submenu ul
                    $this.find('.cc_submenu > ul').stop().animate({'height':'0px'},400);
                }
               
                //back to menu button - unfolds the menu
                $('#cc_back').bind('click',unfold);
               
                /**
                hides all the menu items except the clicked one
                after that, the content is shown
                */
                function fold($li_e){
                    var $item        = $li_e.closest('.cc_item');
                   
                    var d = 100;
                    var step = 0;
                    $items.unbind('mouseenter mouseleave');
                    $items.not($item).each(function(){
                        var $item = $(this);
                        $item.stop().animate({
                            'marginLeft':'-140px'
                        },d += 200,function(){
                            ++step;
                            if(step == cnt_items-1){
                                folded = true;
                                showContent($li_e.attr('class'));
                            }   
                        });
                    });
                }
               
                /**
                shows all the menu items
                also hides any item's image / submenu
                that might be displayed
                */
                function unfold(){
                    $('#cc_content').stop().animate({'left':'-700px'},600,function(){
                        var d = 100;
                        var step = 0;
                    $items.each(function(){
                            var $item = $(this);
                           
                            $item.find('img')
                                 .stop()
                                 .animate({'top':'-600px'},200)
                                 .andSelf()
                                 .find('.cc_submenu > ul')
                                 .stop()
                                 .animate({'height':'0px'},200);
                               
                            $item.stop().animate({
                            'marginLeft':'0px'
                            },d += 200,function(){
                                ++step;
                                if(step == cnt_items-1){
                                    folded = false;
                                    $items.unbind('mouseenter')
                                          .bind('mouseenter',m_enter)
                                          .unbind('mouseleave')
                                          .bind('mouseleave',m_leave);
                                   
                                    hideContent();
                                }         
                            });
                        });
                    });
                }
               
//function to show the content
                function showContent(idx){
                    $('#cc_content').stop().animate({'left':'140px'},200,function(){
                        $(this).find('.'+idx).fadeIn();
                    });
                }
               
//function to hide the content
                function hideContent(){
                    $('#cc_content').find('div').hide();
                }
});
</script>

HTML:

<div id="cc_menu" class="cc_menu">
<div class="cc_item" style="z-index:5;">
<img src="http://tympanus.net/Tutorials/CollapsingSiteNavigation/images/1.jpg" alt="image" />
<span class="cc_title">Collection</span>
<div class="cc_submenu">
<ul>
<li class="cc_content_1">Winter 2010</li>
<li class="cc_content_2">Spring 2011</li>
</ul>
</div>
</div>

<div class="cc_item" style="z-index:4;">
<img src="http://tympanus.net/Tutorials/CollapsingSiteNavigation/images/2.jpg" alt="image" />
<span class="cc_title">Stores</span>
<div class="cc_submenu">
<ul>
<li class="cc_content_3">Milano</li>
<li class="cc_content_4">Paris</li>
<li class="cc_content_5">New York</li>
<li class="cc_content_6">Miami</li>
</ul>
</div>
</div>

<div class="cc_item" style="z-index:3;">
<img src="http://tympanus.net/Tutorials/CollapsingSiteNavigation/images/3.jpg" alt="image" />
<span class="cc_title">About</span>
<div class="cc_submenu">
<ul>
<li class="cc_content_7">About us</li>
<li class="cc_content_8">Our Philosophy</li>
</ul>
</div>
</div>

<div class="cc_item" style="z-index:2;">
<img src="http://tympanus.net/Tutorials/CollapsingSiteNavigation/images/4.jpg" alt="image" />
<span class="cc_title">Events</span>
<div class="cc_submenu">
<ul>
<li class="cc_content_9">Bacardi Summer Party</li>
<li class="cc_content_10">Lonestyle Auction</li>
</ul>
</div>
</div>

<div class="cc_item" style="z-index:1;">
<img src="http://tympanus.net/Tutorials/CollapsingSiteNavigation/images/5.jpg" alt="image" />
<span class="cc_title">Contact</span>
<div class="cc_submenu">
<ul>
<li class="cc_content_11">Custom Orders</li>
<li class="cc_content_12">Get in touch</li>
</ul>
</div>
</div>

<div id="cc_content" class="cc_content">
<span id="cc_back" class="cc_back">&lt;&lt; Go back</span>
<div class="cc_content_1">
<h1>Winter 2010</h1>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
</div>

<div class="cc_content_2">
<h1>Spring 2011</h1>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</p>
</div>

<div class="cc_content_3">
<h1>Milano</h1>
<p>She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek</p>
</div>

<div class="cc_content_4">
<h1>Paris</h1>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. </p>
</div>

<div class="cc_content_5">
<h1>New York</h1>
<p>It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.</p>
</div>

<div class="cc_content_6">
<h1>Miami</h1>
<p>It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.</p>
</div>

<div class="cc_content_7">
<h1>About us</h1>
<p>It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather.</p>
</div>

<div class="cc_content_8">
<h1>Our Philosophy</h1>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>

<div class="cc_content_9">
<h1>Bacardi Summer Party</h1>
<p>I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth</p>
</div>

<div class="cc_content_10">
<h1>Lonestyle Auction</h1>
<p>To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire</p>
</div>

<div class="cc_content_11">
<h1>Custom Orders</h1>
<p>Winter collection</p>
</div>

<div class="cc_content_12">
<h1>Get in touch</h1>
<p>Winter collection</p>
</div>

</div>
</div>

<div></div>


Labels: , ,
Subscribe to: Posts (Atom)