Cara Membuat Buku Tamu Hide Dari Atas

Kembali lagi berbagi tentang tutorial blogger yang pada tutorial sebelumnya Membuat buku tamu tersembunyi dan Cara Menyembunyikan Widget Follow kali ini oktri akan berbagi tutorial yaitu Cara Membuat Buku Tamu Show/Hide Dari Atas, Pada prinsipnya tutorial ini sama saja dengan tutorial sebelumnya seperti tutorial cara menyembunyikan widget follow,apabila pada tutorial tersebut kita klik gambar muncul lah follow dari bawah,nah pada tutorial ini saya membuat buku tamu show hide dari atas kebalikan dari tutorial cara menyembunyikan widget follow,
Sekian gambar tutorial tersebut, Apabila ingin melihat Demo nya klik  

http://tips-blog-informasi.blogspot.com/

Untuk membuat buku tamu show/hide dari atas ikuti langkah-langkah berikut:
1. Masuk ke account Blogger kamu, pilih Layout: kemudian Page Elements.
2. Klik "Add a Gadget" yang mana saja, kemudian pilih "HTML/JavaScript",
3. Copy-paste kode di bawah ini:
<style type="text/css">

#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #33e104;
background:url(http://i846.photobucket.com/albums/ab26/arifins/fire.gif)#000000 repeat-x bottom center scroll;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
-moz-box-shadow: 0px 2px 5px 0px #f8f9b9;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>

<div class="atcontent">
<div align="center">
<div style="background:#000;">


<!-- Simpan Kode cbox atau shoutmix nya disini -->

</div>
</div>

<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i1042.photobucket.com/albums/b429/Farix_2010/CloseComment-1.png" alt="close" title="Click here to Close Cbox" /></a></div>

<span ><a href="http://www.oktri.co.cc/2011/06/cara-membuat-buku-tamu-showhide-dari.html"><div style="color: rgb(68, 68, 68);">
<span style="font-size:xx-small;">Get This Gadget</span></div></a></span>
</div></div>


<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>

<a href="javascript:showHideAT()"/><img border="0" src="http://i634.photobucket.com/albums/uu66/oktri_2009/o0c2d.png" alt="Fivers" title="Klik untuk membuka Buku Tamu" style="display:scroll;position: fixed; bottom:350px;right:0px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ; /></a>
</div>

4. SIMPAN

Catatan :

• Ganti texs berwarna merah dengan kode buku tamu anda.
• Text warna kuning merupakan position dari gambar yang kita inginkan
• Ganti teks warna biru dengan gambar yg diinginkan

Baca Selengkapnya..

Cara Setting Permalink agar SEO Friendly

Sebenarnya tip berikut ini sudah tidak asing lagi buat blogger yang telah lama malang melintang di dunia per-blog-an. Namun, bagi mereka yang baru memulai untuk terjun ke dunia ini, tentu sebuah info yang berharga. Langsung aja, check this out!
Berdasarkan glossary dari WordPress, permalink atau permanent link merupakan sumber tempat penyimpanan permanen dari sebuah artikel. Secara default, permalink pada blog WordPress memiliki struktur seperti ini:
http://www.namadomain.com/?p=123.
Dan ?p=123 merujuk pada ID post. Menurut para blogger nih, struktur seperti itu kurang SEO friendly karena judul dari artikel tidak kelihatan pada URL. Akibatnya mempengaruhi posisi artikel kita dari SERPs (Search engine Result Pages). Maka sangat dianjurkan agar sebuah blog memakai struktur permalink yang lebih SEO friendly. Untuk mensetting permalik, dapat dilakukan cara-cara berikut ini.
1. Pada dashboard akun WordPress, klik settings->permalinks.
2. Pada tab permalink settings, perhatikan common settings.
Disana terdapat beberapa settingan, maka pilihlah custom structure. Isi field tersebut dengan /%postname%/

3. Jangan lupa klik “save changes.”
Setelah permalink selesai disetting, maka URL artikel pada browser favorit kamu strukturnya akan menjadi http://namadomain.com/cara-setting-permalink-agar-seo-friendly

+add. Kamu bisa juga mengisi field custom structure tadi dengan /%category%/%postname%/ sehingga URLnya menjadi http://namadomain.com/category/cara-setting-permalink-agar-seo-friendly

Nah, masih mau memakai permalink default atau yang lebih SEO friendly? That’s up to you.
Selamat mencoba.

source:
http://hosli.web.id/cara-setting-permalink-agar-seo-friendly/

Baca Selengkapnya..

Cara Pasang Iklan PPC di Bawah Postingan

bagaimana sih caranya agar iklan PPC nya bisa berada ditempat yang strategis, alias mudah dilihat oleh pengunjung. Dan yang dibahas dibawah ini adalah blog yang sudah menerapkan Read More.

Dengan maksud, ya pastinya semakin besar kemungkinan akan diklik atau tah apalah namanya, yang penting tuh PPC-nya jadi nambah. nah salah satu area yang dimaksud yaitu area postingan kita. Karena pengunjung atau tamu yang tertarik dengan artikel kita, maka PPC mendapat kemungkinan yang besar untuk terlihat.

 contoh iklan PPC

Oke deh, berikut caranya :

• Siapkan kode iklan yang mau akan anda pasang.
• Setelah itu encode/parse kode iklan tersebut, agar bisa muncul di Blog.
• Klik di SINI untuk meng-encode kode dari iklan tersebut.
• Masukkan kode iklan tersebut kedalam kotak, lalu tekan tombol Encode.
• Lalu Login ke Blogger anda. Klik Layout -> Edit HTML.
• Jangan lupa centang pada 'Expand Widget Templates'.
• Cari kode yang ada di bawah ini :

<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Read More...</a>
</span>

• Setelah itu letakkan kode iklan PPC tersebut dibawa kode ini <b:else/>
• Kalau sudah selesai klik Save Template.
• Proses yang paling terakhir, silahkan lihat hasilnya.

 
Nb: Tambahan neh, jika anda memasang kode related post, dan ining meletakkan iklan PPC diatas related post atau yang namanya artikel yang bertautan. Maka letakkan kode iklan tersebut di bawah
Sebagai tambahan jika anda cara-memmemasang kode related post dan ingin meletakkan iklan PPC diatas related post atau artikel berkaitan. Maka letakkan kode iklannya di bawah <data:post.body/>
Kalau anda memasang kode read more biasanya ada 2 kode <data:post.body/> . Letakkan pada kode yang pertama, jika sudah simpan templatenya dan lihat hasilnya.

Selamat mencoba…

Baca Selengkapnya..

Tampilan Kotak Script Di posting

Membuat tampilan kotak scrip di postingan seperti contoh di bawah ini:
langsung di taruh di postingan tanpa harus ke edit html.

» Solid Border

TULIS SCRIPT/KODENYA DISINI

<div style="border: 2px #006400 solid; padding: 10px; background-color: #82CAFA; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

» Ridge Border

TULIS SCRIPT/KODENYA DISINI

<div style="border: 2px #006400 ridge; padding: 10px; background-color: #82CAFA; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

» Groove Border

TULIS SCRIPT/KODENYA DISINI

<div style="border: 2px #006400 groove; padding: 10px; background-color: #82CAFA; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

» Inset Border

TULIS SCRIPT/KODENYA DISINI

<div style="border: 2px #006400 inset; padding: 10px; background-color: #82CAFA; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

» Outset Border

TULIS SCRIPT/KODENYA DISINI

<div style="border: 2px #006400 outset; padding: 10px; background-color: #82CAFA; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

» Double Border

TULIS SCRIPT/KODENYA DISINI

<div style="border: 2px #006400 double; padding: 10px; background-color: #82CAFA; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

» Dotted Border

TULIS SCRIPT/KODENYA DISINI

<div style="border: 2px #006400 dotted; padding: 10px; background-color: #82CAFA; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>


» Dashed Border

TULIS SCRIPT/KODENYA DISINI

<div style="border: 2px #006400 dashed; padding: 10px; background-color: #82CAFA; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

Border dengan scroll, lebar dan tinggi

TULIS SCRIPT/KODENYA DISINI

<div style="border: 2px #006400 solid; padding: 10px; background-color: #82CAFA; overflow: auto; height: 50px; width: 300px; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

Pada TULIS SCRIPT/KODENYA DISINI silahkan tulis kode script yang Anda inginkan.( SEBENARNYA BISA DI ISI OLEH APA SAJA BUKAN HANYA KODE SCRIPT MISALNYA TULISAN YANG DI ANGGAP PENTING )
Untuk back-ground color silahkan ganti dengan warna kesukaan Anda.

Baca Selengkapnya..

Menampilkan Link Konten Ketika Konten Di Copas

Pemasangan

1. Pertama silahkan Anda melompat ke tynt.com

2. Klik tombol oranye besar, Free! Get Started

3. Anda akan dibawa ke form pendaftaran.

Pada Domain isi dengan alamat blog Anda

Pada Email isi dengan alamat email Anda

Tuliskan password pada password dan confirm password untuk meyakinkan.

4. Anda langsung di bawa ke halaman setting. Pada attribution:

Link prefix, adalah kalimat yang muncul sebelum link,

Link Suffix, adalah kalimat setelah link

Link, adalah pilihan penampilan anchor pada saat artikel Anda di copas. Sebaiknya Anda pilih PageTitle untuk menampilkan judul saja, agar tidak terlalu panjang.

5. Anda bisa juga menambahkan mode license, apakah artikel Anda untuk commercial atau gratis dan sebagainya. Namun, saya tidak menggunakan ini karena memakan banyak tempat. Jika sudah silahkan klik tombol Update Preview

6. Perhatikan sebelah kanan dan Anda akan melihat preview hasil set Anda, dilengkapi script dibawahnya yang bisa Anda letakkan di blog Anda.

7. Login blogger -> Tata Letak -> Edit HTML. Silahkan letakkan script tersebut di atas </head>

8. Simpan Template Anda



Fasilitas Tambahan: Address Bar

1. Jika, ingin pengaturan lebih lanjut silahkan buka tab Address Bar.

2. Untuk aktifkan layanan ini, silahkan centang Enable Address Bar Tracking.

Ini berfungsi ketika seseorang copy alamat artikel Anda melalui address Bar dan akan dibaca juga oleh tynt. Namun, saya tidak mekainya karena Tynt otomatis menambahkan unique kode di setiap akhir alamat postingan kita.

3. Otomatis script pada bagian kanan berganti, jika Anda tadi telah memasangnya, gantilah dengan script yang telah diperbaharui tersebut.



+ Lagi: Link Sponsorship

Jika pada bagian utama hanya adalah URL dan Page Title, yang otomatis membaca alamat lokasi artikel, maka kita bisa tambahkan link sponsorship di bagian bawah yang bisa diatur linknya sesuai keinginan kita.

1. Pada Extra Link Message isi dengan kata pembuka untuk link Anda.

2. Pada Sponsor Name isikan dengan anchor link/nama link.

3. Pada Link Destination isi dengan alamat link Anda.

4. Klik tombol Create and Preview. Kemudian ambil script yang telah diperbaharui di bagian kanan.



Misalnya kita bisa menggunakan ini untuk membuat pesan agar berlangganan via email dan kita beri langsung link ke email berlangganan kita.



Test Script

Untuk lakukan test script Anda, pastikan Anda sudah memasukkan script dari tynt ke template Anda. Login blogger -> Tata Letak -> Edit HTML. Silahkan letakkan script tersebut di atas

1. Jika sudah dimasukkan scriptnya, silahkan klik tab Test Script, kemeduain masukkan URL blog atau URl langsung ke postingan Anda.

2. Klik tombol Test



Menerima Laporan Lewat Email

Soal menerima laporan pengcopas artikel lewat email, saya pernah bahas pada artikel berjudul Cukup Menunggu, lalu Melacak Saat Artikel di Copas. Nah, mungkin Anda ingin memanfaatkan jasa Tynt juga.

1. Silahkan Anda klik tab Account Settings.

2. Centang Enable Email Report. Laporan dikirim seminggu sekali.

3. Pada Email List isi dengan alamat email yang akan menerima laporan tersebut. Bisa beberapa email, pisahkan dengan koma.

4. Klik tombol Save

Baca Selengkapnya..

Cara menampilkan Kotak komentar yang Hilang

Berbeda dengan dahulu, untuk blogger yang ingin berkomentar harus mengklik "pos comment" dan membuka di jendela baru, Kini blogger menyediakan fitur yang lebih baik dan lebih mudah. Kita dapat menampilkan kotak komentar di bawah postingan kita, seperti halnya yang ada wordpress walau tidak sama persis.

Dengan Kotak komentar di bawah postingan memang akan mempermudah pembaca untuk memposting komentar terhadap tulisan kita. Seorang yang tak punya akun pun dapat berkomentar.

Cara Menampilkan Kotak Komentar di Bawah Postingan
1. Login ke http://draft.blogger.com/
2. Pilih link Pengaturan -> Komentar . dan pilih radio button " Di semat di bawah entry.
3. Jika sudah, simpan dan coba mengklik salah satu judul postingan kita, apakah sudah ada kotak komentar di bawahnya apa belum? Jika belum kita harus melakukan langkah-langkah berikut.

Kita akan mengedit template kita.
1. Pilih Tata Letak ( edit layout ) - > Edit HTML.
2. Tandai/centang Expand Template Widget.
3.
a. Cara Pertama
* Cari kode berikut ini

<b:include data="post" name="comments">

* Setelah ketemu, taruh kode berikut ini di bawahnya

<b:include data="post" name="comment-form">

* Kemudian Simpan Perubahan, lihat hasilnya jika belum berhasil lakukan

b. Cara Kedua
* Cari kode berikut ini

<p class="comment-footer"><br> <a href="data:post.addCommentUrl" onclick="data:post.addCommentOnclick"> <data:postcommentmsg></data:postcommentmsg></a></p>

* Setelah ketemu ganti dengan kode ini

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

* Setelah itu, Simpan Perubahan

Pada langkah ke tiga , Ketika kita mencari kode yang di maksud, Mungkin setiap template yang di pakai berbeda sedikit pada kode comment-footer-nya. tapi itu mudah yang terpenting ada susunan kode seperti di atas tersebut

source:
http://kurniasepta.blogspot.com/2009/05/menampilkan-kotak-komentar-di-bawah.html

Baca Selengkapnya..

Menyembunyikan Image Pada Read More Otomatis

Menjawab pertanyaan sobat alhadi pada postingan revisi read more dan slider pada soft template, yang menanyakan bagaimana cara menghapus read more yang berupa gambar pada template, atau merubah read more berupa gambar menjadi read more text. Dari pertanyaan itu, mungkin yang di maksud adalah menyembuyikan image atau gambar pada read more otomatis sebelum tampil pada halaman penuh.

Jika sobat sudah membaca postingan saya tentang membuat read more otomatis, maka sobat akan menemukan kode script seperti berikut :

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px; visibility:hidden; display:none"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

kode yang berwarna merah adalah kode yang baru saya tambahkan, kode tersebut berfungsi untuk membuat image tidak tampil pada halaman postingan sebelum read more di klik sampai tampil pada halaman penuh.

Selamat mencoba !

source:
http://miscah.blogspot.com/2010/03/menyembunyikan-image-pada-read-more.html

Baca Selengkapnya..

Situs Buat Blog Gratisan Terlengkap Seluruh Dunia

Ringkasan ini tidak tersedia. Harap klik di sini untuk melihat postingan.

Baca Selengkapnya..

CARA BUAT WIDGET FOLLOWERS TERSEMBUNYI

Bagaimana cara membuat Show atau Hide Widget Followers?, saya rasa banyak teman-teman blogger yang sudah membahas tentang Show/Hide Widget Followers untuk mencari dari kata tersebut kadang-kadang banyak yang masih kurang tau dengan judul tersebut, Postingan ini saya tujukan kepada teman-teman yang membutuhkan tips ini, semoga dengan bantuan dari kami bisa untuk menerapkannya kedalam blog teman.

Langsung saja kepembahasan tutorialnya :

1. Login dulu ke Blogger

2. Masuk ke Rancangan - Elemen Laman

3. Tambahkan Gadget Html/Java Script

4. Copy Paste Code berikut ini :

<style type="text/css">

#fl{

position:fixed;

left:150px;

z-index:+1000;

}

