Web Hosting
Tampilkan postingan dengan label Blog Tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label Blog Tutorial. Tampilkan semua postingan

Membuat Scroll Back to Top


Coba lihat tanda panah yang berada pada sudut kanan bawah layar monitor saat anda melakukan navigasi kebawah, dan jika di klik maka akan kembali lagi ke atas halaman atau disebut 'back to top scroll' . 
Berikut ini langkah - langkah pembuatanya :
  1. Masuk ke akun blogger
  2. Pilih tata letak 
  3. Pilih edit html. 
  4. Cari kode <head>,dengan menekan tombol F3 agar lebih cepat pencarian kode
  5. Kemudian "copy  paste" script dibawah ini persis dibawah kode <head>  
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://raezen.fileave.com/scrolltop.js" type="text/javascript"></script>
  7. Lalu klik save template
  8. Selesai
»»  Baca Selengkapnya...

Membuat Mouseover Effect / opacity

Mouseover Effect yang intinya effect yang akan keluar jika kita sorot gambar dengan mouse.
Cara kerja efek gambar transparan diatas tidak begitu sulit, yang kita perlukan hanya memanfaatkan properti CSS Image Opacity. Namun sebelumnya perlu juga diketahui property CSS opacity sebenarnya tidak termasuk dalam standar CSS, dimana property ini hanya bekerja dengan baik pada beberapa web browser modern saja

Atau biar lebih jelaz coba aja lihat contoh gambar dibawah ini, hasil dari Effect MouseOver opacity pictures (tunjuk Gambar dengan mouse agar terlihat effect opacity nya) :

1.
Mouse OverEffect Opacity imageI ( Opacitynya dari Buram ke Jelaz )

Untuk membuat Effect Opacity gambar diatas copy script dibawah ini :
<img src="Masukkan URL Gamabar Anda Disini" style="opacity:0.2;filter:alpha(opacity=40)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

2. Mouse OverEffect Opacity image II ( Opacitynya dari Jelaz ke Buram )

Untuk membuat Effect Opacity gambar diatas copy script dibawah ini :
<img src="Masukkan URL Gamabar Anda Disini" border="1" style="opacity:1;filter:alpha(opacity=100)"onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"/>


tetapi ini mungkin tidak akan support sama semua browser, tapi kalo browser modern seperti Mozilla Firefox n dll pazti bisa

»»  Baca Selengkapnya...

Cara Menghilangkan Tanda Obeng Pada Blog

Kali ini Fian mau berbagi ilmu nih tentang cara menghilangkan tanda obeng pada blog kita,sebenrnya sudah bisa disikapi dengan masuk ke draft.blogger.com terus pilih setting n pada pilihan tampilkan editing cepat pilih tidak.. tapi cara itu juga kurang efektif untuk menghilangkan tang dan obeng ini.
mendingan makek cara dibawah ini :  
1. masuk atau login ke blogger kamu
2. masuk ke tata letak --> edit html --> centang kolom expand widget template
3. carai kode ini
    ]]></b:skin>

4. copy n paste kode dibawah ini tepat diatas kode berwarna merah tersebut

   .quickedit{
   display:none;
   } 
5. save template
»»  Baca Selengkapnya...

Icon di Addres Bar

Seperti halnya website atau blogger besar yang sangat pupular, kita pun bisa membuat Icon di Addres Bar. Maksud dari Addres Bar adalah : Ketika kita membuka blog atau website, maka akan muncul di addres bar tersebut sebuah Icon / gambar kecil. Dan jika browser kita ada di blogger.com atau blogspot maka icon itu berupa gambar dari blogger.com seperti di bawah ini :

Perlu di jelaskan sedikit, Icon yang akan Anda buat di usahakan yang berukuran kecil saja, misal 24 x 24 pixel atau 32 x 32 pixel  supaya loadingnya standar.

Berikut cara membuatnya :

1. Login ke Blogger
2. Di halaman Dasbor, kita pilih Tata Letak
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut ini </head> 
6. Taruh script berikut ini tepat diatas kode </head> 
<link href='http://img401.imageshack.us/img401/7652/eqizqu6.gif' rel='SHORTCUT ICON'/>
contoh link ikon :


    http://img100.imageshack.us/img100/4658/image12du2.gif


    http://img264.imageshack.us/img264/7575/image16kn8.gif


http://img256.imageshack.us/img256/658/image3s.gif



    http://www.iconarchive.com/icons/kearone/helloween/32/skull-icon.png


