Bloggers

Memiliki sebuah blog adalah hal yang menyenangkan karena kita dapat berbagi apapun yang kita suka, dan kalau kita serius dalam merawat blog, kita juga bisa mendapatkan penghasilan yang layak dari blog kita.
Di web tutorial ini, nyekrip telah berbagi tentang cara membuat web dengan html 5 yang juga dapat kita gunakan sebagai langkah belajar dalam membuat dan mendesain halaman web atau blog dan salah satu favorit saya adalah menciptakan blog pada domain sendiri dan hosting melalui WordPress seperti yang sudah diterapkan pada blog nyekrip ini.
Banyak tutorial yang telah membahas tentang self-host blog WordPress dan tidak diragukan lagi itu adalah platform blogging yang lebih baik jika kita bandingkan dengan platform blogging gratis seperti Blogspot.com dan WordPress.com. Banyak pemula yang ingin memulai blogging tidak ingin menghabiskan modal untuk membuat blog dan itu sah-sah saja, bahkan banyak juga ditemukan blog terkenal yang menggunakan platform gratis ini.
Ada banyak platform blogging yang menawarkan untuk membuat Blog  secara gratis. Jika kita mencari blog yang gratis, disarankan untuk memulai blog dari WordPress.com atau Blogger.com.
Blogspot mengijinkan kita untuk membuat blog secara gratis dan tentunya memiliki keterbatasan, tapi seperti yang telah disebutkan di atas, untuk pemula itu merupakan ide yang baik sebagai langkah awal dalam membuat Blog.

Ikon Blogger

Tutorial ini ditujukan untuk yang ingin belajar membuat blog. Dalam posting ini kita akan membahas tentang bagaimana cara membuat blog di Blogspot lengkap gambar. Sebelum kita mulai tutorial cara membuat blog di Blogspot lengkap gambar, ada beberapa hal yang harus kita ketahui. Blogspot adalah platform blogging dari Google yang memberikan pelayanan untuk membuat sebuah blog, semua gambar blog kita akan disimpan oleh Picasa yang merupakan bagian dari Google.

Cara Membuat Blog di Blogspot atau Blogger Gratis

Untuk cara membuat blog di Blogspot gratis, silahkan menuju blogger.com dan login menggunakan akun Google. Jika belum memiliki akun Google (akun Gmail), silahkan menuju tutorial ” Cara Membuat Email Baru Lengkap Gambar “. Setelah anda mempunyai akun gmail atau akun google, silahkan kunjungi ” www.blogger.com ” dan kita akan melihat halaman login seperti gambar berikut.

Halaman Login

Setelah login kita akan menghadapi pilihan untuk menggunakan identitas, kita dapat memilih profil Google plus atau menggunakan profil Blogspot. Lebih di sarankan memilih profil Google plus.

Memilih Profil

Langsung tekan tombol ” Lanjutkan ke Blogger “.
Setelah itu kita akan melihat halaman membuat blog di blogspot seperti gambar berikut. Pada halaman ini kita akan melihat daftar blog yang telah dibuat, karena kita baru akan memulai dalam membuat blog maka kita belum melihat daftar blog tersebut, untuk memulai membuat blog silahkan klik tombol ” Blog Baru “.

Memulai Blog Baru

Memberi Nama dan Alamat Blog di Blogspot/blogger

Setelah kita klik tombol ” Blog Baru ” kita akan melihat sebuah halaman baru untuk memulai dengan menambahkan nama dan memilih nama domain. Untuk tips trik dalam memilih nama domain silahkan anda kunjungi tutorial ” Tips Cara Memilih Nama Domain Blog atau Website “.
Untuk lebih jelasnya silahkan perhatikan gambar membuat blog di blogspot berikut:

Halaman Membuat Blog

Keterangan nomor pada gambar

• Nomor 1 adalah tempat kita untuk memberi judul atau nama blog
• Nomor 2 adalah tempat kita untuk memberi alamat blog kita
• Nomor 3 adalah tempat kita untuk memilih template blog kita, kita bisa merubah-nya nanti pada halaman template, jadi untuk sementara pilih saja yang standar
• Nomor 4 merupakan keterangan alamat blog yang kita ketik tersedia atau tidak, pastikan alamat blog tersedia.
• Nomor 5 adalah tombol untuk mengakhiri , tekan tombol ini jika anda sudah merasa puas dengan nama dan alamat yang anda pilih.

Memulai Post

Mengenal Dashboard di Blogspot/blogger

Sekarang blog kita sudah dibuat tetapi belum selesai sepenuhnya. Ada beberapa pengaturan yang perlu kita lakukan pada blog yang baru dibuat, agar membuat blog di Blogspot kita semakin SEO, seperti merubah template dan menambah halaman. Sekarang kita berada di dashboard Blogspot di mana kita akan melihat backend blog dan bisa pergi ke pengaturan dan membuat perubahan untuk meningkatkan visibilitas blog. Berikut adalah screenshot dashboard beserta penjelasan:

dashboard blogspot

Keterangan nomor pada gambar

• Nomor 1 merupakan tombol yang bisa kita gunakan jika ingin membuat blog baru
• Nomor 2 merupakan tombol yang bisa kita gunakan jika ingin membuat post baru
• Nomor 3 merupakan tombol yang bisa kita gunakan jika ingin melihat blog secara live
• Nomor 4 merupakan daftar shortcut menuju pengaturan, post, dan lain-lain
• Nomor 5 merupakan area artikel dari blog yang kita ikuti atau follow
• Nomor 6 merupakan area identitas atau profil kita di google, dalam area ini kita bisa login dan logut.

Setelah kita mengenal fungsi dari dashboard blogspot/blogger, silahkan anda klik menu “ Ikhtisar ” untuk melihat daftar menu dalam memulai membuat post, halaman, sampai mengatur adsense pada blog kita.
Untuk melihat tampilan blog yang sudah dibuat, silahkan klik tombol no 3 pada nomor diatas, maka tampilan blog akan terlihat seperti gambar dibawah ini. Perhatikan bahwa template sudah sesuai dengan template yang telah dipilih sebelumnya.

Tampilan Blog Nyekrip

jika anda ingin membuat blog gratis di wordpress silahkan kunjungi tutorial ” Cara Membuat Blog di WordPress Gratis Lengkap “.

Cara Mengatasi Halaman yang Anda Minta Tidak Valid

Halaman Yang Anda Minta Tidak Valid

Bagi kawan yang mengalami error seperti pesan diatas, kemungkinan blogger telah menganggap anda sebagai spammer, cobalah lakukan langkah berikut ini:

• Jika anda menggunakan modem, coba putus dan sambung-kan lagi konekssi internet-nya (tujuan agar ip berubah)
• Clear atau bersihkan cache, cookie dan history browser anda

Setelah itu coba buat blog lagi, semoga berhasil .
Sekian tutorial cara membuat blog di blogspot lengkap gambar, segera praktek-kan karena membuat blog di blogspot itu mudah dan tutorial diatas sudah dibuat dengan sederhana namun padat. Jika ada pertanyaan, silahkan ajukan dalam komentar dibawah. Pada kesempatan berikutnya akan dibahas tentang bagaimana cara membuat post sampai merubah template agar lebih SEO.

Tombol back to top berfungsi untuk memudahkan pengunjung untuk kembali ke bagian atas dari suatu halaman. pada widget ini selain tombol back to top juga terdapat tombol back to bottom untuk menampilkan bagian bawah halaman.

Langsung saja Sob, berikut caranya :

• Login ke Blogger, Klik Design/Rancangan > Edit HTML.
  
• Beri tanda centang pada Expand Template Widget.
  
  Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