* html #fl{position:relative;}

.flcontent{

float:left;

border:2px solid #676767;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnQYhmwQPYXtwjdAbdY29LsTYZzxlRlItZOEOF-4U061yHvoS0zDFTNagglTus_OQOnSclqOnjpWGI3d6Lnjwkj4xYNWivPj-fF2Ud7NN_xt9oCcOUEAQaO_PFA4MZlDu1Gn3Vt8d68cYr/)#000000 repeat-x bottom center scroll;

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

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

-moz-border-radius-bottomleft:15px;

-moz-border-radius-bottomright:15px;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideFL(){

var fl = document.getElementById("fl");

var w = fl.offsetWidth;

fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);

fl.opened = !fl.opened;

}

function moveFL(x0, xf){

var fl = document.getElementById("fl");

var dx = Math.abs(x0-xf) > 25 ? 35 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

fl.style.bottom = x.toString() + "px";

if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}

}

</script>

<div id="fl">

<div class="fltab" onclick="showHideFL()"> </div>

<div class="flcontent">

Kode Widget Follow Google Disini

<div style="text-align: right;">

<a href="javascript:showHideFL()">

[Tutup]

</a></div>

<font size="2"><a href=”http://www.ronyox.co.cc/2011/04/cara-buat-blog-nofollow-jadi-dofollow.html"target=_blank"><div style="color: #444444;">

