Tweet, Facebook dan Google + Sebagai Pembuka Blog

Dalam peningkatan blog banyak cara yang digunakan oleh para blogger dalam menaikkan traficknya, salah satunya adalah mengedit blog supnya SEO Friendly. Bahkan gak sedikit yang memanfaatkan sosial bookmark untuk meningkatkan traffick tersebut. Sebagai contoh yang bisa anda lakukan adalah memanfaatkan facebook, twitter, google plus ataupun yang lain. Atau pula anda bisa lihat disini untuk melakukan peningkatan blog kita.

Untuk itu, pada kesempatan yang ini Kang Fathur akan memberikan Tips 'N Trik untuk membuat sosial bookmark sebagai pembuka blog dan sebagai variasi pula demi cantiknya blog kesayangan kita. Pada tutorial ini sangatlah gampang untuk anda terapkan pada blog anda. Tanpa ribet, tanpa mengocek uang saku demi tinngia trafick blog kita.

Biar gak terlalu panjang lebar pembahasannya, sebab seharipun gak akan selesai untuk membahas trafick ini. Langsung pada caranya aja ya?

• Login Blogger anda;
• Masuk Rancangan;
• Pilih tan Elemen Laman;
• Pilih Java  atau HTML/JavaScript
• Tambahkan Gadget sebagai wadah untukl menempatkan JavaSCRIPT ini;

<style>
#stp-bg{
    display:none;
    position:fixed;
    _position:absolute; /* hack for IE 6*/
    height:100%;
    width:100%;
    top:0;
    left:0;
    background:#000000;
    z-index:998;
}

#stp-main{
    position:fixed;
    top:220px;
    _position:absolute; /* hack for IE 6*/
    display:none;
    width:450px;
    border:7px solid #2f2f2f;
    background:#fff;
    z-index:999;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    margin:0pt;
    padding:0pt;
    color:#333333;
    text-align:left;
    font-family:arial,sans-serif !important;
    font-size:13px;
}

#stp-title{
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
    font-size:18px;
    padding:13px 0 13px 15px;
}

#stp-close{
    float:right;
    font-size:14px;
    font-weight:bold;
    font-family:Verdana, Geneva, sans-serif;
    color:#777777 !important;
    margin:0 13px 0 0;
    border-bottom:0px !important;
    text-decoration:none !important;
}

#stp-close:hover{
    text-decoration:none !important;
}

#stp-msg{
    background:#4074CF;
    padding:10px 15px;
    color:#ffffff;
    font-family:Arial, Helvetica, sans-serif !important;
    font-weight:bold;
    line-height:20px;
}

#stp-buttons{
    margin:25px 0px 25px 0;
    padding:0 0 0 15px;
}

#stp-bottom{
    padding:15px 10px;
    background:#EFEFEF;
    color:#95989F;
    border-top:1px solid #DDE0E8;
}

#stp-counter{
    font-size:11px !important;
    text-align:right;
    font-weight:bold;
}

.stp-button{
    float:left;
    width:120px;
}

.step-clear{
    clear:both !important;
}
</style>

<script type="text/javascript">Titleblog="Portal Informasi Online";FBKN="pages/Zona-Online/113506822070307";TWITTERKN="onkdesign";URLKN="https://plus.google.com/105217498803178094179"</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<script type="text/javascript" src="http://zona-fathur.googlecode.com/files/yourfollowme.js" type="text/javascript"></script>

<script language="javascript">
$(document).ready(function(){                                
        $().Fathur({
            timeout: 60,
            wait: 0,
            closeable: true
        });
});

</script>

• Simpan Gadget;
• Think....!!! Selesai.

Catatan :

1. Ganti tulisan Portal Informasi Online  dengan title blog anda.
2. Ganti pages/Zona-Online/113506822070307 page halaman facebook anda.
3. Ubah onkdesign dengan username twitter anda.
4. Dan ini https://plus.google.com/105217498803178094179 dengan  profil Google+ anda.

Semoga bermanfaat bagi anda pengunjung setia bloh Kang Fathur

Menyimpan File Di Code Google

Banyak cara menuju roma, mungkin inilah yang pantas diberikan pada artikel kecil ini. Sebab pad artikel kali ini hanya akan menuliskan cara menyimpan file pada java google dengan code google. Akan tetapi kadang malu untuk menuliskan coretan ini, karena udah banyak temen-temen blogger yang membagikan tutorial kali ini, bahkan udah semenjak dulu. Mungkin....!!!

Apa salah? sya kira gak kook, mungkin ada sebagian yang masih belum paham untuk menyimpan seperti Java Script, CSS, txt, gambar dan lain-lain di rumah mbah google. Langsung aja ya?

Daftar

Sebelum anda mendaftarkan penyimpanan, anda harus punya akun Google. Sebab ini adalah wajib yang harus dimiliki jika menginginkan penyimpanan pada gudangnya google.

• Login Gmail anda;
• Klik tautan http://code.google.com
• Pada Featured Products pilih Project Hosting;
• klik tombol Project Hosting on Google Code;;
• Selanjutnya pada jendela baru klik link tulisan Create a new project;
• Isi kolom yang tersedia;

1. Project Name: Isi terserah
2. Project Summary: Isi terserah
3. Project Description: Isi terserah
4. Version Control System: Mercurial
5. Source Code License: Mozilla Public License 1.1
6. Use a Separate Content License: Kosongkan saja
7. Project Labels: Kosongkan saja

• Kemudian klik tombol Creating Project

Cara Upload / Menyimpan File

• Klik tab tulisan Downloads
• Lalu klik New Download
• Isi kolom

1. Summary : my zona ( contoh yang saya gunakan )
2. File : klik tombol Browser => kemudian cari / masukan file yang akan kita upload
3. Labels: javascript( contoh yang saya gunakan sesuai dengan file format ).

• Setelah itu klik Submit File

Cara Menggunakan File

Setelah kita submit file biasanya langsung masuk pada jendela file ( bisa juga klik tab donwloads).

1. Klik kanan pada tombol ( gambar panah download di samping kiri FileName ).
2. Pada menu popup mouse klik Copy Link Location ( atau copy link address ).
3. Setelah url file javascript di dapat, pasang pada link yang akan digunakan.

Contoh Pemasaangannya

<script type="text/javascript" src="url yang didapat dari file penyimpanan diatas" type="text/javascript"></script>

Semoga artikel ini bermanfaat bagi anda. Trims atas keluangan anda membaca artikel ini.

Bagaimana Cara Mengetahui Jumlah Backlink Blog

