Tutorial Tip dan Trik Blogger

Modifikasi Threded Komen Di blogger Ala Bp

noreply@blogger.com (Bambang) — Mon, 06 May 2013 01:00:00 +0000

Setelah sekian lama mencari dan membandingkan tutorial tentang threaded komen di dunia maya ini , Akhirnya pencarian berakhir pada sebuah tutorial tentang threded komen dari bX-NicoNico , di mana sistem threded komen yang di buatnya menggunakan tag blogger data:comment.inReplyTo yang akan mengembalikan id dari komentar induk , dan menggunakan loop blogger untuk menunjukan balasan komentar . Dari artikel tersebutlah saya mencoba mempelajari dan mengembangkan kode-kode untuk threded komen yang akan kita bahas kali ini , baik di bagian Css maupun HTML . Sesuai dengan judul postingan ( Modifikasi Threded Komen Di blogger Ala Bp ) , Threded Komen yang akan kita buat kali ini , telah saya rubah kata-katanya kedalam bahasa indonesia baik pada bagian author maupun pada tomblol reply dan delete sehingga menjadi Jawab dan Hapus .

Dan adapun cara Modifikasi Threded Komen Di blogger Ala Bp adalah :

1. Buka Blogger Dasbor >>Pilih Opsi lainya >> Pilih/klik templete .

2. Back Up dulu Templete anda.

3. Selanjutnya Klik Edit HTMl >> centang kotak kecil Expand Template Widget.

4. Cari Kode dibawah ini gunakan Ctrl + F atau F3 untuk memudahkan pencarian.

<b:includable id='comments' var='post'>

5. Selanjutnya copy kode dibawah ini dan letakan kode tersebut tepat di atas kode no.4 di atas.

Klik Untuk :

5. Selanjutnya cari kode di bawah ini gunakan Ctrl+F atau F3 untuk memudahkan pencarian .

<b:include data='post' name='threaded_comments'/>

atau seperti ini:

<b:include data='post' name='comments'/>

6. Kemudian ganti dengan kode di bawah ini .Pungsi dari Penggantian kode ini adalah untuk mengaktifkan threded komen yang kita buat.

<b:include data='post' name='custom-comments'/>

7. Dan untuk kode Css copy kode di bawah ini dan pastekan di atas kode ]]></b:skin>.

Klik Untuk :

Keterangan :

* Untuk membedakan komentar admin dan komentar pengunjung ganti kode yang berwarna Biru dengan alamat URL image admin anda..

8. Simpan Templete anda.

Blogger Threded Komen ini di peruntukan untuk blog baru dan blog lama yang memiliki komentar yang tidak terlalu banyak.

Selesai selamat mencoba....

Pasang Meta Tag Blogger Head Valid XHTML 2013

noreply@blogger.com (Bambang) — Thu, 02 May 2013 01:00:00 +0000

Membuat Meta Tag valid XHTML merupakan unsur yang sangat penting bagi seo sehingga mampu bersaing pada mesin pencari khususnya Google, dan mampu membuat blog cepat terindex oleh Google . Meta Tag yang akan kita bahas saat ini merupakan meta tag yang di pasang pada bagian heading blog yang akan memuat deretan Keyword dan Deskripsi pada blog kita . Sebenarnya banyak sekali tutorial di dunia maya ini yang membahas tentang meta tag ini dan banyak yang di ragukan validitasnya . Apakah Meta tag Blog anda valid XHTML ? anda bisa mengecek validitas meta tag tersebut dengan tool W3C CSS Validator , dan jika anda telah mengeceknya dan mendapati error pada bagian meta tag heading , mungkin tutorial kali ini yaitu Pasang Meta Tag Blogger Head Valid XHTML 2013 merupakan jawaban yang tepat untuk masalah anda . Tutorial ini mungkin merupakan kelanjuatan dari beberapa tutorial sebelumnya yaitu Agar Templete Blogger Valid XHTML Terbaru , Memasang Meta Tag Dinamis Pada Blogger , Cara Edit Blogger Templete Agar Lebih SEO , yang di maksudkan untuk memaksimalkan unsur seo blog kita dimata search enggin.

Dan adapun cara Pasang Meta Tag Blogger Head Valid XHTML 2013 adalah :

1. Buka Blogger Dasbor >>Pilih Opsi lainya >> Pilih/klik templete .

2. Back Up dulu Templete anda.

3. Selanjutnya Klik Edit HTMl >> centang kotak kecil Expand Template Widget.

4. Cari Kode <b:include data="blog" name="all-head-content"> (Gunakan CTRL+F agar lebih mudah).

5. Hapus semua Meta Tag, mulai dari <b:include data="blog" name="all-head-content"> sampai sebelum <b:skin><![CDATA[ .

6. Ganti kode yang di hapus tadi dengan kode di bawah ini :

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<meta expr:content='data:blog.metaDescription' name='Description'/>
<meta content='Blog KEYWORD ANDA' name='keywords'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Keywords'/>
</b:if>
<meta content='text/html;charset=UTF-8' http-equiv='Content-Type'/><meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url + &quot;feeds/posts/default&quot;' rel='alternate' title='Atom' type='application/atom+xml'/>
<link expr:href='data:blog.url + &quot;feeds/posts/default?alt=rss&quot;' rel='alternate' title='RSS' type='application/rss+xml'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='index,follow' name='robots'/>
<b:else/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='index,follow' name='robots'/>
<b:else/>
<meta content='noindex,follow' name='robots'/>
</b:if>  
</b:if>

6. Ganti Kode Blog KEYWORD ANDA yang berwarna merah dengan keyword anda .

7. Simpan Templete anda.

Selesai dan semoga bermanfaat.

Membagi 3 Kolom Post Widget Dengan Thumbnail

noreply@blogger.com (Bambang) — Mon, 29 Apr 2013 01:00:00 +0000

Beberapa waktu yang lalu saya telah mencoba berexperiment dengan templete blogger yang saya miliki , dimana experiment tersebut adalah membagi kolom postingan widget menjadi tiga kolom dan di sertai thumbnail serta read more . Mungkin Experiment ini dapat di bilang lebih sulit di bandingkan dengan yang sebelumnya yaitu Membagi Blogger Post Widget Menjadi Dua Kolom , Karena kita hanya membagi blogger post widget tersebut menjadi dua tanpa thumbnail dan readmore pada homepage . Secangkir kopi besar , sekarung camilan dan sebungkus rokok ternyata bahan-bahan yang dapat dibilang sangat berperan penting dalam keberhasilan experiment ini , bagaimana tidak berperan penting ! tanpa ketiga bahan tadi mungkin saya tidak akan betah dan kepala akan cepat pusing jika berlama-lama mengotak-atik kode , dan bukan hanya satu templete yang saya buat mungkin 2 sampai tiga dan akhirnya jadilah postingan kali ini dengan judul Membagi 3 Kolom Post Widget Dengan Thumbnail .

Dan adapun cara Membagi 3 Kolom Post Widget Dengan Thumbnail adalah :

1. Buka Blogger Dasbor >>Pilih Opsi lainya >> Pilih/klik templete .

2. Back Up dulu Templete anda.

3. Selanjutnya Klik Edit HTMl >> centang kotak kecil Expand Template Widget.

4. Cari Kode ]]></b:skin> gunakan Ctrl + F untuk memudahkan Pencarian.

