KrisBrowser

Cara Membuat Rating Star Contoh:<html><head>
 <title>Star Ratings</title>
 
 <link href="css/style.css" rel="stylesheet"></link>
 
 <style>
 .rating {
 unicode-bidi: bidi-override;
 direction: rtl;
 text-align: center;
 }
 .rating > span {
 display: inline-block;
 position: relative;
 width: 1.1em;
 }
 .rating > span:hover,
 .rating > span:hover ~ span {
 color: transparent;
 }
 .rating > span:hover:before,
 .rating > span:hover ~ span:before {
 content: "\2605";
 position: absolute;
 left: 0;
 color: gold;
 }
 </style>
</head>

<body>

<div id="page-wrap">
 
 <div class="rating">
 ☆☆☆☆☆
 </div>
</div>
<style style="display: none !important;" type="text/css">
 * {
 margin: 0;
 padding: 0;
 }
 body {
 overflow-x: hidden;
 }
 #demo-top-bar {
 text-align: left;
 background: #222;
 position: relative;
 zoom: 1;
 width: 100% !important;
 z-index: 6000;
 padding: 20px 0 20px;
 }
 #demo-bar-inside {
 width: 960px;
 margin: 0 auto;
 position: relative;
 overflow: hidden;
 }
 #demo-bar-buttons {
 padding-top: 10px;
 float: right;
 }
 #demo-bar-buttons a {
 font-size: 12px;
 margin-left: 20px;
 color: white;
 margin: 2px 0;
 text-decoration: none;
 font: 14px "Lucida Grande", Sans-Serif !important;
 }
 #demo-bar-buttons a:hover,
 #demo-bar-buttons a:focus {
 text-decoration: underline;
 }
 #demo-bar-badge {
 display: inline-block;
 width: 302px;
 padding: 0 !important;
 margin: 0 !important;
 background-color: transparent !important;
 }
 #demo-bar-badge a {
 display: block;
 width: 100%;
 height: 38px;
 border-radius: 0;
 bottom: auto;
 margin: 0;
 background: url(/images/examples-logo.png) no-repeat;
 background-size: 100%;
 overflow: hidden;
 text-indent: -9999px;
 }
 #demo-bar-badge:before, #demo-bar-badge:after {
 display: none !important;
 }
</style>

</body></html>
 
 
 
 
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px inset red; padding: 10px; t-align: left;">
<html><head> 
 <meta charset="UTF-8"> 
 
 <title>Star Ratings</title> 
 
 <link rel="stylesheet" href="css/style.css"> 
 
 <style> 
 .rating { 
  unicode-bidi: bidi-override; 
  direction: rtl; 
  text-align: center; 
 } 
 .rating > span { 
  display: inline-block; 
  position: relative; 
  width: 1.1em; 
 } 
 .rating > span:hover, 
 .rating > span:hover ~ span { 
  color: transparent; 
 } 
 .rating > span:hover:before, 
 .rating > span:hover ~ span:before { 
   content: "\2605"; 
   position: absolute; 
   left: 0; 
   color: gold; 
 } 
 </style> 
</head> 
 
<body> 
 
 
 <div id="page-wrap"> 
 
 <div class="rating"> 
 ☆☆☆☆☆ 
 </div> 
 
 </div> 
 
 <style type="text/css" style="display: none !important;"> 
 * { 
 margin: 0; 
 padding: 0; 
 } 
 body { 
 overflow-x: hidden; 
 } 
 #demo-top-bar { 
 text-align: left; 
 background: #222; 
 position: relative; 
 zoom: 1; 
 width: 100% !important; 
 z-index: 6000; 
 padding: 20px 0 20px; 
 } 
 #demo-bar-inside { 
 width: 960px; 
 margin: 0 auto; 
 position: relative; 
 overflow: hidden; 
 } 
 #demo-bar-buttons { 
 padding-top: 10px; 
 float: right; 
 } 
 #demo-bar-buttons a { 
 font-size: 12px; 
 margin-left: 20px; 
 color: white; 
 margin: 2px 0; 
 text-decoration: none; 
 font: 14px "Lucida Grande", Sans-Serif !important; 
 } 
 #demo-bar-buttons a:hover, 
 #demo-bar-buttons a:focus { 
 text-decoration: underline; 
 } 
 #demo-bar-badge { 
 display: inline-block; 
 width: 302px; 
 padding: 0 !important; 
 margin: 0 !important; 
 background-color: transparent !important; 
 } 
 #demo-bar-badge a { 
 display: block; 
 width: 100%; 
 height: 38px; 
 border-radius: 0; 
 bottom: auto; 
 margin: 0; 
 background: url(/images/examples-logo.png) no-repeat; 
 background-size: 100%; 
 overflow: hidden; 
 text-indent: -9999px; 
 } 
 #demo-bar-badge:before, #demo-bar-badge:after { 
 display: none !important; 
 } 
</style> 
 
 
</body></html></div>
 
 
 
Cara membuat Menu berwarna mengikuti mouse
<html><head>

<title>Convert Menu to Dropdown</title>

@media (max-width: 960px) {
      nav ul     { display: none; }
      nav select { display: inline-block; }
    }

</style>

// Create the dropdown base
 $("<select />").appendTo("nav");

// Create default option "Go to..."
 $("<option />", {
 "selected": "selected",
 "value" : "",
 "text" : "Go to..."
 }).appendTo("nav select");

// Populate dropdown with menu items
 $("nav a").each(function() {
 var el = $(this);
 $("<option />", {
 "value" : el.attr("href"),
 "text" : el.text()
 }).appendTo("nav select");
 });