• Copy kode berikut dan pastekan di atas ]]></b:skin>
  #floating-up {
  position:fixed;_position:absolute;top:280px; right:0px; clip:inherit;
  _bottom:expression(document.documentElement.scrollTop+
  document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
  #floating-up a
  {
  filter:alpha(opacity=65);
  -moz-opacity:0.65;
  opacity:0.65;
  border:0;
  }
  #floating-up img
  {
  border:0;
  }
  #floating-up a:hover
  {
  filter:alpha(opacity=100);
  -moz-opacity:1;
  opacity:1;
  }
• Lalu tambahkan kode <a name='to-bottom'></a> tepat diatas kode </body>.
• Kemudian cari kode <body>, dan paste kode berikut dibawah <body> :
  <div id='floating-up'>
  <div><a href='#' title='back to top'><img alt='back to top' src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-top.png'/></a></div>
  <div><a href='#to-bottom' title='back to bottom'><img alt='back to bottom' src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-bottom.png'/></a></div>
  </div>
• Terakhir klik Save / Simpan Template.
  

Silakan dicoba Sob,,, dan semoga berhasil Membuat Tombol Back To Top.

Cara meletakannya SCRIPT kedalam template blog, berikut adalah caranya.

1. Masuk Akun Blogger Sobat.

2. Masuk ke edit HTML template

3. Backup Template ( antisipasi jika ada kesalahan/kerusakan template.. )

4. Cari kode </body> dan letakan kode dibawah ini di atasnya ( diatas </body> )

<script type="text/javascript"> if(document.location.protocol=='http:'){ var Tynt=Tynt||[];Tynt.push('cXIEhKYVSr4lJ5adbi-bpO');Tynt.i={"ap":"Sumber Dari:"}; (function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://tcr.tynt.com/ti.js';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})(); } </script> 

5. Simpan tempate.

6. Semoga berhasil

Berikut Cara Membuat Link Berbintang-Bintang :

1. Login ke Blogger, Klik Design/Rancangan > Edit HTML.
   
2. Beri tanda centang pada Expand Template Widget.
   
   Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
3. Cari kode :
   a:hover {
   color:#0000ff;
   text-decoration:underline; 
   }
   Akan lebih mudah jika Anda mencari a:hover saja.
4. Jika sudah ketemu ganti kode yang berwarna merah dengan kode di bawah ini.
   { background-image: url(http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/dip.gif);}
5. Terakhir klik SIMPAN / SAVE TEMPLATE.
   

Sekian Tutorial tentang Membuat Link Berbintang-Bintang.

Berikut Cara Membuat Link Berkedip Saat Disentuh Cursor :

1. Login ke Blogger, Klik Design/Rancangan > Edit HTML.
   
2. Beri tanda centang pada Expand Template Widget.
   
   Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
3. Cari kode :
   a:hover {
   color:#5588AA;
   text-decoration:underline;
   }
   Ganti underline dengan blink
4. Terakhir klik SIMPAN / SAVE TEMPLATE.
   

Sekarang lihat blog Sobat dan coba sentuh link yang ada di blog sobat.

Berikut cara Membuat Link Berwarna Warni Saat Disentuh Cursor :

1. Masuk ke akun Blogger Sobat. Klik Rancangan > Edit HTML.
   
2. Beri tanda centang di Expand Template Widget.
   
   Klik Download Template Lengkap untuk berjaga-jaga kalau nanti terjadi kesalahan kita dapat dengan mudah mengembalikan template seperti semula.
3. Cari kode <b:skin><![CDATA[
4. Copy kode di bawah ini lalu paste di atas kode tersebut
   <script src='http://achmad46.googlepages.com/rainbow.js'>
   </script>
5. Terakhir SIMPAN / SAVE TEMPLATE.
   

Membuat Widget Melayang di Blogger / Blogspot.

Ok Sob , berikut caranya :

1. Login ke blogger, klik Design > Edit HTML.
   
2. Beri tanda centang pada kotak Expand Template Widget.
   
3. Cari kode ]]></b:skin> dan kalau sudah ketemu, letakkan kode berikut tepat di atasnya.
   #floating-widget { position:fixed;_position:absolute;bottom:0px; left:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
4. Selanjutnya, carilah kode </body> dan letakkan kode berikut tepat di atasnya
   <div id='floating-widget'>

   Letakkan kode widget disini

   </div>
5. Jika sudah selesai klik SAVE / SIMPAN TEMPLATE, dan lihat hasilnya.
   

Silakan dicoba dan Semoga berhasil...

Menu melayang disini maksudnya menu yang tetap pada posisinya walaupun blog di geser keatas dan kebawah.

Berikut cara Membuat Menu Melayang :

• Login ke Blogger, Klik Design/Rancangan > Edit HTML.
  
• Beri tanda centang pada Expand Template Widget.
  
  Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
• Selanjutnya cari kode </head>,dan letakan kode berikut diatasnya :
  <style>
  div.floating-menu {
  position: fixed;
  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#666));
  background: -moz-linear-gradient(top, #000, #666);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#000000&#39;, endColorstr=&#39;#999999&#39;);
   border: 1px solid #000;
   width: 150px;
   z-index: 500;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomleft: 10px;
  border:none;
  padding:10px 10px 10px 10px;
   }
  div.floating-menu a, div.floating-menu h4 {
  display: block;
  margin: 0 0.5em;
  color:#FFF; }
  div.floating-menu a:hover {
  color:#0000FF;
  background: -webkit-gradient(linear, left top, left bottom, from(#0088ff), to(#bbddff));
  background: -moz-linear-gradient(top, #0088ff, #bbddff);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0088ff&#39;, endColorstr=&#39;#bbddff&#39;);
  color:#FFF;
  cursor: pointer;
  text-decoration: none;
  padding: 5px 5px 5px 5px;
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);  
  }
    </style>
• Setelah itu sobat cari kode  <body> dan masukan kode di bawah ini di bawah <body>.
  <div class="floating-menu">
  <h4>Menu</h4>
  <a href="http://alamat-url/">Anchor Text</a>
  <a href="http://alamat-url/">Anchor Text</a>
  <a href="http://alamat-url/">Anchor Text</a>
  <a href="http://alamat-url/">Anchor Text</a>
  </div> 
  Ganti http://alamat-url/ dan Anchor Text,
• Terakhir klik Save / Simpan Template.
  

Selamat mencoba dan semoga berhasil Membuat Menu Melayang.

Buat yang ingin mencobanya, silakan ikuti tutorial berikut :

1. Login ke blogger, klik Design/Rancangan > Page Element/Elemen Halaman.
   
2. Klik Add a Gadget, pilih HTML/Java Script
   
3. Lalu masukkan kode berikut :
   <div class="widget-content">
   <div><div style="margin: 5px;"><div class="normalfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;TUTUP&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Daftar Isi&#39;; }" value="Daftar Isi" style="margin: 0px; padding: 5px; width: 100%; font-size: 11px; background: none repeat scroll 0% 0% blue; border-top-left-radius: 15px; border-bottom-right-radius: 15px;" type="button" /></div><div class="alt2"><div style="display: none;"><div style="text-align: justify; padding: 2px;"><center><blink><h3>Daftar Isi</h3></blink></center><div style="overflow: auto; width: 270px; height: 200px; padding: 10px; border: 1px solid rgb(238, 238, 238);">
   
   <script src="http://post-xml.googlecode.com/files/feeds-labels.js"></script><script src="http://alamatblog.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
   </script>
   
   </div></div></div></div></div></div></div>
   Keterangan :
   blue : warna background, silakan ganti sesuai keinginan Anda.
   width: 270px; height: 200px; : Ukuran lebar dan tinggi widget, sesuaikan dengan sidebar Anda.
   alamatblog.com : Ganti dengan alamat blog Sobat.
   Widget diatas daftar isi berdasarkan label, untuk Daftar Isi Berdasarkan Tanggal berikut kodenya :
   <div class="widget-content">
   <div><div style="margin: 5px;"><div class="normalfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;TUTUP&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Daftar Isi&#39;; }" value="Daftar Isi" style="margin: 0px; padding: 5px; width: 100%; font-size: 11px; background: none repeat scroll 0% 0% blue; border-top-left-radius: 15px; border-bottom-right-radius: 15px;" type="button" /></div><div class="alt2"><div style="display: none;"><div style="text-align: justify; padding: 2px;"><center><blink><h3>Daftar Isi</h3></blink></center><div style="overflow: auto; width: 270px; height: 200px; padding: 10px; border: 1px solid rgb(238, 238, 238);">
   
   <script src="http://post-xml.googlecode.com/files/feed-dates.js"> </script><script src="http://alamatblog.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> </script>
   
   </div></div></div></div></div></div></div>
4. Lalu klik Save.
   
   hasilnya akan seperti ini, silakan di klik.

4. Daftar Isi
5. Judul Postingan
6. Judul Postingan
7. Judul Postingan
8. Judul Postingan
9. Dan Seterusnya

Sekian tutorial tentang Membuat Widget Daftar Isi Tersembunyi.


Buat Sobat yang ingin memasangnya silakan ikuti tutorial berikut :

• Login ke Blogger, Klik Design/Rancangan > Edit HTML.
  
• Beri tanda centang pada Expand Template Widget.
  
  Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
• Cari kode </head>, lalu Copy kode dibawah ini dan letakkan diatas kode </head>.
  <!--Simple Related Posts Scripts Start-->
  <script type='text/javascript'>
  //<![CDATA[
  var relatedTitles = new Array();
  var relatedTitlesNum = 0;
  var relatedUrls = new Array();
  function related_results_labels(json) {
  for (var i = 0; i < json.feed.entry.length; i++) {
  var entry = json.feed.entry[i];
  relatedTitles[relatedTitlesNum] = entry.title.$t;
  for (var k = 0; k < entry.link.length; k++) {
  if (entry.link[k].rel == 'alternate') {
  relatedUrls[relatedTitlesNum] = entry.link[k].href;
  relatedTitlesNum++;
  break;
  }
  }
  }
  }
  function removeRelatedDuplicates() {
  var tmp = new Array(0);
  var tmp2 = new Array(0);
  for(var i = 0; i < relatedUrls.length; i++) {
  if(!contains(tmp, relatedUrls[i])) {
  tmp.length += 1;
  tmp[tmp.length - 1] = relatedUrls[i];
  tmp2.length += 1;
  tmp2[tmp2.length - 1] = relatedTitles[i];
  }
  }
  relatedTitles = tmp2;
  relatedUrls = tmp;
  }
  function contains(a, e) {
  for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
  return false;
  }
  function printRelatedLabels() {
  var r = Math.floor((relatedTitles.length - 1) * Math.random());
  var i = 0;
  document.write('<ul>');
  while (i < relatedTitles.length && i < 5) {
  document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
  if (r < relatedTitles.length - 1) {
  r++;
  } else {
  r = 0;
  }
  i++;
  }
  document.write('</ul>');
  }
  //]]>
  </script>
      <!--Simple Related Posts Scripts and Styles End-->
• Kemudian silakan Sobat cari kode seperti berikut
  <b:if cond='data:post.labels'>
  <data:postLabelsLabel/>
  <b:loop values='data:post.labels' var='label'>
  <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
  </b:loop>
  </b:if>
  Lalu ganti dengan kode berikut :
  <b:if cond='data:post.labels'><data:postLabelsLabel/>
  <b:loop values='data:post.labels' var='label'>
  <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
  </b:if>
  </b:loop>
  </b:if>
  max-results=5 : jumlah artikel yang akan ditampilkan, silahkan diganti.
• Lalu klik Save / Simpan Template.
  
• Selanjutnya, masuk ke Page Element > Add a Gadget > HTML/JavaScript.
• Lalu letakkan kode dibawah ini kedalam konten HTML/JavaScript.
  <script type="text/javascript">
  removeRelatedDuplicates();
  printRelatedLabels();
  </script>
• Terakhir klik Save, dan lihat hasilnya.

Selamat mencoba dan semoga berhasil Membuat Artikel Terkait di Sidebar.

pada postingan kali ini saya akan berbagi cara Membuat Tombol Home page dan Reload page Melayang.

Langsung saja Sob, berikut caranya :

• Login ke Blogger, Klik Design/Rancangan > Edit HTML.
  
• Beri tanda centang pada Expand Template Widget.
  
  Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
• Copy kode berikut dan pastekan di atas ]]></b:skin>
  #floating-home {
  position:fixed;_position:absolute;top:280px; left:0px; clip:inherit;
  _bottom:expression(document.documentElement.scrollTop+
  document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
  #floating-home a
  {
  filter:alpha(opacity=65);
  -moz-opacity:0.65;
  opacity:0.65;
  border:0;
  }
  #floating-home img
  {
  border:0;
  }
  #floating-home a:hover
  {
  filter:alpha(opacity=100);
  -moz-opacity:1;
  opacity:1;
  }
• Kemudian cari kode <body>, dan paste kode berikut dibawah <body> :
  <div id='floating-home'>
  <div><a expr:href='data:blog.homepageUrl' title='Home'><img alt='Home' src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/home-i.png'/></a></div>
  <div><a href='#' onClick='window.location.reload()' title='Reload page'><img alt='Reload page' src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/refresh.png'/></a></div>
  </div>
• Terakhir klik Save / Simpan Template.
  

Silakan dicoba Sob,,, dan semoga berhasil Membuat Tombol Home Melayang.

Pada sebuah postingan atau pada widget mungkin kita ingin membuat sebuah

entah itu berisi link atau hanya tampilannya saja. Bagi Sobat yang belum tahu caranya silakan baca tutorial kali ini.

• Membuat tombol untuk Blogspot :
• Login ke blogger Sobat.
• Untuk membuat tombol di postingan klik Posting > New Post, lalu pilih tab Edit Html.
• Jika Anda ingin menampilkannya di widget klik Design > Page Element > Add a Gadget > HTML/Javascripts.
• Lalu letakkan kode untuk menampilkan tombol. (Untuk kodenya saya tulis dibawah tutorial ini)
• Untuk Wordpress.com :
• Login ke dasboard Anda.
• Untuk menampilkan di postingan klik Posts > Add New, lalu pilih tab Html.
• Untuk menampilkan di widget klik Appearance > Widgets, lalu letakkan Text pada sidebar.
• Selanjutnya letakkan kode untuk menampilkan tombol.
Untuk kodenya dapat Sobat lihat dibawah ini :




kodenya seperti ini :
<button>Tombol</button>
Posisi tombol ditengah :


berikut kodenya :

<div style="text-align: center;"><button>Tombol</button></div>


Untuk tombol yang berisi Link berikut kodenya :
<a href="http://alamatblog.com/"><button>LINK</button></a>

Untuk membuat tombol berisi link yang akan dibuka ditab baru, cukup tambahkan target="_blank"



<a href="http://alamatblog.com/" target="_blank"><button>LINK</button></a>


Gimana Sob, mudah kan ?!?
Sepertinya cukup sekian dulu tutorial tentang Membuat Tombol di Blog.



Ok..! dech tanpa basa-basi lagi langsung aja kita meluncur ke topik Mempercantik Tampilan Blog Dengan Membuat Teks Berjalan - yang kita kenal sebagai marquee itu menggunakan perkodean CSS HTML, cara membuatnya pun terbilang mudah, cukup menuliskan kode <marquee> di awal teks, dan akhiri dengan kode penutup </marquee> di akhir teks seperti ini:




<< MACAM >><< MACAM >>
EFEK TEKS DENGAN MARQUEE


Berikut beberapa model MARQUEE yang dapat Anda gunakan untuk Mempercantik Tampilan Blog Dengan Membuat Teks Berjalan:

1. Marquee Tanpa Atribut
Silahkan tinggal di copy aja kode html dibawah ini


<marquee>TEKS INI AKAN BERJALAN</marquee>

Hasilnya :
TEKS INI AKAN BERJALAN


2. Marquee Dengan Atribut
Scrollamount = Kecepatan kalimat, semakin besar angka maka kalimat berjalan cepat
Direction = Pengaturan gaya arah kalimat berjalan
Bgcolor = Pengaturan warna kalimat atau Teks berjalan
Behavior = Pengaturan gaya kalimat bejalan
Scrolldelay = Pengaturan gaya kalimat yang ditentukan dengan detik/mil

Silahkan tinggal di copy aja kode html dibawah ini


<marquee scrollamount="100">TEKS INI AKAN BERJALAN</marquee>
<marquee direction="left" scrollamount="10">TEKS INI AKAN BERJALAN</marquee>
<marquee behavior="alternate" scrollamount="15">TEKS INI AKAN BERJALAN</marquee>
<marquee direction="right" scrollamount="10">TEKS INI AKAN BERJALAN</marquee>
<marquee direction="right" scrollamount="100">TEKS INI AKAN BERJALAN</marquee>
<marquee bgcolor="red">TEKS INI AKAN BERJALAN</marquee>

Hasilnya :
TEKS INI AKAN BERJALAN
TEKS INI AKAN BERJALAN
TEKS INI AKAN BERJALAN
TEKS INI AKAN BERJALAN
TEKS INI AKAN BERJALAN
TEKS INI AKAN BERJALAN


3. Marquee Dengan Penggabungan Beberapa Atribut
Silahkan tinggal di copy aja kode html dibawah ini


<marquee loop="5">KALIMAT INI AKAN BERJALAN</marquee>
<marquee direction="right" style="background-color: green;" width="125">KALIMAT INI AKAN BERJALAN</marquee><marquee direction="left" style="background-color: blue;" width="125">KALIMAT INI AKAN BERJALAN</marquee>
<marquee style="font-style: italic;">KALIMAT MIRING AKAN BERJALAN</marquee>

Hasilnya :
KALIMAT INI AKAN BERJALAN 5X SETELAHNYA AKAN HILANG
KALIMAT INI AKAN BERJALANKALIMAT INI AKAN BERJALAN
KALIMAT MIRING AKAN BERJALAN


4. Marquee Dengan Penggabungan Atribut Sesuai Perintah Mouse
Atribut berikut dapat Anda tambahkan untuk memanggil perintah pointer mouse. Singkatnya, efek teks akan berhenti saat panah mouse Anda melintasi/berada pada teks, dan sebaliknya teks akan kembali berjalan saat pointer mouse di lepas.

Silahkan tinggal di copy aja kode html dibawah ini


<marquee onmouseout="this.start()" onmouseover="this.stop()">KALIMAT INI AKAN BERJALAN</marquee>
<marquee direction="up" height="30" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="200">KALIMAT INI AKAN BERJALAN</marquee>
<marquee direction="down" height="30" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="200">KALIMAT INI AKAN BERJALAN</marquee>

Hasilnya :
KALIMAT INI AKAN BERJALAN

KALIMAT INI AKAN BERJALAN
KALIMAT INI AKAN BERJALAN


5. Marquee Dengan Perpaduan Atribut Style
Silahkan tinggal di copy aja kode html dibawah ini


<marquee direction="right" scrollamount="225" width="200">KALIMAT INI AKAN BERKEDIP</marquee>
<marquee scrollamount="200" width="180">KALIMAT INI AKAN BERKEDIP</marquee>
<marquee onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3">Kembali ke Mempercantik Tampilan Blog Dengan Membuat Teks Berjalan</marquee>

Hasilnya :
KALIMAT INI AKAN BERJALAN
KALIMAT INI AKAN BERJALAN
Kembali ke Mempercantik Tampilan Blog Dengan Membuat Teks Berjalan


Beberapa kode pada artikel ini, sudah saya benarkan atau saya perbaharui agar memudahkan Anda dalam menerapkan efek ini pada tulisan blog Anda, sebagai referensi panduan buat sahabat semua pecinta SAHABAT BLOGGER 77, berikut beberapa desain terbaru untuk membuat tampilan efek pada teks atau tulisan. Semoga tutorial ini dapat memberikan Anda inspirasi, untuk berbagi hal-hal menarik lainnya di sini. Terimakasih


Selamat pagi teman-teman hari ini Intan mau membagikan tutorial cara membuat kotak spoiler yang biasanya kita sering lihat di forum-forum. Kotak spoiler itu gunanya menyembunyikan gambar atau tulisan yang ingin kita tidak perlihatkan ke orang-orang tertentu atau mungkin hanya untuk menghemat halaman saja supaya tidak terlalu panjang. Kabar baiknya untuk kita semua, bukan hanya forum saja yang bisa menerapkan kotak spoiler, tapi kita sebagai blogger juga bisa memasang kotak spoiler di postingan blog. Intan sudah mencobanya di blog intan satunya. Hasilnya seperti ini:






Contoh penggunaan kotak spoiler di postingan blog sudah aku gunakan sebelumnya di blog review film. Untuk lihat demonya berkunjung saja ke Review Korean drama Gangnam Blues. Mengapa pakai spoiler? karena banyak orang yang tidak suka membaca ending film atau inti film sebelum mereka menonton sendiri film itu, jadi mereview sesuatu khususnya film jika kita akan menyebutkan cuilan-cuilan adegan kotak spoiler ini sangat diperlukan. Selain untuk menyembunyikan tulisan, kita juga bisa menyembunyikan gambar dalam spoiler. Banyak gunanya khan? Okay langsung saja deh kita mulai..
1. Masuk atau Log in ke Blogger.com
2. Lalu klik simbol pensil untuk menulis postingan baru








4. Masukkan kode berikut ini ke kotak Html postingan:


<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /> </div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">Ganti dengan tulisan, gambar atau kode script<img border="0" /></div></div></div>
5. Contoh Kotak spoiler dengan gambar:


Judul Spoiler:








Dengan Membuat Tampilan Gambar Berputar Di Blog maka tampilan blog lebih menarik karena tidak akan mempengaruhi loading blog jadi berat.

Oke dech..!!!
Berikut Kode Cara Membuat Tampilan Gambar Efek Berputar Di Blog


.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}}

Tutorial Cara Membuat Tampilan Gambar Efek Berputar Di Blog
Langkah-langkahnya sebagai berikut -

1. Login ke BLOG
2. Pada opsi Dasbor, cari Template >> Edit HTML.
3. Cari kode ]]></b:skin> (Tekan Tombol CTRL + F untuk Mempermudah pencarian)
4. Kemudian Copy dan Paste Kodenya sebelum atau di Atas Code ]]></b:skin>
5. Klik PRATINJAU untuk melihat hasil sementara, Jika sudah OK
6. Terakhir tinggal SIMPAN TEMPLATE dan lihat hasilnya.






