Trial and Error

Aku ngabisin waktu buat ngrombak ulang template blog ini sampe tiga hari!!

3 hari!

Dan aku masih belum puas juga sama hasilnya.

Sebenernya sih simpel ya templatenya, simpel banget malah, dan kalo dibilang seharusnya nggak susah-susah amat ngrombaknya. Tapi ya karena saya ini manusia yang tidak becus dalam masalah koding xml, beginilah jadinya. 3 hari ini habis buat:

1. Belajar script-nya (aku harus tau maksud b:include, b:if, b:else, dan demi apa nggak ada web yang benar-benar menjelaskan maksud dan penerapannya secara langsung, so, aku harus trial and error)

2. Belajar css-nya (belajar css sih dulu smk juga pernah, tapi disini mungkin karena kodingnya sudah teringtegrasi dengan blogspot jadinya banyak yang automatic coding gitu, kayak penggunaan $keycolor di css-nya yang nggak berani aku utek-utek biar nggak hancur.

3. Trial and Error: berhubung template blog-ku ini udah ada beberapa script yang aku pasang dan nggak bisa seenaknya diganti (kayak google analystic, meta keyword/description, related post, dan entah apa lagi lupa karena templatenya yang lama udah lama banget jadi nggak tau udah ditambahin apa aja), dan karena aku males buat ngulang hal-hal sepele kayak gitu, dan nyari, dan nggak tau apa aja yang harus dicari, jadilah aku memutuskan untuk utak atik sendiri templatenya. Nah, kalo aku pingin bikin gini, bikin begitu, aku tinggal cari aja di Internet, cari template yang kira-kira diinginkan, trus ditiru deh yang mau disamain yang mana, dan itu yang ngabisin hampir semua waktuku dalam sehari. Hell, siapa yang sangka cuma ngetik, nyari, tiru, pindah, bisa ngabisin waktu seharian. Aku bahkan nggak sempat baca novel!!! Apalagi nonton film!

Disatu sisi, jelas melakukan hal tersebut memang menyenangkan, sekaligus pusing dan bikin gedeg (ya bayangin aja, kita udah ngerti nih logikanya, trus udah kita ikutin yang harus dirubah dimana, tapi tetep nggak jadi! kan stress!), mana aku harus lihat ini tuh bagian mana ya, di cari id/class-nya, lari ke css-nya, baru diubah disana. Atau kalo nggak, aku copas aja deh tuh scriptnya.

4. Mengulang: Iyaaa!! Kemarin aku dari jam 7 pagi sampai jam 2 siang, udah hampir selesai tuh, udah mau jadiiii. Tapi mendadak, semuanya nggak jalan! css-nya nggak mau berubah, dan aku nggak tau sama sekali kenapa bisa begitu! Untung saja aku ada backupan file yang sebelum di edit, jadinya ya udah deh aku format lagi, dan balik kayak sebelum aku edit lagi, dan aku harus ngulang lagi. Tapi setidaknya dengan mengulang itu aku lebih ngerti sih. Template ini udah hancur berkali-kali, dan harus diperbaiki berkali-kali. Tapi sampai sekarang masih belum puas, tapi aku tau sih kalo aku utak atik lagi waktuku habis lagiiii, aku seneng sih ngerjainnya tapi waktunya kenapa cepet amat siiiih !! Pusing nih barbie... Jadi istirahat dulu aja deh, urusin yang lain.

Anyway, karena postinganku hari ini nggak ada gunananya, aku tambahin deh hasil css akhir dari template blogku ini:

/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}
html body .content-outer {
min-width: 0;
max-width: 100%;
width: 100%;
}
.content-outer {
font-size: 92%;
}
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);
}
.body-fauxcolumns .cap-top {
margin-top: 30px;
background: $(body.background.overlay);
height: $(body.background.overlay.height);
}
.content-inner {
padding: 0;
}
/* Header
----------------------------------------------- */
.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
padding-left: 0px;
padding-right: 0px;
}
.head_position{
padding-bottom:15px;

}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: 2px 2px rgba(0, 0, 0, .1);
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font-size: 140%;
color: $(description.text.color);
}
header{
position: relative;
width: 100%;
padding: 0 0 0 0;
}
.header-outer{
margin: 0px;
padding: 0px;
margin-left: auto;
margin-right: auto;
}


