Cara Memberi Password Pada Postingan Blogspot

Posted By supriatno On October 19th 2012. Under Tips & Trik, Tutorial Blog Pemula  Tags: Cara Memberi Password Pada Postingan Blogspot, Proteksi Postingan  

Setelah lama tidak posting tuorial blog, kali ini saya mau share Tips khusus blog berbasis blogger. Adapun tipsnya adalah Cara Memberi Password Pada Postingan Blogspot. Cara ini bisa untuk membatasi akses pembaca atau anda tidak ingin artikel itu dibaca orang lain karena bersifat rahasia. Untuk yang mau tahu cara proteksi halaman pada blogdetik bisa baca http://supriatno.blogdetik.com/index.php/2012/02/08/cara-memproteksi-halaman-postingan-blog/

Dengan memproteksi postingan blog tersebut, si pengunjung diminta untuk memasukkan password yang valid agar bisa membuka postingan seluruhnya. Dan berikut  Cara Memberi Password Pada Postingan Blogspot :

1. Login Ke blogger.com
2. Klik Template, Lalu Klik Edit HTML dan Klik Lanjutkan
3. Cari kode </head> dan Copas kode berikut tepat diatas kode </head> :
<script type=”text/javascript” src=”http://anthzo.webs.com/Blog/PPostingan.js”></script>
4. Save Template
5. Kemudian Kunjungi Situs : http://www.vincentcheung.ca/jsencryption/
6. Pada kolom “Key”, masukkan password untuk proteksi postingan sobat. Kolom “Plain Text”, masukkan HTML postingan (Pada postingan pilih yg “Edit HTML”nya) yang ingin diproteksi.
Lihat gambar :

7.Lalu klik tombol “Encrypt”
8. Setelah itu, copykan seluruh isi di kolom “HTML Code” dan pastekan pada postingan blog sobat. Lihat Gambar :

9. Simpan Postingan dan lihat hasilnya…

Saya telah berhasil membuat demo website tersebut, dimana teman2 bisa melihat hasil proteksi dari cara diatas. Dan berikut demo proteksi postingan KLIK http://adf.ly/DpEfz dan password untuk buka : blog supriatno
Selamat mencoba

Read More

Mengganti Icon Pada Blogger

Berikut Cara Mengganti Icon Pada Blogger

Cara 1 :

1. Login ke blogger kamu

2. Pilih menu Rancangan >> Edit HTML >> Centang Expand Template Widget

3. Cari kode <b:skin>  , tempatkan script berikut sebelum kode <b:skin>

<link href='URL GAMBAR' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

4. Ganti tulisan URL gambar dengan URL gambar kamu, ukuran bebas

5. Terakhir, simpan template , dan lihat hasilnya ...

Cara 2 :

1. Login ke blogger kamu

2. Pilih menu Rancangan >> Edit HTML >> Centang Expand Template Widget

3. Cari kode </head> (Cari menggunakan CTRL+f) tempatkan script berikut sebelum kode </head>

<link href='URL GAMBAR' rel ='SHORTCUT ICON'/>

4. Ganti tulisan URL gambar dengan URL gambar kamu, ukuran bebas juga
5. Cara yang hampir sama dengan cara yang ke-2 ..

Read More

Cara Menghilangkan Underline (Garis Bawah) Link di Blogspot

Link di dalam blog ataupun website secara default akan nampak memiliki garis bawah (underline). Terkadang tampilan ini terlihat kurang elegan dan terlalu menonjol. Template blogger yang natural, belum diberi aturan CSS untuk menghilangkan uderline (garis bawah) link dan akan nampak seperti contoh berikut:

Read More

Cara Membuat Daftar Isi Blog Secara Otomatis

Cara Membuat Daftar Isi Blog Secara Otomatis - Selamat malam sahabat blogger. Pada kesempatan ini saya akan menjelaskan bagaimana cara membuat daftar isi di blog secara otomatis. Daftar isi sangat berguna