Berikut ini akan saya berikan beberapa SCRIPT untuk ANTI COPASnya. Karena ada beberapa SCRIPT yang setelah ditambahkan pada kode HTML template BLOG namun tidak bisa bekerja  ini karena masing masing TEMPLATE Blog memiliki spesifikasi, ada yang mendukung script dan ada yang tidak.

Kegunaan script anti copas ini tidak lain agar Blog kita atau artikel tidak di COPAS seenaknya oleh orang lain, jelas tindakan ini sangat menjengkelkan bagi kita yang sudah susah payah menulis artikel tersebut.

Penggunaan kode script anti COPAS berikut ini juga ada dampaknya positif dan negatifnya :

- Positifnya artikel kita akan menjadi lebih AMAN ( ini cocok untuk Blog yang tidak ada unsur menyuruh pengunjung untuk COPAS )

- Negatifnya jika kita mengharuskan pengunjung Blog untuk COPAS bagian dari artikel kita  ( misal copas kode script ) maka script Anti Copas ini tidak begitu bermanfaat. Karena apapun yang ditampilkan pada post body tidak akan bisa di COPAS… Kecewa dech pengunjung Blog sobat

- Sebenernya ada cara yang lebih effektif agar Blog kita AMAN tanpa mengecewakan pengunjung contoh dengan pemasangan PRIVACY POLICY,DISCLAIMER,TERM OF CONDITION,TERM OF SERVICE atau DMCA. Karena tindakan COPAS bisa kita claim dan si pen COPAS mendapatkan sangsi berupa penutupan BLOG.

