Cara Mengganti atau Merubah Email Akun Paypal

Caranya sebenarnya sangat sederhana. Anda bahkan bisa menambahkan maksimal 7 email ke dalam satu account paypal. Berikut panduannya:

1. Pertama, login ke account paypal Anda


2. Klik Myaccount >> Kemudian arahkan mouse pada PROFILE >> klik Add/Edit Email



3. klik Add, kemudian tuliskan email baru Anda.

4. Setelah email ada dalam list, segera dikonfirmasikan.
Caranya: beri centang alamat email baru dan klik CONFIRM

5. Cek inbox email baru Anda, kemudian klik link konfirmasi dari paypal.

6. Balik lagi untuk mengecek apakah email Anda sudah berstatus confirm ataukah belum. Jika sudah, beri centang >> kemudian klik MAKE PRIMARY

7. Email baru sukses terpasang.

Selamat mencoba :D

Cara Menghasilkan Dolar Lewat Ziddu

 Internet kini sudah tidak lagi hanya sebagai media informasi, melainkan juga bisa menjadi sebagai media mencari uang secara online. Jika anda masuk ke google atau search engine lainnya dan mengetikkan “bisnis online” dan sebagainya, maka sudah ada jutaan informasi dan tips mengenai cara mencari uang secara online. Pada tutorial kali ini saya akan membahas mengenai cara menghasilkan dolar secara online lewat ziddu.

Ziddu sebenarnya adalah situs dengan layanan free file hosting atau media penyimpanan file secara gratis. Dengan ziddu, anda bisa menyimpan file seperti gambar, video, audio maupun dokumen lainnya yang anda inginkan. Setelah anda menguploadnya, anda bisa memperoleh link file tersebut untuk anda sebarkan di blog, website maupun forum anda.

Kelebihan ziddu daripada filehosting lainnya adalah bahwa ziddu akan membayar anda sebesar 0,001$ untuk setiap uniq download terhadap file anda serta akan membayar anda 0,1$ untuk setiap referral aktif anda. Ziddu akan membayar setelah earning anda mencapai minimum payment 10$. Pembayaran bisa dilakukan melalui paypal maupun money booker.

Adapun Cara Menghasilkan Dolar Lewat Ziddu adalah sebagai berikut:
  1. Anda terlebih dahulu harus mempunyai account di ziddu, silahkan klik DISINI untuk daftar secara gratis;
  2. Setelah anda klik link diatas, maka akan muncul form pendaftaran ziddu silahkan isi dan lengkapi dengan data diri anda, contohnya seperti pada gambar di bawah ini :
  3. Setelah anda klik tombol submit, maka akan muncul pesan “thank you for registering” seperti gambar di bawah ini :
  4. Selanjutnya klik tulisan “Clik here to log in your account” untuk ke halaman utama ziddu. Setelah terbuka halaman baru masukan alamat email dan password yang anda gunakan pada saat mendaftar untuk menguplod file-file Anda dan tampilan halamannya kira-kira seperti pada gambar di bawah ini :
  5. Silahkan mulai mengupload file dengan klik tombol choose file dan pilih file yang ingin anda upload. Anda bisa mengupload satu per satu maupun secara multiple dengan mengganti jumlah multiple file upload. Setelah semua file anda pilih, maka klik upload dan tunggu hingga prosesnya selesai;
  6. Setelah proses upload selesai, anda akan segera di redirect secara otomatis dan akan muncul link setiap file yang baru saja anda upload. Link tersebut sudah siap untuk anda sebarkan di blog, forum, dan media online lainnya. Mudah bukan??

Setelah anda terdaftar di ziddu dan mengetahui bagaimana caranya mengupload file, berikut ini tips untuk meningkatkan pendapatan dolar Anda:
  1. Upload file yang benar-benar banyak dicari dan dibutuhkan orang kemudian sebar link nya baik itu di blog anda, forum, facebook dsb.
  2. Jika anda memiliki blog, maka beri review yang menarik untuk setiap file yang anda upload.
  3. Trafik adalah inti dari earning ziddu yang maksimal. Semakin banyak link anda tersebar dan didownload oleh banyak orang, maka earning anda juga akan semakin tinggi, karena itu rajin-rajinlah menyebar link di blog atau forum yang bertrafik tinggi.
  4. Berilah judul dari file yang anda upload semenarik mungkin.
NOTE: Uang akan dikirim ke PayPal setelah mencapai minimum $10, biasanya dikirim sebelum tanggal 10 tiap bulannya.

Cara Menghasilkan Uang Dari Link Referral Program Bonus Co.Cc

Co.cc selain memberikan fasilitas domain gratis, ternyata juga bisa menjadi sarana bisnis online dalam bentuk bonus/komisi untuk member (anggota) yang bergabung menjadi Affiliatenya.

Bonus/komisi yang diberikan oleh co.cc yaitu $0.5 per account jika kita berhasil mengajak orang lain melalui link referrals kita untuk membuat account gratis co.cc, dan selain itu co.cc juga akan memberikan bonus mulai dari 10%-40% bagi kita yang berhasil menjual produk co.cc. Bagaimana menarik bukan?

Nah jika Anda tertarik untuk mengikuti Referrals Program Bonus (RPB) dari co.cc, berikut ini panduan Cara Menghasilkan Uang Dari Referral Program Bonus Co.Cc:
  1. Sebaiknya Anda membuat account dulu di co.cc, caranya klik Daftar
  2. klick Disini untuk menuju halaman Referral Program Bonus ;
  3. Klik menu Referrals di pojok kiri atas halaman untuk membuka form pendaftaran, seperti di bawah ini:
    First name Last name: Isi dengan nama Anda;
    Email address: Isi dengan alamat Email Anda yang masih aktiv;
    Enter a password: Masukan password Anda;
    Retype password: Masukan password Anda kembali dan harus sama dengan password di atasnya;
    Checklist pada kotak kecil yang bertuliskan ”I accept the Terms of Service”;
  4. Setelah form di atas diisi semua, lalu klik Create an account now dan pendaftaran selesai;
  5. Selanjutnya pada halaman baru, Anda akan mendapatkan link referral
  6. Link referral Anda itulah yang akan mendatangkan uang kepada Anda, caranya Anda promosikan link referral tersebut melalui facebook, twitter, blog dan sebagainya;
  7. Dalam berpromosi, Anda juga bisa memanfaatkan banner yang telah disediakan oleh co.cc di sub menu Get Banners, klik dan pilih banner yang Anda suka lalu copy paste code HTML yang diberikan, kemudian pasang di blog/web Anda atau media lainnya;
  8. Jika ingin mengetahui penghasilan referral Anda, klik pada sub menu Sign up list, maka akan muncul data penghasilan Anda;
  9. Anda dapat menarik komisi/bonus setelah mempunyai saldo minimal $1.0, caranya klik Withdraw Fund ditujukan ke rekening PayPal Anda.
