Thursday 17 March 2011

Cara Membuat Auto Link

Sebelumnya kita sudah pernah baca tutorial tentang Cara Mudah Membuat Link dan Cara Membuat Link Berupa Gambar. Postingan kali ini akan berhubungan dengan cara membuat link berupa teks, atau pada blog ini bisa dibaca pada postingan yang berjudul Cara Membuat Link. Umumnya terdapat banyak varian untuk membuat link. Mulai dari membuat link dengan menggunakan fasilitas blog atau memalui kode-kode javascript. Perhatikan kedua link berikut ini, amati apa perbedaan dari masing-masing link :


4-Jie | tutorial seputar blogspot
dan ini Review Tentang Gadget

Udah dapat dimana perbedaannya ?
Oke 4-Jie jawab aja biar cepat, hehe
Untuk Link 4-Jie | tutorial seputar blogspot menggunakan link biasa, jadi untuk melihat isi link harus di klik terlebih dahulu linknya. Tetapi Link Review Tentang Gadget menggunakan Autolink, gag perlu diklik linknya. Cukup mengarahkan cursor ke link tsb, maka secara otomatis link akan terbuka. Cara buatnya juga mudah, cukup copy kode berikut ini pada bagian sidebar/postingan juga bisa

<a href="http://4-jie.blogspot.com" onMouseover="window.location=this.href">Tutorial Mempercantik Blogspot</a>
Perhatian !
Tulisan yang berwarna hijau merupakan link, bisa diubah sesuai yang kamu mau
Tulisan yang berwarna biru merupakan judul dari link tersebut.

Jadi tinggal disesuaikan aja dengan kebutuhan blog masing-masing..
Sekian tutorial kali ini happy blogging :)

10 Keunggulan Blogspot

Mungkin sebagian besar para blogger berplatform blogspot sudah pernah merasakan serunya menggunakan blogspot sebagai media utama blog nya. Memberikan kebebasan untuk para penggunanya dalam memodifikasi tampilan blogspot, diistimewakan oleh mesin pencari membuat banyak blogger lebih memilih blogspot sebagai blog dengan platform utamanya. Sedikit kita bahas tentang 10 Keunggulan Blogspot yang mungkin belum dimiliki oleh blog berplatform lain. Berikut 10 Keunggulan Blogspot :

1. User friendly
blogspot memiliki fitur yang paling mudah di gunakan terutama untuk pemula.

2. SEO friendly
walaupun hampir semua orang mengatakan wordpress lebih seo friendly. Namun blogger juga sudah seo friendly tanpa kita membuat perubahan pun.Jadi masih sangat sesuai buat blogger pemula yang belum mengerti bahasa pemrograman

3. Aman dan jarang eror
Blogspot memiliki fasilitas unimited bandwidth yang artinya berapapun jumlah pengunjung yang mengunjungi blog, kita akan aman-aman saja tidak akan di pusingkan dengan tagihan atau pageload yang menuun kecepatannya. Namun ini akan lain jika kita mengunakan domain dan hosting sendiri, biasanya menjadi masalah serius (crash) saat kuata bandwidth blog kita habis.
kalau dipikir pikir kayaknya memakai blogspot akan aman-aman saja,karena blogspot di miliki oleh google. Sebagai portal terbesar dunia kayaknya google bakal selalu memberi kualitas yang terbaik kepada pengguna, jadi tak perlu kawatir.

4. Kemudahan posting
blogger menyediakan fasilitas posting yang mudah baik secara langsung,lewat e mail ataupun yang terbaru lewat sms

5. Bisa megunakan javascrib
Yang ini nih penting bagi kita-kita yang pengin nyari uang tambahan didunia maya alias internet.

6. Kode HTML/source code-nya Terbuka
Dengan demikian kita lebih leluasa untuk memodifikasi tampilan blog sesuka hati.

