Minggu, 15 April 2012

Variasi Template dengan Trik CSS 3

0 komentar


tak-atik template malah jadinya lumayan bagus neh zob. Cuman tambahin dikit-dikit di template yang aku temuin di google dengan kode CSS 3 Box Shadow, Border Radius dan Gradient and sekarang udah berubah total tuh template, kagak bisa dikenalin lagi .. kagak percaya neh zob, langsung aja yuk kita liat. Tapi ya itu, pojoknya ntar jadinya melengkung semua. Mulai dari Header, Mainwrapper, Outerwrapper, sidebar ampe Footerwrapper semuanya melengkung dan berwarna lagi. Kalo kalian mau, tinggal kalian klik spoiler, ntar didalamnya ada kode HTML templatenya, tinggal dicopas doang dan tempelkan di blog kalian .. Yuks see it brader .. kayak gimana tuh templatenya .. paling juga biasa aja .. hehe ::-->>
Contoh klik bawah ini




<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Platform : Blogspot
Designer : Agung Wisudhatama
Template : Modifikasi CSS 3
Date : 21 Juli 2011
URL : www.1001tawa.blogspot.com
----------------------------------------------- */
/* Variable definitions
=======================
<Variable name="bgcolor" description="Page Background Color" type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color" type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color" type="color" default="#58a" value="#5588aa">
<Variable name="pagetitlecolor" description="Blog Title Color" type="color" default="#666" value="#666666">
<Variable name="descriptioncolor" description="Blog Description Color" type="color" default="#999" value="#999999">
<Variable name="titlecolor" description="Post Title Color" type="color" default="#c60" value="#cc6600">
<Variable name="bordercolor" description="Border Color" type="color" default="#ccc" value="#cccccc">
<Variable name="sidebarcolor" description="Sidebar Title Color" type="color" default="#999" value="#999999">
<Variable name="sidebartextcolor" description="Sidebar Text Color" type="color" default="#666" value="#666666">
<Variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font" type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
<Variable name="headerfont" description="Sidebar Title Font" type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font" default="normal normal 200% Georgia, Serif" value="normal bold 200% Verdana, sans-serif">
<Variable name="descriptionfont" description="Blog Description Font" type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font" type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
*/
/* Bisa digunakan di template kalian
------------------------------------ */
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
body {
background:#000000;
margin:0;
padding:0;
font:80% Arial, Sans-serif;
text-align: center;
color:#000;
}
a:link {
color:#800000;
text-decoration:none;
}
a:visited {
color:#800000;
text-decoration:none;
}
a:hover {
color:#800000;
text-decoration:underline;
}
#main .post-body a {
color:#444;
text-decoration:underline;
}
#main .post-body a:hover {
color:#777;
}
a img {
border-width:0;
}
/* Header
---------*/
#header-wrapper {
background:URL('http://i1136.photobucket.com/albums/n492/agung4wisudhatama/DarkEmo/1001tawagambar.jpg') no-repeat;
width:750px;
height:220px;
margin:10px 0px 20px 10px;
padding:0px 0px 10px 0px;
text-align:left;
border-top:12px inset #ff0000;
border-bottom:12px inset #ff0000;
border-left:12px inset #ff0000;
border-right:12px inset #ff0000;
-moz-border-radius-topright:50px;
-moz-border-radius-topleft:50px;
-webkit-border-radius-top-right:50px;
-webkit-border-radius-top-right:50px;
-moz-box-shadow:inset 54px 11px 21px #0ef516;
-webkit-box-shadow:inset 54px 11px 21px #0ef516;
box-shadow:inset 54px 11px 21px #0ef516;
-moz-box-shadow: 9px 8px 8px #eb4715;
-webkit-box-shadow: 9px 8px 8px #eb4715;
box-shadow: 9px 8px 8px #eb4715;
}
#header {
height:60px;
margin:0;
padding:0;
}
#header h1 {
margin:0;
padding:0px 0 0 0px;
font-size: 0%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.1em;
font-style:italic;
color:#FFFFFF;
}
#header a {
color:#FFFFFF;
text-decoration:none;
}
#header a:hover {
color:#CCCCCC;
text-decoration:underline;
}
.descriptionwrapper p {
margin:0;
padding:0 0 0 0px;
line-height: 1.3em;
font-style: italic;
font-weight:bold;
letter-spacing:.1em;
color: #FFFFFF;
}
#header-wrapper .top-nav a {
background:#77b842;
margin:0;
padding:2px 10px 3px;
border-top:0px solid #c9eeab;
border-left:0px solid #c9eeab;
border-right:0px solid #c9eeab;
text-decoration:none;
color:#FFFFFF;
}
#header-wrapper .top-nav a:hover {
background:#a4e470;
color:#000;
text-decoration:none;
}
.top-nav ul {
margin:0;
padding:185px 10px 0;
list-style:none;
float:right;
}
.top-nav li {
margin:0;
padding:0;
display:inline;
}
/* Outer-Wrapper
---------------- */
#outer-wrapper {
background:#00ffff;
width: 800px;
margin:0 auto;
padding:0;
text-align:left;
border-top:12px inset #ff0000;
border-bottom:12px inset #ff0000;
border-left:12px inset #ff0000;
border-right:12px inset #ff0000;
-moz-border-radius-topright:50px;
-moz-border-radius-topleft:50px;
-webkit-border-radius-top-right:50px;
-webkit-border-radius-top-left:50px;
-moz-box-shadow:inset 54px 11px 21px #0ef516;
-webkit-box-shadow:inset 54px 11px 21px #0ef516;
box-shadow:inset 54px 11px 21px #0ef516;
-moz-box-shadow: 9px 8px 8px #eb4715;
-webkit-box-shadow: 9px 8px 8px #eb4715;
box-shadow: 9px 8px 8px #eb4715;
}
#main-wrapper {
background:-moz-linear-gradient(82% 1% 0deg, #4CFFFD, #FF0000 46%);
width: 360px;
float: left;
margin:5px 5px 5px 5px;
padding:0;
word-wrap: break-word;
overflow: hidden;
border-top:8px inset #ff0000;
border-bottom:8px inset #ff0000;
border-left:8px inset #ff0000;
border-right:8px inset #ff0000;
-moz-border-radius-topleft:30px;
-moz-border-radius-bottomright:30px;
-webkit-border-radius-top-left:30px;
-webkit-border-radius-bottom-right:30px;
-moz-box-shadow:inset 54px 11px 21px #0ef516;
-webkit-box-shadow:inset 54px 11px 21px #0ef516;
box-shadow:inset 54px 11px 21px #0ef516;
-moz-box-shadow: 9px 8px 8px #eb4715;
-webkit-box-shadow: 9px 8px 8px #eb4715;
box-shadow: 9px 8px 8px #eb4715;
}
#sidewrapper-left {
width:140px;
float:left;
margin:5px 10px 5px 15px;
padding:5px 10px 5px 15px;
word-wrap: break-word;
overflow: hidden;
border-top:8px inset #ff0000;
border-bottom:8px inset #ff0000;
border-left:8px inset #ff0000;
border-right:8px inset #ff0000;
-moz-border-radius-topright:30px;
-moz-border-radius-topleft:30px;
-webkit-border-radius-top-right:30px;
-webkit-border-radius-top-right:30px;
-moz-box-shadow:inset 54px 11px 21px #0ef516;
-webkit-box-shadow:inset 54px 11px 21px #0ef516;
box-shadow:inset 54px 11px 21px #0ef516;
-moz-box-shadow: 9px 8px 8px #eb4715;
-webkit-box-shadow: 9px 8px 8px #eb4715;
box-shadow: 9px 8px 8px #eb4715;
}
#sidewrapper-right {
width:140px;
margin:5px 15px 5px 10px;
padding:5px 15px 5px 10px;
float:left;
word-wrap: break-word;
overflow: hidden;
border-top:8px inset #ff0000;
border-bottom:8px inset #ff0000;
border-left:8px inset #ff0000;
border-right:8px inset #ff0000;
-moz-border-radius-topright:30px;
-moz-border-radius-topleft:30px;
-webkit-border-radius-top-right:30px;
-webkit-border-radius-top-right:30px;
-moz-box-shadow:inset 54px 11px 21px #0ef516;
-webkit-box-shadow:inset 54px 11px 21px #0ef516;
box-shadow:inset 54px 11px 21px #0ef516;
-moz-box-shadow: 9px 8px 8px #eb4715;
-webkit-box-shadow: 9px 8px 8px #eb4715;
box-shadow: 9px 8px 8px #eb4715;
}
br {
clear:both;
}
.post-body br {
clear:none;
}
/* Headings
----------- */
#sidewrapper-left h2, #sidewrapper-right h2 {
margin:.6em 0 .6em;
padding:0;
font-size:90%;
font-weight:bold;
line-height: 1.4em;
text-transform:uppercase;
color:#77b842;
border-bottom:0px dotted #77b842;
}
/* Posts
-------- */
h2.date-header {
margin:.5em 0 0;
padding:0;
font-size:75%;
color:#777;
}
.post {
margin:.5em 0 1em;
padding-bottom:1em;
}
.post h3 {
background:#00bfff;
margin:.5em 0;
padding:0 0 0;
font-size:125%;
font-weight:bold;
font-style:uppercase;
line-height:2.5em;
color:#000000;
border-top:5px inset #ff0000;
border-bottom:5px inset #ff0000;
border-left:5px inset #ff0000;
border-right:5px inset #ff0000;
-moz-border-radius-topleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-radius-top-left:15px;
-webkit-border-radius-bottom-right:15px;
-moz-box-shadow:inset 54px 11px 21px #0ef516;
-webkit-box-shadow:inset 54px 11px 21px #0ef516;
box-shadow:inset 54px 11px 21px #0ef516;
-moz-box-shadow: 9px 8px 8px #eb4715;
-webkit-box-shadow: 9px 8px 8px #eb4715;
box-shadow: 9px 8px 8px #eb4715;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
font-size:125%;
text-decoration:none;
font-style:uppercase;
color:#000000;
font-weight:bold;
}
.post h3 strong, .post h3 a:hover {
color:#77b842;
text-decoration:underline;
}
.post {
margin:0 0 .75em;
line-height:1.2em;
}
.post-body, .post-body p {
margin:0;
padding:0;
line-height:1.3em;
}
.post-footer {
margin: .75em 0 0px;
color:#777;
letter-spacing:.1em;
font-size:70%
line-height: 1.4em;
border-bottom:0px dotted #5f873f;
}
.post-body {
margin-top:0;
}
.comment-link {
margin-left:.6em;
}
.post-body img {
margin:5px;
padding:1px;
border:0px solid #5f873f;
}
.post blockquote {
margin:1em 12px;
padding-left:15px;
border-left:3px solid #ccc;
}
.post blockquote p {
margin:.75em 0;
padding-left:15px;
border-left:3px solid #ccc;
}
p.post-footer-line-3 {
margin:0 auto;
padding:0;
}
/* Comments
-------------- */
#comments h4 {
margin:1em 0;
font-size:16px;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:#333;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}
.feed-links {
display:none;
clear: both;
line-height: 2.5em;
}
/* Sidebar Content
------------------ */
#sidewrapper-left, #sidewrapper-right {
color:#333;
line-height: 1.2em;
}
#sidewrapper-left p, #sidewrapper-right p {
margin:0;
padding:5px 0 0 8px;
}
#sidewrapper-left ul, #sidewrapper-right ul {
list-style:none;
margin:0 0 0;
padding:0 0 8px;
}
#sidewrapper-left li, #sidewrapper-right li {
margin:0;
padding:0 0 .25em 8px;
line-height:1.2em;
}
#sidewrapper-left .widget, #sidewrapper-right .widget, .main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.sidebar section {
margin:0;
padding:0;
}
.main .Blog {
border-bottom-width: 0;
}
#ArchiveList {
padding-left:10px;
}
/* Profile
---------- */
.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 2px;
border: 2px solid #77b842;
}
.profile-data {
margin:0;
letter-spacing:.1em;
font-size:90%;
font-weight: bold;
line-height: 1.4em;
}
.profile-datablock {
margin:.5em 0 .5em .5em;
}
.profile-textblock {
margin: 0.5em;
line-height: 1.6em;
}
.profile-link {
font-size:90%;
letter-spacing: .1em;
margin: 0 0 1em .5em;
}
/* Footer
--------- */
#footer-wrapper {
background:URL('http://i1136.photobucket.com/albums/n492/agung4wisudhatama/DarkEmo/1001tawagambar.jpg') no-repeat;
width:800px;
height:220px;
clear:both;
margin:0 auto;
padding:0;
text-align:center;
margin:auto;
border-top:12px inset #ff0000;
border-bottom:12px inset #ff0000;
border-left:12px inset #ff0000;
border-right:12px inset #ff0000;
-moz-border-radius-bottomright:50px;
-moz-border-radius-bottomleft:50px;
-webkit-border-radius-bottom-right:50px;
-webkit-border-radius-bottom-right:50px;
-moz-box-shadow:inset 54px 11px 21px #0ef516;
-webkit-box-shadow:inset 54px 11px 21px #0ef516;
box-shadow:inset 54px 11px 21px #0ef516;
-moz-box-shadow: 9px 8px 8px #eb4715;
-webkit-box-shadow: 9px 8px 8px #eb4715;
box-shadow: 9px 8px 8px #eb4715;
}
#footer-wrapper a {
color:#77b842;
text-decoration:none;
}
#footer {
margin:0 auto;
padding:12px 20px;
clear:both;
line-height: 1.2em;
letter-spacing:.1em;
text-align: center;
color:#FFFFFF;
}
.credits {
margin:0;
padding:5px 0 0;
font-size:75%;
}
/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}
.quickedit{
display:none;
}
<style type='text/css'>
.1001tawamiring {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
writing-mode: lr-tb;
</style>
]]></b:skin>
</head>
<body>
<div id='outer-wrapper' style='margin-top:5px;'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='header-wrapper'>
<b:section class='header' id='header' preferred='yes'>
<b:widget id='Header1' locked='true' title='&amp;lt;&amp;lt;= DevilCode :: demo 25 =&amp;gt; (Header)' type='Header'/>
</b:section>
<div class='top-nav'>
<ul class='nav'>
<!-- add or modify your links below using the examples, replace the # with your actual link -->
</ul>
</div>
</div><!-- end header-wrapper -->
<div id='sidewrapper-left'>
<b:section class='sidebar-left' id='sidebar-left' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div><!-- end sidebar-left -->
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>

</div>



<div id='sidewrapper-right'>
<b:section class='sidebar-right' id='sidebar-right' preferred='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>



</div><!-- end sidebar-right -->

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>


<br/> <!-- clear fix do not remove -->
</div></div> <!-- end outer-wrapper -->

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

<div class='credits'>
<a href='#' title='DevilCode'/>
</div><!-- end credits -->
</div><!-- end footer-wrapper -->

<br/>

</body>
</html>

Leave a Reply