<span >By maduwebsite.co.cc</span></div></a></font>

</div>

</div>

<script type="text/javascript">

var fl = document.getElementById("fl");

fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";

</script>

6. Untuk Tip selanjutnya kita harus membuat atau mengambil code widget follownya di google silahkan sobat Klik Disini untu membuatnya.

7. Sobat bisa melihat gambar dibawah ini.

8. Pilih blog sobat yang akan dipasang widget follow
9. Klik "Tambahkan gadget anggota"
10. Silahkan diatur ukuran, warna dll nya..
11. Klik "Buat Code", Contoh Tampilannya seperti gambar di bawah ini.

12. Silahkan Copy Kodenya, dan ikuti langkah selanjutnya

13. Masih ditahap pemasangan Kode HTML, Sobat Copy Paste Kode dibawah ini. Pas dibawahnya Kode yang sobat sudah copy paste tadi.

<a href="javascript:showHideFL()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJHDZ-ZRkEIQrc0Z0rdr5DrGTiLR6PHBjMZp0Zk8nB2jcQy5xd_AuyKaTzEp9Hf8-Bt7q1YrySaqkoBg6drAWIXRD0j5BtBY4whciZft8SMm3Rys3A3z9TuN0k6vfO_y0T4O06peTlq0FM/" alt="manyunte ronyox" title="Click To Open The Follow Table" style="display:scroll;position: fixed; top:150px;right:0px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;" height="130px" width="40px" /></a>