untuk mempermudah para pengunjung blog dalam mencari artikel atau konten yang mereka cari / inginkan. Sedangkan manfaat untuk admin blog yaitu daftar isi blog juga dapat meningkatkan jumlah page view blog.

Untuk melihat tampilannya seperti apa, anda bisa melihat demonya terlebih dahulu :
DEMO VIEW

Nah bagaimana, apakah anda berminat untuk memasang daftar isi di blog anda? Untuk memasang widget daftar isi di blog, anda dapat melakukan beberapa langkah mudah membuat daftar isi berikut ini :

Langkah-langkah memasang widget Daftar Isi di blog :
1. Login ke akun blogger
2. Klik "Laman Baru" kemudian klik "Laman Kosong", untuk lebih jelasnya, silahkan perhatikan gambar dibawah ini :

Gambar 1.1

3. Kemudian pilih Mode HTML

4. Lalu copy kode script dibawah ini :

<div style="border: 1px solid #eee; height: 700px; overflow: auto; padding: 10px; width: 530px;">
<script src="http://widgetsitemap.googlecode.com/files/daftarisi.js"></script><script src="http://ulfar88.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script> </div>

Keterangan :
Ganti kode yang berwarna merah ( ulfar88 ) : dengan alamat blog anda!

6. Kemudian anda letakan pada halaman kosong tadi,

Gambar 1.2

Keterangan gambar 1.2 :
1. Pilih mode HTML
2. Letakan kode pada halaman kosong
3. Berikan judul (terserah anda)
4. Klik "Publikasikan"

7. Selesai

Read More

Mengganti Icon Pada Blogger

Berikut Cara Mengganti Icon Pada Blogger

Cara 1 :

1. Login ke blogger kamu

2. Pilih menu Rancangan >> Edit HTML >> Centang Expand Template Widget

3. Cari kode <b:skin>  , tempatkan script berikut sebelum kode <b:skin>

<link href='URL GAMBAR' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

4. Ganti tulisan URL gambar dengan URL gambar kamu, ukuran bebas

5. Terakhir, simpan template , dan lihat hasilnya ...

Cara 2 :

1. Login ke blogger kamu

2. Pilih menu Rancangan >> Edit HTML >> Centang Expand Template Widget

3. Cari kode </head> (Cari menggunakan CTRL+f) tempatkan script berikut sebelum kode </head>

<link href='URL GAMBAR' rel ='SHORTCUT ICON'/>

4. Ganti tulisan URL gambar dengan URL gambar kamu, ukuran bebas juga
5. Cara yang hampir sama dengan cara yang ke-2 ..

Read More

Menghapus / Menghilangkan Navbar Blogger | Tutorial Blog

Navbar (navigation bar) default dari blogger biasanya terletak pada bagian paling atas dari sebuah blog. Navbar ini sering kali di hapus oleh para blogger karena di anggap memiliki kode yang tidak valid atau error, di samping stylenya yang kurang memuaskan bagi para blogger.

Pada tutorial ini saya akan share cara untuk menghilangkan navbar blogger tersebut ataupun hanya sekedar menyembunyikannya saja.

Berikut salah satu caranya :

• Masuk ke akun blogger anda
• Klik pada Template. (jangan lupa backup dulu template anda, untuk menghindari sesuatu yang tidak diinginkan).
• Selanjutnya, klik Edit HTML dan klik Proceed / Lanjutkan.
• Beri tanda centang pada Expand Template Widget.
• Cari kode ]]></b:skin>, lalu letakkan kode berikut diatas kode ]]></b:skin>
  
  #navbar-iframe {
  height:0px;
  visibility:hidden;
  display:none
  }
• Terakhir klik Simpan Template.

Pada langkah di atas sobat sudah menyembunyikan / tidak menampilkan Navbar bawaan Blogger, namun pada template blog sobat masih terdapat kode dari Navbar tersebut.

Untuk cara kedua Menghilangkan Navbar bawaan Blogger, Sobat dapat melakukan langkah di bawah ini :