Okey lha..tanpa panjang lebar, langsung ke TKP :


Menggunakan SP_TILANG 
( info ini di-update September 2014 )

Fungsi SP_TILANG Menyembunyikan kode sumber halaman, mencegah tindakan klik kananuntuk tujuan copy paste artikel , mencegah dan benar - benar membatasi user !! SP_TILANG membantu Anda sepenuhnya. Menyembunyikan kode sumber benar-benar 100% aman tanpa diketahui oleh tamu pada website Anda.

Features
Tolak semua aksi merugikan termasuk Klik Kanan, Inspect Element,Hotkeys mengalihkan sebagai CTRL + N, CTRL + S dalam arti menghindari pengguna melihat kode sumber tanpa klik kanan, itu juga melarang pengunjung Blog untuk menyimpan ke dalam komputer mereka.
BLOCK features
√ CTRL + S
√ RIGHT CLICK
√ CTRL + u
√ Ctrl+Shift+I
√ dan masih banyak lainnya, silahkan kreasikan pada versi berikut.


Bagaimana Menggunakan
Hanya satu langkah untuk membuat Sp tilang bekerja di website anda. Salin kode dibawah ini :


<script type="text/javascript"> var SPklikkanan = 'TILANG';</script> <script type="text/javascript" src="https://googledrive.com/host/0B6KVua7D2SLCNDN2RW1ORmhZRWs/sp_tilang.js"></script>