Demikian tutorial Cara Menghasilkan Uang Dari Referral Program Bonus Co.Cc, semoga bermanfaat.

Cara membuat jarak antara comentar dan footer

 Sebelumnya jarak spasi di bawah kotak komentar blog ini memiliki jarak yang lumayan panjang, setelah saya melakukan uji coba dengan trik saya sendiri, akhir nya berhasil tanpa error sedikitpun, karena saya hanya merubah dan mengatur jumlah height dari template blog di bagian kode komentar.

Contoh pada blog ini awalanya memiliki jarak 410, perhatikan gambar berikut :



Untuk pengguna blog yang belum mengerti tentang Mengatur/ Merubah Jarak Spasi di Bawah Kotak Komentar, bisa mengikuti langkah mudah nya sebagai berikut :
  • Login Blogger
  • Klik Rancangan-Edit HTML
  • Cari kode kedua yang mirip sebagai berikut :
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
  • Ganti jumlah yang berwarna merah sesuai keinginan Anda (saya menggantinya dengan jumlah 205)
  • Jika sudah di ganti, klik tombol Simpan Template, dan lihat hasil nya
Bagaimana berhasil kan, saya harap sih berhasil, karena saya telah membuktikan cara nya pada blog ini.

Selamat Mencoba dan Semoga Bermanfaat

Cara Membuat Simbol Copyright di dalam Blog/Website dan PC

Copyright atau Hak Cipta merupakan hal yang vital untuk menjaga dan menunjukkan sebuah karya ataupun pemikiran original seseorang. Hak Cipta adalah milik siapa saja dan tidak harus didaftarkan ke suatu badan atau organisasi tertentu, berbeda dengan merek dagang (TM) dan phonograph (P) ataupun paten, registered (R). Membubuhkan simbol ini sudah merupakan suatu indikator dan simbol semiotis bahwa suatu karya merupakan hak original seseorang dan tidak bisa seenaknya dico-pas tanpa ijin atau tanpa link sumber (linkbacking). Suatu penghargaan terhadap karya orang lain merupakan cermin bagaimana seseorang menghargai diri sendiri.

Simbol Copyright © bisa kita buat tanpa harus menggunakan font khusus atau gambar/icon karena word processor pada komputer maupun browser telah memiliki database tersendiri yang akan muncul jika kita ketikkan kode tertentu, dasar list simbol ini di dalam database umum adalah 0169. Ada beberapa cara dan kode berbeda untuk memunculkan simbol Copyright:

1. Di Keyboard PC (saat membuat dokumen, mis: Word, Excel, PDF, dll)

(Windows):
Tekan Ctrl dan Alt bersamaan, tahan, dan tekan C (Ctrl+Alt+C).
Bisa juga dengan menekan Alt, tahan, dan ketikkan angka 0169 (Alt+0169) (gunakan number pad, di bagian kanan keyboard, bukan yang diatas pad huruf).

(Mac):
Tekan Option dan 'g' secara bersamaan (Option+g)

2. Blog/Web and Programming Sheets

Kode untuk HTML:
Ketikkan &copy; misalnya:
&copy; 2011 Buka(n)RahasiaLagi!
Dan hasilnya akan menjadi seperti ini:
© 2011 Buka(n)RahasiaLagi!
Pastikan mengetikkan kode tersebut melalui editor HTML. Untuk menghindari kesalahan penerjemahan kode, lebih baik gunakan kode unicode-nya: &#169; 

Kode Untuk XML dan Java:
Ketikkan &#169; atau &#xA9;

Kode untuk XSL:
Selalu gunakan &#xA9;

Kode untuk Textinfo:
Ketikkan @copyright{}
Di dalam info, kode tersebut akan muncul sebagai (C) dan pada hasil print akan muncul sebagai ©.

Kode untuk LaTex:
Gunakan kode \copyright

Cara Mendaftarkan Blog ke Alexa

Posting ini merupakan tutorial cara/langkah-langkah mendaftarkan blog/website di Alexa. Mendaftarkan blog di Alexa merupakan salah satu cara untuk mendapatkan audit dasar untuk mengetahui perkembangan traffic blog/website. Baru memiliki blog ataupun memiliki rank alexa yang masih rendah bukan masalah. Justru, hal itu akan memberikan gambaran tentang kualitas blog anda dan memacu anda lebih bersemangat lagi. Betul?
Berikut langkah-langkah pendaftaran blog/website di Alexa secara detail:
1. Masuk ke alexa.com
2. Kemudian pilih tab 'Site Tools'.
3. Klik 'Claim Your Site'.
4. Masukkan url blog/website anda, kemudian klik 'Claim your site'.
 5. Anda akan masuk ke halaman login. Daftar terlebih dahulu untuk login, atau untuk praktisnya bisa langsung login dengan account Facebook yang terletak di sebelah kanan form login.
6. Kemudian anda akan masuk ke halaman verifikasi. Terdapat dua cara, yaitu dengan mengupload HTML ke direktori root blog (ini jika anda punya hosting sendiri) atau masukkan meta key Alexa yang terdapat pada opsi kedua. Gunakan opsi kedua agar lebih cepar dan mudah. Caranya: copy meta key-nya dan paste di template HTML anda. Letakkan di antara <head> dan </head>, agar cepat termuat letakkan di bagian atas (dekat <head>) setelah meta keyword dan meta description blog anda. Kemudian save template.
 7. Kembali ke halaman Alexa tadi dan klik 'Verify my meta tag'. Jika berhasil akan ada informasi yang menunjukkan bahwa anda telah berhasil meng-klaim blog anda.
 8. Dapatkan widget Alexa untuk dipasang. Masuk ke 'Site Tools' lagi dan pilih 'Alexa Site Widgets'.