5. Copy Kode di bawah ini dan pastekan dibawah Kode ]]></b:skin> tadi.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.blog-feeds,.feed-link,.date-header {display:none;}
.post-header{text-indent:-9999em;background:transparent;height:0px}
#main-wrapper {position:relative;width: 62%;float:left;padding:5px 1%;word-wrap:break-word;margin:10px 10px;overflow:hidden;background:#fff}
#sidebar-wrapper {position:relative;width:32%;float:right;word-wrap:break-word;margin: 10px 10px 5px 0;overflow:hidden;background: #fff;box-shadow: 0 0 6px #999;}
.readmore{
position: absolute;
top: 100px; left: 137px;font-size: 10px;}
.post {
position: relative;
width:190px;
height:120 px;
float:left; 
margin:0px 2px 10px 6px; 
padding: 5px 0px 5px;
background:url(http://newtemplete-project.googlecode.com/files/template-clean-post-white.png)  no-repeat center;
-webkit-border-radius:0px;
border-radius:0px;
-moz-box-shadow:0px 0px 0px #d100b2;
-webkit-box-shadow:0px 0px 0px #d100b2;
box-shadow:0px 0px 0px #ccc;
border:0px solid;
box-shadow:0px 0px 0px #ccc;
}
.post-body{padding:0px 0px;background:transparent}
.post-footer{text-indent:-9999em; height:0px;} 
.post-utama{
position: absolute;
left:0px;
width:125px;
padding: 0px 0px;
margin-top:5px;
color: #919090;
line-height: 1.0em;
font-size: 12px;
font-style:italic;
text-align:left;}
.post-utama:hover{
color:#919090;}
.post-home-thumbnail img{
float:right;
padding: 4px;
margin: 20px 0px 0px 0px;
width: 45 px; 
height:45 px;
-moz-transition: 
-moz-transform 0.5s ease 0s;
background: #fff; 
border: 1px solid #f5f5f5}
.post-home-thumbnail img:hover {
background:#ffffff !important;
border: 1px solid #f5f5f5;
-moz-transform:rotate(7deg);
-o-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
-ms-transform:rotate(15deg);
}
</style>
</b:if>
</b:if>

Keterangan :

* Kode yang berwarna 190 Hijau Merupakan lebar dari postingan widget.
* Kode yang berwarna 120 Biru Merupakan tinggi dari postingan widget.
* Kode yang berwarna 125 Orange merupakan lebar dar snippet postingan.
* Kode yang berwarna 45 Pink merupakan lebar dari image (thumbnail)
* Kode yang berwarna 45 Purpler ( ungu ) merupakan tinggi dari image (thumbnail).
* Kode-kode tersebut bisa anda sesuaikan sesuai kebutuhan.

6. Cari kode seperti atau mirip kode di bawah ini gunakan Ctrl+f atau F3 untuk mempermudah pencarian.

<div class='post-body entry-content' expr:id='data:post.id'>

<data:post.body/>

7. Setelah anda menemukan kode seperti atau mirip kode diatas ( no.6 ) , Ganti <data:post.body/> dengan kode di bawah ini.

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

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

<div class='post-home-thumbnail'>
<div class='Image-home'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</div>

<b:else/>

<div class='post-home-thumbnail'>
<div class='Image-home'>
<img border='0' height='95' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBN13SbbXHqkU2mXK7SqT8M3bs0PfCCHYh38pFHcISLXvPAaqBlSshUd1Wk-IUFN_pokP2RWANmA_Ej5A07WvQXkBH35bjoJ6JLTKbyYem_bS5SHGAcQhX2-FPF3Hd6GjPHgEHsf-JNujN/s0/no-image.png' width='95'/>
</div>
</div>
</b:if>

<div id='post-utama'>
<b:if cond='data:post.snippet'>
<data:post.snippet/>
</b:if>
</div>

<div class='readmore'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'>Read More</a></b:if>
</div>    
   
<b:else/>

<data:post.body/>

</b:if>
</b:if>

8. Simpan Templete anda.

Selesai dan selamat mencoba.....

Cara Membuat 3 Kolom di Bawah Postingan Blogger

noreply@blogger.com (Bambang) — Thu, 25 Apr 2013 01:00:00 +0000

Pada templete magazine mungkin kita sering mendapati 3 buah kolom di bawah postingan dan biasanya ini di gunakan untuk menampilkan postingan perlabel . Pada Postingan terdahulu saya pernah membahas tentang bagai mana cara membuat dua kolom di bawah postingan baca Cara Membuat Dua Kolom Di Bawah Postingan Blogger dengan trik tersebut kita akan mendapat kan 2 kolom di bawah postingan blog kita . Nah untuk saat ini sesuai dengan judul postingan yaitu Cara Membuat 3 Kolom di Bawah Postingan Blogger , Kita hanya akan menambahkan 1 kolom lagi di bawah postingan tersebut sehingga menjadi tiga kolom .

Dan adapun Cara Membuat 3 Kolom di Bawah Postingan Blogger adalah:

1. Pergi ke blogger dasbor >>> Pilih opsi lainya >>> Templete >>>Back Up Dulu templete anda.

2. Selanjutnya Klik Edit HTML dan Centang kotak kecil Expand Widget Templates.

3. Cari kode di bawah ini gunakan Ctrl + F atau F3 untuk memudahkan pencarian.

<div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
    </b:section>
    </div>

4. Copy kode di bawah ini dan pastekan sebelum kode </div> diatas ( yang berwarna merah).

<div id='under-post-wrapper'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:section class='under-post' id='col-left' showaddelement='yes' />
   <b:section class='under-post' id='col-mid' showaddelement='yes' />
    <b:section class='under-post' id='col-right' showaddelement='yes'/>
    <div style='clear: both;'/>
    </b:if>
</div>

5. Selanjutnya cari kode ]]></b:skin> dan copy kode css di bawah ini lalu pastekan diatas kode ]]></b:skin> .

/*3 Kolom Under Post Css Start*/
#under-post-wrapper {background: #fff; margin: 0 auto;width:100%; padding: 0 0px  0px 0;}
.under-post  h2 { margin: 0px 0px 0px 0px; padding: 4px 0px 4px 0px; text-align: left; color: #000; background: #fff; font-weight: bold;font-size: 16px;}
.under-post .widget { margin: 0px 0 0 0px; border: 1px solid #fff; background: #fff;}
.under-post .widget-content { padding: 0px 0px 5px 0px; }
.under-post ul { list-style-type:square; margin-left:0px; }
#col-left, #col-mid {
display:inline-block;
width: 31%;
float:left; 
margin: 0px  18px 0px 0px; 
padding: 5px 0px 0px;
margin-top:5px;
color: #919090;
line-height: 1.0em;
font-size: 12px;
font-style:italic;
border:0px solid;
-webkit-border-radius:0px;
border-radius:0px;
-moz-box-shadow:0px 0px 0px #d100b2;
-webkit-box-shadow:0px 0px 0px #d100b2;
box-shadow:0px 0px 0px #ccc;
    }
#col-right{
display:inline-block;
width: 32%;
float:left; 
margin: 0px  0px 0px 0px; 
padding: 5px 0px 0px;
margin-top:5px;
color: #919090;
line-height: 1.0em;
font-size: 12px;
font-style:italic;
border:0px solid;
-webkit-border-radius:0px;
border-radius:0px;
-moz-box-shadow:0px 0px 0px #d100b2;
-webkit-box-shadow:0px 0px 0px #d100b2;
box-shadow:0px 0px 0px #ccc;
    }
/*3 Kolom Under Post Css End*/

6. Simpan templete anda.

Selesai dan selamat mencoba.....

Jenis dan Cara Pemasangan Auto Refresh di Blogger

noreply@blogger.com (Bambang) — Mon, 22 Apr 2013 01:00:00 +0000

Mungkin saya atau anda pernah berkunjung kesebuah blog atau website di mana kita mendapati blog atau website yang sedang kita baca tersebut melakukan auto refresh/reload berulang-ulang dengan jangka waktu tertentu . Kita sudah dapat memastikan bahwa pemilik blog atau website tersebut memasang auto refresh/reload di templete blognya . Pemasangan auto refresh/reload ini banyak di maksudkan untuk meningkatkan pageview pada blog tersebut , auto refresh ini biasanya di pasang pada tag meta ini menguntungkan pemilik blog tentunya tapi mungkin akan sedikit mengganggu para pengunjung atau pembaca blog tersebut karena blog akan refresh/reload pada jangka waktu tertentu dimana kita sedang membaca blog tersebut.Tidak hanya itu tentunya bagi para pengguna internet yang memiliki bandwith terbatas ini akan sangat mengganggu karna mungkin blog yang sedang di bacanya , akan refresh secara otomatis namun tidak membuaka halaman secara sempurna karena kurangnya bandwith .

Dan adapun Jenis dan Cara Pemasangan Auto Refresh di Blogger adalah:

1. Log in Ke Blogger dasbor dengan account anda.
2. Pilih Opsi lainya >>> Pilih Templete >>>Back Up dulu Templete Anda.
3. Klik Edit HTML .
4. Pilih salah satu kode auto refresh di bawah ini dan letakan setelah kode </head> .

I# Refresh Otomatis dengan delay .

Ini memungkinkan blog kita akan refresh secara otomatis berdasarkan waktu atau rentang 300 detik atau 5 menit. Anda bisa menyesuaikannya dengan keinginan anda.

<meta http-equiv="refresh" content="300"/>

II# Refresh Otomatis ke web lain tanpa delay.

Ini bukan reload, tapi lebih kepada redirect atau reload ke domain lain. Sangat berguna bagi kia yang memiliki blog baru. dalam arti semua yang mengunjungi blog lama kita akan langsung ter-direct ke alamat blog baru kita.

<meta http-equiv="refresh" content="0;URL=http://bambangpage.blogspot.com" />

III# Refresh Otomatis ke web lain dengan delay .

Ini memungkinkan blog kita akan redirect ke blog lain dalam jangka waktu 10 detik .Fungsinya sama dengan jenis no II#.Namun yang membedakannya hanya penggunaan dan disertainya delay atau rentang waktu.

<meta http-equiv="refresh" content="10;URL=http://bambangpage.blogspot.com" />

IV# Refresh Otomatis Tanpa delay .

Ini memungkinkan blog kita akan refresh secara otomatis tanpa delay waktu dan sangat tidak di anjurkan.Mengapa tidak di anjurkan ? karena mungkin kita tidak akan bisa membaca isi blog yang menggunakan trik ini dimana blog akan refresh tanpa jangka waktu (kurang dari 1 seconds blog refresh).Tapi dengan trik ini anda bisa melipatgandakan pengunjung hingga puluhan sampai ratusan kali.Dan tentu saja tidak di anjurkan.

<meta http-equiv="Refresh" content="0" />

