Cara Menambah Mengubah Lebar Posting Pada Template | Tips Mengedit Template

Menambah Mengubah Lebar Posting Template  – Mengetahui ukuran lebar header, posting, sidebar, footer atau lebar template secara keseluruhan penting untuk diketahui. Sehingga saat anda ingin mengedit template, mengubah atau menambah lebar bagian-bagian template tadi, anda sudah mengetahui dibagian mana yang harus anda rubah/edit. Nah sebagai pengenalan awal, sobat harus mengenal dulu elemen dalam susunan CSS template yang disebut dengan wrapper. Artikel ini sekaligus menjawab email yang saya terima dari seorang sobat blogger yang menanyakan bagaimana cara menambah/mengubah lebar posting.  

Nah dari gambar diatas saya jelaskan dulu satu-satu maksudnya :

1.    Outer-wrapper : pada template ditandai dengan kode CSS #outer-wrapper, #outer-wrap atau #outer. Maksudnya adalah lebar/ukuran template secara keseluruhan dimana didalam outer-wrapper ini terdapat bagian header, posting, sidebar dan footer.

2.   Header-wrapper : pada template ditandai dengan kode CSS #header-wrapper, #header-wrap atau #header. Pada beberapa template bagian header ini ada juga yang terbagi dari 2 seperti pada template saya ini, maka kode CSSnya juga ada 2 seperti ini #header dan #header2. Yang membedakan posisinya adalah float right dan float left. Ukuran lebar menu navigasi yang ada dibawah atau diatas header juga biasanya sama.

3.   Content-wrapper : pada template ditandai dengan kode CSS #content-wrapper, #content-wrap atau #content. Jika pada template anda tidak terdapat kode ini, berarti untuk area posting dan sidebar pengaturan CSSnya ada pada bagian /* -----   MAIN   -----  */.

4.   Main-wrapper : pada template ditandai dengan kode CSS #main-wrapper, #main-wrap atau #main. Nah pada bagian main-wrapper inilah area posting anda berada.

5.   Sidebar-wrapper : pada template ditandai dengan kode CSS #sidebar-wrapper, #sidebar-wrap atau #sidebar. Pada template tertentu sidebar terkadang juga ada lebih dari 1. Jadi boleh jadi dalam template ada beberapa kode sidebar yang ditulis secara urut seperti #sidebar-wrapper, #sidebar1-wrapper atau #sidebar1 dan #sidebar2.

6.  Footer-wrapper : pada template ditandai dengan kode CSS #footer-wrapper atau biasanya juga terdapat dibawah kode /* -----Footer Content----- */ atau /* -----Footer Wrapper----- */.  

Cara Mengubah Menambah Lebar Header, Posting, Sidebar dan Footer

Setelah mengenal elemen wrapper seperti saya jelaskan diatas, berikutnya kita dapat mengubah atau mengedit lebar dari masing-masing elemen wrapper tersebut. Caranya mudah saja, anda tinggal memperhatikan pengaturan stylish CSS atau declaration yang ada didalam elemen wrapper yaitu pada bagian width atau height. Misalnya saya contohkan untuk bagian header, posting dan sidebar.

/* Header

----------------------------------------------- */

.idheadpic{width:100%;margin:0 auto;padding:0px 0px 0px 0px;}

#idhead {

  background:#fff;filter:alpha(opacity=90);opacity:0.9;

  width:990px;padding:5px 0 5px 0;

  margin:0 auto;

  border:0px solid $bordercolor;

  }

#header-inner {

  background-position: center;

  margin-left: auto;

  margin-right: auto;

}

#header {background:transparant;

  float:left;

  width: 179px;

  margin-left: 10px; text-align: left;

  color:#f2f2f2;

}

#header2 {float:right;

  margin-right:9px;margin-top:4px;padding-bottom:4;

  width:730px;text-align: right;

  background:transparant; height:90px;

}