9. Ada beberapa jenis widget disana, anda tinggal memilih mana yang mau anda pasang di blog, masukkan url blog, dan copy kodenya.10. Masuk ke halaman design >> page elements, klik add gadget,  dan pilih add HTML/Javascript, paste kode ke dalam kolomnya, dan save. Letakkan di sisi halaman yang diinginkan, lalu save lagi.
 
10. Selesai.. :)

Cara Menghilangkan Langganan Atom

Login ke blogger.com

Klik Rancangan

Klik Edit HTML

Cari Kode seperti contoh berikut


.feed-links{
.............
.............
.............
}

Kemudian tambahkan kode

display:none;

Hingga menjadi seperti

.feed-links{
display:none;
.............
.............
.............
}

Jika pada template anda tidak ada kode feed-links seperti diatas, tambahkan kode dibawah ini diatas kode ]]></b:skin>

.feed-links{
display:none;
}
Klik Simpan Template.

Cara Menghilangkan Navbar blogger

Untuk menghilangkan navbar blogger kalian tinggal menambahkan kode di bawah ini pada style sheet CSS :


/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}


Atau bisa juga menaruh kode berikut persis di bawah kode <body> :


<style type='text/css'>
#navbar-iframe {display:none;}
</style>


Mau pilih yang mana? keduanya mempunyai fungsi yang sama yaitu menghilangkan navbar blogger. Masih bingung juga dalam pemasangan kode di atas? silahkan ikuti langkah-langkah berikut ini :



  • Untuk template klasik



    1. Sign in di blogger
    2. Klik menu Template
    3. Klik menu Edit HTML
    4. Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman
    5. Copy kode berikut lalu paste di atas kode </style>
    6. /* hilangkan navbar ----------------------------- */ #navbar-iframe { height:0px; visibility:hidden; display:none }
    7. Klik tombol Simpan Perubahan Template
    8. Selesai.



  • Untuk template baru



    1. Sign in di blogger
    2. Klik menu Layout
    3. Klik menu Edit HTML
    4. Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data
    5. Copy kode berikut lalu paste di atas kode ]]></b:skin>
    6. /* hilangkan navbar ----------------------------- */ #navbar-iframe { height:0px; visibility:hidden; display:none }
    7. Klik tombol Simpan Template
    8. Selesai.


    Selamat mencoba :)

    Membuat Popup

    kali ini kita mencoba iseng belajar menghias blog dengan tampilan jendela baru dengan ukuran sesuai yang kita inginkan.

    Jika Iklan popup kebanyakan memaksa visitor untuk melihat suatu pesan dari author,tapi disini kita hanya menawarkan visitor untuk melihatnya.

    OK! Langsung ke topik,popup dengan ukuran yang kita tentukan sendiri,meskipun sekali lagi,ini berfungsi di Mozilla Firefox dan Opera.

    Pertama,tentukan alamat URL yang ingin di tampilkan,selanjutnya anda bisa meletakkan kode ini pada halaman HTML anda maupun saat anda hendak mempublikasikan pada suatu artikel.

    Saya ambil contoh dengan menambahkan Element Baru pada blog,seperti biasa,Dashboard,lalu pilih Tata Letak, selanjutnya Tambah Element Baru/Add New Widget.

    Pilih HTML/Javascript,dan letakkan kode berikut:

    <center><form onsubmit="window.open('http://URLYANGDITAMPILKAN/','popupwindow','scrollbars=no, width=250,height=250');return true"><input type="submit" value="TEXT YANG TAMPIL PADA BUTTON"></form></center>

    Tulisan kapital dan angka yang berwarna merah,pada kode diatas,ganti sesuai perintah yang dituliskan dan rubah sesuai ukuran pilihan anda.
    Setelah kode di letakkan Simpan,dan Selesai.

    Membuat Iklan Popup

    Pernahkah anda saat membuka sebuah situs,dan secara tiba-tiba ada jendela baru muncul yang tidak pernah kita inginkan?
    Biasanya,jendela baru itu berupa iklan,baik itu alamat situs baru maupun iklan berupa gambar maupun animasi.

    Nah!iklan yang seperti itu,orang menyebutnya sebagai iklan Popup.

    Kelemahan kita meletakkan Iklan Popup pada halaman blog kita,akan memperlambat
    koneksi,disamping itu,tidak semua browser bisa mendukung Popup ini.

    Tapi,jika anda ingin mencobanya,saya mempunyai beberapa baris kode yang bisa anda coba.
    Anda juga bisa mendownload di http://www.popupgenerator.com.

    Di bawah ini kode yang ingin saya sampaikan powered by http://www.popupgenerator.com loh!bukan hasil kreasi saya sendiri.

    Pilih Tata Letak pada blogspot----->Edit Html.
    Letakkan kode di bawah ini di bawah kode <head> pada halaman html anda :

    <SCRIPT LANGUAGE='JAVASCRIPT' TYPE='TEXT/JAVASCRIPT'>
    <!--
    /****************************************************
    Created With: PopupGenerator
    URL: http://www.popupgenerator.com
    ****************************************************/
    var win=null;
    function NewWindow(mypage,myname,w,h,pos,infocus){
    if(pos=="random"){myleft=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;mytop=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}
    if(pos=="center"){myleft=(screen.width)?(screen.width-w)/2:100;mytop=(screen.height)?(screen.height-h)/2:100;}
    else if((pos!='center' && pos!="random") || pos==null){myleft=0;mytop=20}
    settings="width=" + w + ",height=" + h + ",top=" +
    mytop + ",left=" + myleft + ",scrollbars=yes,location=yes,directories=yes,status=no,menubar=no,toolbar=no,resizable=yes";win=window.open(mypage,myname,settings);
    win.focus();}
    // -->
    </SCRIPT>


    Selanjutnya,hapus kode <body> pada html blog anda,dan gantilah dengan kode di bawah ini :

    <body onLoad='NewWindow("http://xxxxx.blogspot.com/","bisnis",
    "500","400","left","front");'>

    Lalu simpan template anda,dan lihat hasil eksperimen anda.
    Untuk kode yang bercetak warna hijau,adalah kode yang bisa anda rubah.

    PR,,lebih baik anda coba dulu,dan anda akan tahu apa fungsi masing-masing dari
    kode yang bercetak warna hijau.
    Selamat bereksperimen !!!

    Meletakkan / Menambahkan Iklan di bawah posting

    Anda ingin meletakkan iklan Adsense,AdBrite,maupun kode iklan lain ke dalam blog persis di bawah posting?
    Ada cara mudah meletakkan kode iklan seperti iklan AdSense tepat di bawah postingan,tapi inget ya,Untuk Adsense,ini berlaku untuk Adsense for Content.
    Tapi,sebelumnya,anda sudah menggunakan fitur Read more../Selengkapnya..atau yang sejenis dalam body posting ya..jika belum anda buat,buatlah dulu,baca panduannya disini
    Jika body posting sudah di buat Read more../Selengkapnya..tinggal masuk permasalahanya.Jika anda mempunyai kode Adsense for Content,seperti contoh :

    <script
    type="text/javascript"><!--
    google_ad_client = "pub-xxxxxxxxxxx";
    google_ad_slot = "0976076963";
    google_ad_width = 468;
    google_ad_height = 60;
    //-->
    </script>
    <script
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js"
    type="text/javascript">
    </script>

    Sebelum kode diletakkan,parse dulu kode tadi,misal penulisan tanda <,di ganti dengan &lt;
    Lihat keterangan di bawah ini untuk membantu :
    < notasinya : &lt;
    > notasinya : &gt;
    & notasinya :&amp;
    " notasinya :&quot;
    ± notasinya : &plusmn;
    Spasi notasinya :&nbsp;

    Maka,dalam contoh disini,kode Adsense diatas,jika sudah di parse,akan menjadi seperti di bawah ini :

    &lt;script
    type=&quot;text/javascript&quot;&gt;&lt;!--
    google_ad_client = &quot;pub-xxxxxxxxxxx&quot;;
    google_ad_slot = &quot;0976076963&quot;;
    google_ad_width = 468;
    google_ad_height = 60;
    //--&gt;
    &lt;/script&gt;
    &lt;script
    src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;
    type=&quot;text/javascript&quot;&gt;
    &lt;/script&gt;


    Ingat ya,kode diatas ini hanya sebagai contoh saja.Yang anda harus parse adalah kode dari iklan Adsense,AdBrite atau kode iklan yang lain milik anda,yang akan di letakkan di bawah posting nantinya.
    Selain memparsekan kode secara manual,sekarang banyak kok software yang sudah menyediakan fitur untuk parse
    kode otomatis,seperti yang ini.
    Setelah di parse,buka Notepad,dan copy paste kode yang sudah di parse tadi ke dalam Notepad.(jangan disimpan,hanya numpang kode saja),biarkan,jangan ditutup dulu Notepadnya ya..

    Sekarang pergi ke Dashboard---->Tata Letak----->Edit Html---->Centang Expand Template Widget
    Cari kode atau yang hampir sama dengan kode di bawah ini (kode untuk Read more..yang sudah anda buat) :

    <b:if cond='data:blog.pageType
    == "item"'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <b:else/>
    <style>.fullpost{display:none;}</style>
    <p><data:post.body/>
    <a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
    </b:if>


    Jika sudah ketemu,copy paste kode iklan yang sudah anda parse tadi (yang ada di Notepad tadi),dan letakkan di bawah kode yang berwarna hijau di atas.

    Maka hasilnya kurang lebih akan seperti di bawah ini :

    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <br /> <br />
    &lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
    google_ad_client = &quot;pub-xxxxxxxxxxx&quot;;
    google_ad_slot = &quot;0976076963&quot;;
    google_ad_width = 468;
    google_ad_height = 60;
    //--&gt;
    &lt;/script&gt;
    &lt;script
    src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;
    type=&quot;text/javascript&quot;&gt;
    &lt;/script&gt;

    <b:else/>
    <style>.fullpost{display:none;}</style>
    <p><data:post.body/>
    <a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
    </b:if>

    Kode yang berwarna biru,<br /> <br />,fungsinya hanya memberi jarak saja.

    Simpan.

    Membuat iklan melayang

    1. Login Ke Blogger.com dengan Akun anda masing-masing Pastinya
    2. Masuk ke Tab Tata Letak
    3. Pilih Elemen Halaman
    4. Tambah Gadget Pilih HTML / JAVASCRIPT
    5. Dan Copy kode di bawah ini kedalamnya
    6.  Lalu save
    <a onblur="try {parent.
    deselectBloggerImageGracefully();} catch(e) {}" href="http://i388.photobucket.com/albums/oo322/arif_bucket/pagenavigation.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://i388.photobucket.com/albums/oo322/arif_bucket/pagenavigation.gif" alt="" id="BLOGGER_PHOTO_ID_5433478876639914642" border="0" /></a>


    <style type="text/css">
    #gb{
    position:fixed;
    top:10px;
    z-index:+1000;
    }
    * html #gb{position:relative;}


    .gbcontent{
    float:right;
    border:2px solid #A5BD51;
    background:#ffffff;
    padding:10px;
    }
    </style>

    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
    gb.opened = !gb.opened;
    }
    function moveGB(x0, xf){
    var gb = document.getElementById("gb");
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    gb.style.top = x.toString() + "px";
    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
    }
    </script>

    <div id="gb">

    <div class="gbtab" onclick="showHideGB()"> </div>

    <div class="gbcontent">

    <div style="text-align:right">
    <a href="javascript:showHideGB()">
    .:[Close][Klik 2x]:.
    </a>
    </div>
    <center>
    http://i388.photobucket.com/albums/oo322/arif_bucket/pagenavigation.gif

    </center>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.center = (30-gb.offsetWidth).toString() + "px";
    </script></div></div>

    Highlight pada Script/Kode di Postingan(2)

    Jika masih ada yang belum tahu maksud Highlight pada Script/Kode di Postingan akan saya jelaskan kembali, Highlight pada Script/Kode di Postingan adalah script/kode atau tulisan lainnya ) yg akan membedakan dengan tulisan yg lain seperti yang terdapat diblog ku ini.

    Gininih caranya

    silahkan Log in terlebih dahulu ke accunt blogger anda lalu masuk ke menu Layout kemudian masuk menu Edit HTML lalu…? copy kode dibawah ini lalu pasang di Script CSS kamu atau pasang sebelum kode ]]></b:skin>


    .alert { background: #DDE4FF;
    text-align: left;
    padding: 5px 5px 5px 5px;
    border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;}

    keterangan:

    background:#DDE4FF;
    adalah warna background nya,bisa anda ubah sesuka anda lihat kode warnanya disini

    border:1px dotted
    adalah garis tepinya 1px yaitu ketebalan dari garis tepinya, kamu bisa ganti ketebalanya dengan yang lain sesuaikan dengan template anda,sedangkan dotted adalah jenis border pada kota highlight script kamu ganti sesuai selera kamu,klik disini untuk melihat jenis border .

    #223344 adalah kode warna border silahkan Anda ganti menuruk selera Anda.

    padding:5px 5px 5px 5px;
    Untuk memberi batas garis tepi dengan tulisan, memungkinkan agar ada jaraknya dari garis tepi.

    Cara Posting

    Supaya kode/scriptnya bisa ada tepat di kotak Highlight,untuk memposting sebuah postingan harus pakai cara-cara tertentu.Yaitu dengan menambahkan kode ini <p class="alert"> sebelum kode/script yang akan diberi highlight. kemudian ditambahkan kode </p> diakhir script/Kode.


    <p class="alert">

    DISINI POSTINGAN YANG MAU DI HIGHLIGHT

    </p>


    Selamat mencoba :)

    Style Border/Jenisnya

    Apakah anda pernah mendengar istilah Border,atau bertanya-tanya apakah itu Border, jika anda bergelut di dunia komputerisasi pastilah anda tahu apa itu Border. Jika dibawa ke dunia nyata Border itu diibaratkan seperti sebuah pagar yang mengelilingi rumah, apa jadinya rumah tanpa pagar, pasti kambing lebih mudah mencuri daunkan(hanya bercanda), jadi anda sudah tahu apa itu Border,ya Border adalah garis tepi dari komponen atau sebuah garis yang mengelilingi sebuah komponen(widget.script/kode,gadget) yang membedakanya dengan komponen yang lain

    Tapi tampilan atau bentuk border yang biasa dipakai sangat sederhana sekali(hanya berbentuk garis lurus),apakah anda ingin mengubah bentuk Border blog anda supaya blog kelihatan lebih dinamis(ingat Border juga dapat memperindah blog),untuk itulah artikel ini hadir;;jenisnya☺

    Jenis-jenis Border


    Solid


    Dotted


    Ridge


    dashed


    double


    groove


    inset


    outset

    gimana ternyata banyak style border yang bagus-bagus kan,OK sekian dulu tutorialnya

    Selamat mencoba :)

    Highlight pada Script/Kode di Postingan(1)

    Apakah anda pernah membaca sebuah buku,yang pada buku itu terdapat sebagian tulisan yang lebih ditonjolkan dari pada tulisan yang lainnya,seperti warnanya lain,atau ukuran nya yang berbeda dengan ukuran huruf lainnya atau jenis font nya yang berbeda, atau bisa juga tulisan/teks itu diberi background agar lebih memudahkan pembaca membedakan teks yang satu dengan teks yang lain.

    Seperti yang terlihat pada blog KK ini, Script kode yang ditampilkan berbeda dengan Tulisan-tulisan yang ada, karna pada kode-kode terdapat background yang membedakannya dengan tulisan lain silahkan lihat contoh berikut ini:


    INI HANYA CONTOH

    TULIS TEKS YANG INGIN DITAMPILKAN DISINI

    HANYA CONTOH

    Silahkan log in dengan ID Blogger anda dan masuk ke bagian Posting Editor dan tulis kode di bawah ini di bagian Edit HTML


    <div style="background: #DDE4FF; border:1px dotted #223344; padding:5px;">

    TULIS DISINI TEKS YANG INGIN DITONJOLKAN

    </div>

    background:#DDE4FF;
    adalah warna background nya,bisa anda ubah sesuka anda lihat kode warnanya disini

    border:1px dotted
    adalah garis tepinya 1px yaitu ketebalan dari garis tepinya, kamu bisa ganti ketebalanya dengan yang lain sesuaikan dengan template anda,sedangkan dotted adalah jenis border pada kota highlight script kamu ganti sesuai selera kamu .

    #223344 adalah kode warna border silahkan Anda ganti menuruk selera Anda.

    padding:5px;
    Untuk memberi batas garis tepi dengan tulisan, memungkinkan agar ada jaraknya dari garis tepi.

    tambahkan overflow:auto; jika ingin menambahkan fungsi scroll pada kotak Higlight

    untuk background dengan gambar gunakan kode dibawah ini


    <div style="background:url(http:background.jpg); width:440px; height:400px; padding:5px;">

    TULIS DISINI TEKS

    </div>


    Text yang tercetak tebal diatas adalah url gambarnya.
    width:440px; adalah lebar kotak Higlight
    height:400px; adalah tinggi kotak Higlight.

    Selamat mencoba :)

    Menghilangkan Judul Blog di header

    Judul Blog Ibarat sebuah Nama yang merupakan Identitas dari diri kita sendiri,selain itu judul Blog juga menggambarkan isi dari Blog tersebut,dan merupakan kunci terindeksnya blog kita dengan search engine.tapi ada sebagian orang yang berpendapat alangkah lebih baiknya judul blog tersebut dihilangkan karna mengganggu keindahan Background Header Blog nya

    Pada tutorial kali ini kita akan membahas cara menghilangkan judul Blog di Header (up tunggu dulu bukan dihilangkan judul blog tetap ada tapi hanya saja judul blog tersebut tidak ditampakan di Header),Ok langsung saja Sign in dib logger dan ikuti tutorial berikut

    1.Klik Menu Layout

    2.Masuk ke Edit HTML

    3.Cari Code yang mirip seperti dibawah ini (karna di setipa blog kodenya berbeda-beda)

    #header h1 {
    margin:50;
    padding:5px 0 0 10px;
    font-size: 100%;
    font-weight:bold;
    line-height: 1.2em;
    letter-spacing:.0em;
    font-style:italic;
    color:#FFFFFF;
    }

    4.Tambahkan Code Css visibility:hidden; dibawah kode color:#FFFFFF;

    5.Sehingga susunanya menjadi seperti ini

    #header h1 {
    margin:50;
    padding:5px 0 0 10px;
    font-size: 100%;
    font-weight:bold;
    line-height: 1.2em;
    letter-spacing:.0em;
    font-style:italic;
    color:#FFFFFF;
    visibility:hidden;
    }

    6.Save Template Anda dan lihat perubahannya

    Selamat mencoba :)

    Membuat tulisan Bergaya Koran

    Apakah anda tau dengan Drop cap,jika anda lihat di Microsoft Word,di MS Word ada sebuah fasilitas yang bisa digunakan untukmembuat huruf besar di awal kalimat,yaitu Drop cap.efek Drop cap dapat dijadikan sebagai salah satu alternatif agar postingan pada blog anda terlihat lebih menarik dan bergaya seperti majalah atau koran.seperti pada postingan ini huruf A diawal kalimat lebih besar dibandingkan huruf yang lainnya,lalu bagaimanajika kita ingin menerapkan hal serupa pada postingan di blog?apakah bisa dilakukan!tentu saja hal tersebut bisa dilakukan,lagi pula membuat Drop cap di blog juga cukup mudah yaitu dengan menambahkan Style CSS pada halaman Edit HTML .

    Berikut langkah-langkahnya:


    1. Login di blogger dengan ID anda

    2. Klik menu Layout

    3. Klik Tab Edit HTML

    4. Pada kotak Edit HTML paste kan kode berikut persis di atas kode ]]></b:skin>

    /* kode untuk hurup awal
    ----------------------------------------------- */
    .awal {
    float:left;
    color: #000000;
    background:#ffffff;
    line-height:80px;
    padding-top:1px;
    padding-right:5px;
    font-family:times;
    font-size:100px;
    }
    6.jika anda ingin memakai/memasangkan drop cap pada postingan,maka diawal anda harus mengetikan: <span class="awal">hurup awal </span>
    Contohnya seperti ini:

    <span class="awal">A</span> pakah anda tau dengan Drop cap,jika anda lihat di Microsoft Word,di MS Word ada sebuah fasilitas yang bisa digunakan untukmembuat huruf besar di awal kalimat,yaitu Drop cap.efek Drop cap dapat dijadikan sebagai salah satu alternatif agar postingan pada blog anda terlihat lebih menarik dan bergaya seperti majalah atau koran.seperti pada postingan ini huruf A diawal kalimat lebih besar dibandingkan huruf yang lainnya,lalu bagaimanajika kita ingin menerapkan hal serupa
    Apakah anda tau dengan Drop cap,jika anda lihat di Microsoft Word,di MS Word ada sebuah fasilitas yang bisa digunakan untukmembuat huruf besar di awal kalimat,yaitu Drop cap.efek Drop cap dapat dijadikan sebagai salah satu alternatif agar postingan pada blog anda terlihat lebih menarik dan bergaya seperti majalah atau koran.seperti pada postingan ini huruf A diawal kalimat lebih besar dibandingkan huruf yang lainnya,lalu bagaimanajika kita ingin menerapkan hal serupa
    A=adalah huruf besar yang ditampilkan pada awal kalimat,ganti sesuai hurufnya.

    Selamat mencoba :)

    Menghilangkan Navbar

    Sobat semua pasti tahu dangan Navbar kan,itu loh yang letaknya berada diatas Blog, sebenarnya Navbar tersebut tidaklah mengganggu,tapi jika Sobat ingin menghilangkan Navbar tersebut,sangatlah mudah,dengan melakukan pengaturan pada kode HTML, tetapi

    jika sobat ingin memunculkanya kembali,maka tinggal menghapus skripnya saja, menghilangkan Navbar sebernanya tidak saya sarankan karna melanggar TOS (Term Of Service) Blogger,tetapi jika Sobat ingin mencoba-coba silakan saja.

    Berikut Langkah-langkahnya

    1.Pertama-tama,masuk ke halaman Dashboard
    2.Sesudah itu,klik link Layout,lalu pilih Edit HTML
    3.Didalam kotak HTML temukan kode berikut,biasanya letaknya di bagian atas

    -----------------------------------------------
    Blogger Template by ThemeLib.com
    Theme Name: *******(nama template mu)
    Theme URI: *********(url template)
    Author URI: *********(pembuat template)
    Version: 1.0
    ----------------------------------------------- */

    4.Lalu ketikan Kode berikut Di bawahnya

    #navbar, #navbar-iframe {
    height: 0px;
    visibility: hidden;
    display: none;
    }

    5.jika sudah klik SAVE TEMPLATE
    6Akseslah blog anda,jika anda menempatkan skripnya dengan benar,maka Navbar sudah tidak tampak lagi.

    Membuat Kotak Blogroll

    Anda pasti tau dengan Link,itu sebuah kata kunci yang menghubungkan Blog kita dengan Blog yang lain,tapi apa jadi nya ya kalau link itu udah berjumlah jutaan, mampusdeh , tentu link tersebut lebih mendominasi blog kita,jadi nya pengunjung blog hanya melihat kumpulan link-link tersebut yang mungkin panjangnya kayak gedung pencakat langit,hal ini dapat menyebabkan blog kita melorot, trus gimana dong trik untuk mengakalinya,
    Tenang saja kali ini aku akan ngejelasin trik untuk menangkalnya

    Untuk trik kali ini ada empat macam kotak blogroll yang akan kita buat,jadi terserah kamu mau pilih kotak Bloroll yang mana:
    1. Kotak Blogroll Model Textarea

    Contohnya saja seperti kotak blogroll seperti punyaku itu, itu yang terdapa ribuan link didalamnya
    Nah begini cara membuatnya :
    Pertama Log in ke accunt blogger mu lalu Pasang code berikut ini di kedalam Page element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

    <div style="border: 1px solid rgb(153, 153, 153);
    overflow: auto;
    width: 300px;
    height: 200px;
    text-align: center; ">

    #link1 <br />
    #link2 <br />
    #link3 <br />
    #link4 <br />
    #link
    </div>

    keterangan:
    - Kode widht: 300px; dan height: 200px; adalah ukuran lebar dan panjang kotak, kamu dapat merubahnya dan menyesuaikanya dengan ukuran yg kamu suka.
    - Trus ganti tulisan "#link1,#link2, #link3, #link4 dst" dengan daftar link-link kamu, - Jika kamu pingin daftar link-linknya berjajar, maka kamu hilangkan saja kode


    2. Kotak Blogroll Model Marquee

    Kotak ini juga mampu menampung banyak link dalam tempat yang sempit. Namun kotak blog roll ini berbeda dengan kotak yg diatas, karena kotak yang ini tidak memiliki rollbar. Link-link atau isi didalam kotak ini akan bergerak/berjalan, secara vertikal ataupun secara horizontal.
    Jika kamu ingin membuatnya begini caranya membuatnya:
    Pertama masuk dulu ke Dashboard mu lalu kamu hanya tinggal memasang code berikut ini di kedalam Page element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

    <MARQUEE align="center" direction="up" height="300" scrollamount= "2"

    onmouseover='this.stop()' onmouseout='this.start()' width="95%" >


    #link1 <br />
    #link2 <br />
    #link3 <br />
    #link4 <br />
    #dst
    </marquee>

    Keterangan :
    - Kode "up" menunjukan arah pergerakan, kamu bisa menggantinya dengan yang lain seperti down, left, right - Jika kamu menggantinya dengan pergerakan horizontal (left ato right) maka hilangkan kode
    .
    - Angka "300" menunjukkan tinggi dari kotak blogroll kamu. Semakin banyak angkanya maka semakin tinggi pula ukuran blogroll mu.

    3. Kotak Blogroll Model Abjact

    Akusih ngak tau Model kotak Blogroll nya(aku kasih aja Model Abjact,maaf ya) soal nya Link-link yang terdapat di kotak di ini disusun berurutan abjat(A-Z).tentu ini akan mempermudah pencarian terhadap suatu link,kamu ngak sabar ya ingin membuatnya Oke deh gini cara membuatnya

    Pertama masuk dulu ke Dashboard mu lalu kamu hanya tinggal memasang code berikut ini di kedalam Page element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

    <center>
    <table border="3" cellpadding="5" width="300" height="200"/>
    <tr>
    <td>
    <div style="overflow: auto; height: 200px; width: 300px;">

    <div align="center"><a href="http://www.blogkomputers.blogspot.com/" title="Kursus-Komputers">[ Administrator ]</a><br/><div/>




    <div
    align="left"><span style="font-weight: bold; color: red; font-size: 110%;">A</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <a href="Link4" title="">link#4</a><br/>
    <a href="Etc�" title="">link#5</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">B</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">C</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">D</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">E</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">F</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">G</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">H</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">I</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">J</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">K</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">L</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">M</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">N</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">O</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">P</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">Q</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">R</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">S</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">T</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 125%;">U</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">V</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">W</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">X</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">Y</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">Z</span><br/>
    <a href="Link1" title="">link#1</a><br/>
    <a href="Link2" title="">link#2</a><br/>
    <a href="Link3" title="">link#3</a><br/>
    <br/>


    <span style="font-weight: bold; color: red; font-size: 110%;">Non Alphabet</span><br/>
    <a href="" title="title">link#1</a><br/>
    <a href="" title="title">link#2</a><br/>
    <a href="" title="title">link#3</a><br/>
    <br/>

    </div></div></div></div></td>
    </tr>
    </table>
    <center/>

    Keterangan:
    - Tulisan berwarna merah merupakan informasi mengenai blog mu right - Tulisan Weight dan height merupakan tinggi kotak bloggoll mu
    - Tulisan Link1,Link2,Link3 merupakan URL yang akan dituju
    - Tulisan Link#1,Link#2,Link#3 merupakan tampilan pada kotak blogroll


    4. Kotak Blogroll Model Dropdown

    Anda semua pasti telah tau dengan dropdown,tapi kalau belum tau,mari kita belajar lagi, ada salah satu fasilitas blogger yang menggunakan menu dropdown(Archive),yaitu menu yang berjajar dari atas ke bawah,cara ini tentu lebih menguntungkan,karna seberapa banyakpun link dapat ditampung dalam menu dropdown ini,dan tidak memakan tempat yang besar pada blog anda

    Udah, kita tidak usah basa-basi lagi, sekarang bagaimana membuat menu dropdown yang didalamnya terdapat link-link,untuk membuatnya silahkan aja copy code dibawah ini

    <form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

    <option>- Link Friends -</option>

    <option value="http://blogkomputers.blogspot.com">Blog komputers</option>

    <option value="http://arif-m.blogspot.com ">Arif</option>

    <option value="http://blogscommunity.blogspot.com">Handaka</option>

    <option value="http://andi-arifin.blogspot.com ">andi-arifin</option>

    <option value="http://minangkabaublogger.blogspot.com ">Romi</option>

    <option value="http://riska-robianto.blogspot.com ">BBB</option>

    <option value="http://kolom-tutorial.blogspot.com ">kang rohman</option>

    <option value="http://trik-tips.blogspot.com ">trik blog</option>

    <option value="http://seputarinfokomputer.blogspot.com "> blog bang uul</option>

    </select></form>

    SELAMAT MENCOBA......

     

    Membuat Page Navigation

    Page Navigation adalah sebuah Widget yang digunakan pada Web ataupun Blog untuk memperlihatkan postingan atau artikel pada Webblog tersebut per halaman,contohnya seperti gambar dibawah ini:
    Untuk lebih memperjelas pengetahuan anda mengenai Page Navigation ini silahkan menuju halaman depan[Homepage] blog ini,dibagian bawah postingan terakhir terdapat angka1,2,3,…,dst.itulah yang disebut Page Navigation.

    Untuk membuatnya sangat mudah

    1.Login ke blogger dengan ID anda

    2.Lalu Klik Menu Templates

    3.Klik Add Widget Element

    4. Pilih Menu HTML/Java Script

    5.Lalu Download Kode berikut dan Pastekan pada kotak HTML tersebut.





    <style>
    .showpageArea a {
    text-decoration:underline;
    }

    .showpageNum a {
    text-decoration:none;
    border: 1px solid #bbb;
    margin:0 3px;
    padding:3px;
    }

    .showpageNum a:hover {
    border: 1px solid #bbb;
    background-color:#bbb;
    }
    .showpagePoint {
    color:#fff;
    text-decoration:none;
    border: 1px solid #fff;
    background: #000;
    margin:0 3px;
    padding:3px;
    }
    .showpageOf {
    text-decoration:none;
    padding:3px;
    margin: 0 3px 0 0;
    }
    .showpage a {
    text-decoration:none;
    border: 1px solid #bbb;
    padding:3px;
    }
    .showpage a:hover {
    text-decoration:none;
    }
    .showpageNum a:link,.showpage a:link {
    text-decoration:none;
    color:#333;
    }

    </style>

     <script type="text/javascript">

    function showpageCount(json) {
    var thisUrl = location.href;
    var htmlMap = new Array();
    var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
    var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
    var isPage = thisUrl.indexOf("/search?updated")!=-1;
    var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
    thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
    var thisNum = 1;
    var postNum=1;
    var itemCount = 0;
    var fFlag = 0;
    var eFlag = 0;
    var html= '';
    var upPageHtml ='';
    var downPageHtml ='';


    var pageCount=5;
    var displayPageNum=3;
    var firstPageWord = 'Awal';
    var endPageWord = 'Akhir';
    var upPageWord ='Sebelumnya';
    var downPageWord ='Selanjutnya';



    var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

    for(var i=0, post; post = json.feed.entry[i]; i++) {
    var timestamp = post.published.$t.substr(0,10);
    var title = post.title.$t;
    if(isLablePage){
    if(title!=''){
    if(post.category){
    for(var c=0, post_category; post_category = post.category[c]; c++) {
    if(encodeURIComponent(post_category.term)==thisLable){
    if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }

    postNum++;
    htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
    }
    }
    }
    }//end if(post.category){

    itemCount++;
    }

    }else{
    if(title!=''){
    if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }

    if(title!='') postNum++;
    htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
    }
    }
    itemCount++;
    }
    }

    for(var p =0;p< htmlMap.length;p++){
    if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
    if(fFlag ==0 && p == thisNum-2){
    if(thisNum==2){
    if(isLablePage){
    upPageHtml = labelHtml + upPageWord +'</a></span>';
    }else{
    upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
    }
    }else{
    upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
    }

    fFlag++;
    }

    if(p==(thisNum-1)){
    html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
    }else{
    if(p==0){
    if(isLablePage){
    html = labelHtml+'1</a></span>';
    }else{
    html += '<span class="showpageNum"><a href="/">1</a></span>';
    }
    }else{
    html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
    }
    }

    if(eFlag ==0 && p == thisNum){
    downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
    eFlag++;
    }
    }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
    }//end for(var p =0;p< htmlMap.length;p++){

    if(thisNum>1){
    if(!isLablePage){
    html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
    }else{
    html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
    }
    }

    html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

    if(thisNum<(postNum-1)){
    html += downPageHtml;
    html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
    }

    if(postNum==1) postNum++;
    html += '</div>';

    if(isPage || isFirstPage || isLablePage){
    var pageArea = document.getElementsByName("pageArea");
    var blogPager = document.getElementById("blog-pager");

    if(postNum <= 2){
    html ='';
    }

    for(var p =0;p< pageArea.length;p++){
    pageArea[p].innerHTML = html;
    }

    if(pageArea&&pageArea.length>0){
    html ='';
    }

    if(blogPager){
    blogPager.innerHTML = html;
    }
    }

    }
    </script>

    <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
    <div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://blogkomputers.blogspot.com">Grab this Widget ~ Navigasi Halaman</a></div>
    6.Save Widget tersebut

    7.Scrool atau pindahkan Widget tersebut pada area dibawah posting.

    Page Number Navigation for Blogger

    Langkah Cara Membuat Page Navigasi Angka / Number 123 pada Blog.

    Pertama,pergilah ke dashboard blogger anda,selanjutnya,pilih tata letak,dan pilih edit html.
    Seperti biasa,contreng option expand widget templates,selanjutnya cari kode berikut:
    ]]></b:skin>
    Setelah ketemu,letakkan persis diatasnya kode css dibawah ini:

    .showpageArea a {
    text-decoration:underline;
    }
    .showpageNum a {
    text-decoration:none;
    border: 1px solid #cccccc;
    margin:0 3px;
    padding:3px;
    }
    .showpageNum a:hover {
    border: 1px solid #cccccc;
    background-color:#cccccc;
    }
    .showpagePoint {
    color:#333;
    text-decoration:none;
    border: 1px solid #cccccc;
    background: #cccccc;
    margin:0 3px;
    padding:3px;
    }
    .showpageOf {
    text-decoration:none;
    padding:3px;
    margin: 0 3px 0 0;
    }
    .showpage a {
    text-decoration:none;
    border: 1px solid #cccccc;
    padding:3px;
    }
    .showpage a:hover {
    text-decoration:none;
    }
    .showpageNum a:link,.showpage a:link {
    text-decoration:none;
    color:#333333;
    }

    Lalu,cari lagi kode seperti ini:
    </body>
    Jika sudah ketemu,tepat diatasnya letakkan script dibawah ini:
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <script type='text/javascript'>
    var pageCount=5;
    var displayPageNum=5;
    var upPageWord =&#39;Previous&#39;;
    var downPageWord =&#39;Next&#39;;
    </script>
    <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
    </b:if>

    Langkah terakhir,carilah kode berikut:
    'data:label.url'
    Jika sudah ketemu,hapus kode tersebut dan gantilah kode berikut:

    'data:label.url + &quot;?&amp;max-results=5&quot;'
    Sekarang,simpan templates anda,dan anda lihat hasilnya :)

    Cara Membuat Readmore Otomatis

    versi Auto Read More terbaru kali ini sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis.

    Trus..hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman saya sebut saja dengan fasilitas image thumbnail.

    Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image. Masih bingung maksudnya? sama..yang jelasin juga puyeng wkwkwkw  Ya sudah, biar sama2 gak pusing langsung ke tutorialnya saja ok.

    Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

    <div class='post-header-line-1'/>
    <div class='post-body'>

    <b:if cond='data:blog.pageType == "item"'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <b:else/>

    <style>.fullpost{display:none;}</style>
    <p><data:post.body/></p>

    <a expr:href='data:post.url'>Readmore</a>
    </b:if>

    <div style='clear: both;'/>

    OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.

    Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.

    Langsung copy paste aja kode dibawah ini:


    <script type='text/javascript'>
    var thumbnail_mode = "float" ;
    summary_noimg = 250;
    summary_img = 250;
    img_thumb_height = 120;
    img_thumb_width = 120;

    </script>


    <script type='text/javascript'>
    //<![CDATA[
    /******************************************
    Auto-readmore link script, version 2.0 (for blogspot)

    (C)2008 by Anhvo

    visit http://en.vietwebguide.com to get more cool hacks
    ********************************************/
    function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }
    }
    strx = s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
    }

    function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if(img.length>=1) {
    imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
    summ = summary_img;
    }

    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
    }
    //]]>
    </script>


    Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

    <data:post.body/>

    Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini

    <b:if cond='data:blog.pageType != "item"'>
    <div expr:id='"summary" + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
    <span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


    silahkan disimpan dan lihat hasilnya :)

    Keterangan:

    var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
    summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
    summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
    img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
    img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

    Sekian... :)
    Scroll to top