Trik diatas banyak di gunakan oleh para blogger (khususnya no I#) untuk meningkatkan pageview biasanyanya pada blog baru mereka . Dengan trik ini Anda bisa melipat gandakan pengunjung yang berasal dari 1 IP sama.

Selesai dan semoga bermanfaat..

Agar Templete Blogger Valid XHTML Terbaru

noreply@blogger.com (Bambang) — Thu, 18 Apr 2013 01:00:00 +0000

Dalam meningkatkan kualitas seo pada blog kita , banyak cara yang bisa kita lakukan dan salah satunya adalah membuat templete blog kita valid xhtml atau valid html5 . Sesuai dengan judul postingan kali ini yaitu Agar Templete Blogger Valid XHTML Terbaru , kita akan mencoba mengurangi atau bahkan menghilangkan error pada Templete blogger kita dengan langkah-langkah yang akan saya jelaskan dibawah . Dengan mengurangi error pada templete blogger tersebut , diharapkan akan memberikan kemudahan pada mesin pencari google untuk menjelajahi blog kita dan secara otomatis meningkatkan kualitas seo dari blog kita tentunya.Agar mendapatkan hasil yang maksimal dan tanpa error pada templete blogger kita , mungkin ada baiknya kita menggunakan accout blogger baru sebagai percobaan dari templete yang akan kita buat dan valid xhtml atau valid html5 . Dan jika anda menggunakan account yang biasa anda gunakan dan dengan templete yang telah terpasang pastikan anda telah membackupnya terlebih dahulu serta menggkopi semua kode yang terdapat dalam widget kedalam notpad dan kemudian menghapus semua widget tersebut . Karena kebanyakan error templete biasanya di sebabkan oleh widget yang kita pasang pada templete kita . Untuk mengecek validasi dari blogger templete kita , ada dua buah tool yang bisa kita gunakan yaitu Markup Validation Service dan CSS Validation Service dari W3C . Dengan kedua tool tersebut kita akan mengetahui jumlah error serta penyebab timbulnya error pada templete dengan memasukan url blog kita , sehingga memudahkan kita untuk mengedit atau memperbaiki error tersebut.

Setelah kita mengetahui bagian penyebab error dari templete blogger kita , inilah saatnya melakukan perbaikan pada error tersebut . Ada beberapa bagian penyebab error yang biasa timbul pada kebanyakan templete blogger dan kali ini saya mencoba memberikan solusi serta cara mengurangi error tersebut.

Adapun langkah-langkah selanjutnya Agar Templete Blogger Valid XHTML Terbaru adalah:

1. Log in Ke Blogger dasbor dengan account anda.
2. Pilih Opsi lainya >>> Pilih Templete >>>Back Up dulu Templete Anda.
3. Klik Edit HTML >>>Centang Kotak Expand Template Widget .
4. Cari Kode seperti atau mirip kode dibawah ini .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

5. Ganti kode diatas (no.4) dengan kode di bawah ini.

<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>

6. Selanjutnya Cari kode </html> dan ganti menjadi </HTML> .

7. Hapus semua bagian Meta tag yang menyebabkan error.

8. Cari Kode <b:include data=’blog’ name=’all-head-content’/> kemudian hapus kode tersebut.

9. Cari semua Comment Declaration pada bagian css ( /* ----------- ) dan hapus bagian kode ( ----------- ) atau dash.

/* ----------------------
    Name: Simple Faster Blogger Templates
    Date: 1 Maret 2013
    Edited by: Blogger Gubug
    -------------------------*/

Sehingga menjadi menjadi

/* Blogger Template Style
    Name: Simple Faster Blogger Templates
    Date: 1 Maret 2013
    Edited by: Blogger Gubug */

10. Cari kode <body> dan letakan kode di bawah ini di atas kode <body> tersebut.

<!-- <body><div></div> -->

Keterangan ;

* langkah ini untuk menghilangkan kode navbar bawaan dari blogger.
* Akan muncul peringatan untuk menghapus navbar, dan klik hapus .

11. Cari kode <b:include name='quickedit'/> kalo sudah ketemu hapus semua, jangan lupa jika kelak menambahkan widget baru hapus lagi kode tersebut.Ini untuk menghilangkan Icon Quickedit ( gambar kunci dan obeng).

12. Cari kode di bawah ini gunakan Ctrl+F atau F3 untuk memudahkan pencarian.

<span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>
        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span> <div class='post-share-buttons'>
        <b:include data='post' name='shareButtons'/>
      </div> </div>

Ganti dengan kode berikut

<span class='post-icons'>
    <!-- email post links -->
    <b:if cond='data:post.emailPostUrl'>
    </b:if>
    </span>
    </div>

13. Tambahkan type="text/javascript" pada semua kode JavaScript. Baik pada templates, posting maupun pada widget.

contoh :

<script src='http://cilimoes-script-file.googlecode.com/files/IEmarginFix.js'/>

Sehingga menjadi:

<script src='http://cilimoes-script-file.googlecode.com/files/IEmarginFix.js' type='text/javascript'/>

14. Tambahkan type type="text/css" untuk semua kode css yang ada . Baik pada templates, posting maupun pada widget.

Contoh ;

<style>


<script src="https://bambangpage.googlecode.com/files/test.css"></script>

Sehingga menjadi :

<style type='text/css'>
<script src="https://bambangpage.googlecode.com/files/test.css" type="text/css" ></script>

15. Tambahkan atribut title dan alt pada setiap gambar.dan pada saat posting gambar hapus atribut Anchor='1' dan Border='0' .

Contoh :

<img src="http://newtemplete-project.googlecode.com/files/Bp_button.png/" />

Sehingga menjadi :

<img alt="BP_LOGO" src="http://newtemplete-project.googlecode.com/files/Bp_button.png/" title="Bp_LOGO" />

16. Jangan pernah menggunakan tag <center> untuk membuat tulisan ataupun gambar rata tengah, pakailah kode berikut jika tidak ingin mengakibatkan error html baik di postingan maupun di widget html.

<div style="text-align: center;">Isi Widget</div>

17. Untuk mengatasi masalah invlid xhtml yang disebabkan oleh adanya penggunaan url dalam template blog dengan tanda & , bisa kita selesaikan dengan mengganti setiap tanda & dengan kode dibawah ini.

&amp;

Sebenarnya masih banyak lagi langkah-langkah yang bisa kita lakukan Agar Templete Blogger Valid XHTML , namun kali ini saya mengambil point-point penyebab error pada templete blogger.

Selamat mencoba dan semoga bermanfaat.

Cara Membuat Banner Iklan di Kanan dan Kiri Blog

noreply@blogger.com (Bambang) — Mon, 15 Apr 2013 01:00:00 +0000

Masih tentang banner iklan untuk mempromosikan produk , blog atau website . Pada postingan sebelumnya kita pernah membahas tentang banner ini baca Cara Membuat Banner Iklan di Footer Blog , yang artinya kita memasang banner iklan dari sebuah produk , blog atau website tersebut pada bagian bawah blog kita . Nah berhubungan dengan banner iklan tersebut , kali ini sesuai dengan judul postingan yaitu Cara Membuat Banner Iklan di Kanan dan Kiri Blog saya akan mencoba membahas bagai manakah caranya jika kita ingin menempatkan banner iklan tersebut di bagian kanan dan kiri blog atau website kita , dimana dalam kebanyakan templete blog bagian sebelah kanan dan kiri , biasanya masih memiliki ruang kosong yang sayang jika tidak kita manfaatkan.

Dan adapun Cara Membuat Banner Iklan di Kanan dan Kiri Blog adalah:

1. Log in Ke Blogger dasbor dengan account anda.
2. Pilih Opsi lainya >>> Tata Letak .
3. Klik Tambahkan Gadget .
4. Selanjutnya Pilih dan klik HTML/Javascrip .
5. Masukan kode di bawah ini kebagian kotak konten Mengonfigurasi HTML/JavaScript.

<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>
<!--start: floating ads-->
<div id="teaser2" style="width:autopx; height:0; text-align:left; display:scroll;position:fixed; top:0px;left:0px;">
<div><a id="close-teaser" onclick="document.getElementById('teaser2').style.display = 'none';" style="cursor:pointer;align:left;"><img src='http://newtemplete-project.googlecode.com/files/banner-close-icon-left.png'/></a></div>
<!--Mulai disini-->

<a href="http://bambangpage.blogspot.com/" rel="nofollow" target="_blank" title="Pasang Iklan"><img src="http://newtemplete-project.googlecode.com/files/BP-banner.gif" width="172" height="600" alt="" /></a>

<!--Akhir disini-->
</div>
<!--end: floating ads-->
<!--start: floating ads-->
<div id="teaser3" style="width:autopx; height:600; text-align:right; display:scroll;position:fixed; top:0px;right:0px;">
<div><a id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;align:right;"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuTmI7QI3roWIQUs8e0qKZ2sLtc-c3QPcxksxc26hXAcy6hMlfaAcq6XYV_YpU4MnUpK1YBFkKCJ-Sd28JG8TtPEEukoIbHGzYiU4wfKgiBfawmhpSHYNj-14qQ9J4DehOAUb50sZTA7Py/s1600/close-icon.png'/></a></div>
<!--Mulai disini-->
<a href="http://bambangpage.blogspot.com/" rel="nofollow" target="_blank" title="Pasang Iklan">
<img src="http://newtemplete-project.googlecode.com/files/BP-banner.gif" width="172" height="600" alt="" /></a>
<!--Akhir disini-->
</div>
<!--end: floating ads-->

Keterangan :

* Ganti Kode yang berwarna Merah dengan URL blog/website tujuan.

* Ganti Kode Yang berwarna Biru dengan URL image yang anda inginkan.

* Ganti Kode yang berwarna Orange dengan ukuran lebar banner yang anda inginkan.

* Ganti kode yang berwarna Hijau dengan ukuran tinggi banner yang anda inginkan.

6. Klik simpan/save pada Mengonfigurasi HTML/JavaScript.

7. Pilih Simpan Setelan pada Tata Letak.

Selamat mencoba dan semoga bermanfaat....

Cara Membuat Banner Iklan di Footer Blog

noreply@blogger.com (Bambang) — Thu, 11 Apr 2013 01:00:00 +0000

Banyak cara yang dilakukan para blogger untuk mempromosikan blog atau website dari sebuah produk yang diantaranya dengan memasang banner iklan mereka di blog sendiri atau blog orang lain . Di samping dapat menghemat ruang iklan pada blog atau website , banner ini juga dapat memberikan citra profesional dan menarik pada sebuah blog . Sebenarnya banyak sekali cara dan macam dari banner ini , namun sesuai judul postingan kali ini yaitu Cara Membuat Banner Iklan di Footer Blog , dimana banner yang akan kita buat saat ini tampil di bagian footer dari blog kita.

Dan adapun Cara Membuat Banner Iklan di Footer Blog adalah:

1. Log in Ke Blogger dasbor dengan account anda.
2. Pilih Opsi lainya >>> Tata Letak .
3. Klik Tambahkan Gadget .
4. Selanjutnya Pilih dan klik HTML/Javascrip .
5. Masukan kode di bawah ini kebagian kotak konten Mengonfigurasi HTML/JavaScript.

<!-- Banner Iklan Bawah Mulai -->
<script type="text/javascript">
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<style type="text/css">
div#btm_banner {
bottom: 0;
position: fixed;
width: 103%;
opacity: 0.9;
left: 0;
}
div#btm_banner img{
border:0;
cursor:pointer;
}
</style>
<div style="height: 0px;"></div>
<div align="center" id="btm_banner" style="height: 110px; z-index: 9999;">
<div style="text-align: right; width: 940px; height: 8px;">
<img id="closed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuTmI7QI3roWIQUs8e0qKZ2sLtc-c3QPcxksxc26hXAcy6hMlfaAcq6XYV_YpU4MnUpK1YBFkKCJ-Sd28JG8TtPEEukoIbHGzYiU4wfKgiBfawmhpSHYNj-14qQ9J4DehOAUb50sZTA7Py/s1600/close-icon.png" /></div>
<div style="clear: both;"></div>
<p>
</p><center>
<a href="http://cilimoes.blogspot.com/" rel="nofollow" target="_blank" title="Pasang Iklan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY1N1ZbLQQXhs74DMWqprUSP5_4vWWgkWBZCf5Eqv7ID0sdXJrdQmGvuqmZIvLkWbQXcKPyui2XVJYNnNzazFd34oEiMO8Ed8beLqPHEwebGWhyphenhyphenSz9DFdckX7mw2_QBu5iJi_xILSbQwo/s1600/Iklan-2.gif" width="940" height="90" /></a>
</center>
<p></p>
</div>
<!-- Banner Iklan Bawah Selesai-->