Pada kode header diatas memperlihatkan bahwa header terbagi menjadi 2. Lebar total bagian header ini adalah 990px, dimana terdiri dari header-left (perhatikan kode penempatan/posisi heder: float-left) dengan lebar 179px dan header-right dengan lebar 730px. Jika kita jumlahkan lebar header1 + header2 + margin + padding = lebar total header. Kemudian cara membaca margin dan padding prinsipnya sama yaitu dari atas dan berputar searah jarum jam. Misalkan padding: 6px 8px 6px 6px;  maka yang dimaksud adalah padding-top 6px, padding-right 8px, padding-bottom 6px dan padding-left 6px. Padding adalah jarak antara teks atau image ke tepi batas elemen wrapper. Sedangkan Margin biasanya jarak antara 2 wrapper misalnya antara area posting dan sidebar dipisahkan oleh margin.  

/* Main containers */

#outer-wrapper {

width: 950px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

#main-wrapper {

width: 630px;

float: $startSide;

word-wrap: break-word;

overflow: hidden;    

}

#sidebar-wrapper {

width: 300px;

float: $endSide;

word-wrap: break-word;

overflow: hidden;

}

/* Post */

.post{

width: 600px;

padding: 15px;

border: 1px solid #E0E0DE;

background: #FFF;

font-family: Helvetica, sans-serif;

margin-bottom: 20px;

}

Akhirnya nemu juga nih kode template yang bisa mewakili apa yang ingin saya jelaskan ! Perhatikan susunan CSS diatas karena sudah merangkum bagian outer-wrapper, main-wrapper (posting) dan sidebar-wrapper. Pada outer-wrapper disebutkan lebarnya 950px, sedangkan pada main-wrapper dan sidebar-wrapper lebarnya masing-masing adalah 630px dan 300px. Kalau dijumlahkan jumlah keduanya adalah 930px. Sisa 20px dapat disimpulkan adalah margin kiri main-wrapper+margin antara main-wrapper dan sidebar-wrapper+margin kanan sidebar wrapper, sehingga jumlahnya 20px dan total menjadi 950px. Pada susunan CSS diatas disetting auto sehingga kita tidak mengetahui persis berapa nilai tiap margin namun yang pasti ada 3 jarak margin yang diperhitungkan. Sambil membaca penjelasan ini lihat lagi gambar ilustrasi elemen wrapper diatas ya biar ngga bingung. Kemudian perhatikan lagi bagian posting (post). Pada kode CSS nilai lebarnya 600px, ini sudah merupakan lebar teks atau artikel yang kita tulis. Padding 15px berlaku untuk top, right, bottom dan left. Sehingga jumlah post width 600px + padding left 15px + padding right 15px = lebar main-wrapper 630px. Kalau sobat masih bingung copy atau bookmark aja tulisan ini biar bisa dibaca lagi karena saya sudah berusaha menuliskan sejelas mungkin.

Dari apa yang saya jelaskan tentang Cara Menambah Mengubar Lebar Postingan di Blogspot ini mudah-mudahan bisa memberikan pemahaman buat anda bagaimana cara mengatur atau mengetahui lebar area header, posting, sidebar dan footer. Baca juga Tips Lengkap Cara Mempercantik Tampilan Blog untuk menambahkan widget-widget keren pilihan sehingga blog sobat tambah siiiiipp tampilannya. Selamat mencoba !!      

Read more »

Posted in: Template,Tips Blogging

Cara Membuat Tag Heading Dinamis SEO Friendly

