Hal-hal Yang Harus Diperhatikan Dalam Mengganti Template Blogger

Blog adalah ibarat rumah kita, dan tentunya kita ingin blog tersebut tampil menjadil lebih cantik dan indah. Banyak cara yang dilakukan untuk membuat blog menjadi lebih cantik, diantaranya dengan menambah pernak pernik dan juga dengan mengganti tampilan/template blog. Jika kita mengganti template dengan template yang sudah disediakan blogger maka itu adalah cara yang paling mudah, tinggal pilih simpan langsung jadi. Namun template yang disediakan sangat sedikit dan tampilannya juga standar, sehingga kita seringkali mencari template lain yang lebih cantik, karena sekarang banyak sekali situs-situs yang menyediakannya dengan gratis. Namun jika kita menganti template dengan template lain yang disediakan oleh selain blogger, maka itu tidaklah semudah sebagaimana dengan menggunakan template yg disediakan blogger, karena ada beberapa efek sampingnya, diantaranya yaitu kamu akan kehilangan element2 kamu ato malah blog kamu jadi rusak. Nha berikut ini akan aku jelaskan hal-hal apa aja yang harus diperhatikan jika kamu pingin ganti template dengan jasa lain.

Pertama kamu harus membackup dulu tempalte kamu jika template baru kamu tidak berhasil diinstall, caranya masuk ke menu "Layout --> Edit HTML", trus klik link bertuliskan "Download Full Template" terus simpan file yang diberikan.

Kedua yaitu membackup elemen-elemen atau widget-widget yang sudah pernah kamu pasang, caranya gini, Masuk ke menu "Page Element", nha disitu kan banyak tuh element-element yang udah kamu pasang trus dibawahnya kan ada link bertiliskan "edit" klik link-link tersebut satu persatu, copy isi dari elemen itu dan taruh dalam notepad. Kalo kamu nanti dah ganti template dan mau memasang elemen-elemen tersebut tinggal copy dari notepad terus pasang di "add page elements".

Ketiga, jika template dan elemen-elemen sudah kamu backup langkah selanjutnya yaitu mengupload template yang sudah kamu download. Biasanya file template yang di download berextenxi "xml" tapi kadang-kadang ada juga yang berekstensi "zip atau rar", kalo begitu kamu harus mengekstraknya dulu sehingga kamu akan mendapat file berekstensi "xml". Trus gini cara ngaploadnya, Kembali ke menu "Edit HTML", trus disitu kan ada tombol "brows" klik tombol tersebut terus cari file template yg pingin kamu pakai sudah kamu download, trus klik tombol :upload".

Keempat, biasanya kamu akan mendapat konfirmasi seperti gambar dibawah ini, itu artinya elemen-elemen kamu akan dihapus. Klik tombol "Confirm & Save"



Kelima, jika ternyata yang muncul adalah seperti gambar dibawah ini maka itu artinya ada yang tidak beres dengan template kamu dan kamu tidak bisa memakai template tersebut di blog kamu, jadi kamu ganti aja dengan template yang lain.



Keenam, coba preview blog baru kamu, merasa sudah cocok ikuti langkah ketuju. Jika kamu mendapati ada gambar header yang sebelumnya kamu pake buat header masih muncul di template baru kamu dan posisinya sepertinya tidak cocok, maka kamu harus menghilangkannya dulu gambar header tersebut, caranya masuk kembali ke menu "Page Element", dibagian header coba kemu edit dan hapus gambar kamu. Jika di bagian header tidak ada link "edit" coba kamu ganti dulu templatenya dengan template yang disediakan oleh blogger dan kembali ke "Page Element" trus "edit dibagian header dan hapus gambar header kamu kemudian ikuti lagi langkah-langkah ketiga

Ketuju, Kembalikan elemen-elemen yang sudah kamu backup tadi sehingga kini kamu memiliki template baru dan elemen-elemen yang dulu tidak ilang.