Keterangan :

* Ganti kode yang berwarna Orange dengan Ukuran lebar yang anda inginkan.

* Ganti kode yang berwarna Biru dengan dengan ukuran tinggi yang anda inginkan.

* Ganti kode yang berwarna Hijau dengan alamat URL yang di tuju.

* Ganti kode yang berwarna Merah dengan kode URL gambar anda.

6. Klik simpan/save pada Mengonfigurasi HTML/JavaScript.

7. Pilih Simpan Setelan pada Tata Letak.

Selamat mencoba dan semoga bermanfaat....

Cara Memperbaiki Masalah Pada Halaman Statis

noreply@blogger.com (Bambang) — Mon, 08 Apr 2013 01:00:00 +0000

Halaman statis merupakan halaman yang berdiri sendiri pada blogger yang biasanya di gunakan untuk membuat artikel khusus atau menu seperti contact us,about us,privacy police,site map,daftar isi dan lain-lain . Setiap orang menggunakan template yang berbeda-beda tentunya dan tak jarang ada yang mengalami masalah saat membuat halaman statis . Masing-masing templete terkadang memiliki masalah yang berbeda pada halaman statis , Masalah yang timbul pada halaman statis tersebut biasanya disebabkan karena kesalahan pengkodean pada HTML yang berbeda-beda pula tentunya . Hal yang sering dialami oleh para blogger ini biasa nya di sebabkan pemasangan readmore yang salah atau tidak cocok, jadi menyebabkan artikel atau postingan tidak terbuka secara sempurna di halaman statis . Nah sesuai dengan judul postingan kali ini yaitu Cara Memperbaiki Masalah Pada Halaman Statis saya akan mencoba memberikan beberapa solusi dari masalah yang timbul pada halaman statis tersebut.

Masalah yang mungkin timbul pada halaman statis :

* Pada Halaman Statis Isi Artikel Muncul Tapi Artikel Terpotong Oleh Read More.

* Pada Halaman Statis tidak menampilkan isi artikel dan hanya muncul tulisan/kode "Read more".

* Terjadi Eror Pada Halaman Statis .

Dan adapun Cara Memperbaiki Masalah Pada Halaman Statis adalah :

Pada Halaman Statis Isi Artikel Muncul Tapi Artikel Terpotong Oleh Read More >> Cara Mengatasinya..

1. Log in Ke Blogger dasbor dengan account anda.
2. Pilih Opsi lainya >>> Pilih Templete >>>Back Up dulu Templete Anda.
3. Klik Edit HTML >>>Centang Kotak Expand Template Widget .
4. Cari Kode seperti atau mirip kode dibawah ini Gunakan Ctrl+F atau F3.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url' rel='nofollow'>Read More</a></span>
</b:if>

5. Ganti Kode di atas dengan kode di bawah ini.

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url' rel='nofollow'>Read More</a></span>
</b:if>
</b:if>

Pada Halaman Statis tidak menampilkan isi artikel dan hanya muncul tulisan/kode "Read more" >> Cara Mengatasinya..

1. Cari Kode seperti atau mirip kode dibawah ini Gunakan Ctrl+F atau F3.

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType !="item"'>
<a expr:href='data:post.url'>
<div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9 ;color:#406A0E;">
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

2. Ganti Kode di atas dengan kode di bawah ini .

<b:include data='post' name='post'/>

Terjadi Eror Pada Halaman Statis >> Cara Mengatasinya..

* Templete dengan read more biasa *.

1. Cari Kode seperti atau mirip kode dibawah ini Gunakan Ctrl+F atau F3.

<b:if cond='data:blog.pageType != "item"'><br/>
<a expr:href='data:post.url'>Read more...</a>
</b:if>

2. Ganti Kode di atas dengan kode di bawah ini.

<b:if cond='data:blog.pageType == "static_page"'><br/>
<b:else/>
<b:if cond='data:blog.pageType == "index"'><br/>
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>

* Templete dengan "Read more" otomatis .

1. Cari Kode seperti atau mirip kode dibawah ini Gunakan Ctrl+F atau F3.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>Read More..</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

2. Ganti Kode di atas dengan kode di bawah ini.

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>Read More...</a></span>

</b:if>

</b:if>


<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

5. Simpan Templete anda.

Selesai selamat mencoba.....

Hapus Link Aktif Pada Komentar Secara Otomatis

noreply@blogger.com (Bambang) — Thu, 04 Apr 2013 02:24:00 +0000

Mesin Pencari google sangat tidak menyukai Aktif link pada komentar blog karena mesin pencari google akan menganggapnya sebagai spam serta dapat menimbulkan broken link pada blog kita yang tentu saja akan mengurangi unsur SEO . Link aktif ini biasanya dibuat oleh pengunjung yang berkomentar dengan tujuan untuk mempromosikan blog atau webnya ketika mereka berkomentar . Saya yakin anda akan merasa terganggu dengan link aktif ini bukan? jangan kan kita tentunya Mbah google sendiri saja tidak menyukainya . Nah untuk mengatasi link aktif ini ada beberapa cara yang bisa kita lakukan, misalnya memoderasi setiap komentar yang masuk kekomentar blog kita dengan menggunakan fitur yang sudah disediakan oleh blogger itu sendiri, dimana kita dapat memilih komentar mana yang akan kita publikasiakan atau tidak kita publikasikan . dan sesuai dengan tutorial yang akan kita bahas kali ini yaitu Hapus Link Aktif Pada Komentar Secara Otomatis kita dapat menghapus link aktif tersebut dengan meambahkan script pada Kode HTML blog kita , sehingga setiap Link Aktif yang disisipkan oleh pembuat komentar akan dihapus dengan sendirinya atau secara otomatis.

Dan adapun cara Hapus Link Aktif Pada Komentar Secara Otomatis adalah:

1. Pergi ke blogger dasbor >>> Pilih opsi lainya >>> Templete >>>Back Up Dulu templete anda.

2. Selanjutnya Klik Edit HTML dan Centang kotak kecil Expand Widget Templates.

3. Cari kode ]]></b:skin> gunakan Ctrl + F atau F3 untuk memudahkan pencarian.

4. Copy kode dibawah ini dan pastekan di atas kode ]]></b:skin> .

#comments p a {display:none;}

5. Kemudian cari kode </head> dan letakan kode dibawah diatas kode </head> .

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
 jQuery("#comments p").find("a").replaceWith("<span>Peringatan: Link aktif akan dihapus secara otomatis !</span>");
});
</script>

6. jika kita ingin mengganti link aktif tersebut dengan link blog kita , copy kode dibawah ini dan pastekan diatas kode </head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
 jQuery("#comments p a").attr("href", "http://bambangpage.blogspot.com/");
});
</script>

Keterangan:

*Ganti URL blog yang berwarna hijau dengan URL blog anda.

7. Simpan Templete anda.

Selesai dan selamat mencoba.....

Cara Konfigurasi Navigasi Halaman Pada Blogger

noreply@blogger.com (Bambang) — Mon, 01 Apr 2013 01:00:00 +0000

