Cara Membuat Tombol Copy All Di Posting

Cara membuat scroll , kali ini Saya akan membuat tombol Copy all. Tombol ini sering dipakai untuk memudahkan pengujung untuk mendrag sebuah kode html/javascript secara langsung tanpa perlu mendrag kode tersebut.

Dan ini adalah contoh tombol copy all tersebut :

Masukan teks atau kode html/javascript disini

Untuk caranya ikuti tutorial dibawah ini : 

1. Log in ke Blogger Kamu 
2. Buat sebuah entri baru Pilih mode html, 
3. Lalu masukan kode dibawah ini : 

<div><form name="copy"><div align="center"><span><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Copy all" type="button"> </span></div><p align="center"><textarea style="width: 150px; height: 80px;" name="txt" rows="5" wrap="VIRTUAL" cols="20">Masukan teks atau kode html/javascript disini</textarea></p></form></div>

 Keterangan :

• Teks berwarna biru dapat Kamu ganti sesuai keinginan Kamu
• Teks berwarna hijau adalah tinggi widget
• Teks berwarna ungu adalah lebar widget
• Teks berwarna merah adalah kode atau teks yang ingin dimasukan, Kamu hanya dapat mengganti kode tersebut di mode html

Mudahkan, Selamat Mencoba,,,

Membuat Related Post Thumbnail dengan Widget LinkWithin

Apa itu Related Post Thumbnails? Yaitu salah satu model daftar tulisan (posting) yang berhubungan di bawah posting. Secara umum ada 2 model related post. Model pertama hanya menampilkan judul posting saja. Contohnya seperti di sebelah kiri sidebar Blog ini. Dan cara kedua menggunakan Widget LinkWithin

Disadur dari Link sumber. http://www.linkwithin.com. Adalah sebuah situs penyedia widget Blog yang diutamakan untuk mendapatkan Fitur Artikel yang saling terhubung (Related Post). Terutama yang menginginkan Posting yang berkesinambungan, dan sinkron dalam 1 link Halaman yang ditautkan ke link Halaman yang lainnya.

Cara ini lebih disukai oleh banyak blogger karena lebih bergaya dikarenakan lebih aktraktif disertai judul dan Gambar. Kekurangannya hanya bisa menampilkan paling banyak 5 related post, itupun juga harus disesuaikan dengan lebar halaman posting blog anda. Jika lebar halaman blog anda kecil bisa jadi hanya bisa memuat 3 atau 4 related post thumbnail. Jadi kesimpulannya? terserah pada anda saja

Nah, jika anda tertarik untuk menggunakan related post thumbnails ini, anda bisa ikuti langkah-langkah berikut:

• Bukalah situs LinkWithin.com.
• Kemudian isilah data-data yang diminta. Jangan lupa sesuaikan jenis Platformnya. Jika blog anda menggunakan blogspot, pilihlah blogger. Lalu tentukan berapa related post thumbnail yang ingin anda tampilkan pada kotak Width. Jika sudah klik tombol Get Widget.

                                     

• Setelah anda dialihkan ke Tab baru pada Menu Add Page Element, Barulah pindahkan Widget tersebut di bawah Posting.

Bila ingin tidak ingin menampilkannya/tersembunyi (Visabilitas:hidden) di Halaman Utama bagi yang menggunakan Fitur auto Readmore bisa mengikuti langkah dibawah ini :

• Klik Design>>Menu edit HTML dan centang Pada Expand Template Widget. Cari kode 'LinkWithin' Pada Pencarian, yang sebelumnya dengan menekan tombol; F3. kode akan terseleksi dengan warna Hijau.

• Kurang lebihnya seperti dibawah inilah Source kode yang saya ambil menggunakan Blog ini:

<b:widget id='HTML6' locked='false' title='LinkWithin' type='HTML'>
<b:includable id='main'><data:content/></b:includable>
</b:widget>

• Sisipkan kode yang berwana merah seperti dibawah ini

<b:widget id='HTML6' locked='false' title='LinkWithin' type='HTML'>

<b:includable id='main'><b:if cond='data:blog.pageType == "item"'><data:content/></b:if></b:includable>

</b:widget>

Catatan:  Kode HTML6 ini jangan dijadikan patokan pencarian, sebaiknya abaikan saja karena setiap elemen pasti berbeda-beda, cukup cari title saja.
Kode berwarna Merah tersebut berguna untuk menampilkan widget blog hanya pada single post saja atau ketika anda membaca postingan secara keseluruhan dan tidak akan muncul pada main post atau kategori post

Cara Membuat Fans Page Facebook Auto Hide

Apa kabar sobat? pastinya kalian semua baik-baik saja.Pada kesempatan ini saya akan posting tentang Cara Membuat fans page Facebook Auto Hide ( muncul tanpa di klik ). Pastinya sobat akan pasang widget ini pada blog ada agar telihat keren dan rapi.hehe





DEMO
Kepengen pasang widgetnya? langsung saja ikuti langkah-langkah sebagai berikut :

Langkah 1

log in ke akun Blog sobat.
Klik Rancangan --> Edit HTML --> Cari kode </head> ( gunakan Ctrl + F )
Letakkan kode berikut di atasnya.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Klik Save.

Langkah 2

Klik Elemen Laman
Klik Tambah Gadget
Pilih HTML/Javascript
Kemudian copy-paste script yang dibawah ini

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Kamu-Adalah-Segalanya/453291741392990&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://eskun.blogspot.com/2013/02/cara-membuat-fan-page-facebook-auto-hide.html" target="_blank">Tutorial Here</a></span></div></div>