/* Tabs
----------------------------------------------- */
.tabs-inner .widget li a:hover {
background:#eee;
color:white;
}
.tabs-inner .section {
margin: 0 20px;
}
.tabs-inner .PageList, .tabs-inner .LinkList, .tabs-inner .Labels {
margin-left: -18px;
margin-right: -18px;
background-color: $(tabs.background.color);
border-top: $(tabs.border.size) solid #ffffff;
border-bottom: $(tabs.border.size) solid #ffffff;
-moz-box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, 0.3);
-goog-ms-box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, 0.3);
box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, 0.3);

}
.tabs-inner .PageList .widget-content,
.tabs-inner .LinkList .widget-content,
.tabs-inner .Labels .widget-content {
margin: -3px -11px;
background: rgba(255,255,255,0.5);  no-repeat scroll right;

}
.tabs-inner .widget ul {
padding: 2px 25px;
max-height: 34px;
background: rgba(255,255,255,0.5) no-repeat scroll left;

}
.tabs-inner .widget li {
border: none;
}
.tabs-inner .widget li a {
display: inline-block;
padding: .25em 1em;
font: $(tabs.font);
color: $(tabs.text.color);
border-$endSide: 1px solid $(tabs.separator.color);
}
.tabs-inner .widget li:first-child a {
border-$startSide: 1px solid $(tabs.separator.color);
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: $(tabs.selected.text.color);
}
.tabs-inner .widget li {
text-transform: uppercase;
letter-spacing: 1px
display: inline-block;
border-right: 1px solid transparent;
}
.tabs-inner .PageList .widget-content,
.tabs-inner .LinkList .widget-content,
.tabs-inner .Labels .widget-content {
margin: -30px 0 0 0 ;
background: transparent none  no-repeat scroll right;
}
.tabs-outer{
vertical-align: top;
text-align: center;
display: block;
z-index:1;
position: fixed;
width:100%
}
.tabs-inner .widget ul{
margin: 0 -9999rem; /* add back section padding value */
  padding: .25rem 9999rem;
   background: rgba(255, 255, 255,0.95);
}
.tabs-inner .widget ul{
margin: 0 -9999rem; /* add back section padding value */
  padding: .25rem 9999rem;
   background: rgba(255, 255, 255,0.95);
}
.tabs-inner .widget li{
padding:5px 20px 20px 0px;
}.post-title{
font-family: 'Book Antiqua', Verdana;

}

/* Headings
----------------------------------------------- */
h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
margin: 0 0 .5em;
}
h2.date-header {
font: $(date.font);
color: $(date.text.color);
}
/* Main
----------------------------------------------- */
.main-inner .column-center-inner,
.main-inner .column-left-inner,
.main-inner .column-right-inner {
padding: 0 5px;
}
.main-outer {
margin-top: $(main.cap.height);
background: $(main.background);
}
.main-inner {
padding-top: $(main.padding.top);
}
.main-cap-top {
position: relative;
}
.main-cap-top .cap-right {
position: absolute;
height: $(main.cap.height);
width: 100%;
bottom: 0;
background: transparent $(main.cap.image) repeat-x scroll bottom center;
}
.main-cap-top .cap-left {
position: absolute;
height: 245px;
width: 280px;
right: 0;
bottom: 0;
background: transparent $(main.cap.overlay) no-repeat scroll bottom left;
}
/* Posts
----------------------------------------------- */
.opacity2{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
.post-outer {
padding: 15px 20px;
margin: 0 0 25px;
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none;
border: 1px solid #eee;
border: $(post.border.style) $(post.border.size) $(post.border.color);
-moz-box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
-goog-ms-box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
}
h2.post-title {
font: $(post.title.font);
margin: 0;
}
.comments h3 {
font: $(post.title.font);
margin: 1em 0 0;
}

.post-header h2 {
margin: 0 0 1em;
color: $(post.footer.text.color);
}
.post-footer {
margin: 10px 0 0;
padding: 10px 0 0;
color: $(post.footer.text.color);
border-top: dashed 1px $(widget.alternate.text.color);
}
#blog-pager {
font-size: 140%
}

