Edit Dasar CSS pada Template Blogspot

Teng tong teng toooong!!

Akhirnya berubah juga deh template blog-ku. Hiks.

Jadi templateku yang ini *tunjuk bawah* udah ganti, jadi yang sekarang ini...

Agak sedih juga sih, soalnya template lamaku ini adalah template terlama yang aku pake, dan sekarang rasanya aku membutuhkan sedikit pembaharuan, jadi berubah deh dari item ke putih... dari gelap ke terang.

Anyway, karena di blogku ini udah aku pasangin tambahan coding ya yang terintegrasi sama beberapa aplikasi penting, jadi nggak mungkin aku cari template di luar, alhasil satu-satunya cara adalah rombak sendiri, dan itu... susah...

Tapi nyenengin, karena aku bebas utak-atik sesuka hati, selama tahu coding dasarnya sih.

Nah, postingan ini sendiri aku bikin dalam rangka mempelajari kesalahan lamaku yang rasanya nggak mau aku ulang lagi karena... wasting time banget.

Jadi sebenernya template blogku yang sebelumnya tadi itu hasil rambakan juga dari template aslinya yaitu "sederhana". Iya, nama templatenya 'sederhana' dan emang sederhana banget, dan akhirnya aku milih ini karena menu edit templatenya menurutku lengkap. Setelah itu aku coba main di bagian css-nya deh, karena blogspot yang sekarang udah baik banget ada menu editor templatenya dan nyedian disitu menu untuk tambah css sendiri jadinya nggak perlu mondar mandir ke html-nya :D alhamdulillah yah, blogspot semakin berkembang.

Tapiiii karena dulu aku gak save apa aja yang aku tulis waktu edit css-nya, alhasil ketika aku berniat merombak ulang seperti saat ini, aku mentok, dan langsung amnesia harus mulai darimana, bagaimana caranya, dan apa aja kodingnya. Akhrinya aku mondar-mandir google lagi deh cari css untuk inilah, untuk itulah, bolak-balik buka view-source blogku juga, dan itu sebenernya bisa ke backup kalo aku simpen daridulu css-nya. So, here I am, aku taruh disini aja deh kode css-nya yang aku butuhin untuk ngerubah2 blogku, biar besok-besok gak perlu kelimpungan cari-cari lagi.

Untuk pengingat: kode di bawah ini bisa langsung dimasukin ke bagian edit css di bagian editor template-nya,

 atau bisa juga dimasukin lewat html asalkan jangan lupa penempatannya harus setelah dan sebelum . Biasanya emang ada kode-kode yang mirip karena itu udah kode dasar dari templatenya, belum pernah nyoba sih kalo di tumpuk gitu bermasalah enggak, tapi sampe sekarang sih selalu aku tumpuk. Nah! jadi inilaaaah kodenya:

untuk template: "SEDERHANA" : contoh blog: aneka-catatan.blogspot.com

.post-outer{

background-color: white;

background: rgba(255, 255, 255, 1);

}   ------------> jadi di bagian postingan kita itu sebenernya ada 3 lapis: background, dalemnya background (untuk post dan sidebar), kemudian post itu sendiri. Nah post outer itu yang background tepat di belakang tulisan kita.

.post-body {

font-size: 100%;

position: relative;

line-height:2em;

} ---------------> yang ini berlaku untuk semua text di blog kita.

.post{

margin:20px;

} 

h1{

margin:10px 0px 40px 0px ;

text-align: center;

} -------------------> judul postingan

#sidebar-right-1{

color:black;

background: rgba(255, 255, 255, 0.7);

padding: 20px 19px 20px 20px;

} --------------> sidebar

.tabs-inner .widget li {

text-transform: uppercase;

letter-spacing: 1px

display: inline-block;

padding: 0 20px 0 0;

border-right: 1px solid transparent;

} ------------------> ini buat menu di bawah banner

.tabs-inner .PageList .widget-content,

.tabs-inner .LinkList .widget-content,

.tabs-inner .Labels .widget-content {

margin: 0;

background: transparent none  no-repeat scroll right;

} ------------------> ini buat menu di bawah banner

.head_position{

align:center;

padding-bottom:0;

} ----------------> ini untuk posisiin headernya mau kayak gimana.

.header-outer{
margin: 0px;
padding: 0px;
} ------------------------->biar menu sama banner nempel

.body{
overflow-x: hidden;}


.tabs-inner .widget ul{
margin: 0 -9999rem; /* add back section padding value */
  padding: .25rem 9999rem;
   background: rgba(255, 255, 255,0.95);
} -------------------->biar menunya memanjang seukuran screen


.tabs-inner .widget li{
padding:5px 20px 20px 0px;
} --------->biar menunya lebar

Template: TANDA AIR contoh blog: mybookspoiler.blogspot.com

.post-outer{

background-image:none;

}

.tabs-inner .widget ul {

  padding: 4px 50px;

  max-height: 50px;

} ------------------> ini buat menu di bawah banner

.tabs-inner .widget li a:hover {

background:#8FC3FF;

color:white;

}------------------> ini buat menu di bawah banner

h3.post-title {

  text-align:center;

text-transform:uppercase;

letter-spacing:0.7px;

line-height:150%;

} --------------------> judul postingan

.date-header{

padding-left:10px;

padding-top:2px;

padding-bottom:2px;

text-transform:capitalize;

} -----------------> tanggal di atas postingan

.post-body{

font-family:"Georgia";

font-size:100%;

letter-spacing:0.0px;

line-height:180%;

} 

.posts{

font-family:Georgia;

line-height:200%;

letter-spacing:0.5px;

}

h2{

text-transform:uppercase;

} -----------------> untuk font widget

.breadcrumbs{ 

padding:5px 5px 5px 0; 

margin:0;font-size:95%; 

line-height:1.4em; 

border-bottom:4px double #cadaef} ------------------> jadi kalo klik salah satu artikel, biasanya di atas postingan kayak ada pemetaannya, nah itu!

h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; } --------------> no idea *hey!!*

Jujur aja, sebenernya semuanya cuma coba-coba, jadi maafkan kalo penjelasannya nggak detail. Biasanya aku cuma coba-coba jadi mending coba-coba aja kalo mau coba, nggak rugi kok, asal hati-hati jangan pejet save waktu lagi ngedit pasti aman kok hahahaha

Oiya, ke depannya bagian ini akan selalu aku update, tergantung aku ubah bagian mananya lagi. Anyway, yang ini juga header sama backgroundnya belum fix kok :D