Membuat Tag Heading H1 dan H2 SEO Friendly – Heading merupakan elemen sangat penting yang menjadi tanda pengenal bagi sebuah blog berdasarkan title atau judul. Pengaturan tag heading agar menjadi seo friendly di blogspot mutlak diperlukan agar blog terindeks dengan baik di search engine dan mendapatkan posisi SERP yang baik pula. Nah berhubung saya baru ganti template, akhirnya dapat kerjaan baru lagi ngoprek tag heading blog Share With Irfan ini. Namun kali ini saya mencoba menerapkan tag heading dinamis dimana pada saat berada di homepage maka title blog akan diindeks sebagai H1 dan judul artikel diindeks sebagai H2. Kemudian apabila kita membuka halaman posting (single post) maka secara otomatis judul artikel berubah menjadi H1. Konsep perubahan yang otomatis seperti inilah yang disebut dengan tag heading dinamis seo friendly. Ada banyak sekali memang model penataan tag heading H1 dan H2 ini yang mungkin pernah anda baca di blog-blog lain. Tapi pada dasarnya tujuan akhir tetap sama yaitu jangan sampai terjadi ada banyak H1 saat kita membuka halaman blog atau halaman posting. Seperti apa penataan tag heading dinamis yang seo friendly ini, ikuti langkah-langkah dibawah ini :    

Tips Membuat Tag Heading Dinamis SEO Friendly

1.       Login ke dashboard blogger anda.

2.       Pilih Rancangan > Edit HTML, centang Expand widget template.

3.       Jangan lupa backup dulu template anda sebelum melakukan perubahan.

4.       Cari kode seperti dibawah ini :

<div id=’header-inner’>

<div class=’titlewrapper’>

<h1 class=’title’>

<b:include name=’title’/>

</h1>

</div>

<b:include name=’description’/>

</div>

5.       Kemudian ganti dengan kode berikut ini :

<div id='header-inner'>

<div class='blogtitle'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<h1 id='blogtitle'><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<h2 id='blogtitle'><a expr:href='data:blog.homepageUrl'><data:title/></a></h2>

<b:else/>

<h1 id='blogtitle'><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>

</b:if>

</b:if>

</div>

<b:include name='description'/>

</div>

6.       Selanjutnya cari lagi kode seperti dibawah ini :

<a expr:name=’data:post.id’/>

<b:if cond=’data:post.title’>

<H2 class=’post-title entry-title’>

<b:if cond=’data:post.link’>

<a expr:href=’data:post.link’><data:post.title/></a>

<b:else/>

<b:if cond=’data:post.url’>

<a expr:href=’data:post.url’><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

</b:if>

</H2>

</b:if>

7.       Dan ganti dengan kode berikut ini :

<a expr:name='data:post.id'/>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:post.title'>

<h2 class='post-title entry-title'>

<b:if cond='data:post.link'>

<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>

<b:else/>

<b:if cond='data:post.url'>

<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

</b:if>

</h2>

</b:if>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:if cond='data:post.title'>

<h1 class='post-title entry-title' style='font-size:1.3em;'>

<b:if cond='data:post.link'>

<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>

<b:else/>

<b:if cond='data:post.url'>

<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

</b:if>

</h1>

</b:if>

<b:else/>

<b:if cond='data:post.title'>

<h2 class='post-title entry-title'>

<b:if cond='data:post.link'>

<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>

<b:else/>

<b:if cond='data:post.url'>

<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

</b:if>

</h2>

</b:if>

</b:if>

</b:if>

8.       Save/Simpan template anda.

Menanggapi komentar beberapa sahabat yang meminta supaya diberikan tutorial tambahan untuk editing bagian CSS template, maka saya tanggapi dengan memberikan tutorial edit CSS seperti yang saya lakukan. Meskipun pada template yang saya gunakan sekarang tidak ada kendala dengan perubahan tag heading tanpa mengedit bagian CSS, namun saya sangat berterima kasih atas masukan sobat blogger, karena SEMESTINYA memang ada perubahan yang harus dilakukan terutama untuk bagian CSS post H1 dan H2.

Dibawah ini adalah kode CSS awal khusus pengaturan bagian .post :

.post {
  margin:.5em 0 0.5em;
  border-bottom:1px solid $bordercolor;
  padding-bottom:0.5em;
  }
.post h3 {
  margin:2px 0 0px 0;
  font-size:131%;
  font-weight:bold;
  line-height:1.3em;
  color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:bold;
}

.post h3 strong, .post h3 a:hover {
  color:$textcolor;text-decoration:underline;
}