Kedelapan, Selamat bermumet-mumet :z

Tips Mengedit HTML Blogspot

Jika kita mengotak-atik atau mengedit HTML blog kadang2 akan mengalami kesulitan, apalagi bagi yang masih agak pemula. Entah itu gak bisa nemu kode yang mau diedit lah, gak bisa disimpan karena error lah, Ada pesen error yang gak jelas lah, dan lah-lah yang lain, ya to...??? Nha trik dan tips kali ini akan mencoba gimana cara untuk mengatasi atau setidaknya mengurangi masalah "lah-lah" yang kadang2 atau sering terjadi tersebut.

Berikut ini beberapa tips untuk edit HTML bogger:

1. Backup Template

Membackup template ini penting karena jika terjadi hal-hal yang tidak dinginkan, misalnya blog jadi rusak maka kita bisa membuatnya seperti sediakala (sebelum rusak) jika kita sebelumnya sudah membackup template. Cara membackup template ini mudah. Cukup klik pada link "Download Full Template" lalu simpan file template di komputer kita. Kalo terjadi kesalahan yang tidak bisa kita atasi, kita tinggal upload aja file template tersebut.

2. Memberi Tanda Centang pada Kotak "Expand Widget Template"

Ini yang kadang2 dilupakan para "editor". Kalau kotak "Expand Widget Templates" tidak dicentang maka kode2 yang dicari kemungkinan tidak ditemukan. Tapi kadang2 hal ini tidak perlu dilakukan tergantung dari petunjuk tutorialnya. Makanya perhatikan baik2 tutorialnya kalo mau Edit HTML blog.

3. Tips Mempermudah Pencarian

Untuk mempermudah pencarian kode yaitu dengan meng-copy dulu kode yang mau dicari kemudian tekan "Ctrl+f" lalu masukkan kode yang dicopy tadi kedalam kotak yg muncul. Kalo misalkan kode yang dicari tidak muncul maka cobalah mencari sebagian dari kode tersebut. Misal mau mencari kode <p><data:post.body/></p> jika tidak ketemu maka cb carilah sebagiannya atau seperti ini data:post.body kalau sudah ketemu maka klik tombol next untuk melihat apakah ada kode lain yang sama untuk memastikan kode yang dikehendaki. Tapi tips ini sepertinya sulit dilakakukan jika menggunakan browser "Chrome" paling mudah jika menggunakan "Mozilla Firefox".

4. Tips Menghadapi Error Yang Muncul

Jika saat menyimpan hasil editan kemudian muncul pesan error, misal seperti ini:
We were unable to save your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure.....
Maka hal yang harus kita lakukan adalah berusaha memahami pesan error tersebut. Kemudian kita cek kembali tutorial yang kita baca apakah langkah-langkah yang sudah kita lakukan bener2 sesuai dengan tutorialnya. kalau tidak yakin maka kita bisa mengulangi lagi tutorialnya dari awal dengan mengklik tombol "Clear Edit" terlebih dahulu.

Mungkin untuk masalah mengahadapi berbagai pesan error ini akan kita bahas lebih lanjut diepisode yang lainnya yang lebih spesifik.

Yak mungkin itu aja dulu tips-tips dalam pembahasan kali ini. Kita jumpa lagi di tips-tips berkutnya.

Mengganti "Older Posts" Dengan Angka

Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". Beda dengan wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.
Nha trik kali ini akan menjelaskan bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" menjadi angka seperti gambar di bawah ini


1. Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML"
2. setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

3. setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->

Kalau sudah silahkan dilihat hasilnya.

Mengetahui Ukuran Header, Posting, Sidebar, Footer & Lebar Blogger

