TheÐevil's

Showing posts with label widget. Show all posts

Wednesday, February 13, 2013

Add Social Media Share Widget To Blogger With Cool Hover Effect

Posted by Nganuah 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;'/>

Tambahkan CSS Murni Menampilkan Widget Sosial Kontra

Posted by Nganuah at 3:34 AM · 0 comments

DEMO

HTML/JavaScript Gadget:

<style type="text/css">
.container {
  margin: 0px auto;
  width: 300px;
  text-align: center;
}

.btn-sbm {
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin: 0 5px;
  padding-top: 40px;
  width: 75px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.btn-sbm:active {
  margin-top: 3px;
}

.btn-sbm:active .btn-sbm-action {
  padding-bottom: 3px;
  -webkit-box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
}

.btn-sbm:active .btn-sbm-action:after {
  bottom: 3px;
}

.btn-sbm-count {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  line-height: 40px;
  font-size: 19px;
  letter-spacing: -1px;
  color: #555;
  text-shadow: 0 1px white;
  background: #e6eff5;
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: #c5c5c5 #bbb;
  border-radius: 8px 8px 0 0;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
}

.btn-sbm-count:before, .btn-sbm-count:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: #e6eff5;
}

.btn-sbm-count:before {
  margin-left: -7px;
  margin-top: 1px;
  border-width: 7px;
  border-top-color: rgba(0, 0, 0, 0.07);
}

.btn-sbm-action {
  display: block;
  position: relative;
  line-height: 32px;
  padding: 2px 0 6px;
  font-size: 14px;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  border: solid rgba(0, 0, 0, 0.18);
  border-width: 0 1px;
  border-radius: 0 0 8px 8px;
}

.btn-sbm-action:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 6px;
  left: 0;
  right: 0;
  border-radius: 0 0 6px 6px;
  -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
}