source

Baca Selengkapnya..

Cara membuat browser bergetar saat klik kanan

Mungkin ini tidak asing lagi di telinga anda, tentang cara membuat jendela browser bergetar saat kita melakukan klik kanan pada saat membuka halaman blog seseorang. ini adalah hal yang menarik untuk kita coba. dimana pada saat kita atau pengunjung yang ingin mencopas artikel dengan cara mengklik kanan. mereka akan di beri pemberitahuan, berupa peringatan bahwa artikel ini tidak bisa di klik kanan. nah setelah mereka klik tanda OK atau mematikan dengan tanda silang (X)pada halaman peringatan, nantinya mereka akan di suguhkan lagi hal yang membuat mereka sedikit kaget. karna browser yang ia gunakan akan secara otomatis mengecil dan bergetar hebat. nah anda tertrik untuk menggunakannya, atau sekadar ingin mencoba silahkan mengikuti langkah langkah di bawah ini.

Berikut ini langkah-langkah cara membuat jendela browser anda bergetar pada saat klik kanan.

• Login ke blogger
• Klik Rancangan
• Tambah gadget baru
• Paste kan kode di bawah ini kedalam gadget tersebut
  
  
  <script language="javascript">
  
  <!-- Begin
  function shake(n) {
  if (self.moveBy) {
  for (i = 20; i > 0; i--) {
  for (j = n; j > 0; j--) {
  self.moveBy(0,i);
  self.moveBy(i,0);
  self.moveBy(0,-i);
  self.moveBy(-i,0);
  }
  }
  }
  }
  // End -->
  
  
  PopUpURL = "Maaf anda tidak di perbolehkan klik kanan";
  
  isIE=document.all;
  isNN=!document.all&&document.getElementById;
  isN4=document.layers;
  
  if (isIE||isNN)
  {
  document.oncontextmenu=checkV;
  }
  else
  {
  document.captureEvents(Event.MOUSEDOWN || Event.MOUSEUP);
  document.onmousedown=checkV;
  }
  function checkV(e)
  {
  if (isN4)
  {
  if (e.which==2||e.which==3)
  {
  dPUW=alert("Maaf anda tidak di perbolehkan klik kanan");
  shake(2);
  return false;
  }
  }
  else
  {
  dPUW=alert(PopUpURL);
  shake(2);
  return false;
  }
  }
  </script>
  
  