Ganti warna merah dengan URL fans pages sobat.






Klik save dan lihat hasilnya apa yang terjadi!! :D

Memasang widget Alexa Rank Di Blog

Pada posting kali ini akan menjelaskan apa yang dimaksud alexa rank dan pagerank. Yaitu suatu sistem perangkingan situs, website atau blog. Nah pada kesempatan ini saya akan membuat tutorial cara memasang widget alexa dan pagerank google di di blog kita.

Seorang blogger memasang gadget rangking diblognya ada beberapa tujuan, ada yang sekedar iseng, ada yang ingin pamer, ada juga demi tujuan bisnis. Misalnya ada seseorang yang ingin memasang iklan  bisa jadi orang tersebut tertarik memasang iklan karena pagerank atau alexa rank yang bagus. Jika kita ingin mengikuti program PPC pun terkadang mereka melihat dari pagerank atau alexa rank blog kita. Yaa semua sih tergantung niat lagi. Apapun tujuannya semua terserah mereka. hehehe

A. Memasang  alexa di blog.

Sebelum kita lebih jauh melangkah, ada beberapa tahapan dalam cara ini; a) membuat akun di alexa, b) mendaftarkan blog dan mengklaim blog di alexa.com, c) mengambil kode javascript widget alexa untuk dipasang di blog.

1. Membuat akun / mendaftar di Alexa.

Bisa dengan 2 cara lewat akun facebook atau via email.
Silakan masuk ke alexa.com

Klik Create an account, di sini agar lebih mudah kita membuat akun atau login via facebook, > klik  login with facebook

Akan muncul pop up / jendela / window baru > Masuk menggunakan akun facebook. akun Selesai dibuat.

2. Mendaftarkan situs / add site ke alexa.com dan klaim blog

Klik link / Masuk ke Site Tools >>  Klik Edit Your Listung (link terletak di bawah)

Gambar 2. SITE TOOLS

Masukkan URL alamat lengkap blog kita, contoh disini saya masukkan http://reyhan82.com lalu klik Edit site listing

Akan muncul perintah klaim blog dulu

Pilih option2 :Add your Alexa verification ID to the home page of blablabla.blogspot.com.

Silakan copy kode yang saya kurungi pada gambar di atas pilih nomor 1 atau 2 sama saja.

sebagai contoh saya copy yang nomor 2 kodenya adalah sebagai berikut;

• <meta name="alexaVerifyID" content="AcTMdvmd2aGJ3BhWxqn7Ipo_5qY" />

Kemudian masuk ke akun blogger > Dasbor > Template > Edit HTML > Lanjutkan > Centang expland template widget.

cari kode <head> lalu masukkan kode tadi dibawahnya sehingga ;

<head>
<meta name="alexaVerifyID" content="AcTMdvmd2aGJ3BhWxqn7Ipo_5qY" />