.post-body { font:normal 13px Arial;
  margin:8px 0 .75em;
  line-height:1.6em;
}

.post-body blockquote {
  line-height:1.3em; 
}

.post-footer {
  margin: .75em 0;
  color:$sidebarcolor;
  text-transform:none;
  letter-spacing:.01em;
  font: $postfooterfont;
  line-height: 1.4em;
}

Perhatikan perubahan yang saya lakukan pada bagian CSS dibawah ini yaitu ada penambahan khusus untuk kode .post h1 dan .post h2. Sedangkan kode h3 pada template sudah saya rubah menjadi tag heading widget.

.post{
  border-bottom:1px solid #f2f2f2;
  padding-bottom:.5em;margin:.5em 0
  }

.post h1,.post h2{font:normal 12px Arial;
  font-weight:700;line-height:1.3em;
  color:#333;margin:2px 0 0
  }

.post h1 a,.post h1 a:visited,.post h1 strong,.post h2 a,.post h2 a:visited, .post h2 strong{
  display:block;text-decoration:none;
  color:#333;font-weight:700
  }

.post h1 strong,.post h1 a:hover,.post h2 strong,.post h2 a:hover{
  color:#222;text-decoration:underline
  }

.post-body{
  font:normal 12px Arial;
  line-height:1.6em;margin:8px 0 .75em
  }

.post-body blockquote{
  line-height:1.3em
  }

.post-footer{
  color:#444;text-transform:none;
  letter-spacing:.01em;font:normal 11px Arial, sans-serif;
  line-height:1.4em;margin:.75em 0
  }

Untuk mengubah tag heading h2 menjadi h3 (widget) silahkan sobat baca lagi di Cara Pengaturan Tag Heading yang sudah pernah saya posting sebelumnya. Semoga dengan Tips Membuat Tag Heading Dinamis SEO Friendly ini dapat membantu meningkatkan nilai skor SEO blog anda. Selamat mencoba..!!

Read more »

Posted in: SEO,Template

Cara Mengubah Edit Menu Pada Template Thesis

Cara Mengubah/Edit Menu Pada Template Thesis  -  Mengganti atau menambahkan menu baru pada navbar mungkin bukan hal yang sulit buat blogger yang sudah paham dengan penulisan kode HTML. Namun bagi mereka yang kurang memiliki pengetahuan boleh jadi hal ini merupakan kesulitan besar. Postingan ini merupakan request sobat Sports  yang ingin mengetahui bagaimana cara menambahkan menu pada template thesis yang digunakannya seperti juga template yang saya pakai ini. Tapi sebelum kita ke pokok pembahasan saya ingin menampilkan contoh struktur penulisan kode HTML menu navigasi yang saya ambil dari 3 buah template untuk melihat perbedaannya. Namun satu hal yang harus diperhatikan adalah meskipun penulisan menu dari tiap template ini berbeda, tapi ada tanda pengenal atau ciri dimana kode-kode ini berada pada template yaitu biasanya ditandai dengan tag <div id='nav'> atau tag <div id='menu'> . Kemudian pada bagian CSS ditandai dengan kode #navbar-iframe {  atau kode #menu {.

·         Kode menu pada template Simple SEO :

<div id='nav'>

<ul>

<!--EDIT NAVBAR -->

<li id='current'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>

<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Posts RSS'>Posts RSS</a></li>

<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;' title='Comments RSS'>Comments RSS</a></li>

<li><a href='#' title='Edit this link'>Edit</a></li>

<!--END NAVBAR -->

</ul>

</div>

·         Kode menu pada template  SEO Friendly Blogspot Template :

<div id='nav-left'>

<ul>

<li><a href='/'>Home</a></li>

<li><a href='#'>About</a></li>

<li><a href='#'>Contact</a></li>

</ul>

</div>

·         Kode menu pada template SEO Thesis Blogjuragan :

<div id='menu'>

<ul class='menunav superfish'>