• Sama seperti cara pertama. Masuk ke akun blogger anda
• Klik pada Template.
• Lalu klik Edit HTML dan klik Proceed / Lanjutkan.
• Beri tanda centang pada Expand Template Widget.
• Cari kode <body>, lalu letakkan kode berikut diatas kode <body>
  
  <script type='text/javascript'>
  <![CDATA[
  <!-- /*<body>*/ -->
  ]]>
  </script>
• Simpan Template Anda.
• Anda akan melihat gambar konformasi seperti di bawah ini.
  
• Klik Delete Widget untuk menghapus Navbar.
  

Jika Anda melakukan cara ini Anda juga akan menghapus Link Quick Edit gambar pensil, atau gambar kunci pas ama obeng di blog Sobat, namun cara ini sangat banyak mengurangi error pada blog.

Untuk cara ketiga dalam Menghapus / Menghilangkan Navbar Blogger, sama halnya dengan cara sebelumnya, cuma kode yang kita cari seperti dibawah ini :

 <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
       bla...
       bla...
       bla...
</b:widget>
</b:section>

Jika sudah ketemu, hapus kode tersebut lalu Simpan Template Anda.

Silakan Anda pilih cara mana yang Sobat gunakan untuk Menghapus / Menghilangkan Navbar Blogger.

Read More

Cara Menghilangkan Underline (Garis Bawah) Link di Blogspot

Link di dalam blog ataupun website secara default akan nampak memiliki garis bawah (underline). Terkadang tampilan ini terlihat kurang elegan dan terlalu menonjol. Template blogger yang natural, belum diberi aturan CSS untuk menghilangkan uderline (garis bawah) link dan akan nampak seperti contoh berikut:

Tag default link:

<a href="http://buka rahasia.blogspot .com">tips-tricks blogger</a>

Hasilnya:
tips-tricks blogger

Jika ingin menghilangkan garis bawah (underline) pada link, gunakan:

<a  href="http://buka rahasia.blogspot .com" style="text-decoration:none">tips-tricks blogger</a>

Hasilnya:
tips-tricks blogger

Jika ingin mengubah semua link dalam blog/website secara default dan otomatis tidak bergaris bawah (underline), maka anda harus mengedit template HTML:
1. Masuk Ke dashboard > Design/Rancangan > Edit HTML.
2. Cari aturan CSS link (a) seperti ini (biasanya berada di bagian atas namun setiap template tidak sama persis tergantung aturan link dan warna template yang digunakan):

