SEBAIKNYA KUNJUNGI BLOG SAYA :

BLOGBEGO CREATION




Tampilan Blog bergaya WEB punya

Selamat berjumpa lagi kawan, mudah-mudahan semua dalam keadaan sehat-sehat dan selalu dilindungan Tuhan Yang Maha Esa.....Amin !
Ada beberapa kawan bertanya  yang disampaikan lewat Komentar tentang cara membuat tampilan seperti Blog saya ini, tapi sebelumnya saya mohon maaf karena keterlambatan mempostingnya, hal ini disebabkan saya perlu praktekan lebih dahulu agar sesuai dengan keinginan Blog ini yaitu Semua Artikel / postingan sudah diuji coba dan berhasil dengan sukses. 
Sebelum lanjut perlu kawan ketahui, bahwa tampilan depan (Beranda / Home) Blog kita akan tampil seperti gambar diatas dan itupun tidak mutlak begitu, karena semuanya bisa disembunyikan sesuai selera masing-masing. 
Hal ini pernah dibahas oleh Kang Rohman, yaitu "Buat halaman Intro di Blogger" kalau kawan ingin mengetahui dan membacanya silahkan disini, tapi yang saya sampaikan sekarang sedikit beda, bedanya dimana ?! »» Bedanya yang ini langsung tampil (penciptanya Mas Adam seorang Blogger Design).
Caranya : 

  1. Masuk ke Account Blogger dengan ID kawan
  2. Klik Pengaturan - Format - Tampilkan sebanyak mungkin : ganti jumlahnya menjadi 0 (Nol) posting  di halaman utama - Simpan Setelan.
  3. Klik Rancangan - Edit HTML - Simpan / Download Template kawan dulu
  4. Beri tanda centang pada radio disamping tulisan Expand Template Widget.
  5. Cari kode berikut <b:include data='post' name='post'/>   
  6. Hapus / Ganti kode tersebut dengan kode dibawah ini 

<b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <div style='float:center; padding:4px;margin:5px;border:2px solid #000000; -moz-border-radius:10px;-webkit-border-radius:10px; background:#FFFFFF; font size: 16px; text-decoration: none; line-height:normal;'> <a expr:href='data:post.url' style='text-decoration:none;'> <data:post.title/></a><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='text-decoration:none;'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></div> <b:else/><b:include data='post' name='post'/> </b:if> <b:else/><b:include data='post' name='post'/> </b:if>

Kawan bisa merubah warna tampilan dengan mengganti tulisan yang berwarna merah diatas dengan warna selera kawan, karena script tersebut akan menampilkan Judul dari Artikel Blog kawan

  • Geser mouse kebawah atau cari kode seperti ini : .comment-link{ 
  • Hapus / atau ganti kode tersebut dengan kode script berikut : 
.comment-link {float:right; overflow:hidden; font-family:Tahoma,Arial,verdana, sans-serif; font-size:10px; color:#262B2F; padding:0px 0px; margin:2px 5px 0px 0px;}
  • Selanjutnya cari kode : <b:includable id='status-message'>  
  • Atau kurang lebih kodenya seperti berikut  :
 <b:includable id='status-message'>
  <b:if cond='data:navMessage'>
  <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      <data:navMessage/>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if></b:includable>   
  •  Hapus atau Ganti Kode script tersebut dengan :
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<a href='http://tips-blogbego.blogspot.com/search?max-results=500' style='cursor: pointer;' text-decoration='no' title='Masuk ke TIPS BLOGBEGO...'>
<img border='0' height='200' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMCpJvgp1BWXLZ0A1Eqqh5YJj0S_Eey4_BjyvsMguW1pD8GQfzytNIxwbfVtNXYwKIli2ls1YVmJmLjch86Yr2k1nGUAZXM_wg-ISLQp0OiofNq6yMCaNcT46MRvpT_axsHf3SpelVvWQ/s320/anjing+menggonggong.jpg' width='200'/>
</a>
</div>
<div class='status-msg-hidden'>
<a href='http://tips-blogbego.blogspot.com/search?max-results=500' style='cursor: pointer;' text-decoration='no' title='Masuk ke TIPS BLOGBEGO...'>
<img border='0' height='200' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMCpJvgp1BWXLZ0A1Eqqh5YJj0S_Eey4_BjyvsMguW1pD8GQfzytNIxwbfVtNXYwKIli2ls1YVmJmLjch86Yr2k1nGUAZXM_wg-ISLQp0OiofNq6yMCaNcT46MRvpT_axsHf3SpelVvWQ/s320/anjing+menggonggong.jpg' width='200'/></a>
</div>
</div>
<div style='clear: both;'/>
</b:if></b:includable>
  • Script tersebut diatas akan menjadi tampilan utama Blog kawan 
  • Kawan bisa berkreasi misalnya menambah Tulisan atau Gambar/Image 
  • Ganti url  Blog saya dengan url Blog kawan
  • Ganti Gambar / Image tersebut dengan gambar / image milik kawan
  • Simpan Template dan lihat hasilnya


10 komentar pada “Tampilan Blog bergaya WEB punya”

  1. wah informasinya menarik sekali kawan...
    sangat berguna bagi saya yang tidak bisa koding....

    BalasHapus
  2. ilmu yang sangat menarik dan bermanfaat....
    semoga ilmu Anda semakin bertambah kawan..

    BalasHapus
  3. sangat berguna dan bermanfaat ilmu-ilmu yang ada di blog Anda...
    salam kenal...

    BalasHapus
  4. nice information for your blog..
    I get some knowlegde here

    BalasHapus
  5. mantabs banget ilmunya dech...
    salam kenal brother

    BalasHapus
  6. trims kawan2 kunjungan, mudah2an kawan merasa puas dan tak bosan (saling)berkunjung

    BalasHapus
  7. setelah saya coba pada Blog-blog saya tidak masalah malahan memperingan kalau dibandingkan memakai readmore... atau judulnya saja !!!

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK DAN SANTUN
BUKAN SPAM - PORNOGRAFI MAUPUN MASALAH ETHNIS / SARA

TAMBAHKAN KOMENTAR DENGAN EMOTICON :
DENGAN KODE ALFABET < :a s/d :z >

 

Copyright  ©  TIPS BLOGBEGO

site meter

Template by Blogger templates
Powered by Blogger