• Simpan gadget
• Selesai....

Sekarang silahkan buka halaman blog anda dan silahkan klik kanan, perhatikan apa yang terjadi. semoga artikel ini bermanfaat dan salam sukses....

source

Baca Selengkapnya..

Cara membuat garis di bawah judul postingan dan judul sidebar pada blog

Panduan sukses blogger kali ini membahas cara membuat atau menambah garis di bawah judul postingan dan judul sidebar. mungkin blogger senior sedikit tersenyum tentang pembahasan saya kali ini. karna ini adalah hal yang sangat mudah. tapi nggak ada salah nya kalau saya membuat artikel ini hanya sakadar sharing dan mudahan saja ini sangat bermanfaat bagi yang masih baru di dunia blogger. karna mereka harus belajar dengan yang mudah dulu baru ke yang agak ruwet alias ribet, hehehe. nah untuk membuat nya ikuti langkah-langkah di bawah ini.

Berikut ini langkah-langkah cara membuat garis di bawah judul postingan dan sidebar pada blog anda:

• Login terlebih dahulu ke blogger
• Klik Rancangan
• Pilih Edit HTML
• Untuk memberi garis pada judul artikel blog cari kode .post h3{ margin-bottom:7px; .........} (cari berdasar kan .post h3)
• Kemudian tambahkan kode di bawah ini yang berwarna merah seperti contoh berikut
  
  
  .post h3{
  border-bottom:1px solid silver;
  margin-bottom:7px;
  .........
  }
  
  