a {color: #1C4991; dst.............}

3. Untuk membuat underline link hilang, tambahkan text-decoration: none; contoh:

a {color: #1C4991;text-decoration: none; dst.............}

4. Save template dan lihat hasilnya.

Read More

Cara membuat tulisan berjalan (marquee)

Cara membuat tulisan berjalan (marquee) – Mungkin anda pernah mengunjungi sebuah blog atau website yang terdapat tulisan berjalan dan dalam hati anda bertanya, bagaimana cara membuat tulisan berjalan seperti itu yah?

Cara membuat tulisan berjalan (marquee)

Untuk membuat tulisan berjalan itu sangat mudah karena hanya dengan kode HTML sederhana sudah akan tercipta sebuah tulisan berjalan. Kode HTML untuk membuat tulisan berjalan di kenal dengan perintah Marquee. Kode dasar perintah marquee adalah sebagai berikut :

<marquee>Tulisan disini akan berjalan</marquee>

Selain kode dasar marquee, ada perintah lain (umumnya disebut sebagai atribut) yang disisipkan untuk mengatur keindahan tampilan tulisan yang berjalan. Atribut yang sering di gunakan dalam kode marquee adalah :

• bgcolor="warna" » Untuk mengatur warna background (latar belakang) teks
• direction="left/right/up/down" » Mengatur arah gerakan teks
• behavior="scroll/slide/alternate" » Untuk mengatur perilaku gerakan
• Scroll » teks bergerak berputar
• Slide » teks bergerak sekali lalu berhenti
• Alternate » teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)
• title="pesan" » Pesan akan muncul saat mouse berada di atas teks
• scrollmount="angka" » mengatur kecepatan geraka, semakin besar angka semakin cepat gerakannya.
• scrolldelay="angka" » Untuk mengatur waktu tunda gerakan dalam mili detik
• loop="angka|-1|infinite" » Mengatur jumlah loop
• width="lebar" » Mengatur lebar blok teks dalam pixel atau perse

Agar lebih jelas akan Kang Rohman sertakan contohnya :

Contoh marquee dari gerakan :

<marquee align="center" direction="left" height="10" scrollamount="2" width="30%"> marquee dari kanan ke kiri </marquee>

Contoh hasilnya :

marquee dari kanan ke kiri

ganti kata "left" dengan keinginan anda yaitu bisa : right,  up, down

Contoh marquee dengan variasi huruf dan warna latar belakang :

<div align="left"><font face="georgia" color="White"><strong><marquee bgcolor="red" width="70%" scrollamount="3" behavior="alternate"> </marquee></strong></font></div>

Contoh hasilnya  :

Testing

Agar lebih menarik, kode marquee juga bisa dipadukan dengan javascript sederhana, seperti onmouseover="this.stop()" onmouseout="this.start()" . Dengan kode javascript tersebut, tulisan berjalan akan seketika berhenti apabila pointer mouse komputer pengunjung blog kita mengarah ke tulisan yang berjalan, dan akan berjalan kembali apabila pointer mouse dipindah ke tempat lain.

Contoh, silahkan arahkan pointer mouse anda ke area marquee di bawah ini : Contoh kodenya :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center"> silahkan tunjuk ke sini </marquee>

Contoh hasilnya :

 silahkan tunjuk ke sini 
Contoh kode marquee yang di dalam nya terdapat link :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">
<a href=" http://www.krtutorplus.com/">cara membuat blog</a><br/> 
<a href="http://krtutorplus.com/2007/04/bikin-blog.html">Membuat blog </a><br/> 
<a href="http://www.krtutorplus.com/2007/08/membuka-program-periklanan.html">Pasang Iklan </a><br/> 
</marquee> 
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="down" width="100%" height="100" align="center"> 
<a href="http://www.krtutorplus.com/2007/08/membuka-program-periklanan.html">Pasang Iklan </a><br/>
<a href="http://krtutorplus.com/2007/04/bikin-blog.html">Membuat blog </a><br/> 
<a href=" http://www.krtutorplus.com/">cara membuat blog</a><br/> 
</marquee>

Contoh hasilnya :
cara membuat blog
Membuat blog
Pasang Iklan
Pasang Iklan
Membuat blog
cara membuat blog

Itu adalah beberapa contoh variasi kode marquee yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta variasi-variasi dari marquee ini.

Read More

Membuat search Engine di Blog

Saat ini Search Engine tidak bisa dipisahkan dalam dunia internet. Dengan Search Engine kita bisa mencari tahu tentang suatu hal yang kita inginkan sesuai dengan keyword yang kita ketikkan dan juga bla.bla..bla..... udah ah penjelasannya, yang mau dibahas disini adalah bagaimana caranya membuat search engine di blogger . Caranya sangat mudah, yaitu:

  
 

1. Login ke blogger terus klik Layout terus pilih page elements nha disitu kan banyak tulisan Add a page elements klik link tersebut dan sesuaikan dimana tempatnya menaruh search engine
2. kemudian pada layar baru yang muncul pilih HTML/Javascript kemudian copy/paste script/kode berikut ini di dalam kolom content.

<form action="http://nama-blog.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Ganti nama-blog dengan nama blog kamu. Angka 30 menunjukkan panjang kotak (text box) semakin banyak angkanya maka semakin panjang textbox-nya

Read More

Cara membuat tulisan berjalan (marquee)

Cara membuat tulisan berjalan (marquee) – Mungkin anda pernah mengunjungi sebuah blog atau website yang terdapat tulisan berjalan dan dalam hati anda bertanya, bagaimana cara membuat tulisan berjalan seperti itu yah?

Cara membuat tulisan berjalan (marquee)

Untuk membuat tulisan berjalan itu sangat mudah karena hanya dengan kode HTML sederhana sudah akan tercipta sebuah tulisan berjalan. Kode HTML untuk membuat tulisan berjalan di kenal dengan perintah Marquee. Kode dasar perintah marquee adalah sebagai berikut :

<marquee>Tulisan disini akan berjalan</marquee>

Selain kode dasar marquee, ada perintah lain (umumnya disebut sebagai atribut) yang disisipkan untuk mengatur keindahan tampilan tulisan yang berjalan. Atribut yang sering di gunakan dalam kode marquee adalah :

• bgcolor="warna" » Untuk mengatur warna background (latar belakang) teks
• direction="left/right/up/down" » Mengatur arah gerakan teks
• behavior="scroll/slide/alternate" » Untuk mengatur perilaku gerakan
• Scroll » teks bergerak berputar
• Slide » teks bergerak sekali lalu berhenti
• Alternate » teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)
• title="pesan" » Pesan akan muncul saat mouse berada di atas teks
• scrollmount="angka" » mengatur kecepatan geraka, semakin besar angka semakin cepat gerakannya.
• scrolldelay="angka" » Untuk mengatur waktu tunda gerakan dalam mili detik
• loop="angka|-1|infinite" » Mengatur jumlah loop
• width="lebar" » Mengatur lebar blok teks dalam pixel atau perse