Melanjutkan tutorial sebelumnya yaitu Cara Membuat Navigasi Halaman Ala Wordpress yang mana kita telah mempelajari Cara Membuat Navigasi Halaman yang berpungsi untuk menjelajahi arsip blog /web lebih dalam, menyesuaikan Jumlah link-link halaman serta jumlah postingan-postingan yang di tampilkan pada setiap halaman . Nah sesuai judul kali ini yaitu Cara Konfigurasi Navigasi Halaman Pada Blogger , kita akan mempelajari bagai mana cara mengkonfigurasi navigasi halaman dengan baik dan benar , sehingga dapat menghasilkan tampilan navigasi halaman yang kita inginkan pada blog kita.

Dan adapun Cara Konfigurasi Navigasi Halaman Pada Blogger adalah:

1. Login ke blogger dasbor dengan ID anda.

2. Kemudian pilih Opsi lainya >>> Setelan.

3. Selanjutnya Klik Pos dan komentar .

4. Jika anda menginginkan 9 (Sembilan Postingan Pada Home)anda bisa mengisi kotak disamping tulisan Tampilkan sebanyak mungkin dengan angka 9 (sembilan) lihat gambar di bawah.

5. Kemudian klik Simpan Setelan dibagian kanan atas halaman Setelan › Pos dan komentar.

6. Selanjutnya klik Templete >>> Edit HTML >>> Klick "Expand Widget Templates".

7. Cari Kode seperti di bawah ini (Gunakan Ctrl+F atau F3 untuk mencari kode).

var postperpage=7; atau perPage: 7;

8. Kemudian ganti dengan kode dibawah ini.

var postperpage=9; atau perPage: 9;

9. Simpan templete anda.

Selesai dan semoga bermanfaat....

Cara Membuat Navigasi Halaman Ala Wordpress

noreply@blogger.com (Bambang) — Thu, 28 Mar 2013 01:00:00 +0000

Wordpress PageNavi adalah sebuah Plugin Wordpress yang berfungsi untuk menavigasi halaman ke halaman sebelumnya atau selanjutnya, ini sangat menarik dan sangat di sukai banyak orang.Navigasi ini merupakan sebuah kelanjutan dari Navigasi Halaman untuk menggantikan link " ← Older posts | Newer posts → " pada blog.Pada dasarnya plugin navigasi halaman ini juga di miliki oleh blogger blog,tetapi bukan berarti kita menggunakan plugin wordpress melainkan kita dapat menggunakan plugin navigasi halaman yang sejenis di blogger blog.Pada tutorial sebelumnya saya juga pernah membahas tentang navigasi halaman ini,dan anda bisa membacanya di Cara Membuat Page Navigation ( Navigasi Halaman) Dengan Nomor Pada Blogger,tutorial tersebut tidak jauh berbeda dengan tutorial yang akan kita bahas kali ini yaitu Cara Membuat Navigasi Halaman Ala Wordpress.Hal yang membedakan dari keduanya mungkin pada script dan tampilan navigasi halaman pada blog.

Dan adapun Cara Membuat Navigasi Halaman Ala Wordpress adalah:

1. Silahkan login ke blogger dengan ID anda.

2. Pilih Opsi lainya >> Templete .

3. Backup terlebih dahulu templete anda , klik pada tulisan Backup/Restore dibagian kanan atas.

4. Pilih Edit HTML >> Centang Kotak Expand Widget Templates.

5. Cari Kode seperti di bawah ini (Gunakan Ctrl+F atau F3 untuk mencari kode).

<b:includable id='mobile-index-post' var='post'>

6. Copy kode di bawah ini dan pastekan diatas kode tadi pada no.5 .

<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,
numPages: 5,
firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot;
}</script>
<script src='http://bambang-file3.googlecode.com/files/navipage.js' type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>

7. Selanjutnya Cari Kode seperti di bawah ini (Gunakan Ctrl+F atau F3 untuk mencari kode).

<b:include name='nextprev'/>

8. Kemudian ganti kode diatas dengan kode di bawah ini.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include name='page-navi'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
</b:if>

9. Untuk style pada navigasi halaman,copy kode di bawah ini dan pastekan diatas kode ]]></b:skin>.

/*******Navigasi Halaman Css *******/
#blog-pager {
    width: 100%;
    text-align: center;
    margin: 0 0 30px !important;
    padding: 0 0 20px;
    clear: both;
    position: relative;
    z-index: 10;
    line-height: 36px;
}

.pagenavi {
    width: 100%;
    position: relative;
    text-align: center;
    margin: 0 0 30px;
    padding: 30px 0;
    clear: both;
    z-index: 10;
    line-height: 36px;
}

#blog-pager a,
.pagenavi span,
.pagenavi a {
    margin: 0 4px 0 0;
    padding: 4px 12px;
    text-decoration: none;
    color: #fff;
    height: 30px;
    line-height: 31px;
    background-color: #d4d4c2;
}

#blog-pager a:hover,
.pagenavi a:hover {
    text-decoration: none;
    background-color: #fff;
    color: #777;
}

#blog-pager-older-link,
#blog-pager-newer-link {
    float: none;
    height: 30px;
}

.pagenavi .current {
    color: #777;
    text-decoration: none;
    background: #fff;
}

.pagenavi .pages {
    color: #fff;
}

10. Simpan templete anda.

Selesai dan semoga bermanfaat..

Cara Membuat Halaman Blog Printer Friendly

noreply@blogger.com (Bambang) — Mon, 25 Mar 2013 01:52:00 +0000

Saya mungkin anda pernah mengalami hal yang sama , dimana ketika kita memprint halaman blog kita , gambar dan text seperti header , footer , ads , dll . Akan tampil pada halaman yang kita print dan hal ini akan sangat mengganggu kita tentunya . Masalah seperti tadi dapat kita atasi dengan menambahkan Css yang akan kita bahas pada tutorial kali ini . Css yang kita tambahkan dalam trik ini akan menghilangkan bagian yang tidak kita inginkan tadi ketika kita mengeprint halaman.

Dan adapun Cara Membuat Halaman Blog Printer Friendly adalah:

1. Masuk ke dasbor blogger blog dengan account anda klik disini

2. Pilih Opsi lainya >> Templete >> Click Edit HTML .

3. Cari kode di bawah ini gunakan Ctrl+F atau F3 untuk memudahkan pencarian.

<b:include data=’blog’ name=’all-head-content’/>

4. Tambahkan kode di bawah ini tepat dibawah kode diatas tadi.

<style media="print" type="text/css"> #header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #lower-wrapper, #footer-wrapper, #footer, #credit, .comment-form, .post-footer, #blog-pager, .post-feeds, #backlinks-container, #navbar-section, footer {display: none;} #content-wrapper, #main-wrapper, #main { width: auto !important; overflow: visible !important; float: none !important; color: black; font-size: 12pt; background: white; border: none; } #main a { text-decoration: underline; color: blue; } </style>

Keterangan:

* Kode css diatas akan menghilangkan bagian yang tidak kita inginkan pada kertas print.

* Kode tersebut juga akan membuat lebar halaman secara otomatis pada kertas print.

* Dan Kode tersebut juga akan membuat garis bawah pada link.

5. Anda juga bisa menambahkan Tombol print dimana pengguna bisa memprint halaman dengan mengklik tombol print.

I. Ikuti langkah no. 1 dan 2 diatas.

II. Kemudian Click Expand widget.

III. Cari kode di bawah ini gunakan Ctrl+F atau F3 untuk memudahkan pencarian.

<div class="post-footer"> atau <data:post.body/>

6. Kemudian copy kode di bawah ini dan pastekan di bawah salah satu kode di atas.

<b:if cond='data:blog.pageType == "item"'>
<a href="javascript:window.print()"><img  style="border:none;margin:0 6px"  src="http://cdn.printfriendly.com/pf-icon-small.gif" alt="Print this article" width="18" height="18"/>Print this article</a>
</b:if>

5. Simpan Temlete Anda.

Selesai dan selamat mencoba....

Cara Membuat Daftar Isi Pada Halaman Statis

noreply@blogger.com (Bambang) — Thu, 21 Mar 2013 01:30:00 +0000

Pada Postingan sebelumnya kita pernah membahas tentang cara Menghilangkan Otomatis Read More di Statis Page yang mana hal tersebut akan berkaitan dengan tutorial kali ini yaitu Cara Membuat Daftar Isi Pada Halaman Statis,dimana Daftar Isi ini akan menampilkan daftar isi dari blog kita menurut label yang telah kita tentukan dalam dua kolom.

Dan adapun Cara Membuat Daftar Isi Pada Halaman Statis adalah:

1. Log in ke blogger dasbor dengan account anda klik di sini.

2. Pilih Opsi Lainya >> Pilih Laman >> Pilih Laman Baru >>Pilih Laman Kosong Lihat Gambar di bawah .

3. Copy kode di bawah ini dan pastekan di kotak kosong pada Laman.

<table cellpadding="0" cellspacing="0" height:100="" style="width: 100%px;"><tbody>
<tr> <td align="justify" valign="top" width="50%"><div style="border: 0px solid #000000; height: auto; overflow: auto; padding: 5px; width: 100%;">
<script src="http://bambang-file1.googlecode.com/files/daftar-isi-automatis.js"></script><script src="http://cilimoes.blogspot.com/feeds/posts/default/-/Wisata?max-results=999&alt=json-in-script&callback=loadtoc"></script> </div>
</td> <td align="justify" valign="top" width="50%"><div style="border: 0px solid #000000; height: auto; overflow: auto; padding: 5px; width: 100%;">
<script src="http://bambang-file1.googlecode.com/files/daftar-isi-automatis.js"></script><script src="http://cilimoes.blogspot.com/feeds/posts/default/-/Blogger?max-results=999&alt=json-in-script&callback=loadtoc"></script>
</div>
</td> </tr>
</tbody></table>