Sebenarnya cara ini banyak diberikan oleh para master-master blog dan website dalam berbagai tulisan dan kesempatan. Daripada Kang Fathur Vakum gak ada ide untuk menulis blog karena kesibukan dunia sosial, maka saya tuliskan lagi tips ini, mungkin masih ada yang belum paham tentang topik ini.

Backlink adalah sebuah link atau teks yang berada di situs atau blog lain ataupun situs kita sendiri yang jika kita klik maka akan menuju suatu halaman lainnya. Dan backlink sangat penting bagi sebuah blog untuk menguatkan posisi SERP, jumlah traffic blog juga menaikkan pagerank blog. Dan masih banyak lagi cara untuk mendapatkan backlink dari yang natural dan instan backlink, semua itu tergantung kita dalam mengelola blog kita.

Pernah saya tuliskan artikel yang sangat membantu backlink blog anda pada adalah :

1. Manfaatkan Link Gratis Berpotensi 1 Juta Orang
2. Manfaatkan Link Gratis Dengan Pagerank Tinggi
3. Mengenal Istilah - Istilah dalam Blog (Backlink)

Setelah melakukan cara-cara tersebut apakah backlink yang kita tanam telah bertautan dengan link blog kita baik link homepage dan innerpage, untuk itu kita harus tahu dan mencari tahunya.

Untuk Mengetahui Backlink tersebut dapat ketahui di antaranya yaitu dengan memanfaatkan pihak ketiga seperti yang ada dibawah ini :

• http://www.iwebtool.com/backlink_checker
• http://www.backlinkwatch.com/
• http://www.domain-pop.com/

Dengan anda mengecek backlink blog anda, maka anda akan bisa melihat sejauh mana perkembangan blog anda dan seberapa banyak backlink anda perhari.

Semoga artikel singkat dan padat ini bermanfaat bagi anda.

Mengganti Email Utama Pada Blogger

Dalam dunia ini kadang kita harus dihadapkan oleh persoalan yang kecil tapi ribet untuk kita dibiarkan, begitu juga persoalan pada blogger yang kita miliki. Dari kadung sibuknya kadang kita dibenturkan dengan persoalan yang gak bisa memverifikasi blogger dengan email. Sebab terlalu lamanya email yang menjadi akun diblogger telah lama gak dibuka. Unutk itu, jika teman-teman ingin mengganti email blogger anda dengan email lain ikuti caranya seperti yang Kang Fathur berikan dibawah ini :

• Login Blogger anda;
• Pilih Setelan;
• Klik tab Permissions / Izin;
• Pada blog Authors anda tambahkan Author baru dengan mengklik Add Author / Tambahkan Penulis;

• Setelah anda menuliskan alamat email (email B) untuk mengganti email sebelumnya, klik Undang;

Hasilnya :

• Selanjutnya Signout dari email utama dan buka email B anda yang baru dimasukan;
• Klik link yang diberikan pada kotak masuk email B, secara otomatis email B anda sudah aktif menjadi author pada blog yang tadi anda pindahkan.
• Karena mau dipindahkan semuanya, jadi kita harus mengubah status author pada email B menjadi Admin, caranya kembali singout email B tersebut dan login kembali dengan email sebelumnya. Pada menu settingan permissions tadi ubah status email B menjadi admin dengan mengklik Grant admin privileges.

• Dan klik yang ditunjukkan tandah panah dibawah ini :

• Remove (Hapus) email yang akan diganti;

• Selesai.
• Sekarang akun blogger anda sudah pindah / terganti dengan email baru (email B) yang anda masukan.

Semoga berhasil.dan bermanfaat bagi anad semuanya.

Tips Memasang Arsip Calendar Seperti Wordpress

Pembuatan Arsip Calendar Seperti Wordpress tidak sama dengan pembuatan widget-widget yang lain, sebab cara ini sedikit ribet dan bisa jadi gak berhasil jika kurang teliti dan dan memahaminya.

Hebatnya widget archive calender ini, selalin tampilannya yang menarik juga bisa membuat widget-widget yang ada diblog kita terkesan simple serta dapat menunjukkan pada tanggal mana kita membuat postingan dala perbulannya.

Untuk itu jika berminat untuk membuatnya pada blog anda, sediakan kopi hangat, sebungkus rokok dan camilan secukupnya serta konsentrasi yang utuh dalam tutorial ini. Jika semua tersedia ikuti langkah yang akan Kang Fathur berikan dan tataplah mata setajam-tajamnya untuk memahami Tips 'N Trick yang ini.

LIVE DEMO

Langkah Pertama

• Seperti biasanya untuk mengedit blog, login Blogger anda;
• Pilih Rancangan;
• Tambahkan widget Arsip Blog;
• Setting seperti gambar dibawah ini :

• Jika sudah di setting Simpan widget anda.

Langkah Kedua

• Pilih tab Edit HTML;
• Jangan lupa Expand Template Widget;
• Cari kode ]]></b:skin>
• Copy paste kode CSS berikut sebelum ]]></b:skin>

#blogger_calendar {font-family:Arial,Times New Roman, Sans-Serif; font-size:12px}
#bcalendar, #bcaption {margin:0 auto;}
table#bcalendar tbody tr td {height:25px;width:20px;padding-left:4px;}
table#bcalendar, table#bcalendar tbody td {border:1px solid #ccc;}
#bcalendar tbody tr td a{color:#fff;background:#777;margin-left:-3px;padding:5px 6px 5px 5px}
table#bcalendar, #bcaption {background:#eee;border:1px solid #999;}
#portalinfo {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:11px;font-weight:normal;}
#portalinfo a {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size: 11px; font-weight: normal; text-decoration: none;}
#portalinfo a:hover {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size: 11px;font-weight: normal; text-decoration: underline;}
#bcaption {background:#ddd;padding:5px 0}
table#bcalendar thead {background:#777;color:#fff;}
table#bcalendar thead tr th {padding-left:7px;}
table#bcalendar tbody tr td a {font-weight:bold;}
#calendarDisplay ul {margin:200px;}
#calendarDisplay ul li {  background:transparent url(http://anangku.googlepages.com/blue.gif)  no-repeat !important; padding: 0 0 0 30px !important; font-size: 11px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight: normal; margin:3px 0 0 0;}
#calendarDisplay a {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #555; text-decoration: none;}
#calendarDisplay a:hover {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; color: #000; font-weight: normal; text-decoration: underline;}
#bcaption select {width:130px;}