7. Pilihan Template bermacam-macam
Koleksi template ada banyak pilihan, dimana kita bisa langsung pakai dan bisa pula memodifikasinya sendiri tanpa harus mempelajari HTML, Blogger/ blogspot juga mengizinkan pengeditan kode HTML blog kapanpun.

8. Warna dan font kustom yang bervariasi
Kita bisa dengan leluasa mengkustomisasi template yang telah kita ambil secara Cuma-Cuma di koleksinya blogger, kita bisa menganti warna dan huruf sesuai dengan keinginan kita.

9. Seret dan jatuhkan elemen laman
Dengan Sistem sederhana seret dan jatuhkan ini mempermudah kita untuk meletakan komponen halaman seperti posting, profil, arsip dan bagian lainnya sesuai keinginan dan kebutuhan kita.

10. Bisa ditukar ke domain sendiri
Kita bisa menukar dari domainmu.Blogspot.com ke domainmu.Com kapan saja, cukup dengan beberapa settingan ringan. Jika nanti kita memutuskan untuk mengubah alamat domain, Anda tidak perlu kawatir akan kehilangan pelanggan atau pengunjung situs anda sebelumnya, sebab visitor yang mengunjungi url lama secara otomatis akan di redirect ke domain baru kita. Dengan fasilitas ini, kita hanya perlu membayar nama domain saja, sedangkan untuk biaya hosting adalah gratis (ditanggung Blogger).

Bagaimana ?
Ada tambahan dari sobat tentang postingan kali ini, silahkan komentar dibawah

Wednesday 9 March 2011

Membuat Judul Blog Bergerak

Karena ada permintaan dari salah seorang sobat, 4-JIE akan membuat tutorial Membuat judul blog bergerak di tab browser. Efek yang digunakan hampir sama dengan efek marquee, hanya penempatan posisi yang berbeda. Langsung saja, ini cara-cara sederhana untuk membuat judul blog bergerak :
  1. Masuk ke Edit HTML
  2. Cari kode yang bertuliskan <title><data:blog.pageTitle/></title>
  3. Letakkan kode berikut tepat dibawah yang dicari tadi

    <script language="JavaScript"> var txt=".::Selamat Datang di blog ini::."; var kecepatan=200;var segarkan=null;function bergerak() { document.title=txt; txt=txt.substring(1,txt.length)+txt.charAt(0); segarkan=setTimeout("bergerak()",kecepatan);}bergerak(); </script>
  4. Simpan
Keterangan !
Tulisan .::Selamat Datang di blog ini::. dapat diganti sesuia dengan selera, tulisan akan muncul nantinya

var kecepatan=200 merupakan kecepatan dari gerak tulisan tersebut, dapat dibuat lambat atau cepat, caranya dengan mengganti angka yang berwarna hijau.

Sekian tutorial membuat judul blog bergerak di tab browser semoga bermanfaat :)


Silahkan liat hasil modifikasi anda :)

Menampilkan Total Postingan dan Total Komentar

Sore-sore gini enaknya posting tentang Tutorial Blogger.Tutorial kali ini berhubungan dengan menghitung. Menghitung total postingan dan total komentar. Sebenarnya banyak cara yang bisa digunakan untuk menghitung jumlah postingan maupun komentar. Dengan cara manual dan otomatis. Cara manual digunakan secara manual, seperti menghitung 1 per 1 postingan dan komentar yang ada didalamnya. Pastinya cara ini sangat melelahkan. Sedangkan cara yang satu lagi yaitu otomatis, sangat mudah digunakan tanpa perlu dihitung lagi. Cukup dengan menambahkan kode didalam blog kamu bisa melihat berapa banyak postingan dan komentar yang ada didalam blog mu. Berikut cara-cara menampilkan Total Postingan dan Total Komentar di blogspot :
  1. Login ke account blogger
  2. Pilih Rancangan --> Element Laman
  3. Tambah Gadget --> HTML/Javascript
  4. Tambahkan kode berikut didalamnya
    <script style="text/javascript">
    function numberOfPosts(json) {
    document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
    }
    function numberOfComments(json) {
    document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
    }
    </script>
    <font color="black"><script src="http://namablog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>
    <script src="http://namablog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></font>

  5. Simpan
