Membuat Like Facebook, Twitter, Google+1 di Postingan Blog

Membuat, Memasang dan Menambahkan Like Facebook, Tweet, Google+1 di Postingan Blog.

Share button / tombol berbagi seperti facebook like, tweet dan Google+1 merupakan salah satu aspek penunjang dalam meningkatkan traffic kunjungan ke blog kita. Apalagi blogger pemula seperti Saya yang masih Nol Besar pemahamannya tentang SEO, mungkin hanya mimpi untuk menjadi nomor 1 di pencarian google. Maka dari itu kita bisa maksimalkan traffic kunjungan blog kita lewat social bookmarking seperti facebook dan twitter.

Langsung saja ya gak usah basa basi lagi dah, hehehe....

1. Masuk ke akun blogger Anda/ dasbor
2. Klik Rancangan/Design > Edit HTML> centang Expand Template Widget. Jangan lupa untuk memback up template sobat dengan cara mendownloadnya.
3. Masukkan dulu kode di bawah ini tepat di atas kode </head>

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

kode ini adalah kode javascript untuk memunculkan tombol Google+1, jika kode tersebut sudah ada, maka  tidak perlu dimasukkan lagi.

4. Kemudian Copy kode di bawah ini ;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0'><tbody><tr>
    <td><a class='twitter-share-button' data-count='horizontal' data-via='belajarblogspot' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></td>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=85&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:85px; height:22px;'/></td>
<td><!-- script begin here -->
<script src='http://www.lintas.me/assets/scripts/widget_v2.js?uid=4f49908afb8252a83a003d79' type='text/javascript'/>
<script type='text/javascript'>
lintasme.init(&#39;right&#39;); // options : left, top, bottom, right
</script>
<!-- End script --></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td>
</tr></tbody></table>
    </b:if>

Ganti kode twitter belajarblogspot dengan nama akun twitter sobat. Sobat juga bisa menghapus kode berwarna biru, jika mau. Widget tersebut adalah kode javascript untuk web directory lintas.me

5. Masukkan kode di atas pada kode-kode ini:

• jika ingin memasang share button di bawah postingan blog cari kode berikut, dan masukkan kode tadi, tepat dibawahnya kode ini.

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

• Jika ingin memasang share button diatas postingan / di bawah judul postingan, masukkan tepat di bawahnya kode berikut,

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

Kemudian klik pratinjau terlebih dahulu, jika tidak error berarti share button sudah terpasang di blog.  Klik Simpan Template. Share button ini akan ditampilkan di halaman posting bukan di menu utama / homepage. Oleh karena coba buka salah satu postingan blog sobat untuk melihatnya apakah sudah bekerja dengan baik.

Oke, Bagaimana... sudah terpasang? Jika belum bisa, Julak siap membantu. Selamat Berblogging mania, hehehe. Salam Blogger. Jangan lupa di share, hehehe...

Cara Menambahkan Tabview Section Pada Sidebar Blog

Terkadang ada untungnya ketika disuruh membuat blog oleh saudara. Meski dibayar ku nuhun alias gratis tapi selalu dapat ilmu baru tatkala mengobrak-abrik template. Seperti kejadian sekitar dua bulan lalu ketika membuatblog ini, ada tiga temuan yang bermanfaat dan menjadi perbendaharaan ilmu ngeblog saya, salah satunya adalah membuat Tabview Section.

Dibandingkan dengan Tabview Widget, yang cukup merepotkan ketika melakukan pengisian kontennya karena berada dalam satu widget, Tabview Section lebih mudah dan praktis karena selain bisa terdiri dari beberapa widgetdalam satu Tabmenu, juga bisa memasukkan gadget tipe non-HTML/JavaScript sehingga membuat kita leluasa dalam mengisikan konten-konten kedalam widget-widget tersebut.

Lalu bagaimana cara membuat Tabview Section ini? Caranya gampang saja, kamu tinggal mengikuti langkah-langkah berikut. Kelihatannya memang ribet karena penjelasannya cukup panjang, tapi jika dipraktekkan akan terasa mudah. Coba saja...

Langkah Pertama

• Login ke akun Blogger kamu.
• Dari halaman Dasbor, pilih Rancangan - Edit HTML.
• Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.
• Cari kode ]]></b:skin> (gunakan Control F atau F3).
• Kopi CSS berikut lalu tempelkan (paste) di atas kode ]]></b:skin> tadi (sebaiknya diletakkan di bawah CSS untuk sidebar)
  

  /*-- Tabview Section -- */

  .tabs-widget {

  list-style:none;

  list-style-type:none;

  margin:0;

  padding:0;

  height:24px;

  border-bottom:1px solid #A4A4A4;

  }

  .tabs-widget li {

  list-style:none;

  list-style-type:none;

  margin:0 0 0 4px;

  padding:0;

  float:left;

  }

  .tabs-widget li:first-child {margin:0}

  .tabs-widget li a {

  background-color:#d4d4d4;

  color:#000;

  text-shadow:1px 1px 1px #fff;

  border-top-left-radius:7px;

  border-top-right-radius:7px;

  -moz-border-radius-topleft:7px;

  -moz-border-radius-topright:7px;

  -khtml-border-radius-topleft:7px;

  -khtml-border-radius-topright:7px;

  -webkit-border-top-left-radius:7px;

  -webkit-border-top-right-radius:7px;

  border-right: 2px solid #adadad;

  padding:5px 10px;

  display:block;

  text-decoration:none;

  font:bold 11px Arial,Helvetica,Sans-serif;

  text-transform:uppercase;

  }

  .tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current {

  background-color:#A4A4A4;

  color:#000;

  text-shadow:1px 1px 1px #fff;

  border-top-left-radius:7px;

  border-top-right-radius:7px;

  -moz-border-radius-topleft:7px;

  -moz-border-radius-topright:7px;

  -khtml-border-radius-topleft:7px;

  -khtml-border-radius-topright:7px;

  -webkit-border-top-left-radius:7px;

  -webkit-border-top-right-radius:7px;

  border-right: 2px solid #adadad;

  text-decoration:none;

  }

  .tabs-widget-content {margin-top:5px; background:#F4F4F4}

  .tabviewsection {margin:0 0 2px 0}

• Setelah itu letakkan sumber scriptberikut di bawah]]></b:skin>.
  

  <script src='http://enes-sc.googlecode.com/files/jquery151.js' type='text/javascript'/>

  <script src='http://enes-sc.googlecode.com/files/tabsectionplugin.js' type='text/javascript'/>

  Catatan:
  

  • Bagi yang menggunakan frame work dari mootools, letakkan scripttersebut di bawah script mootools.
  • Bagi yang menggunakan script jQuery, seperti pada perintah Top/Down Page, hapus salah satunya.