• Untuk memberi garis pada judul sidebar cari kode .sidebar h2{margin-bottom: 7px;......}
• Kemudian tambahkan kode dibawah ini seperti contoh berikut
  
  
  .sidebar h2{
  border-bottom:1px dotted silver;
  margin-bottom:7px;
  .......
  }
  
  
• Untuk memastikan kode tersebut benar untuk judul postingan dan judul sidebar klik tombol "PRATINJAU"
• Nah jika anda sudah berhasil simpan tamplate milik anda
• Selesai.....

Catatan:

• Nah untuk border-bottom:1px dotted silver; ini adalah garis bawah yang terputus-putus dengan warna silver. ini bisa anda ganti dengan warna lain Red atau Black
• Untuk garis yang tidak terputus-putus anda bisa menggunakan kode border-bottom:1px solid silver;
• Nah untuk warnanya anda juga bisa menggunakan dengan kode warna seperti berikut border-bottom:1px solid #000; (ini adalah garis bawah dengan ukuran 1px dengan warna hitam)

Warna di atas adalah sebagai contoh. jika warna tersebut tidak cocok dengan warna tamplate anda. anda bisa mengganti nya dengan warna lain. semoga artikel ini bermanfaat untuk sahabat semua dan salam sukses.......

source

Baca Selengkapnya..

Cara menonaktifkan klik kanan pada blog anda

Mungkin sering anda temukan pada situs-situs sahabat, yang halaman webnya tidak dapat di klik kanan. jika kita memaksa melakukan klik kanan, yang akan muncul adalah informasi bahwa website ini tidak dapat menggunakan fungsi klik kanan. ini mencegah terjadinya copas artikel pada blog mereka. ya siapa yang tidak sakit hati jika artikel yang kita buat dengan bersusah payah dengan mudahnya mereka mengcopas yang sebenarnya bukan hak mereka. jika mending mereka memberi link asal dari artikel tersebut. tentunya kita sedikit lega. Nah mungkin anda tertarik dengan tutor yang satu ini. atau sekadar ingin mencoba nya. silahkan ikuti langkah-langkah di bawah ini.

Berikut langkah cara membuat klik kanan pada artikel blog kita tidak berfungsi, atau menonaktifkannya:

• Login pada blogger
• Klik Rancangan
• Tambah gadget baru
• Pilih HTML/JavaScript
• Kemudian copy dan pastekan kode di bawah ini kedalam nya
  
  
  <script language="JavaScript">
  <!--
  
  var message="Anda tidak diperbolehkan melakukan Klik-Kanan";
  
  ///////////////////////////////////
  function clickIE4(){
  if (event.button==2){
  alert(message);
  return false;
  }
  }
  
  function clickNS4(e){
  if (document.layers||document.getElementById&&!document.all){
  if (e.which==2||e.which==3){
  alert(message);
  return false;
  }
  }
  }
  
  if (document.layers){
  document.captureEvents(Event.MOUSEDOWN);
  document.onmousedown=clickNS4;
  }
  else if (document.all&&!document.getElementById){
  document.onmousedown=clickIE4;
  }
  
  document.oncontextmenu=new Function("alert(message);return false")
  
  // -->
  </script>
  
  
• Simpan gadget
• Selesai.....