<li class='page_item home'><a Title='Home' expr:href='data:blog.homepageUrl'>Home</a></li>

<li class='page_item page-item-1'><a href='#'>About</a></li>

<li class='page_item page-item-2'><a href='#'>Contact</a></li>

</ul>

</div>

Ketiga contoh template ini ada embel-embel SEOnya karena memang saya selalu mencari template yang SEO friendly sebab biasanya loadingnya cepat dan sudah dilengkapi beberapa meta tag. Nah dari ketiga contoh ini sobat sudah bisa melihat bukan perbedaannya ? Menambahkan menu barunya pun sangat mudah koq. Misalnya kita ingin menambahkan 2 menu baru yaitu Sitemap/Daftar Isi dan Tukar Link, maka caranya adalah :

·         Simple SEO :

Ganti tanda # dengan link referensi menu yang ingin ditambahkan.

<li><a href=' http://bla…bla..bla../' title='Daftar Isi Blog'>Sitemap</a></li>

<li><a href=' http://bla…bla..bla../' title='Link dan Banner'>Tukar Link</a></li>

Struktur lengkap kode HTML pada template menjadi seperti ini :

<div id='nav'>

<ul>

<!--EDIT NAVBAR -->

<li id='current'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>

<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Posts RSS'>Posts RSS</a></li>

<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;' title='Comments RSS'>Comments RSS</a></li>

<li><a href='http://bla..bla..bla../' title='Daftar Isi Blog'>Sitemap</a></li>

<li><a href='http://bla..bla..bla../' title='Link dan Banner'>Tukar Link</a></li>

<!--END NAVBAR -->

</ul>

</div>

·         SEO Friendly Blogspot Template :

Sama dengan Simple SEO, tinggal ganti tanda # dengan link referensi menu yang ingin ditambahkan.

<li><a href=' http://bla…bla..bla../'>Sitemap</a></li>

<li><a href=' http://bla…bla..bla../'>Tukar Link</a></li>

Struktur lengkap kode HTML pada template menjadi seperti ini :

<div id='nav-left'>

<ul>

<li><a href='/'>Home</a></li>

<li><a href='http://bla..bla..bla../'>About</a></li>

<li><a href='http://bla..bla..bla../'>Contact</a></li>

<li><a href='http://bla..bla..bla../'>Sitemap</a></li>

<li><a href='http://bla..bla..bla../'>Tukar Link</a></li>

</ul>

</div>

·         SEO Thesis Template :

<li class='page_item page-item-3'><a href='isi dengan link daftar isi'>Sitemap</a></li>

<li class='page_item page-item-4'><a href='isi dengan link tukar link'>Tukar Link</a></li>

Struktur lengkap kode HTML pada template menjadi seperti ini :

<div id='menu'>

<ul class='menunav superfish'>

<li class='page_item home'><a Title='Home' expr:href='data:blog.homepageUrl'>Home</a></li>

<li class='page_item page-item-1'><a href='http://bla…bla..bla../'>About</a></li>

<li class='page_item page-item-2'><a href='http://bla…bla..bla../'>Contact</a></li>

<li class='page_item page-item-3'><a href='http://bla…bla..bla../'>Sitemap</a></li>

<li class='page_item page-item-4'><a href='http://bla…bla..bla../'>Tukar Link</a></li>

</ul>

</div>

NB : Penempatan urutan link bisa ditukar/diganti atau dibolak-balik terserah anda. Yang penting jangan sampai menghapus atau meniadakan link yang pertama (Home).

Proses perubahan menu pada template ini dapat dilakukan dengan lebih dulu login ke dashboard blogger kemudian pilih Rancangan > Edit HTML dan centang Expand widget template. Mencentang Expand widget template ini tujuannya adalah untuk memunculkan kode-kode yang disembunyikan oleh blogger. Secara default blogger menyembunyikan kode-kode tertentu / kode widget pada template apabila kita tidak mencentang Expand widget template ini. Sehingga akhirnya kita tidak bisa menemukan kode yang kita cari. Keliatan sepele bukan ? Tekan Ctrl+F untuk mempercepat pencarian, ketikkan kode atau kata yang ingin dicari pada template kemudian klik simbol next atau previous untuk kembali keatas. Trik ini membantu sekali saat kita melakukan editing template.

