Simple Way - Edit Template Blog



Belajar Edit Template, duh jadi merasa bagaimana gitu ya. Padahal saya juga masih PEMULA banget. Tapi, siapa tahu, ada yang sedang butuh dengan apa yang akan saya bagikan ini. Berawal dari keinginan memiliki desain blog yang sesuai dengan apa yang saya mau, akhirnya saya berusaha untuk belajar ‘otak-atik’ template blog. Walaupun masih banyak PR yang harus saya benahi untuk tampilan blog saya ini, tapi setidaknya progress ‘otak-atik’ mengalami kemajuan. Karena, kalau tidak ada kemajuan, berarti adanya kemunduran atau stuck, kalau kondisi begini saya mungkin akan menyerah dan memutuskan untuk membeli template.

Perlu diketahui, bahwa Platform yang saya gunakan ini adalah Blogspot.

Nah, bagi yang sedang ingin coba-coba edit template blog sendiri, saya ingin bagikan melalui tulisan kali ini, dibantu dengan blog tambahan yang akan saya gunakan untuk ‘uplek-uplek’ sebagai demo-nya. Jadi, sekarang akan saya mulai dengan beberapa tahapan. Tahapan desain ini saya buat agar tidak begitu memusingkan, seperti :


1.    Tahapan Header, Footer dan Main Body
2.    Tahapan Memasukkan Header dan posisinya
3.    Tahapan membuat Menu di bawah Header
4.    Tahapan Mengubah Font blog
5.    Tahapan Membuat Otomatis ‘Read More’


6.    Tahapan Membuat Tanggal menjadi Kalender
7.    Tahapan Membuat Post Comment dengan desain
8.    Tahapan Membuat Kolom Search pada Sidebar
9.    Tahapan Memasukkan Social Media Icon
10. Tahapan Membuat Widget untuk Grup Komunitas




Sebagai blog tambahan untuk proyek percontohan dalam desain blog ini, saya gunakan blog dengan tautan : http://belajareditblogipehalena.blogspot.co.id/. Silakan dikunjungi dan mari kita mulai untuk Belajar Bersama Cara Edit Template Blog, sebelumnya :


PASTIKAN SUDAH MELAKUKAN BACKUP TEMPLATE TERLEBIH DAHULU.



1.    Edit Header, Footer dan Main Body



Setelah Backup Template, pilih terlebih dahulu template di blog kita dengan Simple Template, saya menggunakan simple template berwarna dasar putih untuk blog utama. Tapi untuk blog percobaan saya gunakan template berwarna coklat. Guna mempermudah dalam melakukan editing. Kemudian ‘apply’ simple template sehingga desain blog kita berubah menjadi template dasar. Setelah itu masuk ke menu Edit HTML (Template -> Edit HTML).

Setelah terbuka bagian kolom koding, ikuti langkah berikut ini :



Mengubah Background


Cari kode di bawah ini dengan menggunakan shortcut ctrl+F pada jendela editor.

body {


Kemudian, setelah ketemu akan terlihat kode seperti di bawah ini:

body {

  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0$(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

Ganti Kode yang berwarna merah tersebut dengan kode di bawah ini :

padding: 0px;

*Beberapa template memiliki perbedaan kode, tapi untuk mengikuti langkah ini, tetap harus mengubah bagian ‘padding‘ pada ‘body‘ yang bisa saja ditemui di beberapa tempat.*


Mengubah Bagian Konten

Sekarang, dengan cara yang sama, cari kode di bawah ini pada jendela editor :

.content-inner {

Jika sudah di dapat, akan tampak kode seperti di bawah ini

.content-inner {

  padding: $(content.padding) $(content.padding.horizontal);
}

Selanjutnya, ubah kode yang ditandai warna merah seperti di atas dengan kode di bawah ini :

padding: 0px;

Kemudian, setelah itu cari kode di bawah ini

$(content.background.color.selector)

Akan di dapat kode seperti tampak di bawah ini

$(content.background.color.selector) {

  background-color: $(content.background.color);
}


Seperti langkah sebelumnya, ganti kode yang ditandai warna merah dengan kode di bawah ini

background-color: $(body.background);

Kemudian, cari kembali kode di bawah ini

]]></b:skin>

Lalu tambahkan kode di bawah ini, tepat di atas kode  ]]></b:skin>

.main-outer {

background: $(content.background.color);
}

Membuat Bagian Konten Menjadi Lebar


Selanjutnya, kita cari kembali kode di bawah ini dengan shortcut ctrl + F pada jendela editor