• Selanjutnya cari kode <b:if cond='data:style == &quot;HIERARCHY&quot;'>
• Atau jika tidak ketemu / tidak ada cari kode ini <b:if cond='data:style == "HIERARCHY">
• Jika ketemu scroll roll kebawah sampai pada kode </b:widget> atau seperti kode dibawah ini :

    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div>
  <b:include name='quickedit'/>
  </div>
</b:includable>
<b:includable id='flat' var='data'>
  <ul class='flat'>
    <b:loop values='data:data' var='i'>
      <li class='archivedate'>
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
      </li>
    </b:loop>
  </ul>
</b:includable>
<b:includable id='menu' var='data'>
  <select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
    <option value=''><data:title/></option>
    <b:loop values='data:data' var='i'>
      <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
    </b:loop>
  </select>
</b:includable>
<b:includable id='interval' var='intervalData'>
  <b:loop values='data:intervalData' var='i'>
      <ul class='hierarchy'>
        <li expr:class='&quot;archivedate &quot; + data:i.expclass'>
          <b:include data='i' name='toggle'/>
          <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
            <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
          <b:if cond='data:i.data'>
            <b:include data='i.data' name='interval'/>
          </b:if>
          <b:if cond='data:i.posts'>
            <b:include data='i.posts' name='posts'/>
          </b:if>
        </li>
      </ul>
  </b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
  <b:if cond='data:interval.toggleId'>
  <b:if cond='data:interval.expclass == &quot;expanded&quot;'>
    <a class='toggle' href='javascript:void(0)'>
      <span class='zippy toggle-open'>&#9660;&#160;</span>
    </a>
  <b:else/>
    <a class='toggle' href='javascript:void(0)'>
      <span class='zippy'>
        <b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
          &#9668;&#160;
        <b:else/>
          &#9658;&#160;
        </b:if>
      </span>
    </a>
  </b:if>
 </b:if>
</b:includable>
<b:includable id='posts' var='posts'>
  <ul class='posts'>
    <b:loop values='data:posts' var='i'>
      <li><a expr:href='data:i.url'><data:i.title/></a></li>
    </b:loop>
  </ul>
</b:includable>
</b:widget>

• Block kode diatas dan ganti kode berikut :

<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
<div id='blogger_calendar'>
<table id='bcalendar'><caption id='bcaption'>
</caption>
<thead><tr><th abbr='Minggu' scope='col' title='Minggu'>M</th>
<th abbr='Senin' scope='col' title='Senin'>S</th>
<th abbr='Selasa' scope='col' title='Selasa'>S</th>
<th abbr='Rabu' scope='col' title='Rabu'>R</th>
<th abbr='Kamis' scope='col' title='Kamis'>K</th>
<th abbr='Jumat' scope='col' title='Jumat'>J</th>
<th abbr='Sabtu' scope='col' title='Sabtu'>S</th>
</tr></thead>
<tfoot><tr>
<td class='pad'/>
<td class='pad' colspan='3' id='next'/>
</tr></tfoot>
<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>
</table><br/>
<div id='portalinfo'/>
<div id='calLoadingStatus' style='display:none; text-align:center;'>
<b>Loading...</b>
</div>
<div id='calendarDisplay'/>
</div>
<script src='http://zonaonline.googlecode.com/files/archive_calenderwordpress.js' type='text/javascript'/>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' expr:href='data:widget.actionUrl + "&amp;action=toggle" +       "&amp;dir=close&amp;toggle=" + data:interval.toggleId +       "&amp;toggleopen=" + data:toggleopen'>
<span class='zippy toggle-open'>&#9660;&#160;</span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + "&amp;action=toggle" +         "&amp;dir=open&amp;toggle=" + data:interval.toggleId +         "&amp;toggleopen=" + data:toggleopen'>
<span class='zippy'>&#9658;&#160;</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='flat' var='data'>
 <div id='bloggerCalendarList'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</div>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
(<span class='post-count'><data:i.post-count/></span>)
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
</b:widget>

• Simpan Template;
• Lihat hasilnya.

Catatan : Jangan membuang atau mengganti tulisan link Portal Informasi Online

Membuat Contact Form Dengan Mudah

Sehubungan dengan banyaknya pertanyaan tentang submit ebook yang baru di launching oleh saya tentang bagaimana cara mengirimkan ebook yang mereka buat serta disharekan. Oleh karena itu, saya akn memabagikan cara membuat Contact Us Form (Formulir Kontak Kami) dari Google Docs yang saya manfaatkan untuk submit ebook. Selain itu, dari Google Docs Anda juga dapat membuat polling atau survei, spreadsheet, dll.

LIVE DEMO

Banyak fitur yang bisa dibuat sesuai dengan kebutuhan anda masing-masing, berikut cara membuat Kontak Form (Contact Us form) sederhana dari Google Docs:

• Kunjungi docs.google.com 
• Masuk/login dengan ID Gmail dan password Anda.
• Kunjungi  link ini untuk memilih template form
• Pada "Contact us" website form (paling atas)
• Klik Use this Template. 

- Apabila format sudah cocok, edit judul dan deskripsi (paling atas) dan klik Save.
- Apabila ingin merubah tampilan/tulisan, atau daftar isian/pertanyaan, Anda dapat mengeditnya dengan mengarahkan mouse pada yang akan diedit dan klik tanda pensil.
- Untuk menghapus salah satu kotak isian, arahkan mouse pada kotak dan klik ikon tong sampah.
- Untuk merubah urutan isian/pertanyaan ke atas atau ke bawah, arahkan dan klik kiri mouse pada yang akan dipindah dan naik atau turunkan kotak isian.
- Klik Save/Simpan (kanan atas). Selesai.

Menerapkan pada blogger

1. Klik More Actions 
2. Klik Embed/Tempel
3. Copy/paste kodenya dan masukkan ke artikel atau halaman statis blog Anda.

Semoga bermanfaat bagi anda semua.

Cara Simple Membuat Sitemap / Daftar Isi

Dalam Sebuah Blog atau Website sering dikenal yang namanya Sitemap atau dibilang daftar isi. Ini bertujuan agar pengunjung lebih mudah dalam mencari isi yang terkandung dalam blog. Kebanyakan meraka pengguna blog menampilkan sitemap ini pada halaman posting.



Live Demo

Pada kesempatan akhir Tahun 2011 ini Kang Fathur akan memberikan tips mudah untuk membuat semua ini. Ikuti langkahnya sebagai berikut :

• Login Blogger anda;
• Pilih Posting dan pilih tab Entri Posting;
• Jangan lupa pilih Edit HTML;
• Copy paste kode dibawah ini

<script src="http://zonaonline.googlecode.com/files/sitemap_1.js">
</script><br>
<script src="http://kang-fathur.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