Sekarang silahkan anda klik kanan pada halaman blog anda. disana akan terlihat bahwa anda tidak di bolehkan untuk mengklik kanan. Semoga artikel ini bermanfaat untuk kita semua dan salam sukses...

source

Baca Selengkapnya..

Cara Menginstall alexa toolbar pada browser

Sebelumnya saya pernah membahas cara memasang widget alexa pada blog. tapi beda dengan kali ini, kita akan membahas cara menginstall alexa tersebut di toolbar browser yang kita gunakan. dengan terinstall alexa toolbar ini, maka kita akan gampang mengetahui nilai alexa setiap blog yang kita kunjungi. ini sangat membantu sekali. nah pada saat alexa mengalami naik dan turun kita akan mudah mengetahuinya. tapi sebelumnya anda memasang alexa terlebih dahulu ke blog milik anda. karna hasil di blog dengan di tollbar akan berbeda. ini karna alexa tollbar lebih duluan update dari pada alexa yang terinstall di blog. anda tertarik untuk menggunakannya.

Berikut langkah-langkah cara menginstall alexa toolbar pada browser milik anda:

• Kunjungi link berikut ini http://www.alexa.com/toolbar
• Kemudian klik tombol "Instal Alexa Toolbar"
• Pada halaman yang baru klik "Accept and Install"
• Kemudian klik "Add-Ons"
• Klik "Install"
• Setelah Prosess install selesai Restart browser anda
• Selesai.......

Semoga artikel ini bermanfaat untuk sobat semua dan salam sukses......

source

Baca Selengkapnya..

Mengatur ukuran gambar pada tempat tertentu dengan kode script

Pagi-pagi cek email sudah di hadapkan dengan pertanyaan. yaitu Cara mengatur ukuran gambar pada tempat tertentu, Terkadang sering kali kita kesulitan untuk mengaturnya ukuran pas sebuah gambar. karna gambar atau banner yang kita pasang tidak sesuai dengan tempat yang kita inginkan. baik itu di sidebar, header, share dan di tempat lainnya. tentu ini tidak nyaman untuk kita lihat.kemungkinan ukuran gambar tersebut berukuran besar atau bisa jadi kecil.

Sebenarnya anda bisa mengedit sendiri dengan menggunakan photoshop atau aplikasi lainnya.tapi terkadang kita kesulitan untuk mengatur ukuran yang kita inginkan. apalagi bagi yang baru mengenal aplikasi tersebut, pasti sangat kesulitan.solusinya disini kita bisa menggunakan kode script. yang akan merubah suaikan ukuran gambar tersebut. penasaran bukan? berikut ini langkah-langkah nya.

Berikut kode banner yang terdapat pada banner atau gambar yang berlink

<a href='Alamat Tujuan'><img src='Alamat Gambar/Banner'></a>

Nah untuk menyesuaikan ukuran gambar yang kita inginkan, anda bisa menambahkan ukuran lebar dan tinggi gambar tersebut. berikut ini caranya:

<a href='Alamat Tujuan'><img src='Alamat Gambar/Banner' width='125' height='125'></a>

Ganti ukuran tulisan yang berwarna merah dengan ukuran yang anda inginkan. width = Lebar, height = tinggi.

Nah sangat mudahkan. selamat mencoba, semoga artikel ini bermanfaat dan tidak lupa saya ucapkan salam sukses...

source

Baca Selengkapnya..

Cara menghilang Icon Obeng dan Tang pada blog

Biasa nya ini kita jumpai di setiap sudut elemen di halaman blog. disana akan terdapat icon bergambar obeng dan tang. kode obeng dan tang tersebut berfungsi sebagai Quick Edit atau istilah lain mengedit secara cepat. kode obeng dan tang tersebut akan terlihat saat kita sedang login di blogger. ini tidak akan terlihat oleh pengunjung.

Namun terkadang kehadiran icon ini tidak di sukai para blogger. dan mereka ingin menghapusnya. nah apakah anda termasuk orang tidak suka dengan kehadiran icon obeng dan tang tersebut? jika jawaban anda iya, anda bisa menghilangkan icon tersebut dengan cara melakukan perintah agar icon tersebut tidak muncul lagi. dengan cara menambahkan kode CSS ke template yang anda punya.

Berikut ini langkah-langkah menghilang icon obeng dan tang tersebut di blog anda:

• Login ke blogger
• Rancangan
• Edit HTML
• Kemudian cari kode ]]></b:skin>
• Letakkan kode di bawah ini di atas kode ]]></b:skin>
  
  
  .quickedit{
  display:none;
  }
  
  