#comments .comment-author {
padding-top: 1.5em;
border-top: dashed 1px $(widget.alternate.text.color);
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 $(widget.alternate.text.color);
border-bottom: 1px solid $(widget.alternate.text.color);
}
.comments .continue {
border-top: 2px solid $(widget.alternate.text.color);
}
/* Widgets
----------------------------------------------- */
.widget ul, .widget #ArchiveList ul.flat {
padding: 0;
list-style: none;
}
.widget ul li, .widget #ArchiveList ul.flat li {
padding: .35em 0;
text-indent: 0;
border-top: dashed 1px $(widget.alternate.text.color);
}
.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;
}
.widget .zippy {
color: $(widget.alternate.text.color);
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 5px;
background: #fff;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}
.post-body img, .post-body .tr-caption-container {
padding: 8px;
}
.post-body .tr-caption-container {
color: #333333;
}
.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}
/* Footer
----------------------------------------------- */
.footer-outer {
color:$(footer.text.color);
background: $(footer.background);
}
.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
----------------------------------------------- */
body.mobile  {
background-size: 100% auto;
}
.mobile .body-fauxcolumn-outer {
background: $(mobile.background.overlay);
}
html .mobile .mobile-date-outer {
border-bottom: none;
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none;
margin-bottom: 10px;
}
.mobile .main-cap-top {
z-index: -1;
}
.mobile .content-outer {
font-size: 100%;
}
.mobile .post-outer {
padding: 10px;
}
.mobile .main-cap-top .cap-left {
background: transparent none no-repeat scroll bottom left;
}
.mobile .body-fauxcolumns .cap-top {
margin: 0;
}
.mobile-link-button {
background: $(post.background.color) $(post.background.url) repeat scroll top left;
}
.mobile-link-button a:link, .mobile-link-button a:visited {
color: $(link.color);
}
.mobile-index-date .date-header {
color: $(date.text.color);
}
.mobile-index-contents {
color: $(body.text.color);
}
.mobile .tabs-inner .section {
margin: 0;
}
.mobile .tabs-inner .PageList {
margin-left: 0;
margin-right: 0;
}
.mobile .tabs-inner .PageList .widget-content {
margin: 0;
color: $(tabs.selected.text.color);
background: $(post.background.color) $(post.background.url) repeat scroll top left;
}
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-$startSide: 1px solid $(tabs.separator.color);
}

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
}



h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:2em; }
  .post-outer {
padding: 15px 20px;
margin: 0 0 25px;
background-color: #ffffff repeat scroll top left;

}.post-outer{
background-color: white;
background: rgba(255, 255, 255, 1);
background-attachment: fixed no-repeat;
}

.post-body {
font-size: 100%;
position: relative;
line-height:2em;
}

.post{
margin:20px;
}


h1{
margin:10px 0px 40px 0px ;
text-align: center;
}

#sidebar-right-1{
color:black;
background: rgba(255, 255, 255, 0.6);
padding: 20px 19px 20px 20px;

}



.jump-link{
padding: 10px;
font-size: 18px;
}



.post-image-wrapper {
    margin-bottom: 7px;
}

.post-image-wrapper .post-image {
    width: 100%;
    padding: 30% 0;
}

.post-image-wrapper .post-image:hover {
-webkit-filter: grayscale(1);
    filter: grayscale(1);
}

.post-image {
    display: block;
}


.post-summary {
    padding-top: 8px;
    font-size: 14px;
    font-family: Verdana;
    line-height: 2em;
    color: #595959;
text-align: justify;
}


.body{
overflow-x: hidden;}

.main-inner{
padding:0;
}

body{
background-repeat: repeat;
background-attachment: fixed;
}

#sidebar-right-1 .widget{
border: 1px solid #eee;
padding: 20px;
background-color: white;
}

.main-outer{
width: 80%;
background-color: gray;
padding: 20px;
margin-left: auto;
margin-right: auto;
background: rgba(255,255,255,0.7);
}

h2{
text-transform: uppercase;
background: #eee;
padding: 10px;
text-align:center;
font-weight: bold;
letter-spacing: -1px;
}


.jump-link{
text-align: center;
border: 1px solid #eee;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
display: table;
letter-spacing: 0.2px;
margin: 30px auto 0;
padding:20px;
}

.post-title{
border-bottom: 2px dotted #eee;
padding-bottom: 20px;
}.date-header{
text-transform: capitalize;
background-color: white;
border: 1px solid #eee;
background: rgba(255,255,255,0.8);

Salam, Adlina Haezah