Agar lebih jelas akan Kang Rohman sertakan contohnya :

Contoh marquee dari gerakan :

<marquee align="center" direction="left" height="10" scrollamount="2" width="30%"> marquee dari kanan ke kiri </marquee>

Contoh hasilnya :

marquee dari kanan ke kiri

ganti kata "left" dengan keinginan anda yaitu bisa : right,  up, down

Contoh marquee dengan variasi huruf dan warna latar belakang :

<div align="left"><font face="georgia" color="White"><strong><marquee bgcolor="red" width="70%" scrollamount="3" behavior="alternate"> </marquee></strong></font></div>

Contoh hasilnya  :

Testing

Agar lebih menarik, kode marquee juga bisa dipadukan dengan javascript sederhana, seperti onmouseover="this.stop()" onmouseout="this.start()" . Dengan kode javascript tersebut, tulisan berjalan akan seketika berhenti apabila pointer mouse komputer pengunjung blog kita mengarah ke tulisan yang berjalan, dan akan berjalan kembali apabila pointer mouse dipindah ke tempat lain.

Contoh, silahkan arahkan pointer mouse anda ke area marquee di bawah ini : Contoh kodenya :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center"> silahkan tunjuk ke sini </marquee>

Contoh hasilnya :

 silahkan tunjuk ke sini 
Contoh kode marquee yang di dalam nya terdapat link :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">
<a href=" http://www.krtutorplus.com/">cara membuat blog</a><br/> 
<a href="http://krtutorplus.com/2007/04/bikin-blog.html">Membuat blog </a><br/> 
<a href="http://www.krtutorplus.com/2007/08/membuka-program-periklanan.html">Pasang Iklan </a><br/> 
</marquee> 
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="down" width="100%" height="100" align="center"> 
<a href="http://www.krtutorplus.com/2007/08/membuka-program-periklanan.html">Pasang Iklan </a><br/>
<a href="http://krtutorplus.com/2007/04/bikin-blog.html">Membuat blog </a><br/> 
<a href=" http://www.krtutorplus.com/">cara membuat blog</a><br/> 
</marquee>

Contoh hasilnya :
cara membuat blog
Membuat blog
Pasang Iklan
Pasang Iklan
Membuat blog
cara membuat blog

Itu adalah beberapa contoh variasi kode marquee yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta variasi-variasi dari marquee ini.

Read More

Cara Membuat Kotak Scroll atau Box Scroll

Ditulis oleh: Minggu, 28 Juli 2013

Belajar SEO Buka Rahasia No 1 Cara Membuat Kotak Scroll atau Box Scroll

Sobat Blogger sudah tahu apa itu Kotak Scroll atau Box Scroll kan?