• Kemudian cari kode untuk widget sidebar, seperti berikut:
  

  <b:section class='sidebar' id='sidebar1' preferred='yes'>

• Setelah ketemu, kopi dan tempelkanscript berikut di atasnya:
  

  <div class='tabviewsection'>

  
  

  <script type='text/javascript'>

  jQuery(document).ready(function($){

  $(&quot;.tabs-widget-content-widget-enes_sc-01-id&quot;).hide();

  $(&quot;ul.tabs-widget-widget-enes_sc-01-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();

  $(&quot;.tabs-widget-content-widget-enes_sc-01-id:first&quot;).show();

  
  

  $(&quot;ul.tabs-widget-widget-enes_sc-01-id li a&quot;).click(function() {

  $(&quot;ul.tabs-widget-widget-enes_sc-01-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);

  $(this).addClass(&quot;tabs-widget-current&quot;);

  $(&quot;.tabs-widget-content-widget-enes_sc-01-id&quot;).hide();

  var activeTab = $(this).attr(&quot;href&quot;);

  $(activeTab).fadeIn();

  return false;

  });

  });

  </script>

  
  

  <ul class='tabs-widget tabs-widget-widget-enes_sc-01-id'>

  <li><a href='#widget-enes_sc-01-id1'>Tabmenu 1</a></li>

  <li><a href='#widget-enes_sc-01-id2'>Tabmenu 2</a></li>

  <li><a href='#widget-enes_sc-01-id3'>Tabmenu 3</a></li>

  <li><a href='#widget-enes_sc-01-id4'>Tabmenu 4</a></li>

  </ul>

  
  

  <div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id1'>

  <b:section class='sidebar' id='sidebartab1' showaddelement='yes'>

  <b:widget id='HTML73' locked='false' title='' type='HTML'/>

  </b:section>

  </div>

  
  

  <div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id2'>

  <b:section class='sidebar' id='sidebartab2' showaddelement='yes'>

  <b:widget id='HTML74' locked='false' title='' type='HTML'/>

  </b:section>

  </div>

  
  

  <div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id3'>

  <b:section class='sidebar' id='sidebartab3' showaddelement='yes'>

  <b:widget id='HTML75' locked='false' title='' type='HTML'/>

  </b:section>

  </div>

  
  

  <div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id4'>

  <b:section class='sidebar' id='sidebartab4' showaddelement='yes'>

  <b:widget id='HTML76' locked='false' title='' type='HTML'/>

  </b:section>

  </div>

  
  

  </div><!-- end tabviewsection -->

  <div style='clear:both;'/>

  
  

  Catatan:
  

  • Ubahlah judul Tabmenu 1, Tabmenu 2, Tabmenu 3, dan Tabmenu 4sesuai dengan judul menu yang diinginkan.
  • Jika sidebar blog kamu kecil, hapuslah salah satu Tabmenu dengan cara menghapus kode, misalnya Tabmenu4:
    

    <li><a href='#widget-enes_sc-01-id4'>Tabmenu 4</a></li>

    
    dan kode:
    

    <div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id4'>

    <b:section class='sidebar' id='sidebartab4' showaddelement='yes'>

    <b:widget id='HTML76' locked='false' title='' type='HTML'/>

    </b:section>

    </div>

  • Jika ingin menambahkan, tambahkan kode-kode seperti pada cara penghapusan, hanya saja kamu harus mengubah id4 menjadi id5, id6, dst. Juga pada id='sidebartab4' harus diubah menjadi sidebartab5, sidebartab6, dst. Begitu juga pada id='HTML76' harus diubah menjadi HTML77, HTML78, dst.

• Simpan hasil kerjaan kamu. Jika ingin melihat hasil sementara, lakukan pratinjau, hasilnya akan tampak seperti ini:
  

Langkah Kedua

• Setelah disimpan, klik Elemen Laman
• Perhatikan perubahan yang terjadi, seperti gambar berikut:
  
• Edit atau masukkan widget-widget yang kamu kehendaki pada blok-blok Tabmenu yang ada.
  

  Catatan:

  • Pada setiap Blok Tabmenu, kamu bisa menambahkan lebih dari satuwidget, termasuk yang non-HTML/JavaScript (bawaan blogger).
  • Jika ukuran tinggi widget pada setiap blok ingin berukuran sama, lakukan pengeditan pada HTML template. Caranya seperti membuat scrol pada bloglist, yaitu dengan mengubah kode:
    

    <div class='widget-content'>

    
    
    menjadi:

    <div class='widget-content' style='overflow:auto; height:250px'>

• Jika sudah selesai, ucapkan alhamdulillah...

Ok, segitu aja informasinya, sob... Semoga bermanfaat...

Catatan Tambahan:
Jika kamu ingin membuat Tabview Section ini lebih dari satu, seperti pada blog ini, kamu tinggal mengkopikan script ketiga dan meletakkannya di tempat yang kamu inginkan. Hanya saja kode sc-01 harus kamu ubah menjadi sc-02, sc-03, dst.

Sumber

Ditulis oleh

Kang eNeS

Minggu, 19 Juni 2011. Jam 07:03

Cara Membuat Sidebar Berada Di Kiri Dan Kanan

cara membuat Sidebar Berada Di Sebelah Kiri Dan Kanan.



Baik,Untuk totorial saya kali ini akan menjelas kan bagai mana cara membuat sidebar berada di kiri dan kanan..

Untuk membuat kolom sidebar yang baru dibuat tidaklah terlalu sulit, sobat hanya perlu menempatkan kode float menjadi di kiri (left) serta penambahan kode padding-right agar kolom kiri tidak bertabrakan dengan kolom posting. Bingung? sengaja saya buat bingung Heee..


Bagi sobat yang berminat untuk menempatkan kolom sidebar di sebelah kiri, sebelum membaca artikel ini ada baiknya membaca Artikel Sebelum nya terlebih dahulu karena artikel ini merupakan lanjutan dari artikel tersebut, jika sobat langsung membaca artikel ini, saya khawatir sobat menjadi tambah bingung.

Sebelum memasuki kepada topik bahasan utama, saya sarankan kepada sobat yang mempraktekan teori yang akan saya tulis sebaiknya bukan pada blog utama, akan tetapi pada blog untuk percobaan. Ini untuk menghindarkan kejadian yang tidak di inginkan, sayang apabila blog yang telah di tata rapih menjadi amburadul akibat percobaan.

Baiklah, ayo kita mulai sobat, dalam hal ini saya anggap sobat sudah berhasil membuat kolom baru. Langkah pertama yang harus di ingat adalah jangan sekali-kali memberi tanda conteng pada kotak kecil di samping tulisan Expand widget Template karena apabila sobat mencontengnya akan keluar kode widget yang sangat ngejelimet. Jika pada postingan yang lalu saya menuliskan kode seperti ini :

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: right;
padding-left:10px; /* yg ini tambahan juga biar tampak ada jarak sela */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

#sidebarbaru-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}


Agar hasilnya berbeda dengan yang dulu yaitu kolom yang di buat bukan berada pada sebelah kanan, maka sobat perlu sedikit mengubah kode yang saya cetak merah menjadi seperti ini :


#sidebarbaru-wrapper {
width: 180px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}