Keterangan:

* Ganti kode yang berwarna merah dengan URL Blog anda.

4. Lihat halaman gambar di bawah ini.

5. Klik Tomblol Publikasikan .

Selesai dan semoga bermanfaat....

Menghilangkan Otomatis Read More di Statis Page

noreply@blogger.com (Bambang) — Mon, 18 Mar 2013 01:30:00 +0000

Read more tidak di perlukan pada halaman statis.Dan untuk menghilangkan Read More pada Halaman Statis ini banyak cara yang bisa kita lakukan ,namun tidak semua cara tersebut dapat di terapkan pada setiap templete blogger.Ada banyak tutorial yang telah membahas tentang cara Menghilangkan Otomatis Read More di Halaman Statis ini dan bisa anda cari melalui mesin pencari google dan jika anda belum menemukan cara yang tepat mungkin tutorial inilah yang bisa menjawabnya. Oleh karena itulah pada postingan kali ini dengan judul Menghilangkan Otomatis Read More di Statis Page,mudah-mudahan dapat memberikan solusi yang tepat untuk blog anda.

Dan adapun langkah-langkah Menghilangkan Otomatis Read More di Statis Page adalah:

1. Log in Ke Blogger dasbor dengan account anda.
2. Pilih Opsi lainya >>> Pilih Templete >>>Back Up dulu Templete Anda.
3. Klik Edit HTML >>>Centang Kotak Expand Template Widget .
4. Cari Kode seperti atau mirip kode dibawah ini .

<b:if cond="data:blog.pageType != "item"">
    <div expr:id=""summary" + data:post.id">
<data:post .body=""></data:post></div>
<script type="text/javascript">createSummaryAndThumb("summary<data:post.id/>"
    </script>
    <span class="rmlink" style="float: left;"><a expr:href="data:post.url" href="http://www.blogger.com/blogger.g?blogID=4660703476332902825"><b>Read more »
    </b></a>
    </span>
    </b:if>
    <b:if cond="data:blog.pageType == "item""><data:post .body=""></data:post>
</b:if>

5. Copy kode di bawah ini dan ganti kode diatas dengan kode di bawah.

<b:if cond="data:blog.pageType == "static_page"">
    <data:post .body="">
    <b:else>
    <b:if cond="data:blog.pageType != "item"">
    <div expr:id=""summary" + data:post.id">
<data:post .body=""></data:post></div>
<script type="text/javascript">createSummaryAndThumb("summary<data:post.id/>");</script>
    <span class="more" style="float: left;">
    <a expr:href="data:post.url" href="http://www.blogger.com/blogger.g?blogID=4660703476332902825">Read more</a>
    </span>
    </b:if> </b:else></data:post></b:if>
    <b:if cond="data:blog.pageType == "item"">
    <data:post .body="">
    </data:post></b:if>

6.Langkah terakhir simpan Template anda.

Selesai selamat mencoba....

Cara Membuat Headline News Di Blog

noreply@blogger.com (Bambang) — Wed, 13 Mar 2013 10:32:00 +0000

Pada postingan sebelumnya kita pernah membahas tentang Cara Membuat News Update dengan gAjax RSS Ticker Pada Blog Atau Website anda dimana news update ini menampilkan informasi terbaru (postingan terbaru ) dari beberapa blog yang biasanya di pasang pada sidebar kita.Nah pada kesempatan kali ini masih tentang News Update kita akan membahas tentang Cara Membuat Headline News Di Blog ,di mana Headline News ini akan menampilkan info terbaru ( postingan terbaru ) dari blog yang biasanya di tampilkan diatas Blog atau di bawah navigasi menu pada blog.Trik ini biasanya di gunakan untuk situs berita , dan memang sangat menarik karena mengundang pembaca untuk membaca lebih banyak halaman di blog kita yang otomatis meningkatkan pageview.

Dan ada pun Cara Membuat Headline News Di Blog adalah:

1. Buka Blogger Dasbor >>Pilih Opsi lainya >> Pilih/klik templete .

2. Back Up dulu Templete anda.

3. Selanjutnya Klik Edit HTMl >> centang kotak kecil Expand Template Widget.

4. Cari Kode ]]></b:skin> gunakan Ctrl + F atau F3 untuk memudahkan pencarian.

5. Letakan kode di bawah ini tepat di atas kode ]]></b:skin>.

/* Headline News
-------------------*/ 
.newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7L5UnO-noHPcvSLeYgkvgUAALjcBGQ_gF-cvHdB34zAEEAfOHttMMi34Zsoob4zTnJLbIAVHFW0IWxHuHM0ClkKE1xODMFZ-w7CEl-Tq73N1NREwX4u_m4FO942wUC6RsoJzjVxclBmc/s1600/news.gif) no-repeat top left;width:970px;margin:0 auto;padding:0 auto;height:32px;color:#fff;} 
.news {width: 970px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;} 
.news a:link, .news a:visited{color:#fff;text-decoration:none;} 
.news a:hover {color:#ddd;text-decoration:underline;}

Keterangan :

* Warna Hijau adalah ukuran panjang headline news.
* Warna Biru adalah ukuran tinggi headline news.

5. Next cari kode </head>

6. Kemudian copy kode di bawah ini dan pastekan tepat diatas kode </head>

<script src="http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA"></script>
<script type="text/javascript">
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'">
</div>
');this.feedcontainer=document.getElementById(c);this.itemcontainer="
<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="
<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"
"+a[c].content:/snippet/i.test(this.showoptions)?"
"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="
<li>")?"</ul>
":"";this.feedcontainer.innerHTML=e};

var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>
";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="
<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"
"+d[e].content:/snippet/i.test(b)?"
"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="
<li>")?"</ul>
\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]>
</script>
<style type="text/css">
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#aaa;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#aaa;font:normal 14px Arial;text-transform:none;}
#example1{ /*Demo 1 main container*/
width: 780px;
height: 14px;
border: 0px solid #aaa;
padding: 0px;
font:bold 16px Arial;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}
#example1 a:hover {color:#C8D3F2;text-decoration:none;}
</style>

7. Kemudian cari kode <div id='header-wrapper'> atau <div id='header-outer'> (pilih salah satu saja)

8. Lalu letakkan kode berikut tepat di bawah kode nomor 7 tadi.

<div class='newspic'>
<div style='float:left;width:780px;padding:6px 0 6px 180px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://bambangpage.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>

> Ganti kode yang berwarna Hijau dengan URL blog anda.

9. Simpan template dan lihat hasilnya.

Selesai dan selamat mencoba....

Cara Membuat Dua Kolom Di Bawah Postingan Blogger

noreply@blogger.com (Bambang) — Mon, 11 Mar 2013 01:00:00 +0000

Pada Postingan Terdahulu kita pernah membahas tentang Cara Membagi Blogger Header Menjadi Dua Bagian dalam arti ada dua kolom di bagian header.Nah sesuai judul postingan kali ini kita akan membahas tentang Cara Membuat Dua Kolom Di Bawah Postingan Blogger,ini berarti kita akan membuat dua kolom baru di bawah postingan blogger dan dua kolom tersebut hanya akan tampil pada bagian homepage saja tidak pada halaman lain.Cara ini biasanya akan kita dapati pada magazine templete ,dimana ini melibatkan penambahan dua kolom untuk widget (untuk muncul berdampingan) di bawah Postingan blog pada homepage Anda. Setelah Anda menambahkan bagian ini, Anda dapat menambahkan widget dan mengubah pengaturan blog Anda untuk mengubah tampilan keseluruhan template Anda.

Dan adapun Cara Membuat Dua Kolom Di Bawah Blogger Post adalah:

1. Pergi ke blogger dasbor >>> Pilih opsi lainya >>> Templete >>>Back Up Dulu templete anda.

2. Selanjutnya Klik Edit HTML dan Centang kotak kecil Expand Widget Templates.

3. Cari kode di bawah ini gunakan Ctrl + F atau F3 untuk memudahkan pencarian.

    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
    </b:section>
    </div>

4. Copy kode di bawah ini dan pastekan sebelum kode </div> diatas.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:section class='sidebar' id='col-left' showaddelement='yes' />
    <b:section class='sidebar' id='col-right' showaddelement='yes'/>
    <div style='clear: both;'/>
    </b:if>

5. Selanjutnya cari kode ]]></b:skin> dan copy kode css di bawah ini lalu pastekan diatas kode ]]></b:skin> .

#col-left {
    width: 48%;
    float: left;
    }
    #col-right {
    width: 48%;
    float: right;
    }

6. Simpan templete anda.

Selesai dan selamat mencoba.....

Cara Membuat "Link To This Post Widget" Di Bawah Postingan

noreply@blogger.com (Bambang) — Thu, 07 Mar 2013 10:17:00 +0000

Pada Artikel Kali ini Kita akan membahas tentang cara membuat "Link To This Post Widget" Di bawah setiap artikel Postingan blogger.Kotak "Link To This Post Widget" ini di peruntukan untuk para pengunjung blog untuk link back ke Postingan Blog anda.Jika postingan blog tersebut lebih informative pengunjung akan membagikan (share) link tersebut ke blog mereka atau forum.Widget ini akan meyediakan 3 link (Blog Post URL, HTML Link,Forum Link)yang terus berubah (Update) secara otomatis kapanpun artikel terbaru di poskan di blog anda ,widget ini akan berada di bawah setiap postingan blog anda.Dengan cara ini kita juga dapat menambah jumlah bacaklink ke blog kita.