• Terbitkan Entri

Catatan : Ganti http://kang-fathur.blogspot.com dengan URL Blog anda

Semoga bermanfaat bagi anda pengunjung setia blog Kang Fathur ini. Happy New year  2012

Menampilkan dan Menyembunyikan Widget Pada Blog

Para pekerja blogger kebanyakan akan terus berkreasi dari hasil hasil yang berhasil diketahui, baik dari dunia online, bertanya kepada teman ataupun saran yang berhasil dibaca dari ebook yang dibeli.

Hal ini memang mengasyikkan terlebih saat kita memodifikasi template blog yang kita sayangi. untuk itu, pada tutorial kali ini akan dibahas tentang memodifikasi blog dengan menghilangkan widget atau gadget pada halaman tertentu. Suatu contoh yang pernah saya bahas pada artikel sebelumnya disini.

Akan tetapi pada tutorial tersebut cuma dibahas cara menyembunyikan saja. Kali ini akan diberikan Tips dan Trik menghilangkan serta menampilkan widget dari halam yang kita tentukan.

1. Menampilkan Widget Hanya Pada Homepage/Halaman Utama :

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

2. Menyembunyikan Widget Pada Homepage/Halaman Utama :

<b:if cond='data:blog.url != data:blog.homepageUrl'>
==WIDGET ANDA===
</b:if>

3. Menampilkan Widget hanya Pada Itempages/Post :

<b:if cond='data:blog.pageType == "item"'>
==WIDGET ANDA===
</b:if>

4. Menyembunyikan Widget Pada Itempages/Post :

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

5. Menampilkan Widget hanya Pada Archivepages :

<b:if cond='data:blog.pageType == "archive"'>
==WIDGET ANDA===
</b:if>

6. Menyembunyikan Widget Pada Archivepages :

<b:if cond='data:blog.pageType != "archive"'>
==WIDGET ANDA===
</b:if>

7. Menampilkan Widget hanya Pada Staticpages :

<b:if cond='data:blog.pageType == "static_page"'>
==WIDGET ANDA===
</b:if>

8. Menyembunyikan Widget Pada Staticpages :

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

9. Menampilkan Widget pada URL Postingan Tertentu :

<b:if cond='data:blog.url == "Alamat Postingan"'>
==WIDGET ANDA===
</b:if>

10. Menyembunyikan Widget pada URL Postingan Tertentu :

<b:if cond='data:blog.url != "Alamat Postingan"'>
==WIDGET ANDA===
</b:if>

Catatan : Untuk tulisan Alamat Postingan silakan ganti dengan alamat URL postingan yang diinginkan anda.

Semoga bermanfaat bagi anda semua.

Slider Popular Post Pada Blog

Banyak kita jumpai dalam dunia blog ataupun website yang menggunakan animasi slider pada entri populer atau banyak yang bilang Popular Post. Pada tutorial sebelumnya pernah Kang Fathur bahas juga tentang penggunaan artikel terpopuler yang sering dibaca oleh pengunjung.

Animasi ini saya dapatkan pada blognya bos Abu Farhan, hanya saja saya modifikasi sesuai dengan kemauan saya. Minat untk menggunkannya diblog anda?

Anda bisa lihat pada gambar berikut, betapa variatifnya modifikasi yang Kang Fathur terapkan pada widget tersebut.

Live Demo

Jika berminat, ikuti langkahnya :

• Login Blogger anda;
• Pilih Rancangan;
• Klik tab Tambahkan Elemen (Gadget)
• Pilih HTML/JavaScript
• Copy paste kode dibawah kedalam HTML tersebut;

<style>.theme-orman.slider-wrapper{background:#FFF;border:1px solid #3D85C6;height:250px;margin:0px auto;position:relative}.theme-orman .nivoSlider{position:relative;width:460px;height:250px;margin-left:0px;background:url(http://mail.yimg.com/ok/u/assets/img/spinner-32x32-anim.gif) no-repeat 50% 50%}.theme-orman .nivoSlider img{position:absolute;top:0px;left:0px;display:none;width:460px;height:250px}.theme-orman .nivoSlider a{border:0;display:block}.theme-orman .nivo-controlNav{display:none}.theme-orman .nivo-directionNav a{display:block;width:25px;height:250px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1HwP0SEAhWYU7435KRCCxcgUw4AwKQmvGQ7tkgvF0-42eAgtpDMc7ZmkLqJzEtpVUJ3b9KAU0s9bTg38rEVNftQYwuLCJfB8-Vpqyc5ljsVJaQxB2z3JsLbr2xj6BoSZClAnfy-54aqaO/s1600/arrows.png) no-repeat 0% 50%;text-indent:-9999px;border:0;top:40px}.theme-orman a.nivo-nextNav{background-position:100% 50%;right:0px;padding-right:0px}.theme-orman a.nivo-prevNav{left:0px;padding-left:0px}.theme-orman .nivo-caption{font-family:Helvetica,Arial,sans-serif}.theme-orman .nivo-caption a{color:#fff;border-bottom:1px dotted #fff}.theme-orman .nivo-caption a:hover{color:#fff}.theme-orman .ribbon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpsHaCbZsbr_V40Lk6gDorKi4IMdIICtm39SWgaNI5TpcHjcZGGHqLFPl1D8IA1f3_SgEIevwqepkBruqyMMbTK-DIVX3ZAo8EyfUCywwllNbr4D3rmqwIJWdGlh9tvtHleYoR99LIiZX_/s1600/ribbon_karaks.png) no-repeat;width:111px;height:111px;position:absolute;top:-3px;left:-3px;z-index:300}.nivoSlider{position:relative}.nivoSlider img{position:absolute;top:0px;left:0px}.nivoSlider a.nivo-imageLink{position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}.nivo-slice{display:block;position:absolute;z-index:5;height:100%}.nivo-box{display:block;position:absolute;z-index:5}.nivo-caption{position:absolute;left:0px;bottom:0px;background:#9fc5e8;color:#00F;opacity:0.8;width:100%;z-index:8;font-weight:bold}.nivo-caption p{padding:5px;margin:0}.nivo-caption a{display:inline !important}.nivo-html-caption{display:none}.nivo-directionNav a{position:absolute;top:45%;z-index:9;cursor:pointer}.nivo-prevNav{left:0px}.nivo-nextNav{right:0px}.nivo-controlNav a{position:relative;z-index:9;cursor:pointer}.nivo-controlNav a.active{font-weight:bold}.theme-default #slider{margin:100px auto 50px auto;width:290px;height:200px}.theme-pascal.slider-wrapper,.theme-orman.slider-wrapper{}.clear{clear:both}<style>

• Tambahkan JavaSCRIPT ini sesudah kode diatas

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='http://catur-at-abu-farhan.googlecode.com/svn/trunk/nivo-slider-modified.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider();
});
</script>

