Template Simple Untuk Blog Pribadi

Template Simple Untuk Blog Pribadi - Kalau berbicara mengenai tamplate blogger, memang tidak ada bosan-bosannya. Kalau menurut Aku sendiri tamplate adalah nyawa bagi blog kita, seiring bergantinya waktu kita juga sering merasa bosan dengan mode tampilan yang begitu saja makanya terlahir ide untuk membuat atau merancang tamplate yang begitu menarik dan  sekaligus pemuas pengunjung.
Tidak bisa diungkiri lagi para blogger muda seperti Aku ini :) juga pembosan, bahkan sudah lebih dari 10 X bergonta-ganti. Nah, bagi kamu sahabat blogger, yang lagi cari tamplate simple tapi oke disini tersedia. Yuk!, silakan dicoba'

Screenshootnya

Scriptnya

*/

/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}

html body .region-inner {
min-width: 0;
max-width: 100%;
width: auto;
}

.content-outer {
font-size: 90%;
}

a:link {
text-decoration:none;
color: $(link.color);
}

a:visited {
text-decoration:none;
color: $(link.visited.color);
}

a:hover {
text-decoration:underline;
color: $(link.hover.color);
}

.content-outer {
background: $(content.background);

-moz-border-radius: $(content.border.radius);
-webkit-border-radius: $(content.border.radius);
-goog-ms-border-radius: $(content.border.radius);
border-radius: $(content.border.radius);

-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

margin: $(content.margin) auto;
}

.content-inner {
padding: $(content.padding);
}

/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
_background-image: none;

color: $(header.text.color);

-moz-border-radius: $(header.border.radius);
-webkit-border-radius: $(header.border.radius);
-goog-ms-border-radius: $(header.border.radius);
border-radius: $(header.border.radius);
}

.Header img, .Header #header-inner {
-moz-border-radius: $(header.border.radius);
-webkit-border-radius: $(header.border.radius);
-goog-ms-border-radius: $(header.border.radius);
border-radius: $(header.border.radius);
}

.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
padding-left: $(header.padding);
padding-right: $(header.padding);
}

.Header h1 {
font: $(header.font);
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.Header h1 a {
color: $(header.text.color);
}

.Header .description {
font-size: 130%;
}

/* Tabs
----------------------------------------------- */
.tabs-inner {
margin: .5em $(tabs.margin.sides) $(tabs.margin.bottom);
padding: 0;
}

.tabs-inner .section {
margin: 0;
}

.tabs-inner .widget ul {
padding: 0;

background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll bottom;

-moz-border-radius: $(tabs.border.radius);
-webkit-border-radius: $(tabs.border.radius);
-goog-ms-border-radius: $(tabs.border.radius);
border-radius: $(tabs.border.radius);
}

.tabs-inner .widget li {
border: none;
}

.tabs-inner .widget li a {
display: inline-block;

padding: .5em 1em;
margin-$endSide: $(tabs.spacing);

color: $(tabs.text.color);
font: $(tabs.font);

-moz-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;
-webkit-border-top-left-radius: $(tab.border.radius);
-webkit-border-top-right-radius: $(tab.border.radius);
-goog-ms-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;
border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;

background: $(tab.background);

border-$endSide: 1px solid $(tabs.separator.color);
}

.tabs-inner .widget li:first-child a {
padding-$startSide: 1.25em;

-moz-border-radius-top$startSide: $(tab.first.border.radius);
-moz-border-radius-bottom$startSide: $(tabs.border.radius);
-webkit-border-top-$startSide-radius: $(tab.first.border.radius);
-webkit-border-bottom-$startSide-radius: $(tabs.border.radius);
-goog-ms-border-top-$startSide-radius: $(tab.first.border.radius);
-goog-ms-border-bottom-$startSide-radius: $(tabs.border.radius);
border-top-$startSide-radius: $(tab.first.border.radius);
border-bottom-$startSide-radius: $(tabs.border.radius);
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
z-index: 1;

background: $(tabs.selected.background.color) $(tab.selected.background.gradient) repeat scroll bottom;
color: $(tabs.selected.text.color);

-moz-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
}

/* Headings
----------------------------------------------- */
h2 {
font: $(widget.title.font);
text-transform: $(widget.title.text.transform);
color: $(widget.title.text.color);
margin: .5em 0;
}

/* Main
----------------------------------------------- */
.main-outer {
background: $(main.background);

-moz-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;
-webkit-border-top-left-radius: $(main.border.radius.top);
-webkit-border-top-right-radius: $(main.border.radius.top);
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
-goog-ms-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;
border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;

-moz-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
}

.main-inner {
padding: 15px $(main.padding.sides) 20px;
}

.main-inner .column-center-inner {
padding: 0 0;
}

.main-inner .column-left-inner {
padding-left: 0;
}

.main-inner .column-right-inner {
padding-right: 0;
}

/* Posts
----------------------------------------------- */
h3.post-title {
margin: 0;
font: $(post.title.font);
}

.comments h4 {
margin: 1em 0 0;
font: $(post.title.font);
}

.date-header span {
color: $(date.header.color);
}

.post-outer {
background-color: $(post.background.color);
border: solid 1px $(post.border.color);

-moz-border-radius: $(post.border.radius);
-webkit-border-radius: $(post.border.radius);
border-radius: $(post.border.radius);
-goog-ms-border-radius: $(post.border.radius);

padding: 15px 20px;
margin: 0 $(post.margin.sides) 20px;
}

.post-body {
line-height: 1.4;
font-size: 110%;
position: relative;
}

.post-header {
margin: 0 0 1.5em;

color: $(post.footer.text.color);
line-height: 1.6;
}

.post-footer {
margin: .5em 0 0;

color: $(post.footer.text.color);
line-height: 1.6;
}

#blog-pager {
font-size: 140%
}