atau bisa juga masukkan tepat di atasnya kode  <b:skin><![CDATA[/*

Lalu Simpan Template

Kembali ke Alexa  tadi Klik Verify My ID, tunggu sebentar, jika sobat tadi sudah menyimpan meta tag klaim blog di alexa, maka akan muncul your site is succesfully claimed.  

Klik continue (di pojok kanan bawah)

Saatnya memasukkan nama blog, deskripsi blog, Pilih negara (bagian kanan) Boleh juga masukkan nama pemilik blog, alamat dll. Jika selesai Klik Save and Continue Skip

akan muncul

Congratulations! You have claimed http://blogkamu.blogspot.com/

3. Mengcopy kode widget alexa untuk blog

  Kembali ke Site Tools (lihat gambar 2 diatas) 

Klik alexa site widgets

Masukkan kembali URL blog kita, Kemudian Klik Build Widget

copy kode yang ada, silahkan pilih tampilan preview di samping, sebaiknya yang ukuran kecil saja

 

Masuk Kembali ke akun blogger

Dasbor > Tata Letak > Tambahkan gadget> HTML/Javascript > paste kode yang diberikan tadi > Simpan. 

Selesai dan widget alexa rank sudah terpasang di blog sobat. 

B. Memasang gadget pagerank Google di blog

Sebetulnya banyak situs penyedia widget pagerank namun sebagai contoh di sini saya akan membuat widget di prchecker.info karena menurut saya proses nya cukup mudah. Oh ya sebelum mengambil kodenya bisa juga sobat cek dulu pagerank google sobat. Caranya masukkan url lalu klik Check PR.

 

Silakan masuk ke www.prchecker.info

Klik salah satu gambar tampilan pagerank yang diinginkan

 Kemudian masukkan Anti bot code di samping kiri > Klik Generate Now.

Setelah sobat mencopy kode tadi:
Masuk ke akun blogger > Tata Letak > Tambahkan Gadget > HTML/javascript > pastekan code yang di dapat > Simpan > simpan setelan.

Cara Buat Burung Twitter Terbang di Blog

Udah tiga hari nich saya enggak nengok blog 

Tapi pada hari yang baik ini saya akan posting bagaiman membuat burung terbang twitter di blog.

Jejaring sosial ini sangat tepat untuk promosi blog jika follower kita banyak maka tifdak menutup kemungkinan blog kita banyak di kunjungi 

dengan widget ini kita bisa membuat follower di twitter kita bisa bertambah dengan cepat

Lalu bagaiman membuatnya, oke saya akan tunjukan caranya simak baik-baik

1. Pertama yang mesti dilakukan adalah masuk akun blogger kalian masing-masing, iya lah masak masuk akun saya heheheheh

2. Pilih Rancangan >> klik Tambah Gadget >> HTML/javascript

3. copy script dibawah ini

!– floating twitter Bird –>

<script type=”text/javascript” src=”http://bloggerpeer.googlecode.com/files/tripleflap.js”></script>
<script type=”text/javascript”>
var birdSprite=”http://warna burung.png“;
var targetElems=new Array(“img”,”hr”,”table”,”td”,”div”,”input”,”textarea”,”button”,”select”,”ul”,”ol”,”li”,”h1″,”h2″,”h3″,”h4″,”p”,”code”,”object”,”a”,”b”,”strong”,”span”);
var twitterAccount = “http://twitter.com/kamu_segalanya“;
var tweetThisText = “Twitter – UserID http:.reyhan82.com/“;
tripleflapInit();

</script>

Keterangan:
Ganti tulisan yang berwarna biru
http://twitter.com/kamu_segalanya ganti denga username kalian
http:reyhan82.com/ ganti dengan blog sobat masing-masing
dan ganti tulisan warna burung.png dengan warna yang kalian inginkan

• Warna Kuning
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1njE-4UUvU1wwW19hdYnM4MUeVGkSoSqPd4IwGpd2lDlWRBg41zt3owcJIa8CMgw6jec8jOgiQmqNASo2O1wrnkJUI_00qsDhKZBTu6QoJS3AnhCZkCJCjskU7wDZi3Za69DrYpYXdkA/s1600/yellow+bird.png
• 
  Warna Hitam
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpQHIJK1mBXmtSGm5JExoecLrHyoLxZu3jYZpVGb6qwkS6-1DNBOKj8mLe1x1ryDYzOFqvivSKx03VzNDh_lWUQNdP_hX0kowoQTNgLfLervxlSvSh1kROVaWw7gBvIRAkMndKQTESkOM/s1600/black+bird.png
• 
   Warna Biru
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit71L_5tYUxiGpqDGw3j6gLnQRo1XPsm-Ez_z12bUopGSxz2rLM7uxCNhsv2K31FX6f9SlMfnI2cMmTsVrRP74nsFxFGkYM_GL62EC1OVp174e-0OFqD5Z97MxMJgEQIEU5xVM4cGayS4/s1600/Blue+bird.png
• 
   Warna Coklat
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaUtgtFslC6cw7uuNDzM1W6gPp7bMA-mbebxZagVHdbgpKf_ROnN0NI2QYKqG8Cz_Q__duhbkQO0I_Z_wiIfwUk9vHTQMC-_iGmJrNnArutkGPnwHRzxFiCLImDT1VzuWUpvbgFhOrjaA/s1600/brown+bird.png
• 
   Warna Hijau
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIzJvF-gf1UKebk4khgtjcRHTVz188DmlQj4cgVR66Nc5Xln7-f01VCf2YczQwDpoKyA55lJip_XyICXhGQHLaefXsY-jWxKjCgZ-SY3zv5aAR0lTGdLcR9vnfvZuHzkyTWtXhfw730hA/s1600/Green+bird.png
• 
   Warna Ungu
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivngYe6cC0O7SmBV49JmvV13Wkc4kx3eYMjHNqLIM7WNZ39rGkaJFQ5I9vC-vxbHs8sb9IfhiVeRf3VdDWUtuJO1rR-vI2tOmOnNuRCPwUUz2f6Gc2kfa6MF9zl8uGaQEyNSUIWSDpjL4/s1600/purple+bird.png
• 
   Warna Putih
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNLEavuOsPwknM47upigNHKi1lX3VSocwpBuuB2kM2t9eIW5DeN2Pb4Re_B12NxS1DZ-5GsxmU-i7MfMK7J7NUt7CS0Zn8co88OroqyE2RV0etsD7ebiSf5MT5v043pkY2x-LQzKfIrkM/s1600/white+bird.png
• 
   Warna Merah
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz0Ot8fXfLaHAyG9fFHchQZppD_7QcHvarrpCpxs7RdAi0lXfbS_dBbGp8TpOFSgj07guW14MYmM3HoVxiEAEjSu28qjmu83XLRaOdI8eLM8s3_Ls8fPyxXaE6Jyr73qqUJwEwfhEWCqc/s1600/red+bird.png

4. Lalu paste dan SIMPAN 

Cara Membuat Menu Bar Rangkap 2 Di Blog

Tutorial | Cara Membuat Menu Bar Rangkap 2 Di Blog | Menubar merupakan sarana navigasi pada blog/web, yang berisi daftar tautan/link, Menubar sendiri biasanya berada di bawah header atau diatas header pada posisi horizontal atau mendatar, dalam variasinya menubar bisa di kostum sedemikian rupa, ada dalam satu web menubarnya terdapat lebih dari satu, kadang itu berada diatas header dan dibawah header, dan terkadang dirangkap dua dan diletakan dibawah header, termasuk blog ini sendiri menggunakan menubar rangkap dua. sebagai contoh menubar rangkap seperti gambar dibawah ini.

Preview :

Sebelum melakukan Pengeditan, alangkah baiknya backup terlebih dahulu template lama anda.

1. Log in ke akun blogger dengan menggunakan akun anda.
2.  Pilih menu Template, Klik tombol Edit HTML.
3.  Centang Expand Template Widget,
4.  Cari kode ]]></b:skin>, gunakan CTRL + F untuk mempercepat pencarian, kemudian pastekan kode dibawah ini tepat diatas kode ]]></b:skin> tadi
   

   
   #menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXfEWHQMMn5XULeoUYqdhU2l6341VNcd-WXEtW1sa4L0F422ZEIWT-jl43WIbInniY4g9U8FatHHssHiyz5io5YoZpE-yz71_sRi8KN2BC-i0j9sB4fNACAzIas2KWYs8WsnMkwDCzKtc/s1600/menuwrap.png) repeat-x top;border-top:5px solid #26231c;border-bottom:5px solid #26231c;width:100%;margin:0 auto;padding:0 auto;height:37px}
   #menuwrapper{width:980px;height:37px;margin:0 auto}
   .clearit{clear:both;height:0;line-height:0.0;font-size:0}
   #menubar{width:100%}
   #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
   #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:none;color:#ddd;padding:11px 12px 11px;border-right:1px solid #6c6250;border-left:1px solid #373123}
   #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0JGGVhQf219BXC8ENSI4z89jpKTKACw9A0b3qRuw9f8UI_4djodmtPtJyAwUUM8ieNEOVK65OflnWK9LwTY0AlV67iJqxWadscK8GLtuae-kkBWug-SRR1tG7Mi-4xZP9Wcl62YVmhh4/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:11px 24px 11px 12px}
   #menubar li{float:left;position:static;width:auto}
   #menubar li ul,#menubar ul li{width:170px}
   #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
   #menubar li ul{z-index:100;position:absolute;display:none;background:#26231c;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
   #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#26231c;color:#fff}
   #menubar li:hover ul,#menubar li.hvr ul{display:block}
   #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
   #menubar li ul li.hr{border-bottom:1px solid #433e31;border-top:1px solid #11100d;display:block;font-size:1px;height:0;line-height:0;}
   #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
   #nav-wrapper{background:#ebe8e1;height:30px;font-family:Arial;overflow:hidden;width:100%}
   #nav{margin:0 auto;width:980px;height:30px;padding:0auto}
   #nav ul{float:left;width:auto;height:30px;margin:0;padding:0;list-style-type:none}
   #nav ul li{float:left;height:30px}
   #nav ul li a,#nav ul li a:visited{float:left;height:30px;padding:7px 10px;color:#000;font:bold 12px Arial;text-transform:none}
   #nav ul li a:hover,#nav .selected{color:#626262;text-decoration:none;}
   #search{float:right;width:180px;height:20px;margin-top:3px;margin-right:5px}
   #search form{float:left}
   #search input[type="text"]{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgQFcRuChbdJXKoYW5H_Shj7bhoPEJaNtowX8QTxnWtj2sWE36kdObYJCLdgrgJ2hT4LUrMRBHoYCmlxixhMJNI50BqXTWkYX8h7jW0TlXGiO1dGejMbURVyKuLvUZHcTLUEYMogZ3c30/s1600/search_button.png) no-repeat scroll 4px center;float:left;border:1px solid #999;width:146px;margin-top:1px;padding:3px 15px;font-size:12px;text-align:right}
   #search input[type="text"]:focus{background:#fff}
   #search input[type="submit"]{display:none}

5. Kode diatas ada tiga bagian, Menubar Horizontal Atas, Menubar Horizontal Bawah, dan Kolom Pencarian/Search. Sesuaikan dengan selera anda pakah mau dipakai tiga-tiganya atau hanya pilih salah satu. Setelah itu kemudian temukan kode
   

   <div id=’header-wrapper’>
   <b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
   <b:widget id=’Header1′ locked=’false’ title=’Beautiful Beta (Header)’ type=’Header’/>
   </b:section>
   </div> 

6. Dikarenakan setiap template berbeda-beda, mungkin kode yang akan anda temukan lebih panjang, pastikan setelah kode <div id='header wrapper'> anda telusuri sampai kode penutup </div>. Kemudian pastekan kode dibawah ini setelah kode diatas. 
   

   
   <div id='menuwrapperpic'>
   <div id='menuwrapper'>
   <ul id='menubar'>
   <li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnp0090MSVDOlehpxi57wmQNHiSVsVwdYeMuaEGt8xFg_rOSfKxJCGLbhgTaGRDEExZhhwyLBezT97kct35ANvy_xFm3BQG9cs9VTyVafSqkARzWBhspcaLBErl6jgc527ILKHXDXR3bQP/s1600/home_white.png' style='padding:0px;'/></a></li>
   <li><a href='masukkan link disini'>Menu 1</a></li>
   <li><a href='masukkan link disini'>Menu 2</a></li>
   <li><a class='trigger' href='#'>Menu 3</a>
   <ul>
   <li><a href='masukkan link disini'>Sub Menu 1</a></li>
   <li class='hr'/>
   <li><a href='masukkan link disini'>Sub Menu 2</a></li>
   <li class='hr'/>
   <li><a href='masukkan link disini'>Sub Menu 3</a></li>
   </ul>
   </li>
   <li><a href='masukkan link disini'>Menu 4</a></li>
   <li><a class='trigger' href='#'>Menu 5</a>
   <ul>
   <li><a href='masukkan link disini'>Sub Menu 1</a></li>
   <li class='hr'/>
   <li><a href='masukkan link disini'>Sub Menu 2</a></li>
   <li class='hr'/>
   <li><a href='masukkan link disini'>Sub Menu 3</a></li>
   </ul>
   </li>
   </ul>
   <br class='clearit'/>
   </div>
   <div style='clear:both;'/>
   </div>
   <div id='nav-wrapper'>
   <div id='nav'>
   <b:section class='page' id='page' showaddelement='no'>
   <b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
   <b:includable id='main'>
   <div class='widget-content'>
   <ul>
   <b:loop values='data:links' var='link'>
   <b:if cond='data:link.isCurrentPage'>
   <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
   <b:else/>
   <li><a expr:href='data:link.href'><data:link.title/></a></li>
   </b:if>
   </b:loop>
   </ul>
   </div>
   </b:includable>
   </b:widget>
   </b:section>
   <div id='search'>
   <form action='/search' class='search' id='searchform' method='get'>
   <div>
   <input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Type and Enter&quot;;}' onfocus='if (this.value == &quot;Type and Enter&quot;) {this.value =&quot;&quot;;}' size='30' type='text' value='Type and Enter'/>
   </div>
   </form>
   </div>
   </div>
   </div>
   

7. • Setelah selesai klik tombol Pratinjau jika sudah Fix dan OK baru klik tombol Simpan Template.
8. Tulisan yang berwarna Merah ganti dengan URL tujuan, dan tulisan yang berwarna Biru Ganti dengan Judul URL tadi, Contoh:
   

   <li><a href='http://reyhan82.com'>HOME</a></li>

9.   Sedangkan untuk menu horizontal bagian bawah, anda dapat mengedit, menambah, mengurangi link dan sebagainya, anda tinggal menuju ke layout dan klik pada Menu Laman.  

Cara Mendapatkan Copyright atau Hak Paten Intelektual Blog

Cara mendapatkan hak paten atau Copyright Intelektual yang diperkenalkan dan dibahas pada artikel ini adalah Copyright yang dapat bekerja secara otomatis atau default pada media online sesuai dengan ID pemilik yang tedaftar. Pelayanan ini disediakan secara gratis, dan persayaratan untuk menjadi hanya dengan mengisi formulir pendaftaran yang tersedia  di Jl. Tynt.

Menurut pendapat saya Copyright atau hak paten tulisan dalam blog adalah kekayaan intelektual seseorang yang sudah terdaftar secara sah menurut hukum dan sesuai dengan aturan yang berlaku dalam media online pada situs yang sudah memiliki legalitas hukum.

Sebelum berangkat mendaftar alangkah baiknya mengikuti tutorial singkat yang disuguhkan dalam postingan. Harapan ini dimaksudkan untuk memudahkan mendapatkan Hak paten dengan efisien pada situs penyedianya.

Detail langkah-langkah mendapatkan Hak cipta atau Copyright atas tulisan sendiri dalam media blog pada Tynt dapat dilakukan sebagai berikut, yaitu:
Pertama

1. Isi Formulir pendaftaran sesuai dengan data pribadi dan data media online anda
2. Centang Box/kotak I agree to Usage and Privacy Agreement sebagai tanda persetujuan menjadi anggota.
3. Klick Next

4. Klick Next

 

 

5. Copy kode yang tersedia untuk ditempatkan pada template blog anda
6. Klick Next

 

8. Klick Test, apabila ingin mengetahui media anda sudah terdaftar oleh kode yang tersedia. Namun sebelum melakukan test sebaiknya lakukan langkah tahap kedua di bawah ini.
9. Klick Next

 

10. Klick Save.

 

kedua, Cara menempatkan kode copyright atau hak paten anda dapat dilakukan dengan langkah-langkah sebagai berikut, yaitu:

 

1. Sign in di blog
2. Klick rancangan
3. Klick Edit HTML
4. Download Template Lengkap bila diperlukan untuk menghindari kesalahan
5. Cari kode </head>
6. Paste kode yang diperoleh dari Tynt seperti terlihat pada kolom dari gambar di atas. Kode tersebut tempatkan sebelum kode </head>
7. Klick Simpan Template untuk menyimpan perubahan

Dengan mengikuti langkah yang diuraikan di atas maka mulai saat itu setiap tulisan anda akan terhubung dan diketahui situs yang mengcopy kreasi atau tulisan anda.

Semoga bermanfaat dan selamat mendapat hak cipta intelektual dari kreasi anda sendiri.

Membuat Templates Mudah Dengan Templates Designer

Salah satu fitur terbaru blogger adalah Templates Designer. Dengan fitur ini memungkinkan kita dalam membuat/memodifikasi templates. Dengan fitur ini anda bisa mengatur tata letak/layout blog anda dengan mudah, mengganti design blog anda, dll. Oke tidak usah panjang lebar, mari kita bahas fitur terbaru ini satu per satu :

1. Silahkan Log in ke blog anda > Design > Templates Designer

2. Jika Sudah, mari kita bahas satu per satu fitur dan fungsinya

Templates : Di sini anda bisa memilih templates sesuai keinginan anda. Ada 6 templates tersedia dan di setiap templates masih terbagi beberapa model lagi. Untuk contoh saya akan menggunakan templatesPicture Windows

Background : Setelah anda memilih templates, anda dapat memilih background sesuai keinginan. Klik Background Image untuk memilih background. Ada 19 tema background, dan di setiap tema terdapat banyak background yang bisa anda pilih.

Ini adalah tampilan yang akan muncul saat anda mengklik Background Image

Layout : Layout terbagi menjadi 3, dan yang ini adalah body layout. Body Layout ini berfungsi untuk mengatur tata letak blog anda di bagian sidebar dan posting. Dengan ini anda dapat mengatur model sidebar dengan mudah.

Layout bagian ini adalah footer layout. Di sini anda dapat mengatur jumlah dan model footer dengan mudah. Misalnya anda ingin membuat footer anda 1 kolom, 2 kolom, atau 3 kolom sekalipun.

Layout ke tiga adalah adjust width. Di sini anda dengan mudah dapat mengatur lebar blog anda secara keseluruhan dan lebar sidebar juga.

Advanced : Di sini anda dapat mengatur segalanya seperti model text, warna text, penambahan CSS, dan lain-lain. Daftar Advanced berbeda-beda sesuai templates yang anda pilih tadi. Karena saya memilih model Picture Windows saya akan membahas Advanced ini saja.

1. Page Text : Berfungsi untuk mengatur jenis font, warna text, ukuran, dan juga model seperti bold / italic
2. Backgrounds : Berfungsi untuk mengatur warna background di bagianouter, header, dan post.
3. Links : Berfungsi untuk mengatur warna link. Link Color adalah warna link sebelum di klik, Visited Color warna link setelah/sudah pernah di klik, Hover Color warna link saat di sentuh mouse.
4. Blog Title : Untuk mengatur jenis, ukuran, model, dan warna font judul blog (header)
5. Tabs Text : Beberapa dari anda mengukin belum tau tabs text. Tabs Text adalah gadget yang terletak di antara header dan isi blog. Ini berfungsi untuk mengatur jenis, ukuran, model, dan warna font pada tabs.
6. Tabs Background : Untuk mengatur background tabs. Background Color untuk background gadget. Selected Color ini berfungsi untuk mengatur warna background tabs yang sedang di pilih. Maksudnya yang di pilih adalah jika anda menggunakan Pages blogger dan di letakan di bagian tabs.
7. Post : Title Font untuk mengatur font judul post. Footer Text untuk mengatur warna pada bagian footer post/bawah post. Border Color untuk mengatur warna garis tepi post.
8. Gadgets : Title Font untuk mengatur jenis font pada judul sidebar/gadget. Title Color untuk mengatur warna judul sidebar/gadget
9. Footer : Text Color untuk mengatur warna text di bagian footer. Gadget Title Color untuk mengatur warna pada judul gadget di bagian footer
10. Footer Link : sama dengan link, hanya yang ini untuk mengatur link bagian footer saja.
11. Add CSS : Ini berguna jika anda ingin menambah, menghapus, dan memodifikasi CSS pada templates anda

3. Jika Sudah selesai dengan modifikasi templatesnya, Silahkan kilik APPLY TO BLOG untuk savenya

Membuat sticky bar sendiri dengan tombol close blogger

Membuat sticky bar sendiri dengan tombol close di blog - Sticky bar bisa digunakan untuk menaruh pesan -  pesan anda, promote artikel unggulan anda dll. Ok, screenshootnya seperti ini :

1. Login blog -> Template.
2. Edit HTML -> Lanjutkan.
3. Centang expand template widget -> gunakan ctrl dan f.
4. Cari kode ]]></b:skin> -> Letakan kode CSS dibawah ini diatasnya.

•  #mbt_bar{
  background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbfFAz8ELF1k_TnzFC2Xh6PMlfFUbPfXZ4EYgFIPRb6KqZsHwClj71rdyjHkeT1iTnzs35rlBQ9VIaAL_NALmBQZbbuxfNUqO6RNXmjFUiZqA0ceILA1OMCeEI0-YBa88uLpRafoe5jVg/s400/stickybar.png') repeat-x;
  width:100%;
  margin:0 auto;
  text-align:center;
  padding:0px 0;
  border-bottom: 1px solid #888888;
  -moz-box-shadow: #666666 0px 1px 3px;
  -webkit-box-shadow: #666666 0px 1px 3px;
  box-shadow: #666666 0px 1px 3px;
  z-index: 999;
  height: 28px; position:fixed;
  line-height: 1.85em;
  vertical-align: baseline;
  letter-spacing: 1px;
  color:#fff;
  font-size:13px;
  font-weight:bold;
  font-family: arial,"Helvetica",sans-serif;
  }
  #mbt_bar a{
  text-decoration:underline;
  color:#E2E504;
  }
  #mbt_bar a:hover{
  text-decoration:none; }
  #mbt_bar p {margin:0; list-style:none;}
  #mbt_bar img {vertical-align: middle;
  margin-right: 6px;
  }

5. Taruh kode berikut diatas tag </head>.

• <script type='text/javascript'> 
  
  
  //<![CDATA[ 
  var mbt_arr = new Array(); 
  var mbt_clear = new Array(); 
  function mbtFloat(mbt) { 
  mbt_arr[mbt_arr.length] = this; 
  var mbtpointer = eval(mbt_arr.length-1); 
  this.pagetop = 0; 
  this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body; 
  this.mbtsrc = document.all? document.all[mbt] : document.getElementById(mbt); 
  this.mbtsrc.height = this.mbtsrc.offsetHeight; 
  this.mbtheight = this.cmode.clientHeight; 
  this.mbtoffset = mbtGetOffsetY(mbt_arr[mbtpointer]); 
  var mbtbar = 'mbt_clear['+mbtpointer+'] = setInterval("mbtFloatInit(mbt_arr['+mbtpointer+'])",1);'; 
  mbtbar = mbtbar; 
  eval(mbtbar); 
  } 
  function mbtGetOffsetY(mbt) { 
  var mtaTotOffset = parseInt(mbt.mbtsrc.offsetTop); 
  var parentOffset = mbt.mbtsrc.offsetParent; 
  while ( parentOffset != null ) { 
  mbtTotOffset += parentOffset.offsetTop; 
  parentOffset = parentOffset.offsetParent; 
  } 
  return mbtTotOffset; 
  } 
  function mbtFloatInit(mbt) { 
  mbt.pagetop = mbt.cmode.scrollTop; 
  mbt.mbtsrc.style.top = mbt.pagetop - mbt.mbtoffset + "px"; 
  } 
  function closeTopAds() { 
  document.getElementById("mbt_bar").style.visibility = "hidden"; 
  } 
  //]]> 
  </script>

6. Cari lagi, kode <body>. Untuk kode kali ini, gak perlu deh agan cari menggunakan Ctrl dan f. Cukup dengan scroll halaman ke bawah, sampai pucuk. Sudah ketemu? letakkan kode berikut dibawahnya ya.

<div id='mbt_bar'> INGIN MENJADI PENULIS TAMU DI BLOG INI ?

<a href='http://reyhan82.com'>KLIK DISINI</a> 

<span style='padding:0px; float:right'>

<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiELZZR5ktDs7co8SxIx-dpiUAoPWdNvAct-iO6kChBCpn8n_8Ym3N0-8bQf3_j9XXAUshBTUR6tvc66VeCvxR4KQEXPjctd_6ttDoKFgwqXHt0-JXlzUz9zWEI05LDWnDBmtQFltd2rUo/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div>

<br/><br/>

7. Save & Liat hasilnya!

Cara membuat scroll box di blogspot -

Cara membuat scroll box di blogspot -

Hai sobat blogger..ane sekarang ingin berbagi tips cara membuat scroll box di blogspot yang mana sebelum membuat postingan ini ane melakukan riset kecil-kecilan dengan cara research keyword versi ane yang sempet ane share disini. Dan setelah itu ane coba cek di search engine blog siapa yang sudah membuat artikel tentang cara membuat scroll box di blogspot, ternyata hasil penelusuran menunjukan terdapat 240,000 blog yang membahas hal ini, namun sayangnya bayak diantara mereka yang membuat postingan tentang cara membuat scroll box terkesan tidak detail dan tidak berjalan dengan lancar, tentunya ini akan membuat pemula blogger akan merasa kesulitan untuk mempraktekannya.

Oleh karena itu sekarang ane akan berbagi tips cara membuat scroll box di blogspot yang ane rasa ini lebih detail dan lebih mudah untuk para pemula blogger mengikutinya. Tetapi sebelumnya apakah agan tahu apa itu scroll box dan apa manfaatnya? Sedikit penjelasan serta pengetahuan untuk nawbi perihal fungsi serta manfaat jika kita menggunakan scroll bar yaitu untuk meringankan kita jika ada kode script atau postingan yang amat panjang supaya tidak menghabiskan banyak tempat, yang nantinya postingan blog kita akan terlihat lebih singkat serta dinamis. 

Cara membuat scroll box di blogspot amatlah sangat gampang, langkah-langkahnya nyaris sama pada waktu kita membuat spoiler di postingan blog, agan hanya perlu menyimpan code script yang akan ane berikan dibawah ini dengan cara copy/paste ke tempat yang di inginkan atau pada saat agan membuat postingan blog. Untuk lebih jelasnya silahkan ikuti langkah-langkah dibawah ini. 

Cara membuat scroll box di blogspot

Berikut ini adalah kode script untuk membuat scroll box di blogspot yang harus agan simpan dan letakan di tempat yang agan inginkan termasuk di tempat saat agan membuat postingan

<div style='padding: 5px; overflow: auto; width: auto; height:200px;border:1px solid #000000'> 

Simpan tulisan agan atau apapun disini. 

(Tulisan ditulis di mode Compose, sedangkan kode di tulis pada mode Edit HTML)

</div>

Note:

• Harus di ingat, Tulisan ditulis di mode Compose, sedangkan kode di tulis pada mode Edit HTML agar script dapat bekerja dengan lancar.  
• Untuk mengecek script bekerja dengan lancar atau tidaknya, silakan agan klik mode compose. 
• height:200px; yaitu ukuran lebar atas bawah kotak scroll, silakan agan ubah nilainya, sesuai dengan keinginan agan. 
• width: auto; yaitu ukuran otomatis lebar samping kotak scroll, silakan agan ubah nilainya, sesuai dengan keinginan agan. 
• border:1px solid yaitu ukuran tebal garis kotak scroll, silakan agan ubah nilainya, sesuai dengan keinginan agan. 
• #000000 yaitu kode warna pada garis kotak scroll, silakan agan ubah kode warnanya, sesuai dengan keinginan agan.

Mungkin itu saja cerita hari ini tentang cara membuat scroll box di blogspot. Semoga postingan ini bermanfaat dan semoga pembahasan ini cukup jelas untuk para nawbi blogger mengikutinya. 

Pasang Iklan Google Adsense Di Bawah Judul Postingan Blog Untuk Dapatkan Hasil Maksimal

Anda baru saja diterima google adsense? Atau sudah lama bermain dengan google adsense namun belum mendapatkan hasil yang maksimal? Kalau kamu baru diterima oleh google adsense, sebelumnya saya ucapkan selamat. Dan bagi yang sudah lama bermain dengan adsense namun belum mendapatkan hasil maksimal, kamu harus mencoba salah satu trick yang akan saya bagikan.

Iya memang Google Adsense merupakan salah satu sahabat para blogger yang paling baik. Saya bisa bilang seperti itu karena banyak blogger yang sekarang nyaman dengan bekerja sama dengan google adsense.
Nah, untuk itu saya disini akan membantu kawan-kawan sekalian untuk memaksimalkannya dengan menaruh iklan dari google adsense di bawah setiap judul postingan blog kamu.

Namun di samping iklan adsense akan terlihat pula tombol share yang keren. Jadi akan lebih bermanfaat lagi apabila kamu memasangnya di blog kamu.

Bagaimana caranya? Ikuti beberapa langkah di bawah ini !

Cara Membuat Google Adsense Di Bawah Judul Postingan

Langkah 1 : Login blogger >> dashboard >> Template >> Jangan Lupa centang Expand Widget Template

Saya sangat menyarankan setiap kamu akan mengedit HTML template blog kamu, alangkah baiknya kamu untuk membackupnya terlebih dahulu. Hal ini penting karena ketika kamu salah dan template blog kamu rusak maka kamu bisa mengembalikan seperti semula.

Langkah 2 : Edit HTML >> Lanjutkan

Langkah 3 : Gunakan CTRL + F untuk menemukan kode di bawah ini :

]]></b:skin>

Setelah kamu menemukan kode di atas, kamudian copy dan paste kode di bawah ini di atas kode ]]></b:skin>

.ads{margin-bottom:10px; border-top:solid 1px #DEDEDE; padding-top:10px; font-size:13px;}
.ads-right-min{border-left:solid 1px #DEDEDE; height:250px; padding-left:10px;}
.ads-right-min a:link,
.ads-right-min a:visited,
.bottom-share-links a:link,
.bottom-share-links a:visited{
font-size:12px;
color:#222;
display:block;
height:22px;
line-height:22px;
margin-bottom:16px;
padding-left:32px;
}
.ads-right-min a:hover,
.bottom-share-links a:hover{color:#666;}
.mini-tech{background:url(http://lh6.ggpht.com/_TqPdHmAEwTM/SrVsIDBoz7I/AAAAAAAAFqw/UpGK_0UQUZg/technorati.gif) no-repeat;}
.mini-facebook{background:url(
http://lh4.ggpht.com/_TqPdHmAEwTM/SrXQ3G_uRnI/AAAAAAAAFq0/ktY0xwRy4Oo/fb.gif
) no-repeat;}
.mini-tweet{background:url(
http://lh5.ggpht.com/_TqPdHmAEwTM/SrVkkLNvMlI/AAAAAAAAFqs/S-UYpTlrZa8/tweet.gif) no-repeat;}
.mini-del{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMexv7t8kt5smyeSBoa8Q1NgJY5bcvjsJ6wylGq0ad6TIXXfEO6TF5xu7KQVn2zqYlGTUZ2_vRZ8Q_5YRwaGqAULr4G3kmM0GIvHsiyRHnSt2qKVQelYAmG2dt07mmaZEJ4tn8ZZ8uqmM/s800/delicious_icon.jpg) no-repeat;}
.mini-stumble{background:url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGsVa-P5LZ231REJvbXPINuJtKvFwmLvYL0Ga_9hsvFRGmmRib03Ya0KxbijtisGR7K9_JrYxc-HTVL3kYMx4BECzsCGHsPeqR1T-AYWaOfKRifMAPdBBTviVALFKDmk0zX7xzKYS22y0/s800/stumbleupon%20icon.png) no-repeat;}
.mini-digg{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdnjHi3qHCcZ9LzyABoulMQgc312_-Ee76_V09SevdqWFt0taa3qwOcrlm6u-Av6wbhyphenhyphendRYn9U3EyiqpWUt5MgmQSB8wjy5MOm7gIMmjXnQ_-xR1TiRnw6oUlITyz2WI_Uwk0ekp3Qt-c/s800/Digg_icon.png) no-repeat;}
.flt-wdt{
position:fixed;
margin-right:10px;
left:0;
top:40%;
}
.flt-wdt img{
float:left;
clear:left;
margin:5px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.flt-wdt img:hover{

Sebelum kamu masuk langkah selanjutnya, kamu harus membuat slot iklan google adsense kamu terlebih dahulu. Saya sarankan kamu untuk membuat slot 300 x 250 atau  336 x 280 terlebih dahulu.

Setelah kamu selesai membuat slot iklannya, sekarang phrse HTML google adsense yang sudah kamu sebelumnya. Silahkan klik disini untuk pharse HTML!

Nah, kalau kamu sudah selesai melakukan langkah di atas, kita lanjutkan ke langkah selanjutnya.

Langkah 4 : Masuk Ke Edit HTML Template kamu lagi

Langkah 5 : Gunakan CTRL + F untuk temukan kode di bawah ini :

<data:post.body/>

Langkah 6 : Copy dan paste kode di bawah ini kemudian letakkan tepat di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='ads'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td width='354'>
LETAKKAN KODE GOOGLE ADSENSE YANG TELAH KAMU PHARSE DISINI
</td>
<td><div class='ads-right-min'>
<a class='mini-del' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'
title='Add To Del.icio.us'>Add This To Del.icio.us</a>
<a class='mini-tweet' expr:href='&quot;http://twitter.com/home?status=Reading &quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'
title='Post this article on Twitter'>Tweet/ReTweet This</a>
<a class='mini-facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'
target='_blank' title='Share On Facebook'>Share on Facebook</a>
<a class='mini-stumble' expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'
target='_blank' title='Stumble This'>StumbleUpon This</a>
<a class='mini-tech' expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url' target='_blank' title='Add To Technorati'>Add to
Technorati</a>
<a class='mini-digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'
target='_blank' title='Digg This'>Digg This</a>
</div>
</td>
</tr>
</table>
</b:if> 

Langkah 7 : Ganti LETAKKAN KODE GOOGLE ADSENSE YANG TELAH KAMU PHARSE DISINI dengan kode google adsense kamu yang telah kamu pharse sebelumnya.

Langkah 8 : Simpan Template dan lihat bagaimana hasilnya !

Setelah kamu memasang iklan google adsense di bawah judul postingan, luhat beberapa hari hasil yang akan dihasilkannya. Semoga berhasil dan semoga sukses.