.btn-sbm-tweet {
  background: #83cfe8;
  background-image: -webkit-linear-gradient(top, #83cfe8, #6ebbd4);
  background-image: -moz-linear-gradient(top, #83cfe8, #6ebbd4);
  background-image: -o-linear-gradient(top, #83cfe8, #6ebbd4);
  background-image: linear-gradient(to bottom, #83cfe8, #6ebbd4);
  -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
}

.btn-sbm-tweet:after {
  -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
}

.btn-sbm-tweet + .btn-sbm-count {
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
}

.btn-sbm-like {
  background: #6480bd;
  background-image: -webkit-linear-gradient(top, #6480bd, #3c5894);
  background-image: -moz-linear-gradient(top, #6480bd, #3c5894);
  background-image: -o-linear-gradient(top, #6480bd, #3c5894);
  background-image: linear-gradient(to bottom, #6480bd, #3c5894);
  -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
}

.btn-sbm-plus {
  background: #626262;
  background-image: -webkit-linear-gradient(top, #626262, #404040);
  background-image: -moz-linear-gradient(top, #626262, #404040);
  background-image: -o-linear-gradient(top, #626262, #404040);
  background-image: linear-gradient(to bottom, #626262, #404040);
  -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
}

</style>

<br/>
<div class="container">

     <a href="https://twitter.com/jeri_agus" rel="nofollow" target="_blank"rel="author"  title="Find us on twitter" class="btn-sbm">
      <span class="btn-sbm-action btn-sbm-tweet">Twitter</span>
      <span class="btn-sbm-count">150+</span>
    </a>

    <a href="http://www.facebook.com/jery.agus.37" rel="nofollow" target="_blank" title="Find us on facebook" class="btn-sbm">
      <span class="btn-sbm-action btn-sbm-like">Facebook</span>
      <span class="btn-sbm-count">650+</span>
    </a>

    <a href="https://plus.google.com/116233378330566694358" class="btn-sbm" target="_blank" rel="author" title="Find us on Google+">
      <span class="btn-sbm-action btn-sbm-plus">Google+</span>
      <span class="btn-sbm-count">140+</span>
    </a><br/>
</div><a style="float:right; color: #ffffff"href="http://logcyber.blogspot.com/2013/02/tambahkan-css-murni-menampilkan-widget.html">Get This</a>

Monday, February 11, 2013

Counting Till 2012 Counting Till 2012

Posted by Nganuah at 6:00 AM · 0 comments

ADD GADGET DI LAYOUT BLOG ANDA :

<style>

.lcdstyle{ /*Example CSS to create LCD countdown look*/
background:#fff;
color:#289728;
font: bold 20px arial;
padding: 15px;

border:5px solid #333333;

border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
box-shadow: 5px 5px 5px #CCCCCC;


}

.lcdstyle sup{ /*Example CSS to create LCD countdown look*/
font-size: 120%
}

</style>

<script type="text/javascript">

function cdtime(container, targetdate){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.currentTime=new Date()
this.targetdate=new Date(targetdate)
this.timesup=false
this.updateTime()
}

cdtime.prototype.updateTime=function(){
var thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}

cdtime.prototype.displaycountdown=function(baseunit, functionref){
this.baseunit=baseunit
this.formatresults=functionref
this.showresults()
}

cdtime.prototype.showresults=function(){
var thisobj=this


var timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=this.formatresults()
return
}
var oneMinute=60 //minute unit in seconds
var oneHour=60*60 //hour unit in seconds
var oneDay=60*60*24 //day unit in seconds
var dayfield=Math.floor(timediff/oneDay)
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
hourfield=dayfield*24+hourfield
dayfield="n/a"
}
else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
minutefield=dayfield*24*60+hourfield*60+minutefield
dayfield=hourfield="n/a"
}
else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
var secondfield=timediff
dayfield=hourfield=minutefield="n/a"
}
this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}

/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////

//Create your own custom format function to pass into cdtime.displaycountdown()
//Use arguments[0] to access "Days" left
//Use arguments[1] to access "Hours" left
//Use arguments[2] to access "Minutes" left
//Use arguments[3] to access "Seconds" left

//The values of these arguments may change depending on the "baseunit" parameter of cdtime.displaycountdown()
//For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"
//For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc


function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=arguments[0]+" days "+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds left until December 25, 2011 18:25:00"
}
else{ //else if target date/time met
var displaystring=""
}
return displaystring
}

function formatresults2(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup> "+arguments[1]+" <sup>hours</sup> "+arguments[2]+" <sup>minutes</sup> "+arguments[3]+" <sup>seconds</sup></span> "
}
else{ //else if target date/time met
var displaystring="" //Don't display any text
alert("HAPPY NEW YEAR EVERYBODY!") //Instead, perform a custom alert
}
return displaystring
}

</script>
<br />
<table><tbody>
<tr>
<td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSFAUv0Z2rGUBMJiR7RuOAXpYEUg0oMV40krzXsYl3QsiA5qbcyrSA61j9UaU6qQxSrFktb0OfOHo7fiapcyLjf3hxmbijv24GA4EzjveTlK76utSw0k04ksplH7bbYOrLF8Upn5_p9o/s400/NEW+YEAR.png" style="float: left;" width="125px" />
<br />
<h1 style="color: #289728; padding-top: 40px;">
Counting Till 2012 »»</h1>
<br /></td></tr>
<tr><td><div id="countdowncontainer">
</div>
<br />
<div id="countdowncontainer2">
</div>
<script type="text/javascript">

var futuredate=new cdtime("countdowncontainer", "March 23, 2009 18:25:00")
futuredate.displaycountdown("days", formatresults)

var currentyear=new Date().getFullYear()
//dynamically get this Christmas' year value. If Christmas already passed, then year=current year+1
var thischristmasyear=(new Date().getMonth()>=11 && new Date().getDate()>31)? currentyear+1 : currentyear
var christmas=new cdtime("countdowncontainer2", "December 31, "+thischristmasyear+" 0:0:00")
christmas.displaycountdown("days", formatresults2)

</script>

</td></tr>
</tbody></table>

DEMO

Menyesuaikan Cloud Label di Blogger Menyesuaikan Cloud Label di Blogger

Posted by Nganuah 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;
}

DEMO

Saturday, February 9, 2013

Widget Pengatur Ukuran & Warna Text posting

Posted by Nganuah at 6:49 AM · 0 comments

DEMO

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

Friday, February 8, 2013

Macam -Macam Spoiler Macam -Macam Spoiler

Posted by Nganuah at 7:15 AM · 0 comments

Berikut Macam -Macam Spoiler Sobat, Klik dibawah ini

Contoh 1

Letakkan tulisan , artikel , gambar disini

Kodenya ;

<div style="border: 0px inset green; padding: 0px;">
<div>
<button class="button" onclick="this.parentNode.parentNode.childNodes[1].style.display = ''; this.parentNode.style.display = 'none';" title="Click to show the spoiler." type="button"><span style="color: black;"><span style="color: #DF0101; font-weight: bold;"><blink>J U D U L S P O I L E R</blink></span></span></button></div>
<div id="spoiler" style="display: none;">
<span style="color: #006600; font-weight: bold;">Letakkan tulisan , artikel , gambar disini</span></div>
</div>

Contoh 2

Kodenya ;

<div id="spoiler"><div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="LIHAT" /></div><div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"><p style="text-align: justify;">Letakkan tulisan , artikel , gambar disini</p></div><div id="hide"></div></div></div>

Contoh 3

Judul

kodenya ;

<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;">Judul</span></i><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="SPOILER" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Letakkan artikel sobat disini</div>
</div>
</div>
</div>

Contoh 4

Kodenya ;

<div id="spoiler"><div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="BUKA" /></div><div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"><div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;"><p style="text-align: justify;">LETAKKAN KODENYA DISINI</p></div><div id="hide"></div></div></div>

Contoh 5

Kodenya ;

<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;"><input value="Open" style="margin: 0px; padding: 0px; width: 60px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">Letakan artikel sobat disin</div></div></div>

Selamat mencoba
Narasumber ; www.mbahgoogle.com

Wednesday, February 6, 2013

CSS Drop Down Multi Sub Menu CSS Drop Down Multi Sub Menu

Posted by Nganuah 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>

DEMO

Tuesday, February 5, 2013

Widget Recent Post Black With Thumbnail Image

Posted by Nganuah at 5:27 AM · 0 comments

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
div.spy-outer {
  border:2px solid #333;
  -webkit-box-shadow:0px 1px 3px black;
  -moz-box-shadow:0px 1px 3px black;
  box-shadow:0px 1px 3px black;
  margin:0px auto;
}
div.spy-outer h2 {
  margin:0px 0px;
  padding:5px 10px;
  background:#aaa; border-top:1px solid #444;
  border-bottom:1px solid #000;
  background:-webkit-linear-gradient(top, #222, #222);
  background:-moz-linear-gradient(top, #222, #222);
  background:-ms-linear-gradient(top, #222, #222);
  background:-o-linear-gradient(top, #222, #222);
  background:linear-gradient(top, #222, #222);
  color:#1F88A7;
  font:bold 13px dungeon;
  text-transform:none;
  text-shadow:0px 1px 2px black;
}

ul.spy {
  margin:0px 0px;
  padding:0px 0px;
  font:normal 12px/12px "Consolas","Courier New",Courier,mono,serif;
  color:#808080;
  overflow:hidden;
}
ul.spy li {
  list-style:none;
  text-align:left;
  margin:0px 0px;
  padding:5px 7px;
  background:#323232;
  background:-webkit-linear-gradient(top, #222, #222);
  background:-moz-linear-gradient(top, #222, #222);
  background:-ms-linear-gradient(top, #222, #222);
  background:-o-linear-gradient(top, #222, #222);
  background:linear-gradient(top, #222, #222);
  border-top:1px solid #666;
  border-bottom:1px solid #000;
  word-wrap:break-word;
  overflow:hidden;
}
ul.spy a {text-decoration:none;}
ul.spy li em {
  font-weight:bold;
  color:#808000;
}
ul.spy a.header {
  font:bold 12px/14px 'century gothic',Arial,Sans-Serif;
  display:block;
  color:#bbb;
  text-shadow:0px -1px 1px black;
}
ul.spy a.header:hover {
  color:#777;
  text-decoration:underline;
}
ul.spy li .summ {
  margin-top:5px;
  overflow:hidden;
}
ul.spy li .imgwrap, ul.spy li img {
  float:right;
  margin:0px 0px 2px 7px;
  width:72px;
  height:72px;
  -webkit-border-radius:38px;
  -moz-border-radius:38px;
  border-radius:38px;
  -webkit-transition:all 1s ease-out;
  -moz-transition:all 1s ease-out;
  -ms-transition:all 1s ease-out;
  -o-transition:all 1s ease-out;
  transition:all 1s ease-out;
  background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%;
  padding:0px;
}
ul.spy li .imgwrap, ul.spy li img {
  -webkit-box-shadow:0px 0px 0px 4px #222, 0px 0px 3px 4px #555;
  -moz-box-shadow:0px 0px 0px 4px #222, 0px 0px 3px 4px #555;
  box-shadow:0px 0px 0px 4px #222, 0px 0px 3px 4px #555;
}
ul.spy li img {
  border:none !important;
  float:none;
  margin:0px 0px;
  padding:0px 0px;
  display:none;
}
ul.spy li img:hover {
  -webkit-box-shadow:0px 0px 0px 4px #444, 0px 0px 3px 4px #fff;
  -moz-box-shadow:0px 0px 0px 4px #444, 0px 0px 3px 4px #fff;
  box-shadow:0px 0px 0px 4px #444, 0px 0px 3px 4px #fff;
  -webkit-transform:rotate(-720deg);
  -moz-transform:rotate(-720deg);
  -ms-transform:rotate(-720deg);
  -o-transform:rotate(-720deg);
  transform:rotate(-720deg);
}
</style>
<script type='text/javascript'>
var spyTitle       = "Artikel Terbaru",
    numposts       = 7,
    numchars       = 127,
    komentar       = "Komentar",
    pBlank         = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg";
    modeID             = true;
    showSummaries      = true;
    openNewTab         = false;
    showPostDate       = true;
    showComment        = true;
    showThumbnails     = true;
    animatedRecentPost = true;
    limitspy           = 4;
    intervalspy        = 4000;
    tickspeed          = 1000;
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/rp-spy-whatever-v1.js"></script>
<script src="http://logcyber.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>

ganti http://logcyber.blogspot.com/ dengan url blog agn...

demo

Friday, January 25, 2013

daftar isi by logcyber daftar isi by logcyber

Posted by Nganuah at 6:26 AM · 0 comments

<style>#daftar-isi-body{         width:760px!important;
         height:600px!important;         padding:30px 40px;
         margin:0 auto;
}
 #daftar-isi-wrap 
{
         margin: 0 auto;
}
 .box-posting 
{
         background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSbq-2DuRaSFRS7QLoKtqRs1iezUxlY8-Dp66Y3m7AjPNo2AmmTMJG1ynw0kCj1NnaMbBRgYx1ChM8-0dmv1ZwW8-MIyiAHSt6NMAgimjqVpBeafvG2ww-389lWBDL8hyphenhyphenKQOHhu-I9uM/s1600/bg-box.png);
         background-position:bottom center;
         background-repeat:no-repeat;
         overflow:hidden;
         cursor:pointer;
         float:left;
         height:140px;
         width:248px;
         margin:-50px 0 0 0;
}
 .box-posting img 
{
         height:46px;
         width:46px;
         float:left;
         margin:20px 0 0 25px;
         background-color:#2E0700;
         border:1px solid #2E0700;
         -webkit-border-radius: 30px;
         -moz-border-radius: 30px;
         border-radius: 50%;
}
 .box-posting .judul-posting 
{
         float:left;
         height:35px;
         margin:0;
         width:220px;
}
 .box-posting .judul-posting a
{
         font-family:arial,Serif !important;
         color:#774A34!important;
         text-shadow:0 0 1px rgba(0,0,0,0.9);
         margin:-40px 0 0 80px;
         display:block;
         font-size:13px !important;
         line-height:18px!important;
         font-weight:bold !important;

}
 .box-posting .judul-posting a:hover
{
         color:#333!important;
}
 .box-posting:hover 
{
         border-left-color:#C6EB04;
}

 #totales 
{
         text-align:center;
         color:#774A34 !important;
         text-shadow:0 1px rgba(0,0,0,0.2);

}
 #loadingscript 
{
         color:#444;
         font-family:Century Gothic;
         font-size:100px;
         letter-spacing:-10px;
         text-align:center;
         text-shadow:-5px 0 1px #444;
}
 #paginacion 
{
         color:#BBB;
         font-size:24px;
         font-weight:bold;
         height:35px;
         line-height:28px;
         padding:0;
         margin:0 auto;
         text-align:center;
}
 #paginacion span,#paginacion a 
{
         display:inline-block;
         font-size:13px !important;
         line-height:24px;
         font-weight:bold;
         margin:0 1px;
         width:25px;
         height:25px;
}
#paginacion a, #paginacion span.actual  
{
         background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI48bNIR6GxIzglfO18iyQzQikm1oXN7ijrBZR1vOsrDa7iVmiL9YPACrmpzDcpoh7BH98AZqMIInVgTRLTrbcUw3_6LXjhTPgl7p84FxD88za3idwWH9LDc9vCpFdPTc7wYflXfDhlz4/s1600/page-link.png);
         background-position:top center;
         background-repeat:no-repeat;
         color:#250700 !important;
         text-shadow:0px 1px 0px rgba(255,255,255,0.1);
}
 #paginacion span.actual 
{
         color:#774A34 !important;

}
 #paginacion a:hover 
{
         color:#FFF !important;
}
 #paginacion .nextprev-link,
 #paginacion span.nextprev-link 
{         border:none;
         color:#250700 !important;
         text-shadow:0px 1px 0px rgba(255,255,255,0.1);
         width:100px;
         background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeletWIfCyg7RWrfpkwCYeWFEdIsTj-rhjlnyjNnu11I-r6NXR8v4Ck4U1jx6BPTMVXfgrGKUmgzwl86h2sR_loUIvf92pg39w6IxPwJFCLKDlyfeIGLmWk5uQiiyJR-PY1ZDfve4zw_w/s1600/nextprev.png);
         background-position:top center;
         background-repeat:no-repeat;
}
</style>

                           <script type="text/javascript"> 
                                 var jumlahposting = 18;
                   var urlblog = "http://logcyber.blogspot.com/";
                   var minpaginas = 5;
                   var maxpaginas = 10;
                   var thumbs = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFS4ojojKxZ8D4Xe0zfehRBRP9lbVz-hZrViQgLozyhUQxCU9rA9G9cUKGoxU047uPtfR_P0S6XGWf5N7RbfPit1fjtMCnYZ3c1tcmVoxOjg9rhlL2xDwbZAtFHFviR0xUQICbnGeKjSw/s1600/icon-img.png";
</script><script language="javascript" src="http://free-files-urangkurai.googlecode.com/files/sitemap.js"></script>

DEMO

Tuesday, January 22, 2013

Pure CSS3 Glossy Social Media Drop Down Menu

Posted by Nganuah at 4:17 AM · 0 comments

Sebuah menu media sosial yang terbuat dari (hampir) murni CSS3. Di sini Saya menggunakan kombinasi CSS3 Gradien dan Box Shadow untuk menciptakan efek realistis. Pada dasarnya, tombol panah di sisi kanan adalah pseudo elemen dari elemen <label> yang kemudian Saya tutupi dengan elemen checkbox.
Setelah itu, Saya menyembunyikan wujudnya dengan CSS transparasi.
Jadi, ketika Anda mengeklik tombol drop down di bagian kanan, maka yang terjadi sebenarnya adalah Anda sedang mengeklik elemen checkbox transparan yang berada di atas elemen palsu (pseudo elemen) dari <label>:

HTML

<div class="glossy-selectbox">
    <input type="checkbox">
    <label data-default="Share This Post!" data-focus="Select one of the social media service..."></label>
    <ul>
        <li><a class="social-rss" href="#" target="_blank">RSS Feed</a></li>
        <li><a class="social-facebook" href="#" target="_blank">Facebook</a></li>
        <li><a class="social-twitter" href="#" target="_blank">Twitter</a></li>
        <li><a class="social-google" href="#" target="_blank">Google+</a></li>
    </ul>
</div>

CSS

/*
 * Pure CSS3 (with some data URI images for the social media icons) Drop Down Menu for Social Media Sharing
 * Author: Taufik Nurrohman
 * URL: https://plus.google.com/108949996304093815163/about
 */

.glossy-selectbox {
  display:inline-block;
  font:normal bold 12px Arial,Sans-Serif;
  position:relative;
  width:300px;
  background-color:#111;
  text-align:left;
  /* CSS3 Browser */
  background-image:-webkit-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:-moz-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:-ms-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:-o-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  /* IE only */
  filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#333333',endColorstr='#111111');
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  border-radius:7px;
  -webkit-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
  box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
}

.glossy-selectbox:before,
.glossy-selectbox:after {
  content:"";
  display:block;
  width:0;
  height:0;
  border:3px solid transparent;
  border-width:5px 3px;
  border-bottom-color:#999;
  position:absolute;
  top:25%;
  right:5px;
  z-index:4;
}

.glossy-selectbox:after {
  border-color:#999 transparent transparent;
  top:auto;
  bottom:25%;
}

.glossy-selectbox input {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:15px;
  height:100%;
  opacity:0;
  z-index:10;
  cursor:pointer;
}

.glossy-selectbox label {
  display:block;
  line-height:45px;
  color:rgba(255,255,255,.5);
  padding:0 15px;
  -webkit-transition:all 0s ease-out;
  -moz-transition:all 0s ease-out;
  -ms-transition:all 0s ease-out;
  -o-transition:all 0s ease-out;
  transition:all 0s ease-out;
}

.glossy-selectbox label:before {
  content:attr(data-default);
}

.glossy-selectbox label:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:15px;
  border-left:1px solid rgba(0,0,0,.4);
  -webkit-border-radius:0 7px 7px 0;
  -moz-border-radius:0 7px 7px 0;
  border-radius:0 7px 7px 0;
  -webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
  -moz-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
}

.glossy-selectbox input:hover + label {
  color:white;
}

.glossy-selectbox input:hover + label:after {
  background-color:rgba(255,255,255,.04);
}

.glossy-selectbox ul {
  margin:0 0;
  padding:0 0;
  position:absolute;
  top:100%;
  left:14px;
  right:14px;
  background-color:#222;
  border:1px solid #111;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
  visibility:hidden;
  opacity:0;
  z-index:99;
}

.glossy-selectbox li {
  margin:0 0;
  padding:0 0;
  list-style:none;
  float:left;
  width:50%;
  display:inline;
}

.glossy-selectbox a {
  display:block;
  position:relative;
  color:#999;
  text-decoration:none;
  text-shadow:0 0 2px black;
  line-height:30px;
  border-top:1px solid #111;
  border-right:1px solid #111;
  padding:0 15px 0 32px;
  -webkit-box-shadow:inset 0 0 0 1px #333;
  -moz-box-shadow:inset 0 0 0 1px #333;
  box-shadow:inset 0 0 0 1px #333;
  /* Opera note: An unstable box shadow will appear if you don't define the border radius less than 1 pixel. Weird! */
  -webkit-border-radius:1px;
  -moz-border-radius:1px;
  border-radius:1px;
}

.glossy-selectbox a:nth-child(even) {
  border-right-width:0;
}

.glossy-selectbox a:before {
  content:"";
  display:block;
  width:16px;
  height:16px;
  position:absolute;
  top:7px;
  left:7px;
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:50% 0;
}

.glossy-selectbox a:hover:before {
  background-position:50% 100%;
}

.glossy-selectbox .social-rss:before      {background-image:url('img/social_rss.png');}
.glossy-selectbox .social-facebook:before {background-image:url('img/social_facebook.png');}
.glossy-selectbox .social-twitter:before  {background-image:url('img/social_twitter.png');}
.glossy-selectbox .social-google:before   {background-image:url('img/social_google.png');}

.glossy-selectbox a:hover {
  background-color:rgba(0,0,0,.2);
  color:#ccc;
}

/* On click, then... */
.glossy-selectbox input:checked + label {
  color:rgba(255,255,255,.4);
  -webkit-transition-duration:.4s;
  -moz-transition-duration:.4s;
  -ms-transition-duration:.4s;
  -o-transition-duration:.4s;
  transition-duration:.4s;
}

.glossy-selectbox input:checked + label:before {
  content:attr(data-focus);
}

.glossy-selectbox input:checked + label:after {
  background-color:rgba(0,0,0,.2);
  -webkit-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
  -moz-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
  box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
}

.glossy-selectbox input:checked ~ ul {
  visibility:visible;
  opacity:1;
}

Navbar

Search This Blog

Wednesday, February 13, 2013

Add Social Media Share Widget To Blogger With Cool Hover Effect

Tambahkan CSS Murni Menampilkan Widget Sosial Kontra

Monday, February 11, 2013

Counting Till 2012 Counting Till 2012

Menyesuaikan Cloud Label di Blogger Menyesuaikan Cloud Label di Blogger

Saturday, February 9, 2013

Widget Pengatur Ukuran & Warna Text posting

Friday, February 8, 2013

Macam -Macam Spoiler Macam -Macam Spoiler

Wednesday, February 6, 2013

CSS Drop Down Multi Sub Menu CSS Drop Down Multi Sub Menu

Tuesday, February 5, 2013

Widget Recent Post Black With Thumbnail Image

Friday, January 25, 2013

daftar isi by logcyber daftar isi by logcyber

Tuesday, January 22, 2013

Pure CSS3 Glossy Social Media Drop Down Menu

HTML

CSS

Musik