0 Cara Membuat Tombol Share Di Blog

kali ini saya akan berbagi tips sederhana yaitu Cara Membuat Tombol Share di Blog. Tombol share sangat bermanfaat diletakkan pada blog, tombol share memudahan pengunjung menyebarkan konten blog kita ke berbagai jejaring sosial tentunya ini secara langsung dan tidak langsung sebagai bentuk promosi blog kita. Nah untuk itu saya merasa tertarik untuk melakukan posting kali ini mengenai Cara Membuat Tombol Share di Blog. Cara ini dapat dilakukan dengan sangat mudah, hanya dengan hitungan detik saja, hehehe. Oke langsung saja kita menuju ke langkah-langkah pembuatannya.

1. Login ke akun Blogger Anda » Rancangan » Edit HTML » Centang Expend Widget
2. Cari Kode <div class='post-body entry-content'>
3. Letakkan kode di bawah ini di atas kode <div class='post-body entry-content'>

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

    <div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:4px 0px 30px 0px;width:100%;float:left;height:20px;'>

    <div style='float:left;padding-left:0px;font:normal 12px Georgia;font-style:Italic;'>

    </div>

    <div style='float:left;padding-left:10px;'>

    <a name='fb_share' type='button_count'/>

    <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>

    </script></div>

    <div style='float:left;padding-left:10px;'>

    <a class='google-buzz-button' data-button-style='small-count' href='http://www.google.com/buzz/post' title='Post to Google Buzz'/>

    <script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>

    </div>

    <div style='float:left;padding-left:10px;'>

    <a class='DiggThisButton DiggCompact'/>

    <script type='text/javascript'>

    (function() {

    var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0];

    s.type = &#39;text/javascript&#39;;

    s.async = true;

    s.src = &#39;http://widgets.digg.com/buttons.js&#39;;

    s1.parentNode.insertBefore(s, s1);

    })();

    </script>

    </div>

    <div style='float:left;padding-left:10px;'>

    <a class='twitter-share-button' data-count='horizontal' data-via='User Name' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
    </div>

    </b:if>

4. Ganti Tulisan merah dengan User name twitter anda
5. Save dan lihat hasilnya.

0 Cara Membuat Spoiler Pada Blog

Sudah lama saya tidak membagikan tips dan trik mengenai blog, pada kesempatan kali ini saya akan kembali membagikan suatu tips yang mungkin sudah banyak teman-teman blogger lainnya postingkan pada blog mereka. Namun tidak ada salahnya saya kembali membagikan tips ini, barangkali masih ada sahabat blogger yang membutuhkan. 

Oke, tips kali ini adalah bagaimana Cara Membuat Sploiler Pada Blog, sebelumnya kita harus tahu apa itu sploiler ?? Sploiler adalah suatu fasilitas yang dapat digunakan pada blog untuk menghemat ruang atau space pada blog, lalu bagaimana bisa ?? Sploiler ini akan menyembunyikan isi dari sploiler, apakah itu photo, tulisan, dan lainnya, dan kita dapat melihatnya hanya dengan meng klik tombol show sploiler tersebut, mudah bukan. Selain berfungsi untuk menghemat space blog, sploiler juga dapat berfungsi mempercepat loading page suatu blog. Di bawah ini adalah cara bagaimana membuat Sploiler pada Blog.

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul Sploiler</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

  Isi dari Sploiler

</div></div></div></div>

Cara penggunaan: Copy kode sploiler di atas dan anda bisa meletakkan sploiler pada widget atau pada postingan blog, bahkan juga bisa di forum-forum. Tuliskan judul dan isi dari sploiler sesuai dengan keinginan anda.

2 Cara Mengetahui Nilai Harga Blog Anda

BIZ INFORMATION adalah situs web yang menyediakan layanan online yang mampu menyajikan perkiraan nilai sebuah situs, informasi,dan data pengunjung suatu situs dan informasi situs yang berguna lainnya.Untuk mengetahui informasi serta nilai perkiraan suatu situs, kita hanya perlu memasukkan alamat URL situs tersebut pada kotak yang disediakan. Kemudian kita hanya perlu menekan button “NILAI” dan kemudian menunggu beberapa detik untuk mendapatkan informasi yang lengkap dari situs tersebut.

Informasi yang ditampilkan antara lain :

1. Nilai Situs
2. Titik Halaman Harian
3. Pengunjung Harian
4. Peringkat Dunia
5. Peringkat Indonesia
6. Jenis Web
7. Page Rank
8. Jumlah Halaman
9. Tautan Eksternal
10. Nilai Metrik
11. Pengenalan Situs
12. Sejak Online Situs
13. Dll

Untuk mencobanya, silakan ikuti langkah-langkah berikut ini.

Pertama, buka halaman http://bizinformation.org/id/

Kedua, masukkan alamat URL situs/blog pada kotak yang disediakan

Ketiga, klik “NILAI”