Dalam edit template sobat, perlu kita ketahui berapa ukuran atau lebar elemen-elemen yang ada di blog. Untuk mengetahui Ukuran Header, Posting, Sidebar, Footer & Lebar Blogger sejuta trik blogger ingin sharing ke teman-teman. Sharing dalam posting ini mudah-mudahan bisa membantu mengedit blog sahabat semua. Yuk mulai saja.
Landscaping company
1. Mengetahui Ukuran / Lebar header

#header-wrapper{
background: #ffffff;
width: 900px;
height: 160px;
font-size: 12px;
margin: 0px auto 0px;
padding: 0px;
overflow: hidden;
}

2. Mengetahui Ukuran / Lebar halaman Posting

#main-wrapper{
float:left;
width:590px;
margin:0px 0px 5px 0px;
padding:13px 10px 0px 10px;
overflow: hidden;
}

3. Mengetahui Ukuran / Lebar sidebar

#sidebar-wrapper{
float:left;
width:320px;
margin:13px 0px 5px 0px;
padding:0px;
line-height:19px;
display: inline;
}

Update : Banyak sekali kode sidebar yang bisa dipakai misal #rsidebar-wrapper{ atau #right-sidebar-wrapper{ dll, jadi disesuaikan saja.
4. Mengethui Ukuran / Lebar Footer
/* Footer
----------------------------------------------- */
#footer {
  width:950px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}



a. Untuk mengedit ukuran/lebar Halaman Blog
Cari kode di bawah ini:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

b. Untuk mengedit ukuran/lebar Halaman Posting
Cari kode di bawah ini:

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */
}

c. Untuk mengedit ukuran/lebar Sidebar Blog
Cari Code di bawah ini:

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


d. Untuk mengedit ukuran Header Blog,
Cari Code di bawah ini:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}


e. Untuk mengedit ukuran Footer Blog
Cari Code di bawah ini:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Jika sahabat tidak menemukan kode seperti di atas, untuk mengetahui element seperti header, posting, sidebar dan lebar blogger, cukup mencari kode yang mirip dan ditunjukkan dengan width: (LEBAR) dan height:(TINGGI)

Dengan Mengetahui Ukuran Header, Posting, Sidebar, Footer & Lebar Blogger tentunya akan memudahkan sahabat mengganti dan mengedit blog dengan menyenangkan seperti slogan blog ini.
Happy Blogging!

Mengganti Header Blog di Blogspot

Pertama kali orang melihat blog, mayoritas mereka melihat header blog tersebut.. Kesan pertama terhadap blog yang mereka kunjungi adalah bagaimana header blog tersebut mencerminkan isi atau konten dari keseluruhan blog. Untuk blogspot blog, tampilan header (pakai gambar atau hanya tulisan saja) biasanya tergantung dari template yang kita gunakan. Ada kalanya, format keseluruhan template blogspot sudah sesuai dengan keinginan kita, namun gambar headernya tidak cocok dengan isi blog kita. Jika demikian kasusnya, kita perlu mengganti header blog agar sesuai dengan konten.

Bagaimana mengganti header blog blogspot? Untuk mengganti header blogspot, ada beberapa cara yang bisa kita lakukan. Cara termudah adalah dengan melalui pengaturan add and arrange page element (tergantung template yang digunakan. sebagian besar template blogspot mendukung penambahan gambar di header lewat menu ini). Untuk mengganti header blogspot dengan cara ini, login ke dashboard blogger.

Masuk ke tab Layout. Pada kotak Header (sesuai judul blog anda) klik Edit.

Pada jendela baru yang muncul, klik Browse untuk mencari gambar yang akan digunakan sebagai header. Sebaiknya sebelum melakukan ini, kita harus menyediakan image yang akan kita pakai sebagai header, dengan ukuran sesuai ukuran header (jika tidak tahu ukuran headernya, beri tanda centang pada Shrink to fit dimana ukuran gambar akan disesuaikan dengan ukuran header). Pilih behind title and description jika gambar yang anda masukkan tidak mengandung teks judul, karena ini berarti judul dan deskripsi blog akan ditampilkan. Sebaliknya, jika anda membuat gambar header komplit dengan tulisan judul dan deskripsinya, pilih instead of title and description yang mana pilihan ini akan menyembunyikan judul dan deskripsi. Klik Save. Kini blog anda sudah mempunyai header yang sesuai dengan keinginan anda (tentunya disesuaikan dengan tema blog).