Terlihat pada hurup yang saya cetak biru bahwa yang di ubah hanyalah dua baris kode saja, yang lainnya tidak perlu di ubah. Jika sudah selesai mengubahnya, jangan lupa untuk menutupnya dengan menekan tombolsimpan template.

Langkah selanjutnya adalah menuju ke bagian bawah template, yaitu pada bagian body, jika dulu saya menyarankan agar kode sidebaru di tempatkan seperti ini :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>

<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>



Maka apabila sidebar baru ingin di tempatkan di sebelah kiri, maka kode sidebar baru harus di pindahkan di atas kode main (posting) sehingga kodenya kira-kira akan menjadi seperti ini :



<div id='sidebarbaru-wrapper'> <!-- perhatikan yang ini -->
<b:section class='sidebar' id='sidebarbaru' preferred='ye'/'>
</div>

<div id='main-wrapper'> <!-- perhatikan yang ini -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>



Apabila sudah selesai menempatkan kode sidebar baru, silahkan akhiri dengan menekan tombol Simpan Template, selesai. Silahkan lihat hasilnya !

Tidak sulitkan sobat? semoga mudah untuk di mengerti. Untuk melihat contoh blog yang mempunyai sidebar di samping kiri dan kanan, sobat bisa membuktikannya di sini!