Anda bisa meletakkan kode diatas di diantara tag <head> ..</head> atau tag setelah <body>...

Save Template dan selesai


Cara pertama script menggunakan CSS

1. Login ke akun Blogger Anda
2. Klik Template >> Edit HTML >> Cari kode ]]></b:skin> kemudian copy kode di bawah ini dan pastekan di atas kode ]]></b:skin>.




.post-body {
-webkit-touch-callout: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
3. Kemudian Simpan template 


Cara ke dua menggunakan standart HTML

Intinya sama seperti cara pertama namaun ini menggunkan HTML

1. Cari kode </body> gunakan ctrl+f untuk memudahkan pencarian.
2. Copas kode dibawah ini dan letakan sebelum atau diatas kode </body>.



<script type='text/javascript'>//<![CDATA[
var message = "That functionality is currently disabled";
function click(e) { if (document.all) {     if (event.button==1) {        return false;     }     if (event.button==2) {        alert(message);        return false;     } } if (document.layers) {     if (e.which > 1) {        alert(message);        return false;     } }}if (document.layers) { document.captureEvents(Event.MOUSEDOWN);}document.onmousedown=click;document.oncontextmenu=new Function("alert(message);return false")
document.write(unescape("%3C%53%43%52%49%50%54%20%4C%41%4E%47%55%41%47%45%3D%22%4A%61%76%61%53%63%72%69%70%74%22%3E%3C%21%2D%2D%0D%0A%68%70%5F%6F%6B%3D%74%72%75%65%3B%66%75%6E%63%74%69%6F%6E%20%68%70%5F%64%30%30%28%73%29%7B%69%66%28%21%68%70%5F%6F%6B%29%72%65%74%75%72%6E%3B%64%6F%63%75%6D%65%6E%74%2E%77%72%69%74%65%28%73%29%7D%2F%2F%2D%2D%3E%3C%2F%53%43%52%49%50%54%3E"));
hp_d00(unescape("%3C%53%43%52%49%50%54%20%4C%41%4E%47%55%41%47%45%3D%22%4A%61%76%61%53%63%72%69%70%74%22%3E%3C%21%2D%2D%0D%0A%66%75%6E%63%74%69%6F%6E%20%68%70%5F%6E%65%28%29%7B%72%65%74%75%72%6E%20%74%72%75%65%7D%6F%6E%65%72%72%6F%72%3D%68%70%5F%6E%65%3B%66%75%6E%63%74%69%6F%6E%20%68%70%5F%64%6E%28%61%29%7B%72%65%74%75%72%6E%20%66%61%6C%73%65%7D%3B%66%75%6E%63%74%69%6F%6E%20%68%70%5F%64%65%28%65%29%7B%72%65%74%75%72%6E%28%65%2E%74%61%72%67%65%74%2E%74%61%67%4E%61%6D%65%21%3D%6E%75%6C%6C%26%26%65%2E%74%61%72%67%65%74%2E%74%61%67%4E%61%6D%65%2E%73%65%61%72%63%68%28%27%5E%28%49%4E%50%55%54%7C%54%45%58%54%41%52%45%41%7C%42%55%54%54%4F%4E%7C%53%45%4C%45%43%54%29%24%27%29%21%3D%2D%31%29%7D%3B%66%75%6E%63%74%69%6F%6E%20%68%70%5F%6D%64%28%65%29%7B%69%66%28%65%2E%77%68%69%63%68%3D%3D%31%29%7B%77%69%6E%64%6F%77%2E%63%61%70%74%75%72%65%45%76%65%6E%74%73%28%45%76%65%6E%74%2E%4D%4F%55%53%45%4D%4F%56%45%29%3B%77%69%6E%64%6F%77%2E%6F%6E%6D%6F%75%73%65%6D%6F%76%65%3D%68%70%5F%64%6E%7D%7D%66%75%6E%63%74%69%6F%6E%20%68%70%5F%6D%75%28%65%29%7B%69%66%28%65%2E%77%68%69%63%68%3D%3D%31%29%7B%77%69%6E%64%6F%77%2E%72%65%6C%65%61%73%65%45%76%65%6E%74%73%28%45%76%65%6E%74%2E%4D%4F%55%53%45%4D%4F%56%45%29%3B%77%69%6E%64%6F%77%2E%6F%6E%6D%6F%75%73%65%6D%6F%76%65%3D%6E%75%6C%6C%7D%7D%69%66%28%6E%61%76%69%67%61%74%6F%72%2E%61%70%70%4E%61%6D%65%2E%69%6E%64%65%78%4F%66%28%27%49%6E%74%65%72%6E%65%74%20%45%78%70%6C%6F%72%65%72%27%29%3D%3D%2D%31%7C%7C%28%6E%61%76%69%67%61%74%6F%72%2E%75%73%65%72%41%67%65%6E%74%2E%69%6E%64%65%78%4F%66%28%27%4D%53%49%45%27%29%21%3D%2D%31%26%26%64%6F%63%75%6D%65%6E%74%2E%61%6C%6C%2E%6C%65%6E%67%74%68%21%3D%30%29%29%7B%69%66%28%64%6F%63%75%6D%65%6E%74%2E%61%6C%6C%29%7B%64%6F%63%75%6D%65%6E%74%2E%6F%6E%73%65%6C%65%63%74%73%74%61%72%74%3D%68%70%5F%64%6E%7D%65%6C%73%65%20%69%66%28%64%6F%63%75%6D%65%6E%74%2E%6C%61%79%65%72%73%29%7B%77%69%6E%64%6F%77%2E%63%61%70%74%75%72%65%45%76%65%6E%74%73%28%45%76%65%6E%74%2E%4D%4F%55%53%45%55%50%7C%45%76%65%6E%74%2E%4D%4F%55%53%45%44%4F%57%4E%29%3B%77%69%6E%64%6F%77%2E%6F%6E%6D%6F%75%73%65%64%6F%77%6E%3D%68%70%5F%6D%64%3B%77%69%6E%64%6F%77%2E%6F%6E%6D%6F%75%73%65%75%70%3D%68%70%5F%6D%75%7D%65%6C%73%65%20%69%66%28%64%6F%63%75%6D%65%6E%74%2E%67%65%74%45%6C%65%6D%65%6E%74%42%79%49%64%26%26%21%64%6F%63%75%6D%65%6E%74%2E%61%6C%6C%29%7B%64%6F%63%75%6D%65%6E%74%2E%6F%6E%6D%6F%75%73%65%64%6F%77%6E%3D%68%70%5F%64%65%7D%7D%69%66%28%77%69%6E%64%6F%77%2E%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%2E%73%75%62%73%74%72%69%6E%67%28%30%2C%34%29%3D%3D%22%66%69%6C%65%22%29%77%69%6E%64%6F%77%2E%6C%6F%63%61%74%69%6F%6E%3D%22%61%62%6F%75%74%3A%62%6C%61%6E%6B%22%3B%66%75%6E%63%74%69%6F%6E%20%68%70%5F%6E%6C%73%28%29%7B%77%69%6E%64%6F%77%2E%73%74%61%74%75%73%3D%22%22%3B%73%65%74%54%69%6D%65%6F%75%74%28%22%68%70%5F%6E%6C%73%28%29%22%2C%31%30%29%7D%68%70%5F%6E%6C%73%28%29%3B%66%75%6E%63%74%69%6F%6E%20%68%70%5F%64%70%31%28%29%7B%66%6F%72%28%69%3D%30%3B%69%3C%64%6F%63%75%6D%65%6E%74%2E%61%6C%6C%2E%6C%65%6E%67%74%68%3B%69%2B%2B%29%7B%69%66%28%64%6F%63%75%6D%65%6E%74%2E%61%6C%6C%5B%69%5D%2E%73%74%79%6C%65%2E%76%69%73%69%62%69%6C%69%74%79%21%3D%22%68%69%64%64%65%6E%22%29%7B%64%6F%63%75%6D%65%6E%74%2E%61%6C%6C%5B%69%5D%2E%73%74%79%6C%65%2E%76%69%73%69%62%69%6C%69%74%79%3D%22%68%69%64%64%65%6E%22%3B%64%6F%63%75%6D%65%6E%74%2E%61%6C%6C%5B%69%5D%2E%69%64%3D%22%68%70%5F%69%64%22%7D%7D%7D%3B%66%75%6E%63%74%69%6F%6E%20%68%70%5F%64%70%32%28%29%7B%66%6F%72%28%69%3D%30%3B%69%3C%64%6F%63%75%6D%65%6E%74%2E%61%6C%6C%2E%6C%65%6E%67%74%68%3B%69%2B%2B%29%7B%69%66%28%64%6F%63%75%6D%65%6E%74%2E%61%6C%6C%5B%69%5D%2E%69%64%3D%3D%22%68%70%5F%69%64%22%29%64%6F%63%75%6D%65%6E%74%2E%61%6C%6C%5B%69%5D%2E%73%74%79%6C%65%2E%76%69%73%69%62%69%6C%69%74%79%3D%22%22%7D%7D%3B%77%69%6E%64%6F%77%2E%6F%6E%62%65%66%6F%72%65%70%72%69%6E%74%3D%68%70%5F%64%70%31%3B%77%69%6E%64%6F%77%2E%6F%6E%61%66%74%65%72%70%72%69%6E%74%3D%68%70%5F%64%70%32%3B%64%6F%63%75%6D%65%6E%74%2E%77%72%69%74%65%28%27%3C%73%74%79%6C%65%20%74%79%70%65%3D%22%74%65%78%74%2F%63%73%73%22%20%6D%65%64%69%61%3D%22%70%72%69%6E%74%22%3E%3C%21%2D%2D%62%6F%64%79%7B%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%7D%2D%2D%3E%3C%2F%73%74%79%6C%65%3E%27%29%3B%66%75%6E%63%74%69%6F%6E%20%68%70%5F%64%63%28%29%7B%68%70%5F%74%61%2E%63%72%65%61%74%65%54%65%78%74%52%61%6E%67%65%28%29%2E%65%78%65%63%43%6F%6D%6D%61%6E%64%28%22%43%6F%70%79%22%29%3B%73%65%74%54%69%6D%65%6F%75%74%28%22%68%70%5F%64%63%28%29%22%2C%33%30%30%29%7D%69%66%28%6E%61%76%69%67%61%74%6F%72%2E%61%70%70%4E%61%6D%65%2E%69%6E%64%65%78%4F%66%28%27%49%6E%74%65%72%6E%65%74%20%45%78%70%6C%6F%72%65%72%27%29%3D%3D%2D%31%7C%7C%28%6E%61%76%69%67%61%74%6F%72%2E%75%73%65%72%41%67%65%6E%74%2E%69%6E%64%65%78%4F%66%28%27%4D%53%49%45%27%29%21%3D%2D%31%26%26%64%6F%63%75%6D%65%6E%74%2E%61%6C%6C%2E%6C%65%6E%67%74%68%21%3D%30%29%29%7B%69%66%28%64%6F%63%75%6D%65%6E%74%2E%61%6C%6C%26%26%6E%61%76%69%67%61%74%6F%72%2E%75%73%65%72%41%67%65%6E%74%2E%69%6E%64%65%78%4F%66%28%27%4F%70%65%72%61%27%29%3D%3D%2D%31%29%7B%64%6F%63%75%6D%65%6E%74%2E%77%72%69%74%65%28%27%3C%64%69%76%20%73%74%79%6C%65%3D%22%70%6F%73%69%74%69%6F%6E%3A%61%62%73%6F%6C%75%74%65%3B%6C%65%66%74%3A%2D%31%30%30%30%70%78%3B%74%6F%70%3A%2D%31%30%30%30%70%78%22%3E%3C%69%6E%70%75%74%20%74%79%70%65%3D%22%74%65%78%74%61%72%65%61%22%20%6E%61%6D%65%3D%22%68%70%5F%74%61%22%20%76%61%6C%75%65%3D%22%20%22%20%73%74%79%6C%65%3D%22%76%69%73%69%62%69%6C%69%74%79%3A%68%69%64%64%65%6E%22%3E%3C%2F%64%69%76%3E%27%29%3B%68%70%5F%64%63%28%29%7D%7D%66%75%6E%63%74%69%6F%6E%20%68%70%5F%6E%64%64%28%29%7B%72%65%74%75%72%6E%20%66%61%6C%73%65%7D%64%6F%63%75%6D%65%6E%74%2E%6F%6E%64%72%61%67%73%74%61%72%74%3D%68%70%5F%6E%64%64%3B%2F%2F%2D%2D%3E%3C%2F%53%43%52%49%50%54%3E"));
//]]></script>
3. Save Template


Cara yang ke tiga menggunakan standart HTML

Cara ketiga ini tidak jauh beda dengan yang cara kedua

1. Cari kode <body> gunakan ctrl+f untuk memudahkan pencarian.

2. Copas kode dibawah ini dan masukkan kedalam kode <body>.




oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'
Hasilnya akan seperti ini setelah dimasukkan ke kode <body>




<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>
3. Save Template


Catatan : Anda hanya menggunakan salah satu Tips diatas, Saran saya menggunakan SP_TILANG cara paling efisien dan ampuh menyembunyikan kode sumber halaman, mencegah tindakan klik kanan untuk tujuan copy paste artikel , mencegah itu semua  dan benar - benar membatasi user !!


Saya akan sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar,



Kali ini kita akan belajar mempercantik tampilan blog. Soal cantik ini penilaiannya relatif dari masing-masing pengguna. Tapi pada dasarnya, blog yang cantik itu yakni yang tidak mempersulit pengunjungnya.

Setiap pengunjung (visitor) kadang memberi waktu yang lama dalam satu blog, kadang pula muncul tenggelam. Ada banyak faktor yang mempengaruhi, salah satunya peletakan atau tampilan yang kurang menarik.

Nah... pada kesempatan ini kita akan belajar merubah ukuran header blogspot. Kadang ada orang yang ingin melebarkan header blognya, kadang pula ada yang ingin memperkecil. Setiap orang punya selera berbeda dalam mendesain blognya. 

Untuk merubah header blog, banyak blogger yang mengalami kesulitan. Karena untuk merubah ukuran header memang membutuhkan kemampuan otak atik kode HTML. Tapi itu dulu, sekarang blogspot telah memberi kita kemudahan.

Kita bisa merubah header blog tanpa harus mati-matian belajar CSS atau HTML. Caranya gampang, ikuti langkah berikut ini. Oh iya, metode ini khusus bagi blogger yang menggunakan template standar dari blogspot. Seperti blog ini menggunakan template sederhana. Metode ini pun telah berhasil saya terapkan di blog ini.


• Pertama-tama seperti biasa login ke akun blogspot Anda dan masuk ke dasbor. Selanjutnya pilih 'Template' dan klik 'Sesuaikan' 

• Anda akan dibawa kehalaman pengaturan antar muka. Di langkah ini usahakan rubah dulu warna header Anda agar bisa membedakan hasil perubahan. Namun jika warna header Anda sudah berbeda, hiraukan langkah ini. Bagi yang warna headernya sama dengan warna body, cara merubahnya seperti ini. Masuk ke tab 'Tindak Lanjut' lalu pilih 'Latar' dan pilih 'Latar Header' (lihat gambar). Anda bisa merubahnya sesuka hati. 





• Setelah warna header berubah (Bisa dilihat dikolom bawah pratinjau tampilan). Langkah sepanjutnya, tarik kursor Anda hingga kebawah lalu pilih 'Tambahkan CSS' (lihat gambar). 



• Anda akan diberi kolom isian. Selanjutnya tinggal copy paste script dibawah ini. 
.header-outer{
left:-40px;
width:1000px;
height:40px;
bottom:10px;
}

Penjelasan Script :

• left:-40px; merupakan kode untuk mengatur kerapatan sisi kanan header dengan tampilan layar, silahkan angkanya dirubah-rubah sesuai keinginan Anda dengan mencocokan perubahan preview yang tampak pada halaman desain blogger hingga sudah merasa cocok.
• width:1000px; merupakan kode untuk menyesuaikan panjang header di sisi kanan, silahkan di sesuaikan angkanya menurut selera Anda.
• height:40px; merupakan kode untuk merubah ukuran tinggi header, seperti biasa silahkan di sesuaikan dengan selera Anda.
• bottom:10px; merupakan kode jarak dari bagian bawah, jadi jika angka ini dirubah/diperbesar maka akan ada jarak antara header dengan widget yang ada pada bagian bawah header.
Gimana mudah bukan!




Membagi kolom pada postingan blog juga biasanya dibutuhkan oleh blogger yang mau blognya mirip tampilan koran atau majalah. Apapun alasan Anda untuk membagi kolom halaman postingan blog, semua bisa kita lakukan kali ini.

Beberapa script mengharuskan penggunaan kolom dipasang secara permanen didalam blog, artinya setelah script itu ditanam dalam Edit HTML setiap kali membuat postingan, kolomnya akan terbagi otomatis.

Namun script yang akan kita gunakan kali ini, hanya digunakan pada saat dibutuhkan. Dalam satu halaman pun, kita masih bisa menggunakan halaman full namun ada pembagian halaman didalamnya.

Skripnya seperti ini :



<table border="0" cellspacing="10" style="width: 500px;"> <tbody>
<tr> <td valign="top" width="250">Kolom 1</td> <td valign="top" width="250">Kolom 2</td> </tr>
</tbody></table>

Hanya saja mode untuk menjalankan script diatas kita diminta menggunakan mode HTML, bukan Compose. Namun setelah memasukkan scriptnya ke HTML Anda bisa kembali lagi ke mode Compose.



Lalu Lihat pada mode Compose

Contoh script diatas hanya membagi halaman menjadi dua bagian. Anda bisa membaginya lebih dari dua dengan menambahkan <td valign="top" width="250">Kolom 3</td> kedalam script. Taruh setelah kolom kedua tepatnya setelah kode </td>.

Contoh Scriptnya :


<table border="0" cellspacing="10" style="width: 450px;"> <tbody>
<tr> <td valign="top" width="150">Kolom 1</td> <td valign="top" width="150">Kolom 2</td> <td valign="top" width="150">Kolom 3</td> </tr>
</tbody></table>

Penjelasan Script :


• border="0" : Angka nol bisa diganti menjadi satu atau angka lainnya sesuai keinginan. Ini artinya Anda memberi garis pembatas pada setiap kolom. Angka nol menandakan garis pembatas tidak nampak.
• cellspacing="10" : Angkanya juga bisa Anda rubah, semakin kecil atau semakin besar. cellspacing masih merupakan bagian dari border, cellspacing artinya spasi antara sel dan tabel.
• width: 500px : Merupakan perintah lebar ukuran tabel yang dibuat. Anda bisa merubahnya sesuka hati, semakin besar angkanya maka semakin lebar ukuran pembagian halamannya, begitu juga pada setiap kolom, angkanya bisa Anda sesuaikan dengan lebar kolom secara keseluruhan.

Pada dasarnya, script diatas adalah script untuk membuat tabel dalam postingan. Namun karena border tidak ditampilkan sehingga terlihat halaman sedang terbagi.




Banyak pengguna blogger.com yang merasa terganggu dengan adanya icon Tang dan Obeng di blog.





Fungsi icon tersebut sebenernya cukup bermanfaat, yaitu untuk mengedit widget-widget di blog kita tanpa harus masuk ke dasbor blog.

Selain itu icon ini hanya akan terlihat oleh pemilik blog. Pengunjung nggak akan melihat icon Tang dan Obeng ini.

Tapi bagi sobat yang tetap merasa terganggu dengan adanya icon ini dan ingin menghapusnya, maka silakan ikuti caranya di bawah ini:

#1. Masuk ke dasbor blog > klik "Template" > klik "Edit HTML"

#2. Tekan CTRL+F dan cari kode ini di dalam template:


<b:include name='quickedit'/>

Jika ketemu, hapus kode tersebut.


NOTE: Jumlah kode tersebut biasanya lebih dari satu. Jika icon yang muncul ada lima, maka kodenya juga ada lima. Hapus saja semuanya.

#3. Klik "Simpan template"

#4. Selesai.....

Terima kasih.




Selengkapnya berikut tahap pembuatannya.




1. Masuk ke dasboard blogger.
2. Buat postingan baru.
3. Arahkan ke mode HTML. Lalu paste kode berikut.


<div class="snap_preview">
<div>
<span style="color: #0066ff;font-size: medium;">Memasang Galeri Image di Postingan</span></div>
<style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:25%;} .gallery-caption { margin-left: 0; }</style>
<div class="gallery snap_nopreview">