Cara lain untuk mengganti header blogspot adalah melalui pengaturan kode CSS. Caranya, dari dashboar blogger, masuk ke blog yang akan kita ganti headernya. Masuk ke tab Layout > Edit HTML. Pastikan anda selalu membackup template sebelum mengubahnya (caranya dengan klik Download full template) agar sewaktu-waktu ada kejadian yang tidak kita harapkan, kita bisa kembalikan lagi template seperti semula.

Pada menu Edit HTML, beri centang Expand Widget Template. Tekan tombol Ctrl + F bersamaan untuk memanggil fungsi pencarian. Ketikkan header pada kolom Find untuk mencari kode css header. Anda juga bisa menscroll mouse untuk melakukan pencarian ini, tapi tidak praktis.Cara kedua ini  tidaklah sulit, namun jika Anda tidak ingin pusing-pusing membuat gambar sendiri, Anda bisa memanfaatkan website penyedia gambar yang gratis, seperti: freewebpageheaders.com, smashingmagazine.com dan lain.

Adapun cara download gambar di freewebpageheaders.com adalah sebagai berikut:

1. Klik Daftar Sekarang untuk membuka halaman situsnya;
2. Klik Register untuk mendaftar.
3. Klik Agree. Kemudian Anda akan diminta untuk mengisi Registration form. Form ini terdiri dari 2 bagian yaitu : Required info dan Optional info. Required info merupakan info yang harus Anda berikan untuk pendaftaran sedangkan Optional info merupakan info yang digunakan untuk menampilkan data Anda kepada pengunjung saat Anda login. Jika Anda merasa tidak perlu maka diabaikan saja untuk bagian ini.
4. Klik Submit Registration Form, lalu Anda akan mendapat pesan supaya membuka email untuk mengaktifkan account Anda.
5. Buka email yang Anda gunakan untuk mendaftar. Klik pada link yang diberikan untuk mengakftifkan account Anda.
6. Jika sudah, Anda akan mendapat pesan bahwa account Anda sudah diaktifkan.
7. Klik Return to the front page of free Web Page Headers.
8. Lalu klik Login untuk mendowload gambar header.
9. Pilih kategori header yang Anda inginkan. Jika Anda sudah menemukan gambar yang cocok. Klik pada gambar tersebut lalu klik Download.
10. Kemudian gambarnya akan terbuka pada halaman baru. Klik kanan pada gambar lalu pilih Save Image As lalu tekan Save.
11. Selesai. Sekarang gambar sudah tersimpan di komputer Anda.

Langkah selanjutnya Cara Mengganti Header Blog pada Blogger, yang pertama dilakukan yaitu mencari tahu berapa ukuran header pada template Anda, caranya:

1. Klik Rancangan->Edit HTML.
2. Cari kode #header-wrapper. Supaya mudah untuk mencarinya, tekan Ctrl+F ketikkan #header-wrapper lalu tekan Next.
3. Jika sudah ketemu biasanya ada kode width dan height disekitarnya. Misalnya seperti ini:
   

   #header-wrapper {
   width:975px;
   height:130px;
   margin:0px;
   padding:0px;
   text-align:left;
   background:#FFF url("http://i977.photobucket.com/albums/ae258/SPN_photo/HeaderMaskolis-New.jpg") no-repeat right ;
   }

   Keterangan:
   width:975px; adalah panjang header
   height:130px; adalah lebar header.
   
   Agar gambar Anda sesuai dengan ukuran header template, maka gambar Anda harus diresize menjadi 975x130 pixel. Untuk merizenya Anda bisa menggunakan program pengolah gambar seperti Ms Paint, ACD See, Photoshop atau lainnya.