Keterangan !
Tulisan yang berwarna hijau dapat diganti menjadi alamat blog masing-masing
Sedangkan tulisan yang berwarna merah merupakan tulisan yang akan muncul nanti. Dapat diganti sesuai selera

Happy blogging with 4-jie

Membuat Tombol Back To Top

Berbicara tentang mempercantik tampilan blog memang gag ada habisnya. Apalagi membuat pengunjung menjadi nyaman baca didalam blog. Untuk itu dibutuhkan sedikit tambahan yaitu Membuat tombol back to top. Hal itu berfungsi untuk membuat cursor serta mengarahkan postingan ke atas. Tombol back to top ini dapat sangat berguna buat temen-temen yang bacaan postingannya banyak hingga ke bawahbawah. Mungkin ada yang gag sabar, mari kita buat tombol back to top :
  1. Login ke account blogger
  2. Pilih Rancangan --> Elemen Laman
  3. Tambah Gadget --> HTML/Javascript
  4. Tambahkan kode berikut didalamnya
    <style type="text/css">.backtotop a:hover {background:none;}</style><div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top"><img style="border:0;" src="http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglSsuJkIOWGZqzCxMS9IWJ4Wbu4luxJxvrXnEGbgLEzteHRNnV1uBMTvpdhpJ148C5T8uwwTR3PYCWpHAbs7UxeAFDpqBJiMOARzrM9Fyb2KsG78gWnT5wc1SlrqGzQEdcc9WTQyiatA/s400/back-to-top.gif" /></a></div>

    Tulisan yang berwarna hijau merupakan link dari tombol back to top, jika sobat memiliki gambar untuk tombol back to top dapat mengganti tulisan yang berwarna hijau dengan link yang sobat miliki
  5. Simpan
Sekian tutorial Membuat tommbol back to top selamat mencoba :)

Cara Membuat Star Rating


Lama gag update, 4-jie mau bagikan tentang Cara Membuat Star Rating.Ada yang tau apa fungsinya ? fungsinya yaitu untuk menambah keindahan tersendiri dari sebuah postingan, lalu untuk melihaht seberapa bagusnya postingan yang kita buat. Bukan cuma itu, pembaca bisa memberikan nilai atas postinganmu. Untuk itu, yuk pasang star rating di blogspot, caranya seperti ini nih :

  1. Login ke account blogger
  2. Pilih Tata Letak --> Edit HTML dan centang pada kotak kecil Expand Template Widget
  3. Cari kode yang bertuliskan <data:post.body/>
  4. Jika sudah ketemu, letakkan kode berikut tepat dibawah kode diatas

    <script language='JavaScript'>
    var OutbrainPermaLink='Your-Post-Permalink-Here';
    var OB_demoMode = false;
    var OB_Script = true;
    </script>
    <script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'/>
Bagi teman-teman yang telah melakukan modifikasi Template dengan Read More, lakukan langkah berikut :

  1. Cari kode
    <a expr:href='data:post.url'>"Readmore"</a>
    </b:if>
  2. Copy kode berikut tepat dibawah kode diatas
    <script language='JavaScript'>
    var OutbrainPermaLink='Your-Post-Permalink-Here';
    var OB_demoMode = false;
    var OB_Script = true;
    </script>
    <script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'/>
  3. Simpan
Keterangan !
Readmore = Sesuaikan dengan tulisan readmore kamu, terkadang ada dari sebagian yang telah mengganti kata Readmore menjadi yang diinginkan, seperti baca selengkapnya, seterusnya, jadi tinggal disesuaikan dengan bacaan readmore yang digunakan

Selamat mencoba