Cara Daftar Alexa Terkini

Posted by admin on May 13, 2012 in Tutorial Blog | 0 comments

alexa, apakah itu?  Alexa adalah suatu  alat”robot” untuk mengetahui perkembangan suatu website atau blog. Dari Alexa kita dapat memonitor beberapa menu yang berhubungan dengan blog kita, Alexa sendiri ada tiga macam dan salah satunya untuk yang gratisan. nah berikut ini akan saya berikan tutorial daftar alxe terkini.
Masuk ke sini Alexa.com pilih site tools terus akan muncul seperti di bawh ini

Alexa

pilih claim your site akan muncul seperti di bawah ini
masukkan alamat blogmu dan klik claim your site. Setelah itu kalian akan dibawa ke halaman login, masuk kan saja email anda dan paswwod dan klik. buka akun email anda dan klik link alexa kemudian ikuti langkah selanjutnya. Apa bila bertemu seperti gambar dibawah ini

pilih yang FREE dan ikuti proses selanjutnya “bila kesulitan si SKIP saja” nanti akan muncul seperti gambar di bawah ini
pilih pilihan yang Option 2, cari yang ada tulisan meta tag, kemudian kalian copy kode yang ada di dalam tanda kurung <> beserta tanda kurungnya. Selanjutnya buka edit HTMA blog anda dan paste kan di bawah <head> lalu save. kembali ke halaman alesa klik verivy maka blog anda sudah teregister di alexa.