Anda bisa mengganti link yang berwarna biru dengan foto atau gambar pilihan Anda yang di ambil link-nya melalui tempat hosting Anda.
    »»  Baca Selengkapnya...

    Membuat Top 10 Populer



    1.Klik Rancangan > Tambah Gadget > HTML/Javascript
    2. Langsung Masukkan Saja Kode di bawah ini


    <script language='javascript'>

    aBold = false;

    numposts=200;

    maxshowresult=10;

    home_page = "http://fianslengean-fian.blogspot.com/";

    </script>

    <script type='text/javascript'>

    //<![CDATA[

    var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write("<ul>");function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'" class="recent-link">'+postTitlear[f]+" ("+postCommentar[f]+" comments)</a>";document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');

    //]]>

    </script>

    <div style="font-size:9px; padding:8px 0px 0px 0px">
    Mau Widget ini?
    <a href="http://fianslengean-fian.blogspot.com/2011/01/membuat-top-10-populer.html"/>Click Here</a>
    </div>


    Keteangan : Ganti Tulisan Biru Menjadi Alamat Blog kamu




    »»  Baca Selengkapnya...

    Mengetahui Harga Blog

    Pengen tahu cara mengetahui harga blog anda ?
    Tinggal masukkan URL blog kamu kemudian klik submit .. Tunggu bentar kemudian akan muncul seperti gambar di bawah ini

    My blog is worth $564.54.
    How much is your blog worth?


    Nah , bagi yang pengen tahu silahkan klik link di bawah ini ..
    www.business-opportunities.biz/projects/how-much-is-your-blog-worth

    »»  Baca Selengkapnya...

    Memasang Tombol Facebook Share

    Sesuai namanya, widget ini berguna untuk membagikan sebuah halaman situs ke profil facebook.

    Lalu apa bedanya antara Facebook like dan Facebook share?


    Secara umum kedua widget tersebut sama-sama berguna untuk membagikan sebuah halaman situs ke Facebook. Sebagai contoh anda menyukai postingan ini maka anda bisa membagikan halaman ini ke teman facebook anda dengan menekan tombol facebook like atau facebook share.

    Nah yang berbeda adalah cara penyajiannya. Jika anda membagikan melalui facebook like maka halaman ini akan muncul pada menu 'recent activity' sedangkan dengan facebook share halaman akan muncul pada menu 'News Feed'.

    Agar lebih jelas perhatikan screenshot berikut:

    Contoh tampilan posting yang dibagikan melalui facebook like

    facebook like
    Contoh tampilan posting yang dibagikan melalui facebook share

    facebook share
    Ok... sudah jelas ya perbedaannya. Sekarang mari kita pelajari cara memasang tombol facebook share dalam postingan blog. Untuk cara memasang tombol facebook like bisa anda baca disini.

    1. Buka blogger. Masuk ke menu Design->Edit HTML

    2. Beri centang pada 'Expand widget templates'

    3. Cari kode <data:post.body/>

    4. Kalau anda menemukan dua kode <data:post.body/> maka pilih yang pertama

    5. Letakkan salah satu kode tombol facebook share berikut ini dibawah kode <data:post.body/> jika anda ingin memasang tombol fshare dibawah postingan atau letakkan diatas <data:post.body/> jika anda ingin memasang diatas postingan.

    Tombol Fshare tanpa counter

    tombol fshare tanpa counter

    Kode:
    <a name="fb_share" type="button" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>


    Tombol Fshare dengan counter diatas

    tombol fshare dengan counter diatas




    Kode:
    <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

    Tombol Fshare dengan counter disamping

    tombol fshare dengan counter disamping

    Kode:
    <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

    6. Jika sudah simpan template anda dan lihat hasilnya.
    »»  Baca Selengkapnya...

    Memasang Tombol Facebook Like

    silahkan ikuti langkah- langkah dibawah ini:

    1. Buka Blogger. Masuk ke menu Design -> Edit HTML

    2. Beri centang pada "Expand Widget Templates"

    3. Cari kode <data:post.body/>

    4. Jika anda menemukan dua kode <data:post.body/> maka pilih yang pertama

    5. Letakkan kode berikut ini dibawah <data:post.body/> jika anda ingin memasang tombol like dibawah posting atau letakkan diatas <data:post.body/> jika anda ingin memasang tombol like diatas posting

    <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' height='30' scrolling='no' style='border:none; overflow:hidden; '/>

    6. Lalu Save template anda.

    Hasilnya akan seperti ini





    Kalau anda ingin membuat tombol like dalam bentuk ini




    maka ganti standard dengan button_count

    Anda juga dapat mengganti warna background tombol menjadi gelap dengan mengganti light menjadi dark.

    SELAMAT MENCOBA
    »»  Baca Selengkapnya...

    Meningkatkan Google Page Rank

    Berikut ada 6 tips yang bisa anda manfaatkan untuk mengumpulkan backlink untuk meningkatkan page rank blog.

    1. Tulis artikel yang bagus dan bermanfaat
    Setiap pengunjung yang datang ke blog anda adalah untuk membaca isi artikel anda. Jika artikel anda bagus dan bermanfaat bagi mereka. Mereka akan membookmark atau mengelink blog anda. Dengan demikian anda akan mendapat backlink dari mereka. Oleh sebab itu, tulislah artikel yang bagus dan bermanfaat bagi pengunjung anda.

    2. Perbanyak jumlah halaman pada blog
    Page rank tidak hanya dipengaruhi oleh halaman index tetapi juga dipengaruhi oleh jumlah halaman pada blog. Setiap penambahan artikel pada blog anda akan menambah inbound link (link masuk) bagi blog anda. Oleh sebab itu, aktifklah dalam memposting artikel. Tetapi jangan karena ingin memposting artikel yang banyak kemudian anda mencopas artikel orang lain. Karena selain melanggar etika blogger, artikel copas atau duplicate content juga dibenci dan tidak akan dicrawl oleh mesin pencari. Jadi buatlah artikel original dengan kata-kata anda sendiri. Selain tidak melanggar etika blogger. Cari ini juga dapat meningkatkan posisi blog anda di halaman search engine.

    3. Saling mentautkan artikel yang relevan
    Cara ini hampir sama dengan poin ke2 yaitu bertujuan untuk menambah inbound link ke blog anda. Jika anda perhatikan pada beberapa artikel saya. Anda akan melihat ada link-link yang mengarah ke artikel lama saya. Itu bertujuan untuk memberikan backlink ke halaman blog.

    4. Link exchange
    Ini merupakan cara yang paling sering dan paling banyak dilakukan oleh para blogger untuk meningkatkan page ranknya. Karena paling mudah dilakukan yaitu I link You, You Link Me. Meskipun mudah tapi cara ini sangat membuang waktu karena kita harus selalu memantau blog yang kita ajak link exchange. Jika blog anda masih baru maka ini merupakan cara terbaik untuk mendapatkan backlink.

    5. Komentar di blog dofollow
    Di internet ada banyak sekali blog yang sudah menganut sistem dofollow. Yang dimaksud dengan blog Dofollow adalah blog yang sudah menghilangkan atribut "nofollow" dari comment formnya. Jadi setiap kali anda meninggalkan komentar di blog tersebut. Anda akan mendapat backlink dengan syarat anda harus berkomentar menggunakan nama dan alamat blog bukan profile blogger. Untuk mengetahui blog apa saja yang sudah menganut sistem dofollow. Silahkan tanya ke om google :)

    6. Daftar blog ke blog direktori
    Cara lain untuk mendapatkan backlink adalah dengan mendaftarkan blog ke blog direktori. Selain bisa mendapatkan backlink. Cara ini juga bisa meningkatkan trafik blog. Contoh-contoh blog direktori itu seperti Mybloglog, Blogcatalog, dan lain-lain. Untuk mengetahui blog direktori lainnya. Silahkan search di Google atau download listnya disini (file PDF).
    »»  Baca Selengkapnya...

    Meningkatkan Alexa Rank

    Tips-tips untuk meningkatkan alexa rank. Semoga bermanfaat.

    1. Pasang widget Alexa rank
    Selain untuk menampilkan rangking alexa di blog. Cara ini juga dapat mempermudah Alexa.com untuk mengumpulkan data trafik di blog kita.

    2. Pasang Alexa toolbar
    Seperti yang telah dijelaskan sebelumnya bahwa rangking alexa dihitung berdasarkan jumlah pengunjung yang memasang alexa toolbar pada browser mereka. Oleh sebab itu, memasang alexa toolbar pada browser merupakan cara yang paling efektif untuk meningkatkan alexa rank. Untuk mengetahui cara pemasangannya bisa anda pelajari disini.

    3. Sering-seringlah membuka blog anda
    Selain trafik, alexa rank juga dipengaruhi oleh jumlah page view pada blog. Oleh karena itu, sering-seringlah untuk membuka blog anda. Dengan demikian jumlah page views blog anda akan bertambah. Untuk mendapatkan hasil yang lebih baik, pasang Alexa toolbar pada browser anda.

    Sebagai tambahan jika anda mengunjungi sebuah tempat yang mempunyai koneksi internet seperti warnet, kampus ataupun rumah teman anda. Kunjungilah blog anda meskipun hanya sekedar buka lalu tutup lagi. Karena cara ini akan menambah jumlah trafik bagi blog anda.

    4. Klaim blog di Alexa
    Dengan mengklaim blog anda di Alexa maka akan mempermudah Alexa untuk menelusuri dan mengumpulkan data trafik di blog anda sehingga dapat mempercepat update alexa rank di blog anda.

    Untuk mengklaim blog di Alexa caranya cukup mudah. Berikut langkahnya:
    1. Kunjungi http://www.alexa.com
    2. Jika anda belum punya akun Alexa silahkan dibuat terlebih dahulu dengan klik Register. Setelah akun berhasil dibuat, login ke akun Alexa anda.
    3. Klik menu Services kemudian pada halaman baru klik tombol Claim your site
    4. Masukkan alamat blog anda. Contoh, http://www.hermanblog.com lalu klik Claim your site.
    5. Selanjutnya anda akan diberi 2 metode untuk mengklaim situs anda. Agar lebih mudah gunakan saja metode yang ke-2. Copy kode meta tag yang diberikan dan paste ke blog anda. Letakkan tepat dibawah tag <head> dan simpan template anda. Jika anda sudah pernah memasang Google sitemap dan Yahoo sitemap di blog anda maka letakkan saja dibawahnya.
    6. Kalau sudah, balik ke Alexa dan klik tombol Verify my meta tag. Jika berhasil maka akan muncul pesan "Thanks, your blog has been verified".

    5. Tingkatkan trafik blog

    Seperti yang kita ketahui bahwa alexa rank ditentukan oleh jumlah trafik. Semakin tinggi trafik blog tentu semakin bagus pula rangking alexa-nya. Oleh karena itu, tidak cara yang lebih baik dan tepat selain meningkatkan trafik blog anda.
    »»  Baca Selengkapnya...

    Alexa Rank Web

    Ada 2 cara yang bisa anda gunakan untuk mengetahui rangking alexa rank web anda yaitu:

    I. Memasang widget alexa pada blog anda yang tampilannya seperti ini

    alexa widgetCara pemasangan:

    1. Buka http://alexa.com lalu klik For Site Owners

    alexa widget12. Kemudian klik Site Widgets yang terletak disebelah kiri

    3. Masukkan alamat website anda pada widget yang ingin anda pasang. Contohnya: hermanblog.com lalu klik Build Widget

    4. Copy kode widget yang ingin anda pasang lalu pastekan ke blog anda. Selesai


    II. Menginstal alexa toolbar pada browser anda yang tampilannya seperti ini.

    alexa toolbar
    Cara pemasangan:

    1. Pada halaman alexa.com. Klik Toolbar

    install alexa toolbar2. Jika menggunakan browser Firefox. Maka halaman yang tampil adalah seperti ini

    alexa toolbar for firefox3. Klik Get Sparky lalu ikuti petunjuknya untuk menginstal alexa toolbar

    4. Jika anda menggunakan browser Internet Explorer maka halaman yang muncul adalah seperti ini

    alexa toolbar for internet explorer
    5. klik Instal Now untuk menginstal alexa toolbar pada browser anda.

    6. Jika sudah restart browser anda lalu lihat hasilnya
    »»  Baca Selengkapnya...

    Membuat Kotak Daftar Isi

    Blogger Tutorial
    1. Apa itu blog
    2. Panduan membuat blog di blogger
    3. Bagaimana cara memposting artikel pada blog
    4. Optimalkan tampilan blog dengan template modern
    5. Mengganti header template pada blogger
    6. Cara mudah mengganti warna dan font template
    7. Mengenali fungsi-fungsi dalam menu setting blog
    8. cara menambahkan read more/ baca selengkapnya pada blogger
    9. Cara membuat dan memasang shoutbox pada blogger
    10. Cara mengatasi masalah pada kode read more
    11. Memasang foto di profile
    12. Apa fungsi label
    13. Cara menambahkan yahoo emoticons pada blogger
    14. Memposting kode HTML pada artikel
    15. Mendaftar dan mengupload gambar di photobucket
    16. Menambah favicon pada blogger
    17. Menambahkan search box atau kotak pencari pada blogger
    18. Cara menghapus gambar di picasa web album
    19. Tips menghilangkan warna pada kotak blockquote
    20. Cara mendapatkan kode warna dengan photoshop
    21. Cara mendapatkan kode warna dengan ms paint
    22. Cara membackup template, widget, dan artikel
    23. Cara menghilangkan icon quick edit berbentuk tang dan obeng
    24. Memasang feedjit pada blogger
    25. Memasang jam pada blog
    26. Membuat efek marquee atau teks berjalan
    27. Tentang RSS feed
    28. Memanfaatkan translator online dari google
    29. Pasang Google Translator pada blog
    30. Cara membuat kotak scrollbar pada blogger


    Ok sebenarnya cukup mudah untuk membuat daftar isi seperti diatas. Bagi anda yang sudah lama ngeblog pasti sudah tahu cara membuatnya hanya saja mungkin caranya yang berbeda.

    Nah berikut saya akan memberikan cara membuat kotak daftar isi dengan cara saya sendiri. Silahkan diikuti bagi yang ingin mencobanya.

    1. Login ke blogger. Buka menu Design -> Page Elements
    2. Klik Add a Gadget -> HTML/Javascript. Masukkan kode dibawah ini kedalam kotak
    <style>
    .list {
    border-bottom:1px dotted #ddd;
    line-height:1.2em;
    padding:3px;
    }
    </style>

    <div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:380px; height:180px; background-color: #ffffff; border:1px solid #ffffff;">

    <div class="list">
    1. <a href="http://www.hermanblog.com/2008/10/apa-itu-blog_15.html">Apa itu blog</a></div>

    <div class="list">
    2. <a href="http://www.hermanblog.com/2008/10/cara-membuat-blog-di-blogger_16.html">Panduan membuat blog di blogger</a></div>

    </div>

    Keterangan:
    380px merupakan lebar kotak
    180px merupakan tinggi kotak
    #ffffff pada background-color merupakan warna background
    #ffffff pada border merupakan warna garis pinggir. Silahkan ganti sesuai dengan template anda.


    Ingat:
    Ganti tulisan yang berwarna merah dengan alamat postingan anda dan ganti tulisan berwarna merah yg dicetak tebal dengan judul postingan anda. Jika anda ingin menambah postingan baru maka copy kode yang berkedip lalu letakkan diatas kode </div>

    Jangan lupa untuk mengganti angkanya dengan angka 3 dan begitu seterusnya jika anda ingin menambah postingan baru lagi.


    3. Kalau sudah klik Save Template. Selesai.

    Jika anda ingin menggunakan icon gambar sebagai pengganti angka maka ganti kode ini
    <style>
    .list {
    border-bottom:1px dotted #ddd;
    line-height:1.2em;
    padding:3px;
    }
    </style>

    Dengan kode berikut
    <style>
    .list {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFutTzN9yPaDUq0ddzHQ1aDo38L-l0h8OLQZEZ8mVL9spaAvVQWU5HtN4IUdnFnLE1DUa45ZINSsnkkVh1EeAjJ7lKgRNIcQpICZdjtZxfNMcy8DyEEoauFHJPsMsgFKqYjDh6poSQ_zMf/") no-repeat left center;
    border-bottom:1px dotted #ddd;
    line-height:1.2em;
    padding:3px 0px 0px 20px;
    }
    </style>
    Ganti tulisan yang berwarna merah dengan alamat icon gambar anda dan hapus angka pada setiap judul postingan.
    »»  Baca Selengkapnya...

    Blog Cepat Terindeks

    1. Setelah membuat blog. Posting minimal 2-3 artikel di blog anda. (Konten asli bukan hasil copas).

    2. Setelah itu, lakukan ping dengan Ping-o-matic. Ping-o-matic adalah sebuah layanan yang berfungsi untuk memberitahukan kepada search engine untuk mengupdate blog anda. Lakukanlah ping hanya ketika anda memposting artikel baru. Jangan sering menggunakan layanan ini karena bisa dianggap spamming.

    3. Daftar blog anda ke Technorati. Mengapa Technorati? Karena Technorati merupakan situs direktori terbesar saat ini dengan PR 9 sehingga dengan mendaftar blog anda disana maka akan meningkatkan popularitas blog anda dimata search engine dan juga akan memudahkan search engine untuk mengindeks blog anda.

    Selamat Mencoba
    »»  Baca Selengkapnya...

    Membuat Navigasi Halaman

    navigasi halaman widget

    Widget navigasi halaman merupakan widget yang berfungsi untuk membuka halaman belakang pada blog. Fungsinya hampir sama dengan fungsi "posting lama" dan "posting baru" pada blog. Bedanya adalah dengan widget ini anda bisa lebih cepat untuk menelusuri halaman belakang suatu blog karena anda tidak perlu membuka satu per satu halaman yang ada melainkan bisa langsung melompat kehalamman selanjutnya. Sehingga bisa menghemat waktu pencarian anda.

    Ok bagi anda yang tertarik untuk menerapkannya. Berikut cara pemasangannya.

    1. Login ke blogger. Buka menu Design -> Page Elements
    2. Klik Add a Gadget -> HTML/Javascript lalu letakkan kode dibawah ini kedalam kotak

    <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://www.hermanblog.com">Grab this Widget ~ Navigasi Halaman</a></div>

    Angka 5 pada "var pageCount" menunjukkan jumlah posting yang akan muncul pada setiap halaman. Silahkan diganti sesuai keinginan anda.

    3. Jika sudah klik Save. Lalu letakkan widgetnya dibawah Blog post seperti contoh dibawah ini



    4. Klik View Blog dan lihat hasilnya.
    5. Selesai
    »»  Baca Selengkapnya...

    Memasang Tab View

    Tab view adalah sebuah widget yang mempunyai fungi tab dimana setiap tab bisa mewakili satu widget atau konten sehingga bisa menghemat ruangan pada blog anda. Contoh tampilannya seperti gambar dibawah ini.

    silahkan ikuti langkah-langkah dibawah ini:
    1. Login ke Blogger
    2. Pilih Design -> Page Element
    3. Klik Add a Gadget -> HTML/Javascript lalu masukkan kode dibawah ini kedalam kotak

    <style type="text/css">
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 80px; /* Lebar Kotak Tab */
    height: 22px; /* Tinggi Menu Utama Atas */
    text-align: center; /* Posisi Teks Menu Tab */
    margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
    background-color: #000; /* Warna background Kotak Tab */
    padding-top: 2px; /* Spasi Atas */
    border: 1px solid #ffffff; /* Warna border kotak Tab */
    border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
    font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
    font-weight: 900; /* Ketebalan Teks kotak tab */

    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #736F6E; /* Warna background utama kotak tab */ }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #cccccc; /* Warna border Kotak Konten */
    overflow: hidden;
    background-color: #ffffff; /* Warna background Kotak konten */
    }
    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 5px; /* Jarak teks dalam kotak content */
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }

    </style>

    <form action="tabview.html" method="get">
    <div id="TabView" class="TabView">
    <div style="width: 385px;" class="Tabs">
    <a><span style="color: #ffffff">Tab 1</span></a>
    <a><span style="color: #ffffff">Tab 2</span></a>
    <a><span style="color: #ffffff">Tab 3</span></a>
    </div>
    <div style="width: 300px; height: 180px;" class="Pages">

    <div class="Page">
    <div class="Pad">
    konten 1
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    konten 2
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    konten 3
    </div>
    </div>
    </div></div></form>

    <script style="text/javascript" src="http://hermanblog.googlecode.com/files/tab_view.js"></script>
    <script type="text/javascript">tabview_initialize('TabView');
    </script>
    Keterangan:
    Tulisan berwarna merah merupakan keterangan dari masing-masing kode. Silahkan atur nilainya sesuai keinginan
    Tulisan berwarna orange merupakan warna judul Tab
    Tulisan berwarna hijau merupakan judul Tab
    Angka 300 pada 'Width' menunjukkan panjang kotak dan 180 pada 'height' menunjukkan tinggi kota. Silahkan ganti nilainya sesuai ukuran template anda.
    Tulisan yang dicetak tebal merupakan isi tab view. Silahkan ganti dengan teks, link, banner atau widget anda.

    4. Kalau sudah, klik Save. Selesai

    Jika anda ingin menambah menu tab baru cukup tambahkan kode yang berwarna kuning dibawahnya.

    Selamat mencoba.
    »»  Baca Selengkapnya...

    Membuat Footer Multi Kolom

    Bagi anda yang ingin menambah ruang kolom pada bagian footer template,langsung kita mulai :

    1. Login ke Blogger. Klik Design -> Edit HTML
    2. Backup template anda dengan klik pada Download Full Template agar anda bisa mengembalikan template anda ke kondisi semula jika hasilnya tidak memuaskan.
    3. Kalau sudah, cari kode ]]></b:skin>
    4. Tambahkan kode dibawah ini diatas kode ]]></b:skin>
    #footer-column-divide {
    clear:both;
    }
    .footer-column {
    padding: 10px;
    6. Tambahkan kode berikut dibawah kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' />

    Catatan:
    Jika anda tidak menemukan kode <b:section class='footer' id='footer' showaddelement='yes'/> maka tambahkan saja kode berikut dibawah <div id='footer'>


    Jika ingin membuat footer 2 kolom. Gunakan kode berikut:

    <div id='footer-column-divide'>

    <div id='footer1' style='width: 50%; float:left;
    margin:0; text-align:left;'>
    <b:section class='footer-column' id='col1'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='footer2' style='width: 50%; float: left;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2'
    preferred='yes' style='float:left;'/>
    </div>

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

    Membuat footer 3 kolom. Gunakan kode berikut:

    <div id='footer-column-divide'>

    <div id='footer1' style='width: 33%; float:left;
    margin:0; text-align:left;'>
    <b:section class='footer-column' id='col1'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='footer2' style='width: 33%; float: left;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='footer3' style='width: 33%; float: right;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col3'
    preferred='yes' style='float:right;'/>
    </div>

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

    Membuat footer menjadi 4 kolom. Gunakan kode berikut:

    <div id='footer-column-divide'>

    <div id='footer1' style='width: 25%; float:left;
    margin:0; text-align:left;'>
    <b:section class='footer-column' id='col1'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='footer2' style='width: 25%; float: left;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='footer3' style='width: 25%; float: right;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col3'
    preferred='yes' style='float:right;'/>
    </div>

    <div id='footer4' style='width: 25%; float: right;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col4'
    preferred='yes' style='float:right;'/>
    </div>

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

    7. Kalau sudah klik Save Template. Lalu klik Page Element. Jika berhasil maka hasilnya akan menjadi seperti ini.

    Footer 2 kolom

    footer 2 kolom
    Footer 3 kolom

    footer 3 kolom
    Footer 4 kolom

    footer 4 kolom

    Selamat mencoba...
    »»  Baca Selengkapnya...

    Memasang feed di Facebook

    Memasang feed di Facebook ini sangat berguna sekali untuk mengoptimasi trafik blog. Karena anda akan mendapat pengunjung baru dari teman-teman Facebook anda yang tertarik dengan artikel yang anda posting pada blog.

    Jika anda ingin blog anda menjadi lebih terkenal. Berikut adalah langkah-langkah untuk memasang feed blog di Facebook.

    1. Login ke Facebook. Klik Profile. Pada tab wall klik Options




    2. Selanjutnya klik Settings kemudian anda akan melihat tampilan seperti ini


    3. Pilih Blog/RSS dan masukkan alamat blog anda pada kolom Public URL lalu klik Import. Tunggu beberapa saat hingga muncul tampilan seperti ini.


    4. Selesai. Sekarang semua postingan blog anda sudah muncul di Facebook. Untuk melihat hasilnya pergi ke My Notes
    »»  Baca Selengkapnya...

    Memasang Related Post

       Related post atau artikel yang berkaitan merupakan sebuah cara untuk menampilkan link-link artikel yang berkaitan dengan artikel utama dan biasanya terletak dibawah artikel utama.
       Pemasangan related post ini biasanya dikelompokkan berdasarkan label atau kategori. Jadi jika ada salah satu artikel dari label tertentu ditampilkan maka artikel-artikel lain yang mempunyai label sama juga akan ikut muncul dibawah artikel tersebut.
       Tujuan pemasangan related post ini agar pengunjung lebih mudah untuk mencari artikel yang berkaitan dengan artikel utama. Sehingga pengunjung tidak perlu report untuk mencari satu persatu artikel dalam menu label atau kategori.
    Bagi yang masih bingung, silahkan lihat contohnya dibawah ini.

    cara pembuatan silahkan ikuti langkah-langkah dibawah ini:

    1. Login ke Blogger. Pilih menu Design -> Edit HTML
    2. Back-up terlebih dahulu template Anda dengan cara klik Download Full Template.
    3. Setelah itu, beri tanda centang pada kotak "Expand Widgets Template".
    4. Cari kode <data:post.body/>
    5. Jika sudah ketemu, letakkan kode dibawah ini dibawah <data:post.body/>

    <b:if cond='data:blog.pageType == "item"'>
    <div class='similiar'>

    <div class='widget-content'>
    <h3>Artikel yang berkaitan</h3>
    <div id='data2007'/><br/><br/>
    <script type='text/javascript'>

    var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
    var maxNumberOfPostsPerLabel = 4;
    var maxNumberOfLabels = 10;

    maxNumberOfPostsPerLabel = 100;
    maxNumberOfLabels = 3;


    function listEntries10(json) {
    var ul = document.createElement(&#39;ul&#39;);
    var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
    json.feed.entry.length : maxNumberOfPostsPerLabel;
    for (var i = 0; i &lt; maxPosts; i++) {
    var entry = json.feed.entry[i];
    var alturl;

    for (var k = 0; k &lt; entry.link.length; k++) {
    if (entry.link[k].rel == &#39;alternate&#39;) {
    alturl = entry.link[k].href;
    break;
    }
    }
    var li = document.createElement(&#39;li&#39;);
    var a = document.createElement(&#39;a&#39;);
    a.href = alturl;

    if(a.href!=location.href) {
    var txt = document.createTextNode(entry.title.$t);
    a.appendChild(txt);
    li.appendChild(a);
    ul.appendChild(li);
    }
    }
    for (var l = 0; l &lt; json.feed.link.length; l++) {
    if (json.feed.link[l].rel == &#39;alternate&#39;) {
    var raw = json.feed.link[l].href;
    var label = raw.substr(homeUrl3.length+13);
    var k;
    for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
    var txt = document.createTextNode(label);
    var h = document.createElement(&#39;b&#39;);
    h.appendChild(txt);
    var div1 = document.createElement(&#39;div&#39;);
    div1.appendChild(h);
    div1.appendChild(ul);
    document.getElementById(&#39;data2007&#39;).appendChild(div1);
    }
    }
    }
    function search10(query, label) {

    var script = document.createElement(&#39;script&#39;);
    script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
    + label +
    &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
    script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
    document.documentElement.firstChild.appendChild(script);
    }

    var labelArray = new Array();
    var numLabel = 0;

    <b:loop values='data:posts' var='post'>
    <b:loop values='data:post.labels' var='label'>
    textLabel = &quot;<data:label.name/>&quot;;

    var test = 0;
    for (var i = 0; i &lt; labelArray.length; i++)
    if (labelArray[i] == textLabel) test = 1;
    if (test == 0) {
    labelArray.push(textLabel);
    var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
    labelArray.length : maxNumberOfLabels;
    if (numLabel &lt; maxLabels) {
    search10(homeUrl3, textLabel);
    numLabel++;
    }
    }
    </b:loop>
    </b:loop>
    </script>
    </div>

    </div>
    </b:if>


    Catatan:
    Jika blog anda menggunakan kode read more maka biasanya ada 2 kode <data:post.body/> Letakkan kode diatas pada kode yang pertama.

    6. Kalau sudah, klik Save Template lalu klik View Blog untuk melihat hasilnya.

    Anda bisa mengganti teks "Artikel yang berkaitan" pada kode diatas dengan teks lain sesuai dengan keinginan anda.

    SEMOGA BERMANFAAT
    »»  Baca Selengkapnya...

    Teks Berjalan Efek Marquee

        Marquee adalah kode HTML yang berguna untuk membuat teks berjalan. Dengan memasang marquee ini, blog kita akan terlihat lebih hidup dan dapat menghemat ruangan pada blog kita.
        Ada beberapa efek marquee yang dapat kita buat seperti: teks bergerak kesatu arah, bergerak bolak balik, bergerak keatas, bergerak sekali saja, dan lain-lain.Efek-efek ini timbul karena adanya perpaduan dari beberapa fungsi yang disebut dengan attributes.

    1. Efek teks berjalan bolak-balik secara horizontal :
        Kodenya : 

    <font face="arial" color="black" size="4"><marquee direction="right" behavior="alternate" direction="right" scrollamount="2" height="20px" scrolldelay="10" bgcolor="orange" width="450px">Welcome To My Blog</marquee></font

    2. Efek teks berjalan bolak-balik secara vertikal
        Kodenya :

    <font face="verdana" color="yellow" size="4"><marquee direction="up" behavior="alternate" scrollamount="2" height="100px" scrolldelay="10" bgcolor="green" width="450px">Welcome To My Blog</marquee></font>

    3. Efek teks berjalan kekanan secara kontinu
        Kodenya :
     
    <font face="times" color="green" size="4"><marquee direction="right" behavior="scroll" scrollamount="3" height="20px" scrolldelay="10" bgcolor="yellow" width="450px">Welcome To My Blog</marquee></font>

    4. Efek teks berjalan kekiri sekali saja
        Kodenya :

    <font face="courier" color="red" size="4"><marquee direction="left" behavior="slide" scrollamount="1" height="20px" scrolldelay="100" bgcolor="blue" width="450px">Welcome To My Blog</marquee></font>

    5. Efek teks berjalan kekanan tiga kali
        Kodenya : 

    <font face="courier" color="blue" size="4"><marquee direction="right" loop="3" behavior="slide" scrollamount="1" height="20px" scrolldelay="100" bgcolor="red" width="450px">Welcome To My Blog</marquee></font>

    6. Efek Bounce
        Kodenya :

    <font face="comic sans ms" color="orange" size="4"><marquee scrolldelay="10" behavior="alternate" direction="up" width="450px" scrollamount="2" height="100px" bgcolor="black"><marquee scrolldelay="10" behavior="alternate" direction="left" scrollamount="2">Welcome To My Blog</marquee></marquee></font> 

     
    Cara memasang kode marquee pada blog:

    1. Login ke Blogger. Klik menu Design->Page Elements
    2. Klik Add a Gadget-> HTML/ Javascript
    3. Masukkan kode marquee yang ingin Anda gunakan 
    4. Ganti Welcome To My Blog (warna Merah) dengan kata-kata anda sendiri
    5. Lalu klik Save
    4. Selesai. Klik View Blog untuk melihat hasilnya

    Selamat Mencoba
    »»  Baca Selengkapnya...

    Membuat Kursor Bertaburan Bintang

    Banyak cara yang dibuat oleh setiap blogger untuk membuat tampilan blognya terkesan cantik, unik dan macam-macam deh. Diantaranya dengan modifikasi template yang sudah ada, memasang ragam widget dan ragam aksesoris blog termasuk mengganti tampilan cursor. pernah lihat suatu blog dengan cursor bertabur bintang? Pingin mencobanya? Mudah kok, ikuti langkah-langkah berikut:

    1. Login ke blogger.
    2.Masuk ke Layout-->Page Element
    3.Tambahkan gadget HTML/JavaScript
    4.Pilih kode taburan bintang dibawah ini.


    Bintang Hijau
    <script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js" type="text/javascript"></script> 
    Bintang Ungu  
    <script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.ungu.js' type="text/javascript"></script>
    Bintang Merah
    <script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.merah.js' type="text/javascript"></script>
    Bintang Biru
    <script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.biru.js' type="text/javascript"></script>
    Bintang Putih
    <script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.putih.js' type="text/javascript"></script>

    5.Kopi salah satu kode diatas dan simpan.
    6. Jangan lupa save dan save lagi. 
    Kodenya bisa dicampur-campur, menurut selera anda

    SELAMAT MENCOBA  
     
    »»  Baca Selengkapnya...