Bagi yang masih belum tahu nanti saya kasih contohnya Kotak Scroll atau Box Scroll dan sekarang kita bahas dulu apa gunanya memakai Kotak Scroll.

Box Scroll atau Kotak Scroll kegunaanya ialah memberi batasan kepada Tulisan atau Gambar agar tidak terlalu lebar atau terlalu panjang,selain itu Kotak Scroll juga sangat berguna untuk memperindah/mempercantik Blog.

adakah hubungan antara Kotak Scroll dengan SEO?

Menurut saya sih ada hubungannya,karena kotak scroll bisa mencegah lambatnya loading blog,selain itu dengan memakai kotak scroll anda bisa menuliskan banyak KATA KUNCI atau KEYWORD dan hal itu bisa sedikit mengecoh Search Engine.

Untuk Membuat Kotak Scroll atau Box Scroll Silahkan anda Copy Kode berikut:

<div style="overflow:auto;width:100%px;height:50px;padding:10px;border:1px solid #555">Kotak Scroll atau Box Scroll By <a href="http://bukarahasia-no1.blogspot.com/">Buka Rahasia No 1</a> Selamat menikmati dan Memanfaatkan Kotak Scroll ini Sebaik-baiknya dan silahkan anda berkreasi sendiri untuk mempercantik Kotak Scroll atau Box Scroll ini sehingga sesuai dengan selera anda</div>

Setelah itu silahkan anda paste di Postingan anda dalam Mode HTML jangan dalam Mode Compose.

anda juga bisa menaruhnya di gadget.dan silahkan anda rubah tulisan saya yang sangat tebalkan diatas dengan tulisan anda atau gambar anda.

Contoh Hasil dari Kotak Scroll diatas seperti berikut:

Kotak Scroll atau Box Scroll By Buka Rahasia No 1 Selamat menikmati dan Memanfaatkan Kotak Scroll ini Sebaik-baiknya dan silahkan anda berkreasi sendiri untuk mempercantik Kotak Scroll atau Box Scroll ini sehingga sesuai dengan selera anda

Sekian Cara Membuat Kotak Scroll atau Box Scroll Semoga bermanfaat.

Read More

Cara Memberi Password Pada Postingan Blogspot

Posted By supriatno On October 19th 2012. Under Tips & Trik, Tutorial Blog Pemula  Tags: Cara Memberi Password Pada Postingan Blogspot, Proteksi Postingan  

Setelah lama tidak posting tuorial blog, kali ini saya mau share Tips khusus blog berbasis blogger. Adapun tipsnya adalah Cara Memberi Password Pada Postingan Blogspot. Cara ini bisa untuk membatasi akses pembaca atau anda tidak ingin artikel itu dibaca orang lain karena bersifat rahasia. Untuk yang mau tahu cara proteksi halaman pada blogdetik bisa baca http://supriatno.blogdetik.com/index.php/2012/02/08/cara-memproteksi-halaman-postingan-blog/

Dengan memproteksi postingan blog tersebut, si pengunjung diminta untuk memasukkan password yang valid agar bisa membuka postingan seluruhnya. Dan berikut  Cara Memberi Password Pada Postingan Blogspot :

1. Login Ke blogger.com
2. Klik Template, Lalu Klik Edit HTML dan Klik Lanjutkan
3. Cari kode </head> dan Copas kode berikut tepat diatas kode </head> :
<script type=”text/javascript” src=”http://anthzo.webs.com/Blog/PPostingan.js”></script>
4. Save Template
5. Kemudian Kunjungi Situs : http://www.vincentcheung.ca/jsencryption/
6. Pada kolom “Key”, masukkan password untuk proteksi postingan sobat. Kolom “Plain Text”, masukkan HTML postingan (Pada postingan pilih yg “Edit HTML”nya) yang ingin diproteksi.
Lihat gambar :

7.Lalu klik tombol “Encrypt”
8. Setelah itu, copykan seluruh isi di kolom “HTML Code” dan pastekan pada postingan blog sobat. Lihat Gambar :

9. Simpan Postingan dan lihat hasilnya…