<dl class="gallery-item">
<dt class="gallery-icon"><a href="URL TARGET LINK" target="_blank">
<img border="0" height="150" src="URL IMAGE" width="200" /></a>
</dt>
</dl>
</div>
</div>


Keterangan :
Kalimat Memasang Galeri Image di Postingan silakan dirubah dengan kata-kata sendiri.
Kode width:25% menunjukkan bahwa penempatan gambar berjajar sebanyak 4 gambar. Rumusnya 100%/4=25%.
Ganti URL TARGET LINK dengan URL target link gambar.
Ganti URL IMAGE dengan URL image hasil upload. Saya menggunakan Picasa web album untuk mengupload image. Silakan simak cara Upload Gambar Blog Makin Mudah Melalui Picasa Web.
Kemudian untuk mengetahui URL image, silakan klik kanan gambar yang telah diupload, lalu Copy image address. Atau bisa pula melalui cara Cara Mengetahui dan Membuat URL Gambar.
Lalu ganti kode 150 untuk ketinggian gambar dan 200 untuk lebar gambar. Sesuaikan dengan luasan template blog.
Selesai, lalu akhiri dengan Publish.


Apakah itu hanya digunakan untuk memasang 4 gambar saja? Lalu bagaimana jika ingin meletakkan gambar lebih dari 4?