Saya juga sempat mengambil screenshot judul artikel pada template Thesis yang tumpang tindih. Saya lupa nama blognya, tapi mumpung lagi membahas Thesis mending sekalian aja.

Judul artikel yang tumpang tindih seperti seperti gambar diatas terjadi karena pada bagian CSS untuk judul posting yaitu .post h1, .post h2 { belum diedit jaraknya. Cari tulisan line-height:1em;yang ada dibawah kode .post h1, .post h2 { , dan ganti menjadi line-height:1.3em;  maka ini akan membuka jarak antara 2 baris judul sehingga judul tidak akan terlihat tumpang tindih.

Semoga dengan tips cara mengubah/menambahkan menu pada template ini bisa membantu kesulitan sobat yang mau mengedit menunya dan menambah pemahaman tentang penulisan kode HTML. Kalau sobat ingin tahu bagaimana isi template orang lain untuk mengetahui struktur penulisan HTML didalamnya, saya sarankan untuk membaca juga artikel saya Cara Mengetahui Kode/CSS Template Blog Orang Lain. Mengintip dengan tujuan baik itu sah-sah saja koq he he. Selamat mencoba.

Read more »

Posted in: Template,Tips Blogging

Cara Mengetahui Kode/CSS Template Blog Orang Lain

Cara Mengetahui Kode/CSS Template Blog Orang Lain  - Baru saja saya blogwalking dan tadi membaca sebuah artikel yang berjudul “Cara Mencuri Template Blog Orang Lain” yang memberi inspirasi buat saya untuk menuliskan artikel ini. Artikel ini pun hampir saja saya beri judul Cara Mengintip/Melihat Isi Blog Orang Lainnamun batal karena akhirnya saya memilih judul seperti yang ada ini karena menurut saya lebih sopan dan supaya tidak mengundang interpretasi (tafsiran) yang macam-macam. Tulisan ini juga bukan dimaksudkan untuk mengajarkan sobat-sobat cara mencuri kode/isi template blog orang lain, namun lebih saya tujukan sebagai  upaya pembelajaran bagi kita bersama, misalnya untuk mengetahui bagaimana sih struktur cara penulisan kode HTML/CSS yang benar, atau bagaimana cara menempatkan tag/perintah tertentu pada template sehingga akhirnya kita bisa melakukan editing atau koreksi pada template blog kita sendiri. Saya sendiri sering melakukan kebiasaan “mengintip” seperti ini sejak awal saya ngeblog. Mulai dari mengintipbacklink orang lain, mengintiptemplate orang lain, mengintip widget orang lain bahkan sampai mengintipartikel yang paling sering dibaca di blog orang lain. Yang penting kebiasaan mengintip ini harus bisa kita proyeksikan menjadi sebuah motivasi positif untuk bisa berbuat lebih baik dari orang lain, itulah prinsip yang harus dipegang seorang blogger. Kalau kita mencuri mengambil mengcopy kode atau isi template orang lain apalagi secara full tanpa ada permisi dengan si empunya, berarti kita tidak menghargai jerih payah atau hasil karya orang lain. Apalagi kalo si pembuat template ternyata adalah anak bangsa kita sendiri tentunya kasian sekali bukan kalau kita perlakukan seperti itu? So kalo mau template bagus yang premium ya beli dong..he he.

OK sobat, mohon maaf kalo prolognya kepanjangan karena terlalu bersemangat he..he,  langsung saja kita ke topik cara mengetahui/melihat kode html/css template blog orain lain seperti judulnya diatas. Ada 2 cara yang bisa sobat lakukan untuk melihat isi template sebuah halaman blog :

1.      Cara Pertama, yaitu secara langsung dengan menekan Ctrl + U atau klik kanan pada halaman blog yang ingin sobat lihat isi “dalamannya”, kemudian pilih View Page Source. Maka akan terbuka sebuah window baru seperti gambar dibawah ini dimana sobat bisa melihat isi template termasuk kode HTML/CSS yang ada dalam template. Sobat juga bisa mengetahui meta tag apa saja yang ada di blog orang lain tersebut atau seperti apa dia menuliskan meta tag deskripsi dan meta tag keyword untuk blognya dan lain-lain.

Klik disini untuk melihat gambar..

2.     Cara Kedua, yaitu dengan menggunakan Addons dari Firefox yang bernama Firebug. Sobat harus menginstall addons firebug for firefox ini sebelum mulai menggunakannya. Saya menginstall addons Firebug Version 1.7.2 untuk browser Firefox 3.6.22yang saya pakai sekarang. Silahkan menuju link ini https://addons.mozilla.org/en-US/firefox/addon/firebug/versions/  untuk memilih versi Firebug yang sesuai dengan browser Firefox sobat. Jika sudah terinstall maka dipojok kanan bawah browser Firefox anda akan terlihat icon Firebug. Cara menggunakannya mudah saja, buka halaman blog yang ingin sobat “intip” kemudian langsung klik icon Firebug di pojok kanan bawah browser anda. Maka akan terbuka sebuah window di bagian bawah browser. Window ini displit menjadi 2 di bagian tengah tapi bisa digeser-geser dengan mouse. Disini anda bisa melihat struktur isi template blog yang ditampilkan seperti menu pada komputer. Klik simbol plus (+) pada bagian <head> atau <body>untuk untuk melihat kode apa saja yang tersembunyi. Jika ingin melihat kode CSSnya, anda tinggal mengklik menu CSS pada toolbar. Bahkan dengan addons Firebug ini sobat juga bisa menganalisa Page Speed atau kecepatan loading blog melalui menu Page Speed, addons yang keren memang. Saya tidak bisa menuliskan secara detil bagaimana cara menggunakan Firebug ini karena tulisannya akan jadi suangaat panjang sekali. Jadi silahkan dicoba-coba sendiri aja sobat, karena saya pun belajarnya secara otodidak alias nyoba-nyoba sendiri.

Klik disini untuk melihat gambar..

Dari sedikit penjelasan yang sudah saya berikan tentang cara mengetahui kode HTML/CSS pada template blog orang lain tadi, pastinya akan banyak sekali yang bisa dipelajari. Artikel ini mungkin merupakan artikel terpanjang ke-2 yang pernah saya tulis setelah artikel panjang pertama saya tentang Optimasi SEO Apa Mengapa dan Bagaimana yang saya tulis beberapa bulan yang lalu. Semoga tulisan saya kali ini bisa berguna dan bermanfaat buat sobat blogger yang lain, tak lupa saya ucapkan terima kasih untuk anda yang sudah membaca artikel ini. Salam Blogger.

Read more »

Posted in: Template,Tips Blogging

Cara Membuat 3 Kolom Dibawah Footer

Cara Membuat 3 Kolom Dibawah Footer  - Menambahkan 3 kolom dibagian paling bawah blog atau footer ini sebenarnya trik lama untuk menambahkan elemen halaman dibawah footer. Dan setiap blogger sepertinya memiliki cara membuat dan desain footer masing-masing untuk blognya. Selain bisa untuk menempatkan beberapa widget, dengan adanya 3 kolom dibawah footer ini juga bisa memperindah tampilan blog. Makanya footer ini saya beri nama “Stylish Footer”. Sobat bisa mengisinya dengan widget Recent Post, Statistik Blog, Recent Comment, Popular Post dan lainnya.

Cara Membuat 3 Kolom Dibawah footer :

1.    Login ke dashboard blogger anda.

2.    Pilih Rancangan > Edit HTML , centang Expand widget template.

3.    Jangan lupa backup dulu template sobat dengan mengklik Download full template untuk antisipasi jika terjadi kesalahan atau sobat ingin mengembalikan templatenya ke kondisi semula.

4.    Cari kode ]]></b:skin>  pada template dengan bantuan Ctrl+F.

