Menampilkan Widget Pada Halaman Tertentu Menampilkan Widget Pada Halaman Tertentu

Blog kamu penuh dengan widget, bagaimana mengaturnya agar terlihat rapi? Ini salah satu jawabannya, Menampilkan Widget Pada Halaman Tertentu. Kita bisa memilih menampilkan pada halaman awal (homepage) saja atau menampilkan widget pada halaman posting saja.

 


Cara Menampilkan Widget Pada Halaman Tertentu
 
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget.

Cara menampilkan widget pada halaman awal (homepage) saja.

Sisipkan kode <b:if cond='data:blog.url == data:blog.homepageUrl'> di bawah kode <b:includable id='main'>
Dan kode penutup </b:if> di bawah kode <b:include name='quickedit'/>
Contoh:

<b:widget id='HTML4' locked='false' title='TULISAN TERPOPULER' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Widget yang berupa HTML dengan id HTML4 yang judulnya TULISAN TERPOPULER akan hanya tampil di halaman awal (homepage) dan tidak tampil di halaman postingan.

Cara menampilkan widget pada halaman postingan saja

Sisipkan kode <b:if cond='data:blog.pageType == &quot;item&quot;'> di bawah kode <b:includable id='main'>
Dan kode penutup </b:if> di bawah kode <b:include name='quickedit'/>
Contoh:

<b:widget id='HTML7' locked='false' title='TULISAN TERBARU' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Widget yang berupa HTML dengan id HTML7 yang judulnya TULISAN TERBARU akan hanya tampil di halaman postingan saja dan tidak tampil di halaman awal.

Membuat Blogger Login Form Membuat Blogger Login Form

Untuk menuju dasbor blogger kita harus login dulu di blogger.com. Kita masukkan email kita dan password kita di login form. Andai kita bisa lebih cepat akan lebih baikkan. Kita bisa membuat blogger login form di blog kita sendiri. Sehingga untuk login kita tinggal memasukkan email dan password di blogger login form yang ada di blog kita. Orang lain pun juga bisa mudah, karena juga bisa login di login form yang ada di blog kita. Mereka akan juga lebih mudah untuk berkomentar. Karena sudah masuk akun google.

Cara Membuat Blogger Login Form
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<form id="start-login" action="https://www.google.com/accounts/ServiceLoginBoxAuth" name="login" onsubmit="onlogin()" method="post"><input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"/><input value="blogger" name="service" type="hidden"/><input value="8" name="nui" type="hidden"/><input value="8" name="naui" type="hidden"/><input value="2" name="fpui" type="hidden"/><input value="3" name="uilel" type="hidden"/><input value="true" name="skipvpage" type="hidden"/><input value="false" name="rm" type="hidden"/><input value="true" name="alwf" type="hidden"/><input value="http://www.blogger.com/login.g" name="roeu" type="hidden"/><input value="0" name="alinsu" type="hidden"/><input value="WbQ8QiJfUvA" name="GA3T" type="hidden"/><div><label for="Email"> Username: <br/><input id="Email" tabindex="1" value="" name="Email" size="20" type="text"/></label></div><div><label for="Passwd"> Password: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Forgot your password?">?</a>) <br/></label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/></div><br/><input id="signin-btn-ns" tabindex="0" value="Sign in" class="ubtn ubtn-block" name="submit" type="submit"/></form>

5. Simpan jika sudah selesai.

Alert untuk Menyambut Pengunjung

Setiap akan kita masuk di sebuah rumah seseorang teman kita, seperti yang biasa saya lihat, di pintu ada aja tulisan (stiker)yang beisikan alert, 'ucapakan salam". Dan kita juga bisa menyabut pengunjung blog kita dengan sebuag peasan atau alert. Yang tentunya isi alert itu bisa kita modif sendiri. Setelah pengunjung mengklik tombol oke, maka alert itu akan hilang.

Selain itu kita bisa menggunakan alert ini sebagai pengumuman, atau ajakan. Dengan demikan setiap pengunjung blog kita akan bisa langsung melihat dan cepat tersampaikan serta pasti dilihat. Langsung saja bagaimana caranya menambahkan alert selamat datang di blog kita?

Cara Alert untuk Menyambut Pengunjung
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. Taruh (copy paste) kode berikut ini diatas kode </head>

<script language='JavaScript'>alert(&quot;Pesan Yang Ingin Kita Tampilkan&quot;);</script>

6. Simpan Template jika sudah.

Memelihara Hewan di Blog