Saya telah berhasil membuat demo website tersebut, dimana teman2 bisa melihat hasil proteksi dari cara diatas. Dan berikut demo proteksi postingan KLIK http://adf.ly/DpEfz dan password untuk buka : blog supriatno
Selamat mencoba

Read More

Cara Membuat Halaman Blogspot Pake Password

 

Cara Membuat Halaman Blogspot Pake Password gampang banget. Jika Anda ingin hanya orang tertentu, bahkan cuma Anda sendiri, yang bisa membuka halaman (page) statis di blog blogspot, buatlah password untuk halaman tersebut.

Ini dia cara cara membuat password pada halaman blogspot alias Cara Membuat Halaman Blogspot Pake Password :

1. Login ke Blogger  >> Dashboard >> Pages >>
2. Buatlah halaman (pag) dengan cara :klik New Pages >> Blank Page
3. Isi judu/nama Halaman
4. Isi halamannya dengan tulisan atau materi yang Anda inginkan
5. Klik “HTML”
6. Masukkan kode berikut ini sebelum atau sesudah isi halaman:

<script language="JavaScript">
var password;
var pass1="PASSWORD";
password=prompt('Enter your password in order to view this page!',' ');
if (password==pass1) alert('Correct password, OK to enter!');
else {
  window.location="SITE-LINK";
}
</script>

4. Ganti teks berwarna merah dengan versi Anda, terutama PASSWORD.
5. Ganti teks SITE-LINK dengan URL Page/Halaman Blogspot Anda.
6. Save!

Read More

Cara Membuat Daftar Isi Blog Secara Otomatis

Cara Membuat Daftar Isi Blog Secara Otomatis - Selamat malam sahabat blogger. Pada kesempatan ini saya akan menjelaskan bagaimana cara membuat daftar isi di blog secara otomatis. Daftar isi sangat berguna

untuk mempermudah para pengunjung blog dalam mencari artikel atau konten yang mereka cari / inginkan. Sedangkan manfaat untuk admin blog yaitu daftar isi blog juga dapat meningkatkan jumlah page view blog.

Untuk melihat tampilannya seperti apa, anda bisa melihat demonya terlebih dahulu :
DEMO VIEW

Nah bagaimana, apakah anda berminat untuk memasang daftar isi di blog anda? Untuk memasang widget daftar isi di blog, anda dapat melakukan beberapa langkah mudah membuat daftar isi berikut ini :

Langkah-langkah memasang widget Daftar Isi di blog :
1. Login ke akun blogger
2. Klik "Laman Baru" kemudian klik "Laman Kosong", untuk lebih jelasnya, silahkan perhatikan gambar dibawah ini :

Gambar 1.1

3. Kemudian pilih Mode HTML

4. Lalu copy kode script dibawah ini :

<div style="border: 1px solid #eee; height: 700px; overflow: auto; padding: 10px; width: 530px;">
<script src="http://widgetsitemap.googlecode.com/files/daftarisi.js"></script><script src="http://ulfar88.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script> </div>

Keterangan :
Ganti kode yang berwarna merah ( ulfar88 ) : dengan alamat blog anda!

6. Kemudian anda letakan pada halaman kosong tadi,

Gambar 1.2

Keterangan gambar 1.2 :
1. Pilih mode HTML
2. Letakan kode pada halaman kosong
3. Berikan judul (terserah anda)
4. Klik "Publikasikan"

7. Selesai

Read More

Membuat search Engine di Blog

Saat ini Search Engine tidak bisa dipisahkan dalam dunia internet. Dengan Search Engine kita bisa mencari tahu tentang suatu hal yang kita inginkan sesuai dengan keyword yang kita ketikkan dan juga bla.bla..bla..... udah ah penjelasannya, yang mau dibahas disini adalah bagaimana caranya membuat search engine di blogger . Caranya sangat mudah, yaitu:

 

1. Login ke blogger terus klik Layout terus pilih page elements nha disitu kan banyak tulisan Add a page elements klik link tersebut dan sesuaikan dimana tempatnya menaruh search engine
2. kemudian pada layar baru yang muncul pilih HTML/Javascript kemudian copy/paste script/kode berikut ini di dalam kolom content.

