+ -

Pages

Rabu, 13 April 2011

CSS page 2 Blog Kang Fatur

Pada beberapa hari yang lalu, Saya telah posting Code-code CSS page satu, Punya Blog Kang Fatur. Dan kali ini saya posting Code CSS page dua komplit. Dengan harapan sobat bisa mempelajari, gimana buat Blog yang bagus kayak punya Kang Fatur.



CSS Page 2 Blog Kang Fatur

===================================================

/** Page structure tweaks for layout editor wireframe */

body#layout #main,
body#layout #sidebar {
padding: 0;}

.resensi{margin:10px 0 5px 0px;background:url(http://i649.photobucket.com/albums/uu217/teaade/copy-32x32.png) no-repeat 5px .7em;border:1px dashed #acc4db;padding:5px 10px 5px 55px;color:#FFF}

.perhatian{background:url(http://i649.photobucket.com/albums/uu217/teaade/i_folder_announce.png) no-repeat 5px .7em;color:#333;font-size:13px;padding:5px 10px 5px 55px;border:#acc4db dashed 1px;margin-bottom:15px;text-align:justify;color:#FFF}

.keterangan{background:url(http://i649.photobucket.com/albums/uu217/teaade/note_32.png) no-repeat 5px .7em;color:#333;font-size:13px;padding:5px 10px 5px 55px;border:#acc4db dashed 1px;margin-bottom:15px;text-align:justify;color:#FFF}

.catatan{background:url(http://i649.photobucket.com/albums/uu217/teaade/imagesqtbnANd9GcQHc10k3gO7nteQuC8T1OwEtLMU3EU3TSBp66WXgknqGT56S67X.jpg) no-repeat 5px .7em;color:#333;font-size:13px;padding:5px 10px 5px 55px;border:#acc4db dashed 1px;margin-bottom:15px;text-align:justify;color:#FFF}

.juga{background:url(http://i649.photobucket.com/albums/uu217/teaade/juga-2.png) no-repeat top left;color:#333;font-size:13px;line-height:0.6em;padding:5px 10px 5px 95px;border:#fff dashed 1px;margin-bottom:0px;text-align:justify;color:#FFF}

.nanya{background:url(http://www.mricons.com/store/png/1138_1752_48_help_question%20mark_icon.png) no-repeat top left;color:#333;font-size:13px;line-height:1.6em;padding:5px 10px 5px 50px;border:#fff dashed 1px;margin-bottom:0px;text-align:justify;color:#FFF}

#slider {
background:url(http://i649.photobucket.com/albums/uu217/teaade/BENER-4.jpg);
height: 184px;
overflow: hidden;
position: relative;
margin: 5px 0;
}

#mover {
width: auto;
position:absolute;
overflow:hidden;
}

.slide {
padding: 20px 0px;
width: 500px; /* Panjang Slider */
float: left;
position: relative;
height:200px; /* Lebar Slider */
}

.slide h2 { /* Tajuk Post */
font-family:georgia, Helvetica, Sans-Serif;
font-size: 20px;
color: #ac0000;
padding:0px 0px 0px 20px;
margin:0px 0px;
width:250px; /* Panjang Tajuk Post Slider */
overflow:hidden;
}

.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}

.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}

span.slmet { /* Petikan Post */
color: #FFFF00;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 250px;
padding:0px 0px 0px 20px;
margin:0px 0px;
text-transform:uppercase;
}

.slide p { /* Post By Disini */
color: #04B404;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 250px;
padding:0px 0px 0px 20px;
margin:0px 0px;
}

.slide img { /* Gambar Pada Slider */
position: absolute;
top: 10px;
left: 300px;
background:#fff;
padding:10px 10px;
width: 70px;
height: 70px;
}

#slider-stopper { /* Butang Stop */
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 70px;
right: 0px;
color: #AC0000;
padding: 3px 5px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}

.azisinfo{background:;border:3px dashed #ff0000;color:#fff;display:block;float:left;margin-bottom:10px;margin-top:0px;
overflow:auto;padding:5px;text-decoration:none;overflow: auto;}

.azisinfo img{
float:left;background:;border:1px dashed #0000ff;height:62px;margin:1px 5px 0 0;padding:4px;width:62px}

div.jquery-image-zoom {
line-height: 0;
font-size: 0;
z-index: 10;
border: 5px solid #fff;
margin: -5px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

div.jquery-image-zoom a {
background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;
display: block;
width: 25px;
height: 25px;
position: absolute;
left: -17px;
top: -17px;

/* IE-users are prolly used to close-link in right-hand corner */

*left: auto;
*right: -17px;
text-decoration: none;
text-indent: -100000px;
outline: 0;
z-index: 11;
}

div.jquery-image-zoom a:hover {
background-position: left -25px;
}

div.jquery-image-zoom img,
div.jquery-image-zoom embed,
div.jquery-image-zoom object,
div.jquery-image-zoom div {
width: 100%;
height: 100%;
margin: 0;
}

===================================================

/*– CSS Kursor Diikuti Jam –*/
.cursor_jam1{
background:transparent;
position:absolute;
top:0px;
left:0px;
width:16px;
height:16px;
font-family:cursive;
font-size:16px;
text-align:center;
font-weight:bolder;
}

.cursor_jam2{
position:absolute;
top:0px;
left:0px;width:12px;
height:12px;
font-family:cursive;
font-weight:bolder;
font-size:10px;
text-align:center;
}

/*– END CSS –*/

#ib-form iframe{
background:#ffffff url(http://i649.photobucket.com/albums/uu217/teaade/backroundpos.gif) no-repeat bottom right;
border:7px solid #C7C7C7;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#7EB2AC;
width:95%;height:250px;}

#ib-form iframe:hover{
background:#ffffff url(http://i649.photobucket.com/albums/uu217/teaade/backroundpos.gif) no-repeat bottom right;
border:7px solid #7EB2AC;}

#ib-form a{
color:#7EB2AC;}
blockquote {
display:block;
font-family:Book Antiqua;
font-size:11pt;
color: #01DF01;
overflow:auto;
background: transparent url(http://i649.photobucket.com/albums/uu217/teaade/kode.gif) left top no-repeat;
border-left: 5px solid #8A0808;
border-right: 5px solid #8A0808;
border-top: 5px solid #FA5858;
border-bottom: 5px solid #FA5858;
max-height:170px;
line-height:1.6em;
margin: 10px 0px 10px 15px;
padding: 15px 20px 15px 25px;
}

===================================================

/* tab model 2 ateonsoft.com */

div.Tabkang div.TFs
{height: 30px; overflow: hidden;}
div.Tabkang div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
background:#FF0000;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
}

div.Tabakang div.TFs a:hover
{ background: ;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabkang div.TFs a.Active
{ background: #0101DF;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabkang div.Pages
{ clear: both; overflow: hidden; height:200px; border:1px solid #EFF0F1; padding:0;background:; -moz-border-radius:5px; -moz-box-shadow: 0 0 10px #FFFFFF; -webkit-box-shadow: 0 0 10px #FFFFFF;
}

div.Tabkang div.Pages div.Page
{height: 100%;padding: 5px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}

===================================================

/* Drop Cap */
.awal {
float:left;
color: #ff0000;
background: url(http://i634.photobucket.com/albums/uu61/adetea/bat_3.gif)no-repeat center center;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;}

.avatar-image-container img {
background: url(http://i649.photobucket.com/albums/uu217/teaade/th_NoPictureDark32.jpg) no-repeat;
width: 35px;
height: 40px;
div.TabView3 div.Tabs
{height: 24px;
overflow: hidden;}
div.TabView div.Tabs
{height: 24px;
overflow: hidden;}
td.mbl_fo_hidden{display:none;}td.mbl_join_img{}td.mbl_join{}tr#tr0{display: none}th.mbl_h{display:none;}
.comment-body {
font-size:100%;
font-weight:normal;
color:black;}

--></style>
<style type='text/css'>
.post{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;line-height:1.6em;text-align:justify;}.post h3{background:url(http://i649.photobucket.com/albums/uu217/teaade/LOGOBLOGKANG1.png) no-repeat;margin:0px 0px 20px 0px;padding:0px 0px 5px 25px;color:$postTitleColor;font:$postTitleFont;text-decoration:none;text-align:left;line-height:1.4em;border-bottom:3px solid $posttitleBorderColor}
.post-body p{margin:0px 0px 0px 0px;padding:1px 0px 1px 0px;display:inline;height:1%;overflow:visible}.post-body p a,.post-body p a:visited{color:$mainLinkColor;text-decoration:none}.post-body a:hover{text-decoration:none;color:$mainHoverLinkColor}
</style>
<style type='text/css'>

===================================================

#main-wrapper{float:right;width:465px;margin:0px -5px 0px 0px;padding:0px 0px 0px 0px;word-wrap:break-word;overflow:hidden}

#side-wrapper1{width:155px;float:right;margin:5px 0px 0px 0px;padding:0px 5px 0px 0px;word-wrap:break-word;overflow:hidden}

#side-wrapper2{width:335px;float:right;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;word-wrap:break-word;overflow:hidden}

#side-wrapper{float:right;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;word-wrap:break-word;overflow:hidden}

.sidebar{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;text-align:left;font:$sidebarTextFont}

#sidebar3{width:150px;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;color:$sidebar1TextColor;line-height:1.8em}

#sidebar4{width:180px;margin:0px 5px 0px 0px;padding:0px 0px 0px 0px;color:$sidebar1TextColor;line-height:1.8em}

</style>

===================================================

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

===================================================

<script src='http://imagezoomnobi.googlecode.com/files/jquery.imageZoom.min.js' type='text/javascript'></script>

===================================================

<script type='text/javascript'> 
jQuery(document.body).imageZoom(); 
</script>


===================================================
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'>
</script>

===================================================

<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'>
</script>

===================================================

<script src='http://kangfatur.googlecode.com/files/emoticon1.js' type='text/javascript'>
</script>

===================================================
<script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'></script>
<script language='javascript'>
function Barva(koda)
{
document.getElementById("vzorec").bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById("vzorec2").bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}
</script>

===================================================

<script type='text/javascript'>
var hue;
var picker;
//var gLogger;
var dd1, dd2;
var r, g, b;
function init() {
if (typeof(ygLogger) != "undefined")
ygLogger.init(document.getElementById("logDiv"));
pickerInit();
//ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"
//ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"
}
// Picker ---------------------------------------------------------
function pickerInit() {
hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
hue.onChange = function(newVal) { hueUpdate(newVal); };
picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180);
picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };
hueUpdate();
dd1 = new YAHOO.util.DD("pickerPanel");
dd1.setHandleElId("pickerHandle");
dd1.endDrag = function(e) {
// picker.thumb.resetConstraints();
// hue.thumb.resetConstraints();
};
}
executeonload(init);
function pickerUpdate(newX, newY) {
pickerSwatchUpdate();
}
function hueUpdate(newVal) {
var h = (180 - hue.getValue()) / 180;
if (h == 1) { h = 0; }
var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);
document.getElementById("pickerDiv").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
pickerSwatchUpdate();
}
function pickerSwatchUpdate() {
var h = (180 - hue.getValue());
if (h == 180) { h = 0; }
document.getElementById("pickerhval").value = (h*2);
h = h / 180;
var s = picker.getXValue() / 180;
document.getElementById("pickersval").value = Math.round(s * 100);
var v = (180 - picker.getYValue()) / 180;
document.getElementById("pickervval").value = Math.round(v * 100);
var a = YAHOO.util.Color.hsv2rgb( h, s, v );
document.getElementById("pickerSwatch").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
document.getElementById("pickerrval").value = a[0];
document.getElementById("pickergval").value = a[1];
document.getElementById("pickerbval").value = a[2];
var hexvalue = document.getElementById("pickerhexval").value ='#'+
YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)
if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select();
}
</script>
<!--[if gte IE 5.5000]>

===================================================

<script type="text/javascript"> function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher. { for(var i=0; i<document.images.length; i++) { var img = document.images[i] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + img.style.cssText if (img.align == "left") imgStyle = "float:left;" + imgStyle if (img.align == "right") imgStyle = "float:right;" + imgStyle if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" img.outerHTML = strNewHTML i = i-1 } } } YAHOO.util.Event.addListener(window, "load", correctPNG); </script> <![endif]-->
<script>$(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });</script>

===================================================

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

===================================================

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

===================================================


<style type='text/css'>
    div.sexy-bookmarks {
    height:54px;
    background:url(" ") no-repeat left bottom;
    position:relative;
    width:530px;
    }
    div.sexy-bookmarks span.sexy-rightside {
    width:17px;
    height:54px;
    background:url(" ") no-repeat right bottom;
    position:absolute;
    right:10px;
    }
    div.sexy-bookmarks ul.socials {
    margin:0 !important;
    padding:0 !important;
    position:absolute;
    bottom:0;
    left: -5px;
    }
    div.sexy-bookmarks ul.socials li {
    display:inline-block !important;
    float:left !important;
    list-style-type:none !important;
    margin:0 !important;
    height:29px !important;
    width:48px !important;
    cursor:pointer !important;
    padding:0 !important;
    }
    div.sexy-bookmarks ul.socials a {
    display:block !important;
    width:48px !important;
    height:29px !important;
    font-size:0 !important;
    color:transparent !important;
    }
    .sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
    background:url('http://i941.photobucket.com/albums/ad259/spiceupyourblog/sexybookmarksbuttons.png') no-repeat !important;
    }
    .sexy-furl {
    background-position:-300px top !important;
    }
    .sexy-furl:hover {
    background-position:-300px bottom !important;
    }
    .sexy-digg {
    background-position:-500px top !important;
    }
    .sexy-digg:hover {
    background-position:-500px bottom !important;
    }
    .sexy-reddit {
    background-position:-100px top !important;
    }
    .sexy-reddit:hover {
    background-position:-100px bottom !important;
    }
    .sexy-stumble {
    background-position:-50px top !important;
    }
    .sexy-stumble:hover {
    background-position:-50px bottom !important;
    }
    .sexy-delicious {
    background-position:left top !important;
    }
    .sexy-delicious:hover {
    background-position:left bottom !important;
    }
    .sexy-yahoo {
    background-position:-650px top !important;
    }
    .sexy-yahoo:hover {
    background-position:-650px bottom !important;
    }
    .sexy-blinklist {
    background-position:-600px top !important;
    }
    .sexy-blinklist:hover {
    background-position:-600px bottom !important;
    }
    .sexy-technorati {
    background-position:-700px top !important;
    }
    .sexy-technorati:hover {
    background-position:-700px bottom !important;
    }
    .sexy-myspace {
    background-position:-200px top !important;
    }
    .sexy-myspace:hover {
    background-position:-200px bottom !important;
    }
    .sexy-twitter {
    background-position:-350px top !important;
    }
    .sexy-twitter:hover {
    background-position:-350px bottom !important;
    }
    .sexy-facebook {
    background-position:-450px top !important;
    }
    .sexy-facebook:hover {
    background-position:-450px bottom !important;
    }
    .sexy-mixx {
    background-position:-250px top !important;
    }
    .sexy-mixx:hover {
    background-position:-250px bottom !important;
    }
    .sexy-script-style {
    background-position:-400px top !important;
    }
    .sexy-script-style:hover {
    background-position:-400px bottom !important;
    }
    .sexy-designfloat {
    background-position:-550px top !important;
    }
    .sexy-designfloat:hover {
    background-position:-550px bottom !important;
    }
    .sexy-syndicate {
    background-position:-150px top !important;
    }
    .sexy-syndicate:hover {
    background-position:-150px bottom !important;
    }
    .sexy-email {
    background-position:-753px top !important;
    }
    .sexy-email:hover {
    background-position:-753px bottom !important;
    }
    </style>

===================================================

<script type='text/javascript'>
if(document.location.protocol=='http:'){
 var Tynt=Tynt||[];Tynt.push('b4E7hiq9ar4ls3adbi-bnq');Tynt.i={"ap":"Dikutip dari:"};
 (function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://tcr.tynt.com/ti.js';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})();
}
</script>

===================================================

<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

</head>

===================================================
5 pastimudeng: CSS page 2 Blog Kang Fatur Pada beberapa hari yang lalu, Saya telah posting Code-code CSS page satu, Punya Blog Kang Fatur. Dan kali ini saya posting Code CSS page dua...

Tidak ada komentar:

Posting Komentar

Tolong Isi Komentar Demi Perbaikan Blog Ini

< >