Sebenarnya struktur dari template sersebut sangat sederhana. Mungkin sobat pernah inggat dengan template bawaan blogger. Yah…seperti itulah. Cuma dengan kreatifitas dari kang Fatur, akhirnya template tersebut berhasil di sulap menjadi sedemikian cantik. Bila dilihat dari sisi tampilan.
Apa yang menyebabkan cantiknya tampilan Dari template tersebut…? Ya karena sisinya dikelilingi border…he…he…he…
Nah sinoku akan menjelaskan di bagian mana border tersebut di sisipkan dalam template dan nantinya akan bisa di pasang di template manapun. Ok kita mulai.
Bagian pertama ada pada header.
Lihat potongan template di bawah Ini. Tulisan yang berwarna Biru itulah yang menyebabkan tampilan terkesan 3 dimensi
/* ----- HEADER ----- */
#header-wrapper {
margin: 7px 0px 7px 0px;
padding: 0px 0px 0px 0px;
width: 980px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfIS0Cc9JaMRciRGQ1uxvvo5ScvWQOhEFr3NKhZxX79457XrwHKJiQwwwz3j57ml8QKqJk59cY6qJkJckvVxa__SBq2kTNuJu36UTc3L2QHhWSOJ6gXWYTQlFtkimW4pzYRR2ygEI9GZx6/s1600/header.png)no-repeat;
border-top:10px solid $headerBorderColor;
border-bottom:10px solid $headerBorderColor;
border-left:10px solid #A41F05;
border-right:10px solid #A41F05;
}
#header {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 158px;
text-align: left;
}
#header h1 {
color: $blogTitleColor;
font: $blogTitleFont;
font-variant: small-caps;
margin: 0px 0px 0px 0px;
padding: 10px 20px 0px 20px;
}
#header h1 a {
text-decoration: none;
color: $blogTitleColor;
}
#header h1 a:hover {
text-decoration: underline;
color: $blogDescriptionColor;
}
#header .description {
color: $blogDescriptionColor;
font: $blogDescriptionFont;
margin: 0px 0px 0px 0px;
padding: 5px 20px 25px 20px;
}
#header h1 p, #header .description p {margin:0;padding:0}
#header a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0;
}
Bagian Yang kedua.
Ada dibagian link bar, Lihat tulisan yang berwarna Biru, Itu yang menyebabkan terbentuknya kesan 3 dimensi
/* ----- LINKBAR ----- */
#linkbar-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 980px;
position: relative;
background: $linkbarbgColor;
border-top:10px solid $headerBorderColor;
border-bottom:10px solid $headerBorderColor;
border-left:10px solid #A41F05;
border-right:10px solid #A41F05;
}
#linkbar .widget {
margin: 0px 0px 0px 0px;
padding: 4px 0px 7px 0px;
text-align: left;
}
#linkbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type:none;
}
#linkbar li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#linkbar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility: hidden;
}
#linkbar a {
clear: both;
margin: 0px -4px 0px 0px;
padding: 7px 10px 7px 10px;
width:100%;
text-decoration:none;
font: $linkbarTextFont;
color: $linkbarTextColor;
text-transform: uppercase;
border-right: 1px solid $linkbarBorderColor;
border-left: 0px solid $linkbarBorderColor;
}
#linkbar a:hover {
color: $linkbarHoverTextColor;
background: $linkbarHoverBgColor;
}
Bagian ke Tiga
Ada di middle ads. Perhatikan Tulisan yang berwarna Biru.
/* ----- MIDDLE ADS ----- */
#middleads-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 982px;
position: relative;
text-align: center;
}
#middleads, #middleads2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
/* background: $middlebarbgColor;
border-top: 1px solid $contentBorderColor;
border-left: 1px solid $contentBorderColor;
border-right: 1px solid $contentBorderColor; */
}
#middleads .widget, #middleads2 .widget {
margin: 0;
padding: 10px 0;
}
Yang ke Empat
Yang menyebabkan terbentuknya kesan 3 dimeni ada di
Main ( konten-wrapper ). Jangan lupa perhatikan tulisan yang berwarna Biru.
/* ----- MAIN ----- */
#content-wrapper {
width: 980px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
position: relative;
text-align: left;
background: $contentbgColor;
border-top:10px solid $headerBorderColor;
border-bottom:10px solid $headerBorderColor;
border-left:10px solid #A41F05;
border-right:10px solid #A41F05;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main-wrapper {
float: left;
width: 482px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main {
width: 446px;
margin: 7px;
padding: 20px 0 0 0;
color: $textColor;
font: $textFont;
background: $postbgColor;
border-top:10px solid $headerBorderColor;
border-bottom:10px solid $headerBorderColor;
border-left:10px solid #A41F05;
border-right:10px solid #A41F05;
}
#main .widget {
margin: 0px 0px 0px 0px;
padding: 0px 25px 20px 25px;
}
.post {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 1.6em;
text-align: justify;
}
.post h3 {
margin: 0px 0px 20px 0px;
padding: 0px 0px 2px 0px;
color: $postTitleColor;
font: $postTitleFont;
text-decoration: none;
text-align: left;
line-height: 1.4em;
/* text-transform: uppercase; */
border-bottom: 3px solid $posttitleBorderColor;
}
.post h3 a, .post h3 a:visited {
color: $postTitleColor;
text-decoration: none;
}
.post h3 a:hover {
color: $dateHeaderColor;
text-decoration: none;
}
.post-header-line-1 {
}
h2.date-header {
margin: 0px 0px 0px 0px;
padding: 0px 0px 7px 0px;
text-align: left;
color: $dateHeaderColor;
font: $dateHeaderFont;
text-decoration: none;
text-transform: none;
}
.date-header span {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.post-body p {
/* Fix bug in IE5/Win with italics in posts */
margin: 0px 0px 0px 0px;
padding: 1px 0px 1px 0px;
display: inline; /* to fix floating-ads wrapping problem in IE */
height: 1%;
overflow: visible;
}
.post-body p a, .post-body p a:visited {
color: $mainLinkColor;
text-decoration: underline;
}
.post-body a:hover {
text-decoration: underline;
color: $mainHoverLinkColor;
}
.post ul {
margin: 0px 0px 0px 0px;
padding: 12px 0px 12px 30px;
list-style-type: disc;
line-height: 1.6em;
font-size: 95%;
}
.post ol {
margin: 0px 0px 0px 0px;
padding: 12px 0px 12px 30px;
line-height: 1.6em;
font-size: 95%;
}
.post li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 8px 0px;
}
a img {
margin: 5px 5px 5px 5px;
padding: 0px 0px 0px 0px;
}
.post img {
margin: 0px;
padding: 5px;
background: $imagebgColor;
border: 1px solid $imageBorderColor;
}
Selanjutnya bagian ke lima yang menyebabkan terbentuknya kesan 3 dimensi adalah di bagiab post-footer. Lihat tulisan yang berwarna biru.
/* ----- POST-FOOTER ----- */
.post-footer {
display: block;
margin: 15px 0px 25px 0px;
padding: 7px 20px 7px 20px;
text-align: left;
font: $postfooterTextFont;
color: $postfooterTextColor;
font-weight: normal;
line-height: 1.6em;
text-decoration: none;
background: $postfooterBgColor;
border-top:5px solid $headerBorderColor;
border-bottom:5px solid $headerBorderColor;
border-left:5px solid #A41F05;
border-right:5px solid #A41F05;
}
.post-footer-line {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.post-footer-line-1, .post-footer-line-2, .post-footer-line-3 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.post-footer a {
color: $postfooterLinkColor;
text-decoration: none;
}
.post-footer a:hover {
color: $mainHoverLinkColor;
text-decoration: underline;
}
.post-footer .post-comment-link a {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: $commentTabLinkColor;
font-weight: normal;
text-decoration: none;
}
.post-footer .post-comment-link a:hover {
color: $mainHoverLinkColor;
text-decoration: underline;
}
.post-footer .post-icons {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.post-footer img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 5px 0px;
background: $postfooterBgColor;
}
#blog-pager {
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
text-align: center;
font: $postfooterTextFont;
color: $feedlinksColor;
}
#blog-pager a {color: $feedlinksColor}
#blog-pager a:hover {color: $mainHoverLinkColor}
#blog-pager-newer-link {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#blog-pager-older-link {
float: right;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.feed-links {
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
clear: both;
text-align: left;
font: $postfooterTextFont;
color: $feedlinksColor;
}
.feed-links a, .feed-links a:visited {color: $feedlinksColor}
.feed-links a:hover {color: $mainHoverLinkColor}
Seterusnya yang menyebabkan terbentuknya kesan 3 dimensi ada di blockquote
/* ----- BLOCKQUOTE ----- */
blockquote {
margin: 10px 20px 10px 20px;
padding: 10px 20px 10px 20px;
font: $quoteFont;
line-height: 1.6em;
color: $blockQuoteColor;
background: $blockquotebgColor;
border-top:3px solid $headerBorderColor;
border-bottom:3px solid $headerBorderColor;
border-left:3px solid #A41F05;
border-right:3px solid #A41F05;
}
Seterusnya ada di bagian sidebar. Karena template ini mempunyai 2 sidebar, yaitu kanan kiri, yang menyebabkan terbentuknya kesan 3 dimensipun ada di bagian kanan dan kiri. Perhatikan tulisan #sidebar1
Dan #sidebar2. Di situlah border di pasang. Perhatikan tulisan warna Biru
/* ----- SIDEBAR ----- */
#side-wrapper1 {
width: 179px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#side-wrapper2 {
width: 313px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.sidebar {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
font: $sidebarTextFont;
}
#sidebar1 {
width: 150px;
margin: 7px 0px 7px 7px;
padding: 0px 0px 0px 0px;
color: $sidebar1TextColor;
background: $sidebar1bgColor;
border-top:10px solid $headerBorderColor;
border-bottom:10px solid $headerBorderColor;
border-left:10px solid #A41F05;
border-right:10px solid #A41F05;
line-height: 1.6em;
}
#sidebar2 {
width: 293px;
margin: 7px 7px 7px 0px;
padding: 0px 0px 0px 0px;
color: $sidebar1TextColor;
background: $sidebar1bgColor;
border-top:10px solid $headerBorderColor;
border-bottom:10px solid $headerBorderColor;
border-left:10px solid #A41F05;
border-right:10px solid #A41F05;
line-height: 1.6em;
}
#sidebar1 .widget, #sidebar2 .widget {
margin: 0px 0px 0px 0px;
padding: 15px 15px 20px 15px;
}
Seterusnya yang menyebabkab terbentuknya kesan tiga dimensi ada di bagian sidebar heading.
/* sidebar heading ----- */
#sidebar1 h2, #sidebar2 h2 {
margin: -10px -10px 10px -10px;
padding: 5px 15px 3px 15px;
text-align: center;
color: $sidebar1HeaderColor;
font: $sidebarHeaderFont;
text-transform: none;
text-decoration: none;
background: $sidebar1HeaderBgColor;
border-bottom: 3px solid $sidebar1HeaderBorderColor;
border-top:5px solid $headerBorderColor;
border-bottom:5px solid $headerBorderColor;
border-left:5px solid #A41F05;
border-right:5px solid #A41F05;
}
.sidebar ul, #BlogArchive1 ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type:none;
}
.sidebar li, #BlogArchive1 li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 1.6em;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi91BuYrNy21MjQzdroti-EgrQTNSkHvZyCXssWq_lexYTL5v1HcDw2o3PZU1n2u-Nh3yYzuNEdmhfpM1x4PNvGUCTHqglcA2WR_6-5VlFLL-vLareh8hBWh3iCL69SFpFjxXMolCTEy3dX/s1600/bullet_blue2.png) no-repeat 0 0px; padding-left:20px;
}
#sidebar1 a, #sidebar2 a {
color: $sidebar1LinkColor;
text-decoration: none;
}
#sidebar1 a:hover, #sidebar2 a:hover {
text-decoration: none;
color: $sidebar1HoverLinkColor;
}
#sidebar1 a:visited, #sidebar2 a:visited {
text-decoration: none;
color: $sidebar1VisitedLinkColor;
}
.sidebar a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 1px solid $profileBorderColor;
}
Seterusnya di bagian profile. Jangan sampai lupa perhatikan tulisan warna biru
/* ----- PROFILE ----- */
.profile-img {
margin: 7px;
padding: 0px;
border: 1px solid $sidebarListLineColor;
}
.profile-textblock {
margin: 0px 0px 0px 0px;
padding: 3px 0px 3px 0px;
clear: both;
line-height: 1.6em;
/* border-top: 1px solid $sidebarListLineColor;
border-bottom: 1px solid $sidebarListLineColor; */
}
.profile-datablock {
margin: 2px 0px 5px 0px;
padding: 0px 0px 0px 0px;
}
.profile-data {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-weight: normal;
font-style: italic;
}
.profile-link {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
Seterusnya di bagian Commen. Jangan sampai lupa perhatikan tulisan warna biru
/* ----- COMMENT ----- */
.comment-author {
margin: -15px -15px 0px -15px;
padding: 5px 15px 5px 15px;
color: $commentauthorColor;
font-weight: bold;
background: $commentauthorBgColor;
border-bottom: 1px solid $commentboxBorderColor;
}
Seterusnya di bagian Lower section. Jangan sampai lupa perhatikan tulisan warna biru
/* ----- LOWER SECTION ----- */
#lower-wrapper {
margin: 7px 0px 7px 0px;
padding: 0px 0px 0px 0px;
width: 980px;
font: $sidebarTextFont;
color: $lowerbarTextColor;
background: $lowerbarbgColor;
border-top:10px solid $headerBorderColor;
border-bottom:10px solid $headerBorderColor;
border-left:10px solid #A41F05;
border-right:10px solid #A41F05;
}
#lowerbar-wrapper {
float: left;
margin: 5px 0px 5px 5px;
padding: 0px 0px 5px 0px;
width: 30.6%;
text-align: left;
line-height: 1.8em;
border-top:10px solid $headerBorderColor;
border-bottom:10px solid $headerBorderColor;
border-left:10px solid #A41F05;
border-right:10px solid #A41F05;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#lowerads-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
text-align: center;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 25px 15px 0px 5px;}
.lowerads {margin: 0; padding: 0;}
.lowerads .widget {margin: 0; padding: 0px 0px 30px 0px;}
.lowerbar h2 {
margin: -20px -10px 0px 0px;
padding: 7px 5px 7px 5px;
color: $lowerbarHeaderColor;
font: $sidebarHeaderFont;
text-align: center;
text-transform: none;
background: $lowerbarTitleBgColor;
border-top:5px solid $headerBorderColor;
border-bottom:5px solid $headerBorderColor;
border-left:5px solid #A41F05;
border-right:5px solid #A41F05;
}
.lowerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.lowerbar li {
margin: 0px 0px 6px 15px;
padding: 0px 0px 6px 0px;
line-height: 1.4em;
list-style-type: none;
border-bottom: 1px solid $lowerbarListLineColor;
}
.lowerbar a {color: $lowerbarLinkColor; text-decoration: none;}
.lowerbar a:hover {text-decoration: underline; color: $lowerbarHoverLinkColor;}
.lowerbar a:visited {text-decoration: none; color: $lowerbarVisitedLinkColor;}
Seterusnya di bagian Footer. ( beda dengan pos footer ) Jangan sampai lupa perhatikan tulisan warna biru
/* ----- FOOTER ----- */
#footer-wrapper {
clear: both;
display: inline; /* handles IE margin bug */
float: left;
width: 1000px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#footer {
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
text-align: left;
color: $footerTextColor;
font: $footerTextFont;
line-height: 1.6em;
background: $footerbgColor;
border-top:10px solid $headerBorderColor;
border-bottom:10px solid $headerBorderColor;
border-left:10px solid #A41F05;
border-right:10px solid #A41F05;
}
#footer h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 5px 0px;
color: $footerHeaderColor;
font: $footerHeaderFont;
}
#footer .widget {
margin: 0px 0px 0px 0px;
padding: 0px 20px 20px 20px;
}
.footer p {margin: 0; padding: 0}
.footer a {
color: $footerLinkColor;
text-decoration: none;
}
.footer a:hover {
color: $footerHoverLinkColor;
text-decoration: underline;
}
.footer a:visited {
color: $footerVisitedLinkColor;
text-decoration: none;
}
Nah di bagian-bagian tersebutlah yang terdapat atau di pasang Border dengan nilai yang besar.( Untuk jelasnya apa itu Border dan bagaimana menempatkannya klik di sini.) Agar terbentuk suatu tampilan yang terkesan 3 dimensi. Ok dah Paham. Gitu aja dulu yah ... Cape jarine. Maklum ngetik pake sebelas jari.
Tidak ada komentar:
Posting Komentar
Tolong Isi Komentar Demi Perbaikan Blog Ini