Keempat, tunggu beberapa saat untuk mendapatkan hasilnya.

Berikut contoh hasil dari informasi blog ini. Dan dari penilaian layanan tersebut BLOG ini mempunyai nilai perkiraan 17.38 juta. Sungguh angka yang menakjubkan. Sayangnya hanya berupa angka saja.

Selamat Mencoba!!

0 Mengganti Tulisan Older Post dan Newer Post Dengan Gambar

Seperti di lihat pada gambar ini.. disana terdapat tulisan Older, Home, dan Newer. Tulisan itu dapat kita ganti dengan kata lainya, atau dengan gambar/icon. untk memulainya kita harus bisa mengubah-ubah sedikit html yang ada pada template blog kita,jangan kawatir karena saya akan menuntun anda.

langkah yang harus dijalani
1. Masuk ke akun blogger anda

2. Cari kode ini:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>

3. Ganti kode tersebut menjadi seperti ini:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'> <img src="Image URL" /></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'> <img src="Image URL" /></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'> <img src="Image URL" /></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'> <img src="Image URL" /></a>
</b:if>
</b:if>

</div>

Keterangan:

1. Disana terdapat tulisan yang berwarna Hijau Ganti lah kode tersebut menjadi <img src="Image URL" /> nah ganti Image Url dengan lokasi/Url gambar/icon yang anda miliki.

2. Anda bisa mencari Icon-Icon tersebut di- Icon Archive

3. Selamat mencoba

0 Memberi Emoticon Pada Komentar Blog

Dengan adanya emoticon di kotak komentar tentunya akan membuat blog menjadi lebih hidup. Para komentator menjadi lebih bisa mengekspresikan perasaannya melalui icon2 (emoticon). Kalau di wordpress mungkin feature ini sudah tersedia. Tapi untuk blogspot kita harus mengotak-atik dan mengakalinya supaya bisa menampilkan emoticon di area komentar. Gimana? kamu mau memasang emoticon ini?

Seperti biasanya, di trik ini akan diberikan dua macam emoticon, yaitu emoticon kucing (seperti punyaku ini) dan emoticon yahoo. Kamu tinggal pilih mana yang kamu suka.

Emoticon Yahoo :



Emoticon Kucing :



Gini nih cara membuatnya :

1. Pertama login ke blogger, trus ke "Layout (Tataletak) --> Edit HTML "
2. Beri tanda centang pada kotak "expand widget template"
3. Lalu letakkan script berikut sebelum kode </body>

Untuk Emoticon Yahoo :

<script src='http://kendhin.890m.com/emoticon/smile1.js' type='text/javascript'/>

Untuk Emoticon Kucing :

<script src='http://kendhin.890m.com/emoticon/smile2.js' type='text/javascript'/>

4. Kemudian cari kode berikut ini :

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

5. Kalo sudah ketemu letakkan kode2 berikut setelah kode <p class='comment-footer'>

Ini untuk Yahoo emoticon :

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))
</b>

Kalo mo yang emoticon kucing pake yang ini :

<b><img border='0' src='http://kendhin.890m.com/emoticon/capek.gif'/>
:f
<img border='0' src='http://kendhin.890m.com/emoticon/bigsmile.gif'/>
:D
<img border='0' src='http://kendhin.890m.com/emoticon/hi.gif'/>
:)
<img border='0' src='http://kendhin.890m.com/emoticon/kagum.gif'/>
;;)
<img border='0' src='http://kendhin.890m.com/emoticon/love.gif'/>
:x
<img border='0' src='http://kendhin.890m.com/emoticon/malu.gif'/>
:$
<img border='0' src='http://kendhin.890m.com/emoticon/marah.gif'/>
x(
<img border='0' src='http://kendhin.890m.com/emoticon/bingung.gif'/>
:?
</b>
<br/>
<b>
<img border='0' src='http://kendhin.890m.com/emoticon/mumet.gif'/>
:@
<img border='0' src='http://kendhin.890m.com/emoticon/muntah.gif'/>
:~
<img border='0' src='http://kendhin.890m.com/emoticon/mentok.gif'/>
:|
<img border='0' src='http://kendhin.890m.com/emoticon/ngakak.gif'/>
:))
<img border='0' src='http://kendhin.890m.com/emoticon/sedih.gif'/>
:(
<img border='0' src='http://kendhin.890m.com/emoticon/senang.gif'/>
:s
<img border='0' src='http://kendhin.890m.com/emoticon/tolong.gif'/>
:((
<img border='0' src='http://kendhin.890m.com/emoticon/wow.gif'/>
:o </b>

6. Kalo sudah trus di "save" dan coba lihat hasilnya

Tambahan
* Kadang-kadang ada beberapa template memiliki kode yang beda. Kalau caranya sudah dilaksanakan dengan benar tapi hasilnya tidak terjadi apa2 atau kodenya tidak berubah menjadi emoticon, kemungkinan itu karena Kode untuk templatenya berbeda atau bisa juga karena mugnkin hosting untuk menaruh file emoticon dan javascriptnya sedang bermasalah.

0 Cara Membuat Vertikal Menu Di Blog

Vertikal Menu merupakan pilihan menu yang biasa dipakai pada website-website yang mempunyai banyak pilihan menu di dalamnya, vertikal menu berbentuk pilihan menu yang turun kebawah jika kita sentuh dengan menggunakan mouse kita.. dengan kita menggunakan vertikal menu ini maka kita akan dapatkan pilihan menu yang banyak untuk blog kita

Nah saya akan memberikan cara pembuatannya pada blog.. ikuti caranya dan langkah-langkah nya dengan seksama, dengan anda mengikuti pastinya anda tidak akan mendapatkan kesulitan dalam pengeditan kode CSS nya

Masuk ke Akun Blogger Anda dan pilih layout terus cari Edit HTML

Masukkan kode CSS ini di atas kode ]]></b:skin>

/*Vertikal Menu
---------------------------------*/
.vertikalmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* lebar dari menu vertikal*/
}
.vertikalmenu li{
border-bottom: 1px solid white;
}
.vertikalmenu li a{
background: #000000 ; /*warna dari menu vertikal*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0;
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black;
}
.vertikalmenu li a:visited, .vertikalmenu li a:active{
color: white;
}
.vertikalmenu li a:hover{
background-color: #737373; /*warna setelah pointer diarahkan (hover)*/
color: white;
border-bottom: 1px solid black;
}