Dan adapun Cara Membuat "Link To This Post Widget" Di Bawah Postingan adalah:

1 > Buka Blogger Dashboard > Template
2 > Klik Back Up/ Restore
3 > Click Pada Edit HTML
4 > Check Expand Widget Templates Check box
5 > Cari Kode di bawah ini dengan menggunakan Ctrl+F atau F3 untuk mmemudahkan pencarian.

<data:post.body/>

Atau

<div class='post-footer-line post-footer-line-1'/>

Atau

<div class='post-footer'>

6. Copy Kode di bawah ini dan pastekan di bawah salah satu kode di atas.

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

<p style='color: #7AA1C3;font-weight: bold;'>Jika Anda Menyukai Artkel Seperti Di atas,Link back ke artikel ini dengan mengcopy salah satu kode di bawah ini</p>

<p style='color: #CF152A;font-weight: bold;'>URL Of Post:

</p><textarea cols='60' id='url' onclick='this.focus();this.select()' readonly='readonly' rows='2' style='border:2px solid #666;background:#fff; height: 2.6em; width: 99%;' title='Click to highlight'><data:post.url/></textarea><br/>

<p style='color: #CF152A;font-weight: bold;'>HTML Link Code:</p>

<textarea cols='60' id='HTML-code' onclick='this.focus();this.select()' readonly='readonly' rows='2' style='border:2px solid #666;background:#fff; height: 2.6em; width: 99%;' title='Click to highlight'>&lt;a href=&quot;<data:post.url/>&quot;&gt;<data:post.title/>&lt;/a&gt;</textarea>

<p style='color: #CF152A;font-weight: bold;'>BB (forum) link code:</p>

<textarea id='BB-code' onclick='this.focus();this.select()' readonly='readonly' rows='2' style='border:2px solid #666;background:#fff; height: 2.6em; width: 99%;' title='Click to highlight'>[url=<data:post.url/>]<data:post.title/>[/url]</textarea>

</b:if>

7 > Simpan Templete Anda.

Selesai selamat mencoba........

Ganti Tulisan " Post A Comment " Di Blogger Comment

noreply@blogger.com (Bambang) — Mon, 04 Mar 2013 01:30:00 +0000

Templete Xml Biasanya memiliki banyak tag,tag tersebut biasanya dapat menampilkan sebuah teks, widget, atau konten yang di perintahkan oleh hosting blog dengan arti yang berbeda pada hosting yang berbeda.Blogspot merupakan salah satu hosting yang sangat populer,tag-tag pada blogspot akan memiliki arti yang berbeda dan akan tampil dalam bahasa inggris pada templete blogspot.Contoh tag tersebut adalah tag <data:postCommentMsg/> dan tag tersebut akan langsung dibaca dalam bahasa inggris dan akan memiliki arti "Post a Comment".Sesuai dengan judul postingan kali ini yaitu Ganti Tulisan " Post A Comment " Di Blogger Comment yang mana tulisan tersebut dapat anda ganti dengan tulisan yang anda inginkan.

Dan adapun langkah-langkah Ganti Tulisan " Post A Comment " Di Blogger Comment adalah:

1. Login ke akun Blogger anda.
2. Pilih Option Lainnya >> Pilih Template >> Back Up dulu Templete anda >> klik Edit HTML.
3. Kemudian beri tanda centang/klik pada "Expand Widget Templates".
4. Ada dua/tiga kode yang sama seperti itu. Pilih salah satu kode tersebut. Tapi lebih disarankan ganti saja semuanya dengan pesan yang sobat inginkan.

<data:postCommentMsg/>

5. Ganti tag tersebut dengan kata yang anda inginkan. Misalnya, " Post Kan Komentar Anda" ,"Tinggalkan Sebuah Komentar" Dll.

6. Simpan template anda.

Selesai dan semoga bermanfaat.......

Rubah Tulisan Jumlah Komentar Di Blogger Comment

noreply@blogger.com (Bambang) — Thu, 28 Feb 2013 01:00:00 +0000

Pada Blogger komen form terdapat Tulisan jumlah komentar pengunjung blog dibawah setiap artikel blog.Tulisan tersebut biasanya akan tampil pada bagian atas sebelah kiri form komentar,yang mana tulisan tersebut bertuliskan "0 Comment".Sedangkan di blog wordpress keterangan mengenai jumlah komentar yang ada bertuliskan seperti : "0 Responses to Artikel Title". jika anda ingin merubah tulisan tersebut dengan kata-kata yang anda inginkan atau Seperti : " Ada 2 Komentar Pada "Test Post 3" " : . anda bisa mengikuti langkah-langkah di bawah.

Adapun langkah-langkah Rubah Tulisan Jumlah Komentar Di Blogger Comment ikuti langkah-langkah berikut:

1. Login ke account blogger anda di www.blogger.com

2. Back Up Dulu Templete anda untuk menjaga jika terjadi kesalahan ketika mengedit templete.

3. Pilih opsi lainya >>> Pilih Templete >>> Klik Edit HTML.

4. Centang kotak Expand Template Widget, kemudian cari kode seperti ini:


<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

5. Setelah menemukan kode html seperti diatas silahkan dihapus dan ganti dengan kode html dibawah ini:

<!-- bambangpage.blogspot.com -->
<h4>
Ada
<b:if cond='data:post.numComments == 1'>
1  Komentar Pada "<data:post.title/>":
<b:else/>
<data:post.numComments/> Komentar Pada "<data:post.title/>":
</b:if>
</h4>
<!-- bambangpage.blogspot.com -->

6. Save template anda, dan periksa hasilnya dihalaman single post blog Anda.

Selesai Selamat Mencoba dan Semoga Bermanfaat....

Memasang Komen Buble Setelah Judul Postingan

noreply@blogger.com (Bambang) — Mon, 25 Feb 2013 01:00:00 +0000

Templete yang menarik akan memberberikan daya tarik tersendiri bagi pengunjung blog kita untuk membaca isi blog kita dan kembali berkunjung ke blog kita.Selain isi blog yang berkualitas tampilan templete juga akan sangat berpengaruh untuk menambah traffic ke blog kita, banyak cara yang bisa kita lakukan untuk mempercantik tampilan blog salah satunya yaitu dengan Memasang Komen Buble Setelah Judul Postingan.Dengan trik ini pemilik blog dan para pengunjung blog dapat mengetahui seberapa banyak pembaca blog yang telah memberikan komentar pada setiap postingan.Trik yang akan saya buat saat ini akan menampilkan komen buble dengan jumlah pemberi komentar setelah judul postingan blog di setiap postingan.Dibawah ini beberapa contoh Commen Buble icon Ynag bisa anda download.

Contoh comment Buble icon :

Dan adapun langkah-langkah Memasang Komen Buble Setelah Judul Postingan adalah:

1. Pergi ke blogger dasbor >>> Pilih opsi lainya >>> Templete >>>Back Up Dulu templete anda.

2. Selanjutnya Klik Edit HTML dan Centang kotak kecil Expand Widget Templates.

3. Cari kode ]]></b:skin> ini gunakan Ctrl+f atau F3 untuk memudahkan Pencarian.

4. Copy Kode di bawah ini dan pastekan di atas kode ]]></b:skin> tadi.

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(http://bambang-file1.googlecode.com/files/speech_bubble.png);
background-repeat: no-repeat;
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

Keteranga:
Kode yang berwarna biru di atas bisa anda ganti dengan URL comment buble icon yang anda inginkan (milik anda).

5. Selanjutnya cari kode di bawah ini gunakan Ctrl+F atau F3 untuk memudahkan Pencarian.

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>

Atau

<b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>

6. Setelah anda menemukan salah satu dari kode diatas.tambahkan kode di bawah ini tepat dibawah salah satu kode diatas tadi.

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='color: #ffffff; font-size: 18px; font-weight: bold;'><data:post.numComments/></a>
</b:if>

7. Kode Style yang berwarna hijau pada no 6 adalah kode yang bisa anda edit dan sesuaikan sesuai dengan keinginan anda.

8.Langkah terakhir Prevew templete anda jika semuanya oke simpan templete anda.

Selesai dan semoga bermanfaat.

Membuat Tab Komentar Facebook dan Blogger

noreply@blogger.com (Bambang) — Thu, 21 Feb 2013 01:30:00 +0000

Para pengunjung Blogger Blog terkadang tidak memiliki google atau Live Jurnal account. dan hal ini akan menyulitkan mereka untuk memberikan komentar pada postingan blog yang sedang mereka baca , terkadang mereka hanya memiliki facebook account yang selalu sign in ketika mereka membaca postingan blog.Apakah mungkin pengunjung bisa berkomentar di blogger blog dengan facebook account ? pertanyaan ini akan terjawab setelah kita menambahkan Tab Komentar Facebook dan Blogger pada blog kita yang tentu saja jawabanya Bisa !, karna dengan trik yang akan kita bahas kali ini, Blogger blog kita akan dapat menampilkan kedua Box Komentar yaitu Blogger box komentar dan Facebook Box komentar Secara berdampingan sehingga para pengunjung blog yang hanya memiliki account Facebook pun dapat memberikan komentarnya pada blog kita.

Dan adapun langkah-langkah Membuat Tab Komentar Facebook dan Blogger adalah:

1. Log in Ke Blogger dasbor dengan account anda.
2. Pilih Opsi lainya >>> Pilih Templete >>>Back Up dulu Templete Anda.
3. Klik Edit HTML >>>Centang Kotak Expand Template Widget .
4. Cari Kode ]]></b:skin> Gunakan Ctrl + F atau F3 untuk memudahkan Pencarian kode.
5. Copy dan pastekan kode di bawah ini diatas kode ]]></b:skin> .