Caranya adalah menambah kode ini di bawah kode </dl>.


<dl class="gallery-item">
<dt class="gallery-icon"><a href="URL TARGET LINK" target="_blank">
<img border="0" height="150" src="URL IMAGE" width="200" /></a>
</dt>
</dl>


Lakukan sesuai dengan jumlah gambar yang diinginkan. Untuk sampel di atas menggunakan 4 gambar. Sehingga gunakan kode tersebut sebanyak 4 kali.


Demikian tutorial cara memasang galeri foto pada postingan blog. Semoga bermanfaat dan selamat mencoba.



Agar mudah dalam memahami dan mengikuti cara pembuatan email, tutorial cara membuat email baru lengkap dengan gambar dibuat dengan sederhana langkah demi langkah.


• Kunjungi Gmail.com. Langkah pertama untuk membuat akun email dengan Gmail, layanan email gratis dari Google, adalah untuk mengunjungi situs utama Gmail. Ketik ” gmail.com ” ke bar navigasi dari browser Anda, atau sebaliknya, ketik “Gmail” ke mesin pencari pilihan Anda dan klik hasil yang relevan. Klik “Buat akun” Pada layar login Gmail, lihat link pembuatan akun di bawah form login. Klik link ini untuk melanjutkan ke proses pembuatan akun.