Kemudian SAVE

Anda bisa mengganti warna yang ada dengan warna yang anda sukai

Selanjutnya pilih Page Element dan kli add Page elemnet pilih lagi HTML/java Script

Masukkan kode ini didalmnya

<ul class="vertikalmenu">
<li><a href="/">» HOME</a></li>
<li><a href="http://your blog name.blogspot.com">» Tutorial Blog</a></li>
<li><a href="http://your blog name.blogspot.com">» Bisnis Online</a></li>
<li><a href="http://your blog name.blogspot.com">» Free Template</a></li>
<li><a href="http://your blog name.blogspot.com">» Handphone</a></li>
<li><a href="http://your blog name.blogspot.com">» Komputer</a></li>
</ul>

Ganti your blog name dengan nama blog milik anda
Klo sudah klik save

selesai, selamat mencoba

0 Tips Mengedit HTML Blogspot

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

Berikut ini beberapa tips untuk edit HTML bogger:

1. Backup Template

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

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

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

3. Tips Mempermudah Pencarian

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

4. Tips Menghadapi Error Yang Muncul

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

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

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

0 Template Chibi Transparent 1.0 For Blogger

For Blogger, Templates Blogger :

Design and Creator : Muhammad Fadhiil Rachman
Last Update              : Kamis, 4 Agustus 2011
Template Name       : Chibi Transparent Version 1.0

Fiture :
[-] Chibi Transparent Template
[-] Chibi Blue Matrix Background
[-] Music Player
[-] Auto Read More (Jarang ada)

Tutorial :
1. Download dulu dari MFR Data
2. Extract file .exe menjadi folder.
3. Masuk ke Blogger kamu.
4. Lalu menuju "Rancangan".
5. Centang "Expand Template Widget"
6. Pada Backup/Restore Template, pilihlah browse.
7. Ambil file "Chibi Transparent V. 1.0" dan Unggah.
8. Jika ada Notice pilih "Pertahankan" dan SELESAI!

0 Cara Memasang Alexa Rank Di Blog

Salah satu cara meningkatkan alexa rank adalah dengan cara memasang widget alexa di blog atau websiste kita. alexa rank akan membuat peringkat berdasarkan banyaknya jumalh pengunjung blog atau website, semakin banyak pengunjugn terhadap suatu blog atau web, maka alexa rank akan semakin baik. bagi anda yang berminat memasangwidget alexa di blog,berikut panduan langkah-langkahnya :

Langkah Pertama

1. kunjungi situs alexa

2. klik tab Site Tools

3. dibagian bawah klik Site Widgets masukan url blog anda pada kotak kosong yang disediakan lalu klik Bulid Widget

4. ada 3 kode yang akan muncul setelah anda klik Bulid Widget copy dan pastekan kode yang dipilih kedalam notepad. simpan kode tersebut agar nanti dimasukkan kedalam blog.

Langkah Kedua

1. login ke blogger dengan ID anda

2. klik Tata Letak

3. Klik tab Elemen Laman

4. Klik Tambah Gadget --> HTML/JavaScript

5. Pastekan kode yang disimpan tadi kedalam content HTML/JavaScript

6. Simpan.

Sedikit catatan : alexa rank terbilang cepat dalam melakukan update sehingga hasilnya akan terlihat dalam beberapa hari saja. satu yang paling utama dalam menaikan ranking alexa adalah dengan mencoba meningkatkan trafik atau jumlah kunjungan ke blog kita. selamat mencoba!