Sebenarnya ini sudah ada sejak lama, sejak pertama ngeblog sekitar 2 tahun yang lalu sudah ada. Memelihara hewan di Blog kita, ada yang pelihara ikan dan kita memberinya makan. Hi,, lucu juga. Kemarin ada yang pelihara hamster di blognya, jadi tertarik untuk nulis sekarang ini.

Ingin memelihara hewan yang kita suka di blog kita? Memberi makan dengan mengkliknya, dan juga pengunjung blog kita juga bisa memberi makan. Widget atau pernak-pernik blog ini bentuknya flash Kayaknya jadi terasa komunikatif, kita bisa memancing pengunjung blog kita untuk melihat hewan peliharaan yang lucu dan memberinya makan. Saat kita gerak-gerakkan di gambar (area) hewan tersebut, maka si hewan peliharaan kita akan mengikutinya. Contohnya kayak ini dan juga kode HTML nya yang bisa kita tambahkan di blog kita:
  
Memelihara hamster 
 <object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/hamster.swf?" width="300" height="225"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/hamster.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param></object>

Memelihara ikan
<object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/fish.swf?" width="300" height="200"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/fish.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>
 
 Bagaimana? tertarik untuk memelihara? jika kurang hewan yang diatas kurang banyak, mau cari hewan peliharaan yang kamu suka? mungkin di sini kamu akan mendapatkan. Tapi kayaknya yang ada hanya anjing, ikan, hamster, kodok, penguin,kura-kura, dan ikan pari.

Membuat Link Pelangi

Setelah dulu saya pernah menulis tentang cara membuat tulisan berkedip-kedip. Kini saatnya ganti bagaimana cara membuat tulisan link jadi pelangi. Loh kok bisa? iya, saat kita taruh kursor di link tersebut maka tulisan akan berubah-rubah warna seperi pelangi yang warna-warni.

Pelangi atau bianglala adalah gejala optik dan meteorologi berupa cahaya beraneka warna saling sejajar yang tampak di langit atau medium lainnya. Di langit, pelangi tampak sebagai busur cahaya dengan ujungnya mengarah pada horizon pada suatu saat hujan ringan. Pelangi juga dapat dilihat di sekitar air terjun yang deras. ensiklopedi

Dengan membuat link pelangi akan membuat blog kita menjadi penuh warna. Bagaimana cara membuat link pelangi? Ikuti saja langkah-langkah berikut ini

Cara Membuat Link Pelangi
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. Taruh (copy paste) kode berikut ini diatas kode </head>

<script src='http://achmad46.googlepages.com/rainbow.js'>
</script>

6. Simpan Template jika sudah selesai

Membuat Page Peel Effect

Apa seh Page Peel Effect itu? Page Peel Effect adalah efek yang jika didekatkan mouse akan terlihat seperti halaman yang terbuka, atau juga seperti kertas yang tergulung di pojok. Dengan membuat Page Peel Effect yaitu dimana ketika kita mengarahkan mouse pada area Page Peel ini, maka akan terlihat halaman menggulung layaknya anda membuka selembar kertas dan menemukan halaman lain dilembar sebaliknya

Untuk membuat page peel efek ini ternyata tdak sulit, kita tinggal memasukan kode yang tidak rumit dan mengganti beberapa kode misalnya url gambar atau urla yang dituju. Yuk,,, langsung aja kita belajar bersama membuat page peel effect


Cara Membuat Page Peel Efek
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. Taruh (copy paste) kode berikut ini diatas kode <b:skin><![CDATA[

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});
});
</script>

6. Kemudian letakan kode CSS dibawah ini diatas kode ]]></b:skin>

#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://img222.imageshack.us/img222/9213/subscribe.png) no-repeat right top;
}

7. Letakan kode ini dibawah tag <body>

<div id='pageflip'>
<a href='http://feeds2.feedburner.com/namafeedkamu'>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>

8. Lihat Hasilnya (pratinjau) dan Simpan jika sudah selesai.
 Kita dapat mengganti URL FEED Blog kita atu URL gambar, kita dapat memodifikasinyasesuai dengan keinginn dan kreatifitas kita. Selamat mencoba

Cara Membuat Judul Blog Berjalan

Membuat tulisan berjalan sudah pernah kita pelajari bersama, yaitu dengan menambahkan sedikit menambahkan kode html, Sekarang kita juga akan belajar untuk membuat blog kita lebih menarik lagi dengan hal yang sama, tetapi yang berjalan kali ini dalah judul blog kita.

Mungkin belum tahu yang mana judul blog itu? kalo judul blog saya ini adalah Belajar Ngeblog di BLOG

Cara Membuat Judul Blog Berjalan