.content-outer, .content-fauxcolumn-outer, .region-inner {


Di bawah kode yang tadi kita temukan, akan tampak kode lengkapnya seperti di bawah ini, dan lihat kode yang saya tandai warna merah :

.content-outer, .content-fauxcolumn-outer, .region-inner {

min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}

Ganti kode tersebut dengan kode di bawah ini


max-width: 100%;


Hampir Selesai

Tinggal dua langkah lagi untuk menyelesaikan tahapan ini. Ikuti langkah berikutnya dengan mencari kode

</b:template-skin>

Jika tampilan pada kode di atas tampak tidak seperti gambar di bawah ini, klik gambar panah untuk membuka kode lain, kemudian ulangi lagi pencarian pada kode di atas. Jika sudah, maka bisa tambahkan kode di bawah ini, yang diletakkan di atas kode </b:template-skin> :

.main-outer {

max-width: $(content.width);
margin: 0 auto;
}

Jika sudah, sekarang cari kembali kode seperti di bawah ini

]]></b:skin>


Sudah dapat? Kemudian tambahkan kode di bawah ini dan letakkan kodenya di atasnya.

.tabs-inner {
padding: 0px;
}
.section {
margin: 0px;
}
.header-inner .widget {
margin: 0px;
}


Kalau sudah, jangan lupa untuk klik tombol “SAVE TEMPLATE“ kemudian lihat perubahan halaman utama blognya. Ada perbedaan kan?

Tahap Pertama : SELESAI. Mission Accomplished.

2.    Cara Memasukkan Header dan Mengubah posisinya



Punya header berupa gambar yang ingin diunggah ke blog? Tapi, kok justru letak gambarnya tidak beraturan?? Gampang, tinggal ikuti cara di bawah ini. Untuk membuat gambar header, saya sarankan buat gambar dengan ukuran 1140 x 300px.


Unggah Gambar Header


Masuk ke Dashboard Blog ->Pilih Layout ->Klik Tombol Edit pada Menu Header -> Pilih Gambar dengan klik tombol Browse -> Pilih Gambar. Jangan lupa untuk pilih “Have description placed after the image”.








Mengubah Posisi Header


Saya ingin, agar header blog saya letakknya berada di tengah-tengah blog. Bagaimana caranya? Sekarang ikuti langkah berikut :


Masuk ke dashboard blog -> kemudian pilih Template -> Klik Tomblo Customize

Jika sudah, kemudian pilih menu Advanced - > Add CSS -> Kemudian tambahkan kode di bawah ini pada kotak kosong di tampilan Add CSS


#header-inner {

 background-size: cover;
 width: 100% !important;
 text-align: center;
 }
 #header-inner img {
 width: 100%;
 height: 100%;
 }


Jangan lupa untuk klik tombol ‘Apply’ agar kodenya tersimpan. Dan Tahap kedua : SELESAI.



3.    Membuat Menu Blog



Sebenarnya, jika menggunakan blogspot, sudah memiliki widget tambahan untuk menampilkan menu pada blog. Tapi, saya kurang puas, karena akhirnya tampilan menu di gadget akan tampak ‘biasa’. Sehingga saya memutuskan untuk membuat menu yang berbeda. Mau tahu caranya? Ikuti langkah di bawah ini :


Masuk ke Dashboard blog -> Layout -> Add Gadget -> HTML/Javascript.

Jika sudah, masukkan kode di bawah ini pada kolom kosong di kotak HTML/Javascript


<center><ul id="icbabdrop">

  <li><a href="http://belajareditblogipehalena.blogspot.co.id/">Home</a></li>
  <li><a href="">About</a></li>
  <li>
    Menu
    <ul>
      <li><a href="">Life</a></li>
      <li><a href="">Tips</a></li>
      <li><a href="">Receipt</a></li>
<li><a href="">Travel</a></li>
    </ul>
  </li>
 <li><a href="">Contact</a></li>
</ul></center>

*Masukkan Tautan pada link blog ke dalam tanda kutip berwarna merah, seperti contoh pada tulisan Home di atas*

Kemudian, jangan lupa untuk klik tombol SAVE, dan letakkan kotak HTML/Javascript ini di bawah tulisan Cross Column-2.





Selanjutnya, kembali ke menu Dashboard -> Template -> Edit HTML

Cari kode di bawah ini

]]></b:skin>

Kemudian tempelkan kode di bawah ini pada bagian atas kode ]]></b:skin>

/* DROPDOWN MENU BY icanbuildablog.com */

.tabs-inner .widget ul#icbabdrop {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  border:none;
}
.tabs-inner .widget ul#icbabdrop li {
  font-size: 14px/20px;
  font-family: trebuchet; /* Font for the menu */
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff; /* background colour of the main menu */
  float:none;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.tabs-inner .widget ul#icbabdrop li a {