• Dan tambahkan kode berikut

<div class="slider-wrapper theme-orman">
<div class="ribbon"></div>
<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-nivo-slider.js"></script>
<script style="text/javascript">
var numposts_gal = 6; //number of posts
var image_height =250; //image height
var image_width = 460; //image width
</script>
<script src="http://karak-situbondo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>

• Simpan Gadget yang baru dibuat.

Catatan :

1. Seuaikan huruf yang berwarna Merah dengan template anda.
2. Ganti angka "6" jika anda ingin mengubah banyaknya artikel atau postingan yang ditampilkan pada slider ini.
3. Ganti http://karak-situbondo.blogspot.com dengan URL blog anda.

Selamat mencoba...!!!!

Belajar CSS, HTML Menggunakan Offline HTML Editor

Masalah terbesar yang dihadapi oleh sebagian besar blogger pemula seperti Kang Fathur untuk mengedit template blogger. setelah survey yang telah dilakukan, kurangnya kesadaran dengan bahasa browser seperti CSS, XML, HTML, JavaScript dll. Meskipun ada beberapa situs online yang memiliki tutorial di bidang ini dan salah satu situs tersebut adalah www.w3schools.com Website ini sangat populer karena memungkinkan anda bermain dengan kode.

Ini memiliki Alat Editor online HTML yang memungkinkan anda melihat langsung (live preview) dari kode yang anda gunakan. Banyak pengembang menemukan tool ini sangat berguna namun memiliki seseorang pernah membayangkan bahwa anda benar-benar dapat menyalin alat ini keluar dari W3Schools dan menggunakannya offline untuk berlatih coding saat offline? Nah untungnya setelah beberapa trial and error yang kami dapat berhasil membuat alat serupa yang kami beri nama PIO HTML Editor yang berhasil saya modifikasi dari blogger luar Mohammad Mustafa Ahmedzai. Semua blogger yang memiliki kesempatan untuk bersenang-senang bermain dengan kode penting seperti CSS, HTML dan JavaScript dan belajar coding penting dalam cara yang lebih menarik.

Sekarang Anda benar-benar dapat menguji kode sebelum menambahkannya ke blogger. Intinya, anda bisa melihat terlabih dahulu blog yang dimaksudkan.

1. Alat ini tersedia sebagai perangkat lunak, serta memiliki keunggulan berikut :
2. Ia bekerja Offline di browser yang tersedia
3. Memakan waktu kurang dari sepersekian detik untuk menunjukkan live preview
4. Ukurannya sama dengan kacang yaitu 2,32 Mb
5. Kode otomatis tersimpan di browser jika PC Anda sengaja di shutdowns
6. Anda dapat kembali (undo) beberapa kali menggunakan Ctrl + Z dan maju (Redo) menggunakan Ctrl + Y

Cara Mendownload

• Klik link ini >> PIO HTML Editor
• Jendela PIO HTML Editor akan terhubung
• Sekarang anda dapat mulai menggunakannya Viia Online
• Tetapi untuk bekerja secara Offline anda perlu menyimpannya terlebih dahulu.

Untuk menyimpannya ditunjukkan pada gambar berikut

• Selesai

Petunjuk Untuk Menggunakan PIO HTML EDITOR

Alat ini terdiri dari dua ruang yaitu ruang kiri dan ruang kanan. Seperti yang ada pada gambar berikut,

Ruang kiri adalah area di mana anda dapat menambahkan kode anda dan ruang kanan adalah area dar hasil tampilan dari kode yang dimasukkan pada ruang kiri. Kode CSS ditambahkan hanya antara <style> dan </ style> dan kode HTML ditambahkan tepat di bawah </ style>

Contoh Permainan Kode ala HTML Editor Kang Fathur

Pada contoh kali ini, Kang Fathur akan menggunakan menggunakan Trik Gambar dengan Efek Keburaman (Mouse Hover) artinya, image atau gambar yang sudah diuplod akan tampak buram jika didekati oleh mouse.

img {
filter: alpha (opacity = 100);
-moz-opacity: 1.0;
opacity: 1.0;
border: 0;
}
img: hover {
filter: alpha (opacity = 30);
-moz-opacity: 0,30;
opacity: 0,30;
border: 0;
}

Sekarang untuk menerapkan efek ini untuk gambar kita akan membutuhkan kode HTML seperti di bawah ini,

<img class="kangfathur" src="https://lh5.googleusercontent.com/-t_Xzph8zlKY/TutEpnNfr7I/AAAAAAAAA6I/bxyNsHO-NDk/s400/kang_fathur.png" />

Untuk menghasilkan yang terbaik, tambahkan Kode CSS hanya antara <style> dan </ style> dan Kode HTML di bawah </ style>. Tekan tombol Lihat danlihat hasilnya di ruang kanan.  Screen shot kira-kira seperti ini,

Beberapa Tips Penting: ~

1. Undo, klik Ctrl + Z
2. Redo, klik Ctrl + Y
3. Untuk mendapatkan URL dari gambar yang disimpan dalam hard drive anda misalkan Drive F, membuka kembali Firefox browser dan ketik F: di address bar dan tekan enter. Drive yang akan terbuka dan sekarang hanya browse ke gambar itu dan klik kanan di atasnya dan kemudian klik pada Copy Link Location. Aduh! Anda punya URL. Sekarang gunakan URL ini dimanapun diperlukan selama offline anda mengedit kode.
4. Setelah anda puas dengan kode yang anda siapkan maka cukup paste kode CSS di atas ]]></ b: skin> dalam template blogger Anda dan kode HTML di mana anda ingin efek yang akan dilihat yaitu posting atau sidebar

Harapannya, bagi yang blogger pemula ini, sebaiknya menggunakan tool ini untuk tahap belajar

Semoga ini bermanfaat bagi anda semua, dan jangan lupa klik Google + dipojok kanan atas untuk membagikan artikel ini.

Free Banner Exchange For You

Sehubungan dengan banyaknya temen-temen blogger yang mengajak tukeran banner sebagai bentuk saling silaturrahmai sesama blogger. Untuk itu, Kang Fathur telah menyediakan tempat untuk saling bertukeran banner. Dan jika anda ingin bertukeran Link silkan kunjungi disini.