#comments .comment-author {
padding-top: 1.5em;

border-top: dashed 1px #ccc;
border-top: dashed 1px rgba(128, 128, 128, .5);

background-position: 0 1.5em;
}

#comments .comment-author:first-child {
padding-top: 0;

border-top: none;
}

.avatar-image-container {
margin: .2em 0 0;
}

/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

.comments .comments-content .loadmore a {
border-top: 1px solid $(link.hover.color);
border-bottom: 1px solid $(link.hover.color);
}

.comments .continue {
border-top: 2px solid $(link.hover.color);
}

/* Widgets
----------------------------------------------- */
.widget ul, .widget #ArchiveList ul.flat {
padding: 0;
list-style: none;
}

.widget ul li, .widget #ArchiveList ul.flat li {
border-top: dashed 1px #ccc;
border-top: dashed 1px rgba(128, 128, 128, .5);
}

.widget ul li:first-child, .widget #ArchiveList ul.flat li:first-child {
border-top: none;
}

.widget .post-body ul {
list-style: disc;
}

.widget .post-body ul li {
border: none;
}

/* Footer
----------------------------------------------- */
.footer-outer {
color:$(footer.text.color);
background: $(footer.background);

-moz-border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);
-webkit-border-top-left-radius: $(footer.border.radius.top);
-webkit-border-top-right-radius: $(footer.border.radius.top);
-webkit-border-bottom-left-radius: $(footer.border.radius.bottom);
-webkit-border-bottom-right-radius: $(footer.border.radius.bottom);
-goog-ms-border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);
border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);

-moz-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
}

.footer-inner {
padding: 10px $(main.padding.sides) 20px;
}

.footer-outer a {
color: $(footer.link.color);
}

.footer-outer a:visited {
color: $(footer.link.visited.color);
}

.footer-outer a:hover {
color: $(footer.link.hover.color);
}

.footer-outer .widget h2 {
color: $(footer.widget.title.text.color);
}

/* Mobile
----------------------------------------------- */
html body.mobile {
height: auto;
}

html body.mobile {
min-height: 480px;
background-size: 100% auto;
}

.mobile .body-fauxcolumn-outer {
background: $(mobile.background.overlay);
}

html .mobile .mobile-date-outer, html .mobile .blog-pager {
border-bottom: none;
background: $(main.background);
margin-bottom: 10px;
}

.mobile .date-outer {
background: $(main.background);
}

.mobile .header-outer, .mobile .main-outer,
.mobile .post-outer, .mobile .footer-outer {
-moz-border-radius: 0;
-webkit-border-radius: 0;
-goog-ms-border-radius: 0;
border-radius: 0;
}

.mobile .content-outer,
.mobile .main-outer,
.mobile .post-outer {
background: inherit;
border: none;
}

.mobile .content-outer {
font-size: 100%;
}

.mobile-link-button {
background-color: $(link.color);
}

.mobile-link-button a:link, .mobile-link-button a:visited {
color: $(post.background.color);
}

.mobile-index-contents {
color: $(body.text.color);
}

.mobile .tabs-inner .PageList .widget-content {
background: $(tabs.selected.background.color) $(tab.selected.background.gradient) repeat scroll bottom;
color: $(tabs.selected.text.color);
}

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-$startSide: 1px solid $(tabs.separator.color);
}
]]>

Itulah Template Simple versi E-vergreen. Jangan lupa tanggapannya mengenai tamplate ini, okey!