• Kemudian klik simpan tamplate
• Selesai....

Sekarang silahkan anda lihat hasilnya. semoga artikel ini bermanfaat dan salam sukses...

Baca Selengkapnya..

Atasi Error Setelah Instal Template

Atasi Error Setelah Instal Template, mengunduh template dari luar tidak selalu menyenangkan. Kemungkinan ada sobat blogger yang kena template bermasalah yang memunculkan error dengan kode BX. Error seperti ini bisa membuat sebagaian pengguna menyerah apa lagi yang awam dengan dunia blogger. mereka akan memilih bikin akun baru daripada pusing mencari cara untuk memperbaikinya. Nah anda jangan terburu-buru bikin akun baru dulu. disini saya bisa membantu anda keluar dari masalah di atas. anda bisa mencoba dulu trik yang saya berikan ini.

Berikut langkah-langkah atasi Error setelah Install Template anda:

• Buka tamplate yang telah anda unduh dengan Notepad atau Wordpad. klik kanan file tersebut, pilih "Open With> Wordpad"
• Cari kode widget id pada template tersebut. tekan "Ctrl + F ", kemudian tulis di kotak pencarian widget id
• Lakukan pencarian satu per satu karena akan ada beberapa kode yang bertuliskan widget id
• setiap kali menemukan struktur yang ada widget id, ganti nomor id widget tersebut menjadi 2 digit, Misalnya anda menemukan struktur <b:widget id="example2', maka sebaiknya ganti misalnya dengan <b:widget id="example21'
• Lakukan untuk widget yang lainnya sampai semua nomor id widget lebih dari 1 angka
• Setelah itu simpan tamplate yang anda edit tersebut
• Silahkan instal kembali template tersebut pada blogger.

Selamat mencoba.......

Baca Selengkapnya..

Pasang Top Comment di Blogspot

Di pertemuan kita kali ini saya membahas tentang cara pasang Top comment di blogspot. Top Commentators widget bertujuan untuk menampilkan siapa yang paling sering berkomentar di blog anda. Sebagai contoh, anda dapat menampilkan 10 komentator terbanyak di blog anda.

• Log in ke blog anda
• Klik Layout, lalu pilih Page Elements
• Klik Add a Gadget
• lalu pilih HTML/JavaScript
• Copy kode dibawah ini
  

  
  

  <script type="text/javascript">
  function pipeCallback(obj) {
  document.write('<ol>');
  var i;
  for (i = 0; i < obj.count ; i++)
  {
  var href = "'" + obj.value.items[i].link + "'";
  if(obj.value.items[i].link == "")
  var item ="<li>" + obj.value.items[i].title + "</li>";
  else
  var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
  document.write(item);
  }
  document.write('</ol>');
  }
  </script>
  <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a55cb97ebb368bb1b89b7f6bdeb35336&url=http%3A%2F%2Fjayaputrasbloq.blogspot.com&num=10&filter=jaya" type="text/javascript"></script>
• Rubah tulisan warna merah dengan alamat blog anda dan nama
• Kemudian Simpan Selesai deh contoh:

Selamat Mencoba.............

Cara menambah top comment di blog, top comment tutorial, langkah menampilkan top comment, tutorial menambah to comment di blogspot, memasang top comment pada blogger.

Baca Selengkapnya..

Pasang Daftar isi pada blog

Keberadaan daftar isi sangat lah penting untuk para pengunjung... karna sangat membantu para pengunjung untuk mencari article yang mereka temukan. liat contoh klik disini .untuk membuat nya sangat lah mudah ikuti saja langkah-langkah di bawah ini:

Langkah Pertama

1. Log in dulu di blogger
2. Klik Layouts --> Edit HTML -->
3. Beri centang di Expand Widget Template.
4. cari kode dibawah ini
   
   
   <b:include data='post' name='post'/>
5. ganti kode diatas dengan kode dibawah ini
<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>
6. Save tamplate

Langkah Kedua

1. klik layout
2. Klik Add a Gadget
3. Klik HTML/Javascript
4. Masukan kode di bawah ini
<a href="http://NamaBlogAnda.blogspot.com/search?max-results=200">Daftar Isi&raquo;</a>
5. Ganti yang berwarna merah dengan alamat blog anda
6. Save Lihat hasilnya...

Selamat mencoba...

Baca Selengkapnya..