Sebab banyak yang menyebutkan, semakin kita sering menukerkan link / banner maka kita akan mendapatkan backlink yang sangat berpengaruh pada SEO (Search Engine Optimization) walau kita tau bahwa SEO adalah Misteri

Aturannya :

• Banner anda berukuran 125 x 125 px (jika banner anda tidak berukuran tersebut, maka admin akan tetep memasangnya dengan ukuran yang sudah ditentukan)
• Banner tidak mengandung SARA, Pornografi serta lainnya (tidak melanggar hukum)
• Memasang Banner Kang Fathur di blog anda (akan dihapus jika dikemudian hari banner Kang Fathur tidak ada diblog anda)
•  Tidak merubah semua kode HTML yang  Kang Fathur tentukan

Jika anda berminat silakan copy paste kode berikut dan konfirmsaikan dikolom komentar. Trims atas kepercayaan anda memasang Link / Banner Kang Fathur di blog anda.

================================================================

Jika Latar belakang blog anda
WARNA TERANG
script-nya yang ini :

Jika Latar belakang blog anda
WARNA GELAP
script-nya yang ini :

================================================================

Banner Anda

Blogger VS Photoshop and CorelDRAW

Akankah Blogger, Photoshop dan CorelDRAW saling berkaitan?
Setelah survey dari berbagai blogger, baik di indonesia ataupun blogger luar (internasional) jawaban yang diperoleh hampir 95% mereka mengatakan saling berkaita. Kita sepakat untuk mengatakan iya juga, gimana?

Begitu juga Kang Fathur selalu mendesign blogger blog Zona Online ini dengan Adobe Photoshop dan dipadukan dengan CorelDRAW. Menurut saya, hampir setaiap design-design gambar yang akan ditampilkan diblog perlu dimodifikasi sesuai keinginan anda. Anda dan saya jelas berbeda keinginan serta kesuakaannya.

Pada tutorial kali ini, saya akan membuat ikon RSS Feed yang berkaitan langsung dengan blogger anda.

• Langkah 1

Buatlah dokumen baru lebar 200px tinggi 200px warna latar belakang putih. Jika belum paham silakan lihat ukuran-ukran tentang photoshop disini.

• Langkah 2

Sekarang pilih Rounded Rectangle Tool dan pastikan anda memiliki pilihan set seperti gambar dibawah

• Langkah 3

Set warna Foreground menjadi #d9600f tekan dan tahan pergeseran menggambar bentuk sebagai besar sebagai dokumen seperti gambar dibawah

• Langkah 4

Sekarang tekan Ctrl + J atau klik kanan layer dan pilih berbentuk duplikat layer dari menu kecil untuk menduplikasi layer berbentuk sekarang anda harus memiliki 2 lapisan di jendela lapisan anda seperti yang dipraktekan pada contoh dibawah

• Langkah 5

Pastikan anda memiliki lapisan yang paling atas dipilih kemudian pergi ke menu utama dan pilih Edit > Free Transform atau hanya tekan Ctrl + T sekarang mengubah pengaturan untuk lebar dan tinggi sampai 97 seperti ini

• Langkah 6

• Langkah 7

Sekarang klik pada stroke dan menggunakan pengaturan berikut

• Langkah 8

Anda sekarang harus memiliki gambar berikut

• Langkah 9

Sekarang anda dapat mendownload bentuk ini saya membuat atau menggambar Anda sendiri setelah anda memiliki bentuk beban di Photoshop dan tekan D maka X pada keyboard anda untuk me-reset warna foreground menjadi putih memegang pergeseran berikutnya pada keyboard anda klik dan drag untuk menggambar bentuk seperti dibawah

• Langkah 10

Sekarang anda memiliki sendiri RSS Feed ikon yang vektor. Berarti Anda dapat mengubah ukuran tanpa kehilangan kualitas. Langkah selanjutnya adalah opsional

• Langkah 11

Untuk membuat ikon sedikit lebih menarik Kang Fathur menambahkan sinar menjadi berkilap. jika Anda ingin melakukan hal yang sama mengikuti bersama dengan langkah berikutnya. Tekan Ctrl dan klik Layer tengah disorot di bawah ini untuk membuat bagian sekitarnya

• Langkah 12

Buat Layer Baru kemudian mengisinya dengan putih dan tekan Ctrl + D untuk hapus bagian gambar anda sekarang dan jendela akan terlihat seperti lapisan.

• Langkah 13

Sekarang pilih Pen Tool dan menggunakan pengaturan berikut

• Langkah 14

Klik sekali pada sisi kiri gambar dan tahan Shift pada keyboard anda dan klik sekali di sebelah kanan sehingga anda memiliki garis lurus seperti gambar berikut

• Langkah 15

sekarang pilih Direct Selection Tool dan klik kanan serta pilih baris Add Anchor Point membuat dua seperti dibawah

• Langkah 16

Sekarang dengan Direct Selection Tool dipilih langsung klik dan tarik salah satu New Anchor Points dan memindahkan mereka satu per satu seperti dibawah ini.

• Langkah Terakhir

Sekarang klik kanan dan memilih Make Selection dari menu kecil yang muncul anda harus memiliki pilihan. Sekarang pergi ke menu utama dan pilih Select> Inverse atau tekan Shift + Ctrl + I untuk Invers Seleksi sekarang pastikan anda telah mengisi putih dari fill layer selected (lapisan paling atas) dan tekan delete pada keyboard anda dan tekan Ctrl + D untuk hapus seleksi.

Gilirannya Opacity ke bawah sekitar 20 untuk lapisan ini sekarang anda harusmemiliki sesuatu seperti gambar akhir

Memasang Twitter 'Burung Terbang' Untuk Blogger

Cara ini banyak dishare-kan temen-temen blogger yang lainnya, apalagi para mater-mater blogger. Ya, jujur aja, dari pada gak menulis artikel sama sekali disaat google akan melakukan update pagerank, mendingan tulis artikel walau gak bermutu.

Live Demo

Akan tetapi jika kita melihat social bookmark seperti twitter akan sangat berpengaru pada traffick blog kita. Untuk itu, jika ingin memasang flying twitter di blog yang kita sayangi, ikuti cara-caranya berikut.

• Buka http://www.blogger.com
• Login akun anda;
• Pilih Rancangan dan langsung menuju Edit HTML;
• Cari kode </body>
• Copy Paste kode berikut sebelum </body>

<script type="text/javascript" src="http://zonaonline.googlecode.com/files/twitter_fly.js"> </script> <script type="text/javascript"> var twitterAccount = "zonaonline"; var tweetThisText = " <data:blog.pageTitle/> : <data:blog.url/> "; tripleflapInit(); </script>