padding:0;
font-family: trebuchet; /* Font for the menu links */
border:0;
}
.tabs-inner .widget ul#icbabdrop li:hover {
  background: #FFB6C1; /* background colour when you roll over a menu title */
  color: #F08080; /* font colour when you roll over a menu title */
}
.tabs-inner .widget ul#icbabdrop li:hover a {
  background: transparent;
  color: #F08080; /* font colour when you roll over a menu title link */
}
.tabs-inner .widget ul#icbabdrop li ul {
  z-index:1000;
  border:none;
  padding: 0;
  position: absolute;
  top: 45px;
  left: 30px;
  float:none;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
.tabs-inner .widget ul#icbabdrop li ul li {
  background: #FFFAFA; /* background colour of the sub menu items */
  display: block;
  color: #FA8072 /* font colour of the sub menu items */
  text-shadow: 0 -1px 0 #000;
}
ul#icbabdrop li ul li a{
  color:#FFB6C1  /* link colour of the sub menu items */
}
.tabs-inner .widget ul#icbabdrop li ul li:hover {
  background: #FFB6C1; /* background colour when you roll over sub menu items */
}
.tabs-inner .widget ul#icbabdrop li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

Setelah itu, klik tombol “Save Template”. Tahap Membuat Menu untuk Blog : SELESAI.


Akan saya lanjut nanti untuk poin berikutnya, mohon maaf jika ada yang kurang berkenan, dan semoga apa yang saya bagikan ini bermanfaat. Jika tidak, semoga dibukakan pintu maaf :), terima kasih. 

To be continue ….



Comments

  1. waah lengkap banget...tandain dulu, nanti balik lagi (klo pikiran sdh agak plong biar gampang nymabungnya) aku masih mau belajar bikin menu blog mba

    ReplyDelete
    Replies
    1. Kalau mau buat menu blog, ga perlu ganti template ya, Mbak. Tinggal disesuain aja nanti letak gadget di halaman layoutnya :). Semoga bermanfaat

      Delete
  2. Ih ketje. Save save.. Ayo ditunggu kelnjutannya mba.. :)

    ReplyDelete
    Replies
    1. Siap, terima kasih Ibu Jerapah sudah mampir :D

      Delete
  3. Saya kalau sudah urusan coding, jadi perih mata ... waktu SMP hobi banget. Tapi sekarang, jadi mikir2 kalau mau edit ,,,

    ReplyDelete
  4. Saya kalau sudah urusan coding, jadi perih mata ... waktu SMP hobi banget. Tapi sekarang, jadi mikir2 kalau mau edit ,,,

    ReplyDelete
    Replies
    1. saya SMP masih main layangan, mas.

      Delete
  5. Wuaa mak Ipeeh rajin bgt, keren..aq masi nyerah ni klo main coding >,< baru ngandelin template jadi aja trus desain2 dikit. Tp memang ga bisa maksimal sesuai hati ya. Sip bgt ini mak, tfs

    ReplyDelete
    Replies
    1. Yaa, saya juga masih pemula mba, cuma pengen bagi2 aja gitu

      Delete
  6. nah, menu dropdown yang aku cari, request yang banner komunitas jadi kecil - kecil gitu, kayak yang di bawah kotak komen, caranya gimana? makasih ^^

    ReplyDelete
    Replies
    1. Sip, dicatat dulu, nanti saya usahain update ya :)

      Delete
  7. Yang kanan bawah dek komunitas ditaruh samping atau footer.. nggak nengah soale, kecuali dijejer 4 icon 4 icon

    ReplyDelete
    Replies
    1. Sampun tak otak-atik mba, matur nuwun nggih

      Delete
  8. Salut nih ama mbak Ipe yang semangat utak atik kode template blog. Semoga bisa langsung dipraktekkan para blogger yang suka kreasi template :)

    ReplyDelete
  9. Mbaa Ipeh, aku dulu rajin otak atik template tapi sempat berantakan. Akhirnya jadinya yang pakai sederhana aja, mba
    Makasihtipsnya ya. Ntar kapan-kapan aku nyoba ah :)

    ReplyDelete
  10. kalau sekarang aku angkat tangan dulu edit editan, ada balita yang suka ngerusuh. Makasih sharingnya ya Mbak,

    ReplyDelete
  11. Waaah boleh juga nih Ilmu untuk templatenya Mba Ipeh... Bookmark dulu :)

    ReplyDelete
  12. Wuih canggiihhh! Izin bookmark ya, Mbak. Kapan-kapan mau coba kalau anak-anak bobo gasik hehehe.

    ReplyDelete
  13. kalau mau nambah jumlah tampilan tulisan di halaman depan gimana kak. sudah di edit di tata letak tidak bisa, sepertinya harus ada yang di ubah di htmlnya

    ReplyDelete

Post a Comment

Mohon maaf untuk sementara komentar dimoderasi, karena banyak spammer.

Silakan meninggalkan komentar dengan bahasa yang baik. n_n
Link hidup dan Spam akan dihapus ya :)


Terima kasih




domain murah