Form Login Gmail
• Masukkan informasi pribadi Anda. Masukkan nama depan dan nama belakang, tentukan sandi dan ulang tahun anda. Pada kolom berikutnya, Anda akan diminta untuk gender, nomor telepon dan alamat email alternatif. Untuk pengisian alamat email alternatif bersifat opsional.


Memasukkan Nama
• Pilih alamat email dan password. Pada halaman pembuatan akun yang sama, Anda juga akan diminta untuk menentukian alamat email dan password. Sandi yang Anda pilih minimal delapan karakter, sedangkan alamat email Anda buat belum pernah digunakan oleh orang lain. Masukkan informasi ini dalam kotak yang sesuai. Anda harus mengetikkan password dua kali untuk konfirmasi keakuratan.


Memasukkan Password
• Gulir ke bawah sampai Anda melihat gambar yang berisi beberapa nomor. Ketik angka-angka ini ke dalam kotak yang ditunjuk – hal ini memastikan bahwa Anda adalah manusia dan bukan robot yang mencoba untuk mendaftar akun email. Jika Anda tidak ingin berpartisipasi dalam proses verifikasi ini, Anda akan diminta untuk memverifikasi melalui telepon.


Verifikasi Human
• Centang kotak di sebelah teks yang mengatakan “Saya menyetujui Persyaratan Layanan Google dan Kebijakan Privasi Google.” Ini menandakan bahwa Anda memahami dan menyetujui segala persyaratan, klik “Langkah berikutnya.”


Centang Persetujuan
• Selamat! Kita telah berhasil membuat akun Gmail baru :). Cukup selesai disini, silahkan Klik tombol “Lanjutkan ke Gmail” untuk mengakses inbox email anda.


Halaman Inbox



Hal pertama yang harus kita lakukan adalah mengunjungi mail.yahoo.com, maka kita akan diarahkan ke halaman login seperti gambar berikut:




Create New Account
• Perhatikan gambar diatas, klik tulisan ” Sign up for a new account “, maka kita akan diarahkan ke halaman lain, seperti gambar dibawah ini:


Signup Email
• Pada halaman signup ini kita dipersilakan untuk mengisi data mengenai diri kita, selengkapnya perhatikan nomor pada gambar diatas dan berikut penjelasannya.
nomor 1: Isikan nama depan kita
nomor 2: Isikan nama akhir kita
nomor 3: Isikan alamat email yang ingin kita buat
nomor 4: Isikan password email kita
nomor 5: Isikan no hp untuk proses aktivasi dan recovery
• Gulir kursor kearah bawah dan kita akan dipersilahkan untuk melengkapi data diri kita.


Create Account
• Lanjut, penjelasan nomor pada gambar diatas.
nomor 1: Isikan tanggal bulan dan tahun pada saat kita lahir
nomor 2: Isikan jenis kelamin
nomor 3: Bersifat optional, isikan no hp cadangan
• Klik tombol ” Create account ” untuk membuat akun email yahoo. Maka kita akan diarahkan ke halaman baru seperti gambar dibawah ini:


Send SMS
• Klik tombol ” Send SMS “, pada no 1 diatas merupakan no hp yang telah kita isiskan sebelumnya. setelah klik kita akan diarahkan ke halaman baru untuk aktivasi, seperti gambar dibawah ini:


Submit code
• Isikan kode verivikasi yang telah dikirimkan ke hp ke kolom yang ditunjuk no 1 dan klik tombol ” Submit code “, maka kita akan diarahkan ke halaman inbox seperti gambar dibawah ini:


Halaman Inbox
• Selamat! Email yahoo kita telah selesai dibuat.



Langkah yang akan ditempuh hampir mirip dengan langkah cara membuat email baru di gmail dan yahoo, untuk lebih jelasnya perhatikan langkah dibawah ini.


• Langkah pertama adalah kunjungi halaman live.com dan kita akan diarahkan ke halaman login seperti gambar dibawah ini:


Daftar Sekarang
• Perhatikan gambar diatas, karena kita mau membuat akun baru, maka klik tulisan ” Daftar sekarang ” maka kita akan diarahkan ke halaman pengisian data diri kita. Perhatikan gambar dibawah.


Isi Data
• Lihat gambar diatas, pengisian data diri ini melingkupi:
nomor 1: Isikan nama depan
nomor 2: Isikan nama Akhir
nomor 3: Isikan alamat email yang diinginkan
nomor 4: Isikan sandi atau password
• Oke, masih belum selesai. Gulir kursor kearah bawah dan masih ada beberapa kolom yang harus kita lengkapi. Perhatikan gambar dibawah.


Lengkapi Data
• Lihat gambar diatas, berikut penjelasan nomor.
nomor 1: Isikan lagi sandi untuk memastikan
nomor 2: Isikan Negara kita
nomor 3: Isikan Tanggal Lahir
nomor 4: Isikan Jenis Kelamin
nomor 5: Isikan no hp
nomor 6: Isikan email alternatif, email ini akan sangat berguna untuk recovery pada saat kita lupa password
• Ayo gulir lagi kursor kita ke bawah, maka kita akan dipersilahkan mengisi captcha seperti gambar dibawah.


Buat Akun
• Lihat gambar diatas, berikut penjelasan nomor.
nomor 1: Isikan
nomor 2: Centang combo box jika kita ingin tawaran promosi dari microsoft
nomor 3: Klik tombol ” Buat akun ” untuk membuat akun email hotmail
• Maka kita akan diarahkan ke halaman inbox hotmail, lihat gambar dibawah.


Halaman Inbox
Selamat email hotmail kita sudah jadi! :).

Kesimpulan Cara Membuat Email
Ternyata tidak sulit dalam membuat email, kita hanya cukup menyiapkan data diri kita yang meliputi nama, tanggal lahir dan no hp. Beberapa layanan email ada yang mengharuskan no hp ada yang tidak. Dengan mengisikan no hp, kita bisa memanfaatkan fitur recovery melalui hp. Fitur recovery dibutuhkan ketika kita lupa password.






Untuk menerapkan efek ini pada blog bisa melalui edit template, ataupun lewat gadget, silakan anda pilih cara mana yang menurut anda lebih nyaman.


Cara yang pertama melalui edit template :
• Pada dashboard blogger klik Template > Edit html
• Beri centang pada Expand Template Widget
• Cari kode </body> lalu letakkan kode script efek di atas kode </body>, berikut script-nya:
  Efek bintang berwarna kuning,
  
  <script src='http://wadah-tutorial.googlecode.com/files/bintangkuning.js' type='text/javascript'/>
  Efek bintang berwarna biru,
  
  <script src='http://wadah-tutorial.googlecode.com/files/bintangbiru.js' type='text/javascript'/>
  Efek bintang berwarna oren,
  
  <script src='http://wadah-tutorial.googlecode.com/files/bintangoren.js' type='text/javascript'/>
  Efek bintang berwarna pink,
  
  <script src='http://wadah-tutorial.googlecode.com/files/bintangpink.js' type='text/javascript'/>
• Terakhir klik Save Template.
Untuk cara kedua melalui Gadget :
• Pada dashboard klik Tata Letak > Add a gadget > HTML/JavaScript.
• Letakkan script dibawah ini pada gadget.
  Efek bintang berwarna kuning,
  
  <script src='http://wadah-tutorial.googlecode.com/files/bintangkuning.js' type='text/javascript'/></script>
  Efek bintang berwarna biru,
  
  <script src='http://wadah-tutorial.googlecode.com/files/bintangbiru.js' type='text/javascript'/></script>
  Efek bintang berwarna oren,
  
  <script src='http://wadah-tutorial.googlecode.com/files/bintangoren.js' type='text/javascript'/></script>
  Efek bintang berwarna pink,
  
  <script src='http://wadah-tutorial.googlecode.com/files/bintangpink.js' type='text/javascript'/></script>
•  Lalu klik Simpan / Save.
Selesai,,, silakan lihat hasilnya pada blog sobat.