• Catatan :ganti zonaonline dengan username twitter anda
  
• Simpan template

Semoga bermanfaat bagi anda.

Mempercepat Loading Blog dengan Compress CSS

Pernah suatu ketika saat berkunjung ke blog Kang Rohman dan seperti biasanya, disana saya chating bersama temen-teman blogger yang dari luar kota (maklum, dikotaku - Situbondo jarang sekali yang minat geblog) serta ada yang bilang kalo loading blog Kang Fathur ini agak sedikit berat.

Saya akui dan sadar kalau template yang saya gunakan mengantung banyak kode CSS yang sangat berpengaruh pada loading blog.

Berbagai macam cara saya lakukan untuk meringankan loading blog, mulai dari ujung barat sampai ujung timur saya lakukan tips-tips mempercepat loading blog.

Alhasil, saya menemukan sebuah web penyedia compress CSS yang optimal. Contoh pada blog Kang Fathur sebelum di kompres, seluruh css sebesar 23 ribu kb lebih, setelah dikompres tinggal kurang dari 20 ribu kb. Kompress css berarti dipadatkan, sehingga berpengaruh ke loading yang lebih ringan dan cepat. Caranya sangat mudah sekali.

1. Cari Kode CSS pada Template

• Login Blogger anda;
• Klik tab Edit HTML;
• Backup dulu template anda dengan meng-klik Download Template Lengkap
• Cari senua kode CSS, biasanya kodenya terletak antara <b:skin><![CDATA[/* sampai sebelum kode ]]></b:skin>
• Hightlight kode CSS anda dan Copy;

2. Start Compress CSS

• Buka website penyedia compres CSS di http://cssdrive.com/index.php/main/csscompressor
• Atur Setting sebagai berikut :

1. Compression mode = pilih 'Super Compact'
2. Comments handling = pilih 'Strip ALL comments'

• Paste semua kode CSS yang sudah dicopy;
• Klik Compress-it
• Pilih Hightlight Code dan Copy
• Pastekan pada template anda dimana anda tadi mengambil kode CSS, yakni antara <b:skin><![CDATA[/* sampai sebelum kode ]]></b:skin>
• Simpan Template dan lihat hasilnya.

Selesai sudah pekerjaan mengkompress kode CSS, dan buktikan anda bisa membuat anda nyaman blogging. Semoga berhasil...!!!

Masih berat ya blog Kang Fathur? ya maklum karena kode JavaScript-nya numpuk kayak sampah dalam tong... Tapi mendingan khan?

Modifikasi Populer Posts Default Blogger

Untuk tidak memberatkan pemasangan widget pada blogger salah satunya adalah memanfaatkan widget-widget bawaan blogger (default). Sebab widget tersebut tidak menggunakan javascript yang bisa berpengaruh pada loading blog.

Seperti halnya pada tutorial kali ini akan dibahas tentang cara memodifikasi populer posts yang disediakan oleh blogger tanpa harus mengotak-atik javascript pada blog.

1. Menambahkan Default Populer Posts pada Widget

Saatnya anda memasang modifikasi Populer Posts pada widget blog anda dengan langkah seperti ini.

• Login Blogger dengan akun anda;
• Pilih Rancangan;
• Klik tab Tambahkan Elemen (Gadget);
• Pilih Populer Posts Blogger;
• Simpan Gadget.

ini ditunjukkan pada gambar berikut :

2. Menambahkan kode CSS pada Template

untuk memodifikasi tampilan Populer Posts Default Blogger, anda harus meng-copy paste kode CSS berikut sebelum tag  ]]></b:skin>

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJdb8MeCHUXgmc5E8YQQ8JOljZ-pVIIHegoh89EwWFjFTrOfC5J4e4OnC5jz-4lhhfXAAH_o1qpEZjke33rXwaprXgHT0LUoYt9YU-UBciQU-KQvPtW59pYmFR95Wnw7rQDApmQGWhits/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ECECEC;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

Catatan :

• Untuk mengganti image bullet anda silakan ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJdb8MeCHUXgmc5E8YQQ8JOljZ-pVIIHegoh89EwWFjFTrOfC5J4e4OnC5jz-4lhhfXAAH_o1qpEZjke33rXwaprXgHT0LUoYt9YU-UBciQU-KQvPtW59pYmFR95Wnw7rQDApmQGWhits/s400/261.gif
• #ECECEC merupakan background yang bisa anda ganti sendiri.
• Untuk mengganti border-nya bisa anda lihat ini #6BB5FF

Semoga ini bermanfaat bagi anda semua.

Memasang Tombol Facebook, Google+, Twitter, Stumbleupon diatas Postingan

Memasang Tombol Facebook, Google+, Twitter, Stumbleupon merupakan salah satu hal yang perlu diperhatikan oleh blogger. Disamping memperindah tampilan blog, Social Bookmarking merupakan penunjang traffck rank pada blog kesayangan kita.

Anda bisa melihat disetiap posatingan blog kang Fathur terdapat beberapa tombol pilihan yang dapat anda klik untuk mempopulerkan atikel tersebut.

Kali ini, saya memberikan tutorial untuk memasang tombol-tombol Social Bookmarking tersebut di setiap tulisan artikel yang kita posting. Langkah yang bisa anda tiru sebagai berikut :

• Login Blogger;
• Klik tombol Rancangan dan pilih Edit HTML;
• Beri Centang Expend Widget;
• Tekan tombol Ctrl + F untuk memudahkan pencarian kode

data:post.body

• Copy paste kode dibawah sebelum kode diatas ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0'>
<tr>
<td>
<a class='twitter-share-button' data-count='horizontal' data-via='Usename' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</td>
<td>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='40px'/>
</td>
<td><div style='margin-right:25px;'>
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/></div>
</td>
<td><div style='margin-right:5px;'>
<g:plusone expr:href='data:post.url' size='medium'/>
</div>
</td>
<td>
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de3b2d654f56f28' type='text/javascript'></script>
</td>
</tr>
</table>
</b:if>
<br/>

Catatan : ganti Usename dengan nama twitter anda sendiri.

Untuk menampilkan google+ silakan copy paste kode script berikut diatas </head>

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

Selamat mencoba dan semoga menjadikan blog ini dan anda menjadi SEO friendly.

Menghilangkan Logo Feedburner pada Widget

Logo Feedburner kadang tidak disenangi oleh pemilik blogger, alias biar diketahui oleh pengunjung kalau kode script yang dipake pada widget blog kita hasil karya sendiri (biar dianggap kreatif kalee...!!!)

Lah ini, yang mungkin anda cari untuk menghilangkan logo feedburner pada widget yang dipasang diblog kita. Salah satu contoh yang bisa anda lihat di blog Kang Fathur pada tab Comments, disana tampak jelas ada logo Feedburner dibawaH komentar.

Jika anda ingin menghilangkan logo tersebut silakan ikuti langkahnya yang akan dibagikan disini. Tapi sebelumnya anda bisa lihat gambat berikut.

Sebelum :

Sesudah :

Menghilangkan Logo Feedburner

Untuk kode feedburner recent posts (Artikel Terkini) biasanya terlihat seperti ini.

<script src="http://feeds.feedburner.com/blogspot/ZVDfG?format=sigpro" type="text/javascript" ></script>

Untuk kode feedburner recent comments (Komentar Terbaru) biasanya terlihat seperti ini.

<script src="http://feeds.feedburner.com/blogspot/zonaonline?format=sigpro" type="text/javascript" ></script>

Setelah anda menemukan widget yang berisi kode script feedburner, tinggal menambahkan kode CSS dibawah ini :

<style>
div #creditfooter{
display: none;
}
</style>

Mengapa pake kode itu?

Javascript yang ada di widget terlihat berisi kode CSS dan ID untuk segala sesuatu yang muncul di dalam Buzzboost. Kode JavaScript yang disediakan oleh feedburner terlihat seperti berikut:

document.write("\x3cdiv class\x3d\x22feedburnerFeedBlock\x22 id\x3d\x22blogspot/ZVDfG4610dkrupbmqv1las1fik4f294\x22\x3e");
document.write("\x3cul\x3e");
document.write("\x3cli\x3e\x3cspan class\x3d\x22headline\x22\x3e\x3ca href\x3d\x22http://kang-fathur.blogspot.com/2011/12/menyembunyikan-widget-blog-hidden.html\x22 target\x3d\x22_blank\x22 \x3eMenyembunyikan Widget Blog (Hidden Widget)\x3c/a\x3e\x3c/span\x3e");
document.write("\x3c/li\x3e");
document.write("\x3cli\x3e\x3cspan class\x3d\x22headline\x22\x3e\x3ca href\x3d\x22http://kang-fathur.blogspot.com/2011/12/setetes-darah-kita-adalah-sumber.html\x22 target\x3d\x22_blank\x22 \x3eSetetes Darah Kita Adalah Sumber Kehidupan Bagi Orang\x3c/a\x3e\x3c/span\x3e");
document.write("\x3c/li\x3e");
document.write("\x3cli\x3e\x3cspan class\x3d\x22headline\x22\x3e\x3ca href\x3d\x22http://kang-fathur.blogspot.com/2011/11/solusi-posting-foto-yang-terlalu-besar.html\x22 target\x3d\x22_blank\x22 \x3eSolusi Posting Foto Terlalu Besar pada Blog\x3c/a\x3e\x3c/span\x3e");
document.write("\x3c/li\x3e");
document.write("\x3cli\x3e\x3cspan class\x3d\x22headline\x22\x3e\x3ca href\x3d\x22http://kang-fathur.blogspot.com/2011/11/mengupas-sejarah-walisongo.html\x22 target\x3d\x22_blank\x22 \x3eMengupas Sejarah Walisongo\x3c/a\x3e\x3c/span\x3e");
document.write("\x3c/li\x3e");
document.write("\x3cli\x3e\x3cspan class\x3d\x22headline\x22\x3e\x3ca href\x3d\x22http://kang-fathur.blogspot.com/2011/11/biografi-dan-kisah-sunan-kalijaga.html\x22 target\x3d\x22_blank\x22 \x3eBiografi dan Kisah Sunan Kalijaga\x3c/a\x3e\x3c/span\x3e");
document.write("\x3c/li\x3e");
document.write("\x3cli\x3e\x3cspan class\x3d\x22headline\x22\x3e\x3ca href\x3d\x22http://kang-fathur.blogspot.com/2011/11/biografi-dan-kisah-sunan-gunung-jati.html\x22 target\x3d\x22_blank\x22 \x3eBiografi dan Kisah Sunan Gunung Jati\x3c/a\x3e\x3c/span\x3e");
document.write("\x3c/li\x3e");
document.write("\x3cli\x3e\x3cspan class\x3d\x22headline\x22\x3e\x3ca href\x3d\x22http://kang-fathur.blogspot.com/2011/11/biografi-sunan-muria.html\x22 target\x3d\x22_blank\x22 \x3eBiografi Sunan Muria\x3c/a\x3e\x3c/span\x3e");
document.write("\x3c/li\x3e");
document.write("\x3cli\x3e\x3cspan class\x3d\x22headline\x22\x3e\x3ca href\x3d\x22http://kang-fathur.blogspot.com/2011/11/biografi-sunan-giri.html\x22 target\x3d\x22_blank\x22 \x3eBiografi Sunan Giri\x3c/a\x3e\x3c/span\x3e");
document.write("\x3c/li\x3e");
document.write("\x3cli\x3e\x3cspan class\x3d\x22headline\x22\x3e\x3ca href\x3d\x22http://kang-fathur.blogspot.com/2011/11/biografi-sunan-kudus.html\x22 target\x3d\x22_blank\x22 \x3eBiografi Sunan Kudus\x3c/a\x3e\x3c/span\x3e");
document.write("\x3c/li\x3e");
document.write("\x3cli\x3e\x3cspan class\x3d\x22headline\x22\x3e\x3ca href\x3d\x22http://kang-fathur.blogspot.com/2011/11/biografi-sunan-bonang.html\x22 target\x3d\x22_blank\x22 \x3eBiografi Sunan Bonang\x3c/a\x3e\x3c/span\x3e");
document.write("\x3c/li\x3e");
document.write("\x3c/ul\x3e");
document.write(" \x3cdiv id\x3d\x22 creditfooter\x22\x3e\x3ca href\x3d\x22http://www.feedburner.com\x22 target\x3d\x22_blank\x22\x3e\x3cimg src\x3d\x22http://www.feedburner.com/fb/images/buzzboost-pwrd.gif\x22 alt\x3d\x22Headlines by FeedBurner\x22 style\x3d\x22border:0\x22/\x3e\x3c/a\x3e\x3c/div\x3e");
document.write("\x3c/div\x3e");

Lah.... kode   creditfooter ini yang mewakili gambar logo feedburner yang tampak di widget kita adalah   http://www.feedburner.com/fb/images/buzzboost-pwrd.gif

Oke, selamat mencoba dan semoga berhasil ya?