// To make dropdown actually work
    // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
      $("nav select").change(function() {
        window.location = $(this).find("option:selected").val();
      });

});
 </script>
</head>

<body>

<nav>

<ul>
<li><a class="active" href="https://www.blogger.com/blogger.g?blogID=1706276315293091521#">Home</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1706276315293091521#books">Books</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1706276315293091521#blog">Blog</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1706276315293091521#about">About Us</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1706276315293091521#support">Support</a></li>
</ul>
<select><option selected="selected" value="">Go to...</option><option value="#">Home</option><option value="#books">Books</option><option value="#blog">Blog</option><option value="#about">About Us</option><option value="#support">Support</option></select></nav>

</body></html>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px inset red; padding: 10px; t-align: left;">
<html><head> 
 <meta charset="UTF-8"> 
 
 <title>Convert Menu to Dropdown</title> 
 
 <style> 
    * { 
      margin: 0; 
      padding: 0; 
    } 
    h1 { 
      font: 300 21px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
      width: 500px; 
      margin: 0 auto 15px; 
    } 
    nav { 
      display: block; 
      width: 960px; 
      margin: 100px auto; 
      text-align: center; 
    } 
    nav ul { 
      list-style: none; 
    } 
    nav li { 
      display: inline-block; 
    } 
    nav a { 
      display: inline-block; 
      background: #333; 
      color: white; 
      padding: 5px 15px; 
      border: 1px solid white; 
      text-decoration: none; 
    } 
    nav a:hover { 
      border: 1px solid red; 
      background: red; 
    } 
    nav a:active { 
      background: blue; 
    } 
    nav select { 
      display: none; 
    } 
 
    @media (max-width: 960px) { 
      nav ul     { display: none; } 
      nav select { display: inline-block; } 
    } 
 
 </style> 
 
  
 
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
 <script> 
 // DOM ready 
 $(function() { 
 
      // Create the dropdown base 
      $("<select />").appendTo("nav"); 
 
      // Create default option "Go to..." 
      $("<option />", { 
         "selected": "selected", 
         "value"   : "", 
         "text"    : "Go to..." 
      }).appendTo("nav select"); 
 
      // Populate dropdown with menu items 
      $("nav a").each(function() { 
       var el = $(this); 
       $("<option />", { 
           "value"   : el.attr("href"), 
           "text"    : el.text() 
       }).appendTo("nav select"); 
      }); 
 
   // To make dropdown actually work 
   // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/ 
      $("nav select").change(function() { 
        window.location = $(this).find("option:selected").val(); 
      }); 
 
 }); 
 </script> 
</head> 
 
<body> 
 
 
  <nav> 
 
  
 
  <ul> 
  <li><a href="#" class="active">Home</a></li> 
  <li><a href="#books">Books</a></li> 
  <li><a href="#blog">Blog</a></li> 
  <li><a href="#about">About Us</a></li> 
  <li><a href="#support">Support</a></li> 
    </ul> 
 
  <select><option selected="selected" value="">Go to...</option><option value="#">Home</option><option value="#books">Books</option><option value="#blog">Blog</option><option value="#about">About Us</option><option value="#support">Support</option></select></nav> 
 
 <style type="text/css" style="display: none !important;"> 
 * { 
 margin: 0; 
 padding: 0; 
 } 
 body { 
 overflow-x: hidden; 
 } 
 #demo-top-bar { 
 text-align: left; 
 background: #222; 
 position: relative; 
 zoom: 1; 
 width: 100% !important; 
 z-index: 6000; 
 padding: 20px 0 20px; 
 } 
 #demo-bar-inside { 
 width: 960px; 
 margin: 0 auto; 
 position: relative; 
 overflow: hidden; 
 } 
 #demo-bar-buttons { 
 padding-top: 10px; 
 float: right; 
 } 
 #demo-bar-buttons a { 
 font-size: 12px; 
 margin-left: 20px; 
 color: white; 
 margin: 2px 0; 
 text-decoration: none; 
 font: 14px "Lucida Grande", Sans-Serif !important; 
 } 
 #demo-bar-buttons a:hover, 
 #demo-bar-buttons a:focus { 
 text-decoration: underline; 
 } 
 #demo-bar-badge { 
 display: inline-block; 
 width: 302px; 
 padding: 0 !important; 
 margin: 0 !important; 
 background-color: transparent !important; 
 } 
 #demo-bar-badge a { 
 display: block; 
 width: 100%; 
 height: 38px; 
 border-radius: 0; 
 bottom: auto; 
 margin: 0; 
 background: url(/images/examples-logo.png) no-repeat; 
 background-size: 100%; 
 overflow: hidden; 
 text-indent: -9999px; 
 } 
 #demo-bar-badge:before, #demo-bar-badge:after { 
 display: none !important; 
 } 
</style> 
 
 
</body></html></div>
<html lang="en"><head>

<title>Organic Tabs (with Replace State)</title>

// Calling the plugin
   $("#example-one").organicTabs();
   $("#example-two").organicTabs({
    "speed": 100,
    "param": "tab"
   });

});
 </script>
</head>

<body>

Trick css

Cara Membuat Rating Star Contoh: Star Ratings ☆ ☆ ☆ ☆ ☆ <html><head> <meta chars...

Baca selengkapnya »

KrisBrowser

Faceblog Menu

About me

Friend

Image Gallery

Video Gallery

Blog Archive

Recent Posts

About Me

Like us on Facebook

Hot Apps & Games

Text Widget

Social Media

Advertisement

Pembayaran

Leave a comment

Post Featured

Trick css