4. Setelah selesai. Masuk ke Dashboard Blogger Anda lagi, pilih Rancangan => Page Elements.
5. Klik Edit pada bagian Header.
6. Kemudian akan muncul halaman baru, pilih Browse from your computer, jika gambarnya disimpan dikomputer atau Browse from the web, jika gambarnya disimpan di image hosting seperti: Imageshack, Photobucket atau Geocities.
7. Pada bagian Placement. Pilih Behind title and description, jika Anda ingin manampilkan gambar dibelakang judul dan deskripsi blog atau pilih Instead of title and description, jika Anda ingin menyembunyikan judul dan deskripsi blog.
8. Lalu klik Save, selesai.

CATATAN:

• Tidak semua template bisa dipasang gambar, karena ada yang hanya menggunakan teks saja oleh karena itu pilihlah template yang sesuai kebutuhan.
• Jika cara di atas sulit diterapkan pada blog Anda, isi kotak komentar yang ada di bawah siapa tau saya bisa bantu.

Demikian tadi tutorial memasang header dari saya semoga dapat bermanfaat bagi teman-teman semua.

Cara Buat Auto Read More dengan Thumbnail di Blogger

Cara Buat Auto Read More dengan Thumbnail di Blogger -  Expandable post atau lebih dikenal dengan "Read More" adalah fitur yang membuat blog Anda menunjukkan hanya sebagian dari posting Anda pada halaman indeks yaitu rumah, label dan halaman arsip. Pada akhir pratinjau setiap akan ada sebuah link ke halaman posting, biasanya menempel pada frase "Read More".

Auto membaca lebih banyak fungsi otomatis mempersingkat posting Anda dan membuat thumbnail dari gambar yang ada di pos. Hal ini juga membantu untuk memuat halaman lebih cepat. Hal ini juga menunjukkan dan thumbnail gambar yang membantu untuk menarik pembaca. Saya juga menambahkan auto read more ke blog saya. Otomatis read more untuk blogger dengan posting thumbnail dapat dilakukan dengan memasukkan beberapa kode ke dalam template blog Anda.

Cara Tambah Auto Read More With Thumbnail Untuk Blogger?

1. Buka akun Blogger Anda
2. Pergi ke Blogger Dashboard> Template> Edit HTML.
3. Periksa "Expand Template Widget".
4. Cari (Ctrl + F) </ head> tag
5. Copy dan paste kode di bawah ini sebelum/di atas </head>:

<!-- DC Auto Read More Script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
 if(strx.indexOf("<")!=-1)
 {
  var s = strx.split("<");
  for(var i=0;i<s.length;i++){
   if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
   }
  }
  strx =  s.join("");
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2;
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
 strx = strx.substring(0,chop-1);
 return strx+'...';
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
 if(img.length>=1) {
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
  summ = summary_img;
 }
 }
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}
//]]>
</script>
<!-- DC Auto Read More Script End -->

Keterangan :

Anda dapat menyesuaikan read more dengan mengubah nilai-nilai dari variabel-variabel berikut:

• thumbnail_mode – set ke "yes" jika Anda ingin menampilkan thumbnail dengan ringkasan teks
• summary_img – specify jumlah karakter (termasuk spasi) yang ingin ditampilkan dalam ringkasan, dengan thumbnail.
• summary_noimg – specify jumlah karakter (termasuk spasi) yang ingin ditampilkan dalam ringkasan, bila ada thumbnail ada.
• img_thumb_height and img_thumb_width -specify adalah tinggi dan lebar thumbnail (dalam piksel).

     6.  Sekarang cari kode <data:post.body/> dan ganti kode tersebut dengan kode dibawah ini :

<!-- DC Auto Read More Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>
<!-- DC Auto Read More End -->