<form action="http://nama-blog.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Ganti nama-blog dengan nama blog kamu. Angka 30 menunjukkan panjang kotak (text box) semakin banyak angkanya maka semakin panjang textbox-nya

Read More

Menghapus / Menghilangkan Navbar Blogger | Tutorial Blog

Navbar (navigation bar) default dari blogger biasanya terletak pada bagian paling atas dari sebuah blog. Navbar ini sering kali di hapus oleh para blogger karena di anggap memiliki kode yang tidak valid atau error, di samping stylenya yang kurang memuaskan bagi para blogger.

Pada tutorial ini saya akan share cara untuk menghilangkan navbar blogger tersebut ataupun hanya sekedar menyembunyikannya saja.

Berikut salah satu caranya :

• Masuk ke akun blogger anda
• Klik pada Template. (jangan lupa backup dulu template anda, untuk menghindari sesuatu yang tidak diinginkan).
• Selanjutnya, klik Edit HTML dan klik Proceed / Lanjutkan.
• Beri tanda centang pada Expand Template Widget.
• Cari kode ]]></b:skin>, lalu letakkan kode berikut diatas kode ]]></b:skin>
  
  #navbar-iframe {
  height:0px;
  visibility:hidden;
  display:none
  }
• Terakhir klik Simpan Template.

Pada langkah di atas sobat sudah menyembunyikan / tidak menampilkan Navbar bawaan Blogger, namun pada template blog sobat masih terdapat kode dari Navbar tersebut.

Untuk cara kedua Menghilangkan Navbar bawaan Blogger, Sobat dapat melakukan langkah di bawah ini :

• Sama seperti cara pertama. Masuk ke akun blogger anda
• Klik pada Template.
• Lalu klik Edit HTML dan klik Proceed / Lanjutkan.
• Beri tanda centang pada Expand Template Widget.
• Cari kode <body>, lalu letakkan kode berikut diatas kode <body>
  
  <script type='text/javascript'>
  <![CDATA[
  <!-- /*<body>*/ -->
  ]]>
  </script>
• Simpan Template Anda.
• Anda akan melihat gambar konformasi seperti di bawah ini.
  
• Klik Delete Widget untuk menghapus Navbar.
  

Jika Anda melakukan cara ini Anda juga akan menghapus Link Quick Edit gambar pensil, atau gambar kunci pas ama obeng di blog Sobat, namun cara ini sangat banyak mengurangi error pada blog.

Untuk cara ketiga dalam Menghapus / Menghilangkan Navbar Blogger, sama halnya dengan cara sebelumnya, cuma kode yang kita cari seperti dibawah ini :

 <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
       bla...
       bla...
       bla...
</b:widget>
</b:section>

Jika sudah ketemu, hapus kode tersebut lalu Simpan Template Anda.

Silakan Anda pilih cara mana yang Sobat gunakan untuk Menghapus / Menghilangkan Navbar Blogger.

Read More

Mengganti Icon Pada Blogger

Berikut Cara Mengganti Icon Pada Blogger

Cara 1 :

1. Login ke blogger kamu

2. Pilih menu Rancangan >> Edit HTML >> Centang Expand Template Widget

3. Cari kode <b:skin>  , tempatkan script berikut sebelum kode <b:skin>

<link href='URL GAMBAR' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

4. Ganti tulisan URL gambar dengan URL gambar kamu, ukuran bebas

5. Terakhir, simpan template , dan lihat hasilnya ...

Cara 2 :

1. Login ke blogger kamu

2. Pilih menu Rancangan >> Edit HTML >> Centang Expand Template Widget

3. Cari kode </head> (Cari menggunakan CTRL+f) tempatkan script berikut sebelum kode </head>

<link href='URL GAMBAR' rel ='SHORTCUT ICON'/>

4. Ganti tulisan URL gambar dengan URL gambar kamu, ukuran bebas juga
5. Cara yang hampir sama dengan cara yang ke-2 ..

Read More