1. Pilih tata letak kemudian edit html
2. Jangan lupa beri tanda centang pada Expand Template Widget
3. Cari kode berikut <title><data:blog.pageTitle/></title>
4. Jika sudah ketemu, ganti kode tersebut dengan kode berikut ini

<b:include data='blog' name='all-head-content'/>

<script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>

5. Lihat apakah berhasil dengan (PRATINJAU) jika berhasil SIMPAN

Menampilkan Judul Entri Terbaru ( Recent Post )

Ingin menampilkan judul postingan terbarumu? Karena oarang perlu tahu judul terbarumu, setelah dulu pernah saya bahas cara menampilkan komentar terbaru, sekarang dengan bahasan yang berbeda tapi sedikit sama, Yaitu menampilkan judul postingan terbaru.

Masih sama dengan menampilkan judul postingan terbaru, setiap pengunjung akan dapat melihat judul-judul yang pernah kita tulis. Kita dapat menampilkannya di halaman utama blog kita. Judul yang dapat kita tampilkan lebih dari 15 judul. Judul potingan terbaru juga dikenal dengan nama recent post atau new entri

Caranya sangat mudah, yaitu kita Login ke blog kita, pilih tata letak, tambahkan gadget, pilih HTML/Javascript. Sekarang masukan script berikut ini :

<script src="http://www.geocities.com/uddin_81/recent-post.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://NAMABLOG.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>

Sedikit yang harus kita rubah yaitu

numposts = 10 angka 10 berarti 10 judul yang akan kita tampilkan
http://NAMABLOG.blogspot.com NAMABLOG harus diganti dengan URL blog kita.

Kalau sudah selesai SIMPAN.

Menambahkan Jam Dan Kalender Pada Blog

Blog kita anggapkan saja sebagai rumah kita, yaitu tempat kita berteduh dari panasnya siang dan dinginnya malam. Blog tempat kita tinggal berada dalam suatu lingkungan yang cukup luas yang setiap orang bebas untuk datang ke rumah kita (blog). Adakalanya kita juga perlu unutk menghias rumah kita agar kelihatan lebih indah dan rapi.

Salah satu pernak-pernik yang biasanya ada di rumah (blog) adalah  jam dan kalender, hidup ini terbatas oleh waktu, dan setiap rumah pasti punya jam atau kalender, walau jaman sekarang ada saja hal-hal yang mempermudah manusia, misalnya saja di HP  sudah ada jam  dan kalendernya.

Jam adalah sebuah unit waktu. Lama sebuah jam adalah 1/24 (satu perduapuluh empat) hari. Satu jam bisa dibagi menjadi unit waktu yang lebih kecil lagi. Satu jam terdiri dari: 60 menit atau 3600 detik

Cara Menambahkan Jam dan Kalender Pada Blog

1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode-kode berikut ini

<script src="http://www.clocklink.com/embed.js"></script><script language="JavaScript" type="text/javascript">obj=new Object;obj.clockfile="5015-green.swf";obj.TimeZone="GMT0700";obj.width=160;obj.height=40;obj.wmode="transparent";showClock(obj);</script>

Dan atau yang satu ini

<center><iframe src="http://www.free-blog-content.com/Calendars/calendar0054.htm" width="120" height="150"
marginwidth="0" marginheight="0" frameborder="no" scrolling=no allowtransparency="true"></iframe></center>

Sebuah kalender adalah sebuah sistem untuk memberi nama pada sebuah periode waktu (seperti hari sebagai contohnya). Nama-nama ini dikenal sebagai tanggal kalender. Tanggal ini bisa didasakan dari gerakan-gerakan benda angkasa seperti matahari dan bulan.

Menambahkan Widget Jumlah Postingan Dan Jumlah Komentar

Berapa banyak kita telah menulis di blog kita? Dan berapa banyak komentar yang masuk? Masih ingatkah? Atau tahukah kita? Mungkin sudah banyak atau sering kita telah mengupdate blog kita sampai kita lupa sudah berapa banyak kita memposting. Atau seberapa banyak komentar yang masuk, mengomentari tulisan kita?

Karena ingatan kita terbatas dan buat apa juga kita menghitungnya. Sekrang dengan gadget atau widget ini kita mudah untuk mengetahui jumlah postingan yang telah kita publikasikan dan jumlah komentar yang kita terima.

Cara Menambahkan Widget Jumlah Postingan dan Jumlah Komentar
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode-kode berikut ini

<script style="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><b><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showpostcount"></script> Postingan<br/><script src="/feeds/comments/summary?max-results=0&alt=json-in-script&callback=showpostcount"></script> Komentar</b><br/>