5.    Copy CSS dibawah ini dan paste tepat diatas kode ]]></b:skin>.

/* ----- LOWER SECTION ----- */ #lower { margin:auto; padding: 0px 0px 5px 8px; width: 100%; background:#333434; } #lower-wrapper { margin:auto; padding: 20px 0px 00px 0px; width: 942px; } #lowerbar-wrapper { border:1px solid #DEDEDE; background:#fff; float: left; margin: 0px 8px auto; padding-bottom: 3px; width: 31%; text-align: justify; font-size:100%; line-height: 1.6em; word-wrap: break-word; overflow: hidden; } .lowerbar {margin: 0; padding: 0;} .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;} .lowerbar h2 { margin: 0px 0px 10px 0px; padding: 3px 0px 3px 0px; text-align: left; color:#0084ce; text-transform:uppercase; font: bold 14px Arial, Tahoma, Verdana; border-bottom:3px solid #0084ce; } .lowerbar ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type: none; } .lowerbar li { margin: 0px 0px 2px 0px; padding: 0px 0px 1px 0px; border-bottom: 1px dotted #ccc; } /* Footer ----------------------------------------------- */ #footer {clear: both;text-align: center;color: $textColor;} .footer h2 {padding:0 0 0;margin:0 0 0;font:normal bold 86% Arial, sans-serif;line-height: 1.5em;text-transform:uppercase;letter-spacing:.1em;color:#ffffff;font-size:14px;text-align:left;} #footer .widget {margin:.5em;padding-top: 20px;font-size: 85%;line-height: 1.5em;text-align: $startSide;} #footer .widget h2 {text-align:left;} #footer-wrapper {background: #373737;border-top:1px solid #EDEDED;font-size:11px;margin:0px auto 0px;padding:0px 0 0;text-align:center;width:100%;} #footer-wrapper .widget h2 {text-align:left;font-size:16px;font-family:Arial,Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;} #footer-wrapper .widget {background: #373737;color:#ffffff;margin:.5em;padding-top: 20px;font-size: 100%;line-height: 1.5em;text-align: $startSide;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;} #footer-wrapper p {color:#999999;font-size:1em;line-height:1.4em;margin:5px 0 0;} #footer-wrapper a {font-weight:normal;color:#888888;font-size:1em;} #footer-wrapper a:hover {color:#cccccc;font-weight:normal;} #footer-wrapper h2 {background:#373737 url() repeat-x;border:0px outset #ffffff;padding:0 0 0;margin:0 0 2px;font-family:"Courier New", Courier, "Lucida Console", Monaco, "DejaVu Sans Mono", "Nimbus Mono L", "Bitstream Vera Sans Mono";text-transform:none;letter-spacing:.15em;color:#ffffff;font-size:18px;} #footer-wrapper ul,#footer-wrapper ul li{list-style-type:none;background-color:#373737;} #footer-wrapper ul li:hover{list-style-type:none;background-color:#1f1f1f;}

6.    Lanjutkan dengan mencari kode </body>  pada template.

7.    Copy script dibawah ini dan paste tepat diatas kode </body>.

<div id='footer-wrapper'> <div id='lower-wrapper'> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerbar1' preferred='yes'> </b:section> </div> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerbar2' preferred='yes'> </b:section> </div> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerbar3' preferred='yes'> </b:section> </div> <div style='clear: both;'/> </div> </div>

8.    Simpan / Save template anda.

9.    Coba lihat hasilnya dengan masuk ke menu Page Element atau elemen laman, jika berhasil maka pada elemen laman sobat akan terlihat seperti gambar dibawah ini.

Nah itu tadi tips singkat cara membuat 3 kolom dibawah footer di blogspot sobat. Semoga bermanfaat.

Read more »

Posted in: Template,Tips Blogging