Edit Simple Fresh Template

Ternyata setelah saya share tentang Simple Fresh Template banyak juga sahabat blogger yang menngunakan template ini. Karena jelas sekali, Simple Fresh Template memiliki banyak fitur yang menguntungkan sekali bagi para penggunanya diantaranya designnya yang unik dan yang sangat penting adalah SEO Friendly. Tentunya hal ini akan sangat membantu dalam pengoptimalisasian blog untuk lebih dikenal oleh Search Engine.

Mungkin sebagian dari anda kaget dengan judul postingan ini, Edit Simple Fresh Template. Kenapa saya menggunakan judul tersebut? karena sepanjang saya menggunakan template ini ternyata ada beberapa kekurangan yang harus dan mesti diperbaiki untuk membuatnya enak dilihat. Diantaranya yang membuat saya kalang kabut cari solusinya kemarin adalah: Older dan Newer Post yang tidak sesuai pada tempatnya dan kolom footer yang agak jauh dari kolom diatasnya. Akhirnya, saya mendapatkan jawabannya dari seorang master blogger yang sangat rendah hati yaitu Mas Doyok yang menuntun saya mengutak-atik template ini. Baiklah berikut saya share kepada sahabat blogger terutama yang menggunakan template ini karena saya lah yang menyebabkan mereka menggunakannya.

Newer Dan Older Post Yang Tidak Pada Tempatnya
Trik berikut murni saya dapatkan dari Mas Doyok yang memberikan salah satu Link artikelnya kepada saya untuk dipelajari dan setelah dipraktekin berhasil. Berikut langkah-langkahnya:
  • Login ke Blogger.com
  • Kemudian Tata Letak
  • Pilih Edit HTML
  • Centang Expand Widget
  • Cari kode berikut:

#blog-pager-newer-link { float: left; }
#blog-pager-older-link { float: right; }
#blog-pager { text-align: center; }
  • Ganti kode diatas dengan kode dibawah ini:
#blog-pager-newer-link{float:left; line-height:1.8em; font-weight:bold}
#blog-pager-older-link{float:right; line-height:1.8em; font-weight:bold}
#blog-pager{width:600px; float:left; text-align:center; line-height:1.8em; font-weight:bold; color:white}
  • Kode berwarna merah ganti dengan lebar pada main-wrapper template anda, Bagi pengguna Simple Fresh Template tinggal Copas saja.
Note: Bagi Template dengan 2 Lebar Main-Wrapper Seperti Simple Fresh Template
  • Cari kode berikut: (Cirinya lihat kode warna merah)
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#main-wrapper {
       width:372px;
       float:left;
       }
......................
</b:if>
</style> 
Note: Tanda (.............) mungkin berisi kode yang panjang
  • Kemudian sisipkan kode berikut diantara kode:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
......letakkan kodenya disini........
#main-wrapper {
Kode yang harus disisipkan:
#blog-pager-newer-link{float:left; line-height:1.8em; font-weight:bold}
#blog-pager-older-link{float:right; line-height:1.8em; font-weight:bold}
#blog-pager{width:372px; float:left; text-align:center; line-height:1.8em; font-weight:bold; color:white}

  • Kode warna merah sesuaikan dengan width main-wrapper ke 2 template anda.
  • Maka kodenya akan seperti ini:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#blog-pager-newer-link{float:left; line-height:1.8em; font-weight:bold}
#blog-pager-older-link{float:right; line-height:1.8em; font-weight:bold}
#blog-pager{width:372px; float:left; text-align:center; line-height:1.8em; font-weight:bold; color:white}
#main-wrapper {
       width:372px;
       float:left;
       }
  • Kode berwarna biru adalah kode yang telah disisipkan dan yang merah adalah width main-wrapper ke 2 yang telah disesuaikan. Untuk pengguna Simple Fresh Template tinggal Copas saja.
  • Selanjutnya Save Template
Jarak Footer Yang Agak Jauh Dengan Kolom Diatasnya (kolom posting dan sidebar)
Tutorial berikut saya dapatkan waktu pertama kali gabung di chat SM (ShoutMix) Mas Doyok. Saya masih ingat, waktu itu adalah pertamakali saya chat dengan dia dan langsung mengajukan beberapa pertanyaan :D Berikut jawaban Mas Doyok yang mungkin bermanfaat untuk anda khususnya pengguna Simple Fresh Template dan sahabat blogger yang lain.
Tutorial berikut lebih dikhususkan bagi pengguna Simple Fresh Template
  • Dalam keadaan login seperti langkah-langkah diatas.
  • Cari kode berikut:
/**************   BOTTOM  *****************/
#column {
    width: 960px;
    position: relative;
    clear: both;
    margin: 10px 0 -15px -10px;
    color: #000;
    float: left;
  • Pada margin ganti kode berwarna biru(10px) ke 0px sehingga menjadi margin: 0px 0 -15px -10px;
  • Selanjutnya cari kode berikut:
#main-wrapper {
    float: left;
    width: 600px;
    margin: 0;
    padding: 0 0 20px; } 
  • Kode berwarna biru(20px) pada padding ganti ke 0px sehinngga menjadi seperti ini padding: 0 0 0px;
  • Selanjutnya Save Template dan lihat hasilnya.. 
Share on Google Plus

About Admin

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

28 comments:

  1. templatenya buat sendiri ya??
    keren juga nih.... :m:

    ReplyDelete
  2. gak sobat..
    template karya mas ndyteen..
    hanya aku share disini dan edit2 dikit..

    ReplyDelete
  3. tapi aku ga' pakai tempat itu sob.. tapi ga' pa pa juga untuk dipelajari

    ReplyDelete
  4. Yang simpel begini biasanya ramah SEO.

    Salam ukhuwah

    ReplyDelete
  5. manteb soob, eh coba liat blog aku, minta pencerahannya niih..
    coba klik dunia islam, trus kan masih 3 kolom tuuh, cara ngilangin kolom ke dua gimana??

    ReplyDelete
  6. Wah, emang bener apa yg kamu bilang sob. Aku pernah coba-coba pake template buatan NdyTeen ini tapi karena Home , Page Newer Link and Page Oldest Linkny gak karuan tempatnya jadi aku copot lagi dehh templateny. Tapi thanks atas pencerahannya. ^_^

    ReplyDelete
  7. Cool Keep Modif :a:

    ReplyDelete
  8. nice artikel sob.. makasih ni buat tutornya.
    suatu saat pasti berguna kalau di timpa masalah yang sama.
    salam sukses......

    ReplyDelete
  9. Wah Mantep emang Template Simple Fresh...
    Tx sobat.. Keep Blogging :s:

    ReplyDelete
  10. makasih mas akhrnya request saya di p0sting ntar langsung dc0ba he he he kaMsia Gan :x:

    ReplyDelete
  11. templet modif ta shob, terimakasih atas pencerahannya, saya simpan dulu ya

    ReplyDelete
  12. Mantaf..gan..sedot dlu ahhh...

    ReplyDelete
  13. selamat berkreasi teruz sob..
    nantinya kebanggaan dan kesuksesan akan menghampiri sobat.

    ReplyDelete
  14. templatenya memang keren sob ...

    ReplyDelete
  15. hmmmm...cssnya kok ada inline ada eksline yak...hmmm
    bawaan template memang beda2 yak master...
    kalo aku trik ini gak ngaruh...wkwkkwkw
    master doyok selain rendah hati, rendah darah, rendah lain-lainya....wkwkkwkwkwk

    ReplyDelete
  16. Setelah diedit berarti semakin baik dan sempurna ya. Keunggulan ramah SEO banyak dicari blogger, buktinya template ini digunakan banyak blogger juga.

    Salam ukhuwah

    ReplyDelete
  17. mantap mas templetnya :) simple tapi elegan

    ReplyDelete
  18. baru mampir sob....
    .
    .he makasih yaw atas informasinya artike nie....

    ReplyDelete
  19. templatenya enak nih, patut di contoh :u:

    ReplyDelete
  20. Template friendly like this blog, trima kasih infonya sob...di copy dulu codenya ya, thanks

    ReplyDelete
  21. thanks atas tipsnya brow...
    sory baru mampir

    ReplyDelete
  22. Mendukung template ramah SEO seperti ini. Ditunggu posting berikutnya

    Salam ukhuwah

    ReplyDelete
  23. bagus bangetz.....good guid for me,thankz brow.....

    ReplyDelete
  24. sob, uuntuk komentar jadi seperti tmpmu gimana ??

    ReplyDelete