/*******Tab Fb dan Blogger Komentar Start*******/
.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { border:2px solid  #eeeeee;float:left; border-radius: 5px;-moz-border-radius: 5px; padding: 5px; margin-right: 3px;
cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
/*******Tab Fb dan Blogger Komentar End*******/

6. Kemudian Anda cari kode </head> Gunakan Ctrl + F atau F3 untuk memudahkan Pencarian kode.

7. Copy dan pastekan kode di bawah ini diatas kode </head> tadi.

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FB Anda disini' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

Keterangan :

Ganti kode yang berwarna biru (ID FB Anda disini) diatas dengan ID facebook atau Facebook Page anda.Contoh : https://www.facebook.com/nama Anda maka ID Anda berada pada tulisan yang berwana biru untuk mengetahui id anda ganti https://www.facebook.com/nama Anda denngan https://graph.facebook.com/nama Anda pada browser anda. Namun jika Anda belum merubah ID Anda maka yang tertera adalah berupa angka dan anka itulah facebook id anda.

8. Selanjutnya cari kode <div class='comments' id='comments'> Keterangan: Anda akan mendapati dua kode yang sama pada templete anda,kemudian copy dan pastekan kode dibawah ini tepat dibawah kode <div class='comments' id='comments'> yang pertama dan kedua.

<div class='comments-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Keterangan:

Angka 2 yang berwarna hijau merupakan jumlah komentar blog anda.
Angka 400 yang berwarna ungu merupakan Lebar kotak komentar anda.

9. Simpan Templete anda

Selesai dan selamat Mencoba....

Cara Pasang Spoiler Pada Komentar Blogger

noreply@blogger.com (Bambang) — Mon, 18 Feb 2013 01:30:00 +0000

Banyak cara yang bisa kita lakukan untuk mempercantik bagian komentar blog di blogger,salah satunya adalah dengan memasang Spoiler pada bagian komentar tersebut.Komentar blog akan semakin memanjang kebawah dan akan memakan banyak ruang jika semakin banyaknya orang yang berkomentar pada blog kita,jika anda tidak menginginkan hal ini dan ingin menghindari panjangnya halaman komentar pada blog anda, alangkah tepatnya anda menggunakan trik Pasang Spoiler pada Komentar Blogger tersebut.Fungsi dan kegunaan dari spoiler ini tidak jauh berbeda dengan postingan sebelumnya baca di ( Jenis dan Cara Pembuatan Spoiler Untuk Blogger ) namun Yang membedakannya adalah Pada Pemasangan Spoiler ini,Pada Postinga ( Jenis dan Cara Pembuatan Spoiler Untuk Blogger ) Spoiler di pasang pada Postingan Blog sedangkan Yang akan kita bahas kali ini ( Cara Pasang Spoiler Pada Komentar Blogger ) Spoiler di pasang pada Komentar BLog.

Dan adapun Cara Pasang Spoiler Pada Komentar Blogger adalah:

1. Buka Blogger Dasbor >>Pilih Opsi lainya >> Pilih/klik templete .

2. Back Up dulu Templete anda.

3. Selanjutnya Klik Edit HTMl >> centang kotak kecil Expand Template Widget.

4. Cari Kode di bawah ini gunakan Ctrl + F atau F3 untuk memudahkan pencarian.

<div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
</div>

5. Setelah anda menemukan kode diatas, silakan hapus dan ganti dengan kode dibawah ini :

<!-- spoiler komentar start-->
<div>
 <input onclick='if(this.parentNode.getElementsByTagName(&apos;div&apos;)[0].style.display != &apos;&apos;){this.parentNode.getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;&apos;;this.value = &apos;Tutup Komentar&apos;;}else{this.parentNode.getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;none&apos;; this.value = &apos;Lihat Komentar&apos;;}' style='-moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #e50000; border-radius: 5px; border-style: outset; color: white; cursor: pointer; display: inline; font-weight: bold; padding: 0px 5px; text-shadow: 1px 1px #666;' type='button' value='Lihat Komentar'/> 
<div style='background: #f1f1f1; border: 1px inset; display: none; margin-top: 5px; padding: 10px 5px; padding: 6px;'>
<!--  komentar kode start -->
       <div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>


<!--  komentar kode end -->
</div></div>

<!-- spoiler komentar end-->

6. Simpan Templete anda.

Selesai dan Semoga bermanfaat......

Jenis dan Cara Pembuatan Spoiler Untuk Blogger

noreply@blogger.com (Bambang) — Thu, 14 Feb 2013 01:30:00 +0000

Mungkin anda para blogger sudah tidak asing dengan istilah Spoiler,Istilaha Spoiler ini umumnya akan sering kita dapati pada website forum seperti forum yang terkenal dan umum di Indonesia yaitu Kaskus, dimana para anggota forum tersebut menggunakan Spoiler ini untuk menyembunyikan atau hanya menjaga garis posting teks atau gambar yang terlalu banyak dan panjang.Dan pengertian dari Spoiler ini sendiri adalah : Spoiler merupakan sebuah script atau kode baris perintah yang dapat menampilkan dan menyembunyikan bagian halaman ketika tombol di klik.Teknik spoiler ini banyak di gunakan para blogger untuk menghemat bandwidth atau mempercepat waktu loading halaman blog tanpa reload teks atau gambar.

Dan adapun Jenis dan Cara Pembuatan Spoiler Untuk Blogger Tersebut adalah :

1. Copy dan Pastekan Kode pada Spoiler di bawah ini pada postingan blog anda Tidak Pada Mode Compose Melainkan Pada Mode HTML.

Klik Untuk :

2. Copy dan Pastekan Kode Pada Spoiler dibawah ini Ke Postingan Blog anda.Tidak Pada Mode Compose Melainkan Pada Mode HTML.

Klik Untuk :

3. Copy dan Pastekan Kode Pada Spoiler dibawah ini Ke Postingan Blog anda.Tidak Pada Mode Compose Melainkan Pada Mode HTML.

Klik Untuk :

Demikian ketiga jenis Spoiler yang dapat anda gunakan untuk postingan blog anda, sehingga dapat menghemat bandwidth atau mempercepat waktu loading halaman blog tanpa reload teks atau gambar.

Selesai dan semoga bermanfaat....

Agar Semua Label Breadcrumbs Terindex Google

noreply@blogger.com (Bambang) — Mon, 11 Feb 2013 01:30:00 +0000

Pada artikel terdahulu saya pernah membahas tentang Cara Memasang BreadCrumbs Agar Lebih Seo Friendly Pada Blogger di blog ini, dimana pemasangan Breadcrumbs pada blogger tersebut hanya dapat menampilkan satu label saja yang terindex di mesin pencarian.Nah bagai manakah jika kita menginginkan semua label terindex mesin pencari google ? Apakah Bisa ? Jawaban dari kedua pertanyaan tadi akan terjawab setelah anda mempraktekan dan memasang script breadcrumbs yang akan kita bahas saat ini, yaitu Agar Semua Label Breadcrumbs Terindex Google.Mungkin anda para blogger telah mengetahui Apa itu BreadCrumbs dan Apa fungsi dari BreadCrums ini ?bagi anda para blogger yang belum mengetahui Breadcrumbs dan Fungsinya saya akan menjelaskanya secara singkat di sini.Seperti yang telah saya jelaskan pada postingan sebelumnya di Cara Memasang BreadCrumbs Agar Lebih Seo Friendly Pada Blogger, BreadCrum adalah sebuah navigasi bantuan Ke link kategori dan sub kategori yang menyediakan Informasi dari kategori utama dan menghubungkan berbagai urutan dari navigasi.Dan adapun Fungsinya adalah untuk mempermudah pengunjung blog atau website menuju halaman berdasarkan kategori,kehalaman utama dan halaman sebelumnya serta dapat meningkatkan SEO.

Dan adapun cara Agar Semua Label Breadcrumbs Terindex Google adalah:

1. Log in Ke blogger Dasbor.

2. Pilih Opsi Lainya » Klik template » Backup dulu templete anda untuk menghindari jika terjadinya hal yang tiak di inginkan.

3. Klik edit HTML » centang Expand template Widget.

4. Bagi anda yang sudah memasang kode BreadCrumbs yang lama, silahkan hapus terlebih dulu.

5. Selanjutnya Cari kode ]]></b:skin> gunakan Ctrl + F untuk mempermudah pencarian.

6. Copy kode CSS dibawah ini dan pastekan diatas kode ]]></b:skin> tadi.

.breadcrumbs{margin-left:10px; font-size:95%; line-height:1.4em}

7. Cari kode <b:includable id='main' var='top'> dan ganti kode <b:includable id='main' var='top'> tersebut dengan kode dibawah ini.

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

8. Simpan Templete anda.

Untuk mengecek BreadCrumbs yang telah anda pasang tadi.

I. Buka halaman http://www.google.com/webmasters/tools/richsnippets, maka akan terbuka halaman Alat Uji Coba Data Terstruktur Webmaster Tool.Seperti gambar dibawh ini.

II. Masukan Url artikel blog anda dan kemudian klik Pratijau (prevew),lihat gambar diatas.Dan jika berhasil hasilnya akan seperti gambar dibawah ini.

Demikian tutorial denagn judul Agar Semua Label Breadcrumbs Terindex Google,dan jika anda ingin mencobanya ikuti langkah-langkah diatas dengan benar dan semoga berhasil.

Selamat mencoba dan semoga bermanfaat...