Cari Uang ?

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/>

Hasilnya akan seperti ini
118Postingan
1568 Komentar

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>

Hasilnya kan seperti ini

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>

Hasilnya akan seperti ini

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.

Dengan pernak-pernik hiasan rumah (blog) mungkin akan bisa meperindah blog kita, sehingga orang-orang akan semakin betah bertamu ke blog kita. Untuk lebih banyak pilihan jam kita bisa ambil dari sini, dan untuk lebih banayak pilihan kalender kita bisa ambil dari sini

Membuat Banner dan Tukeran Link Banner

Jika kita punya suatu produk, pasti kita ingin juga membuat sebuah logo dari produk kita tersebut, misalnya kita punya toko, tentu kita juga akan memberi nama toko kita itu, dengan nama yang bagus, yang mempunyai arti dan tentu saja mudah diingat, itu sama artinya saat kita punya blog, tentu kita akan menamainya dengan sesuatu nama atau brand dengan nama yang bagus dan mudah diingat.

Sebagai contohnya adalah blogger, yang sudah banyak dikenal orang, mungkin kenapa blogger juga banyak dikenal orang karena Logo Banner juga. Kita yang punya blog juga mengikuti atau setidaknya berusaha memperkanalkan blog kita pada khalayak umum dengan  salah satu caranya dengan membuat Banner.

Salah satu pernak-pernik blog yang banyak digunakan dan tentunya akan berdampak positif dengan blog kita adalah Banner dan Tukeran Link Banner. Dengan pernak-pernik tersebut akan membawa manfaat terciptanya pertemanan derngan blogger yang lain, karena saling bertukeran link, yang akhirnya berimbas pada traffic blog kita.

Cara Membuat Banner dan Tukeran Link Banner
1. Login ke blogger
2. Pilih Tata Letak -> Tambah Gadget
3. Pilih HTML/JavaScript 
4. Masukan kode HTML berikut ini

<a href="http://kurniasepta.blogspot.com" target="_blank">
<img border="0" width="123" title="KLIK!" src="http://images.cooltext.com/531532.gif" height="34"/></a>
<!------------------------------------------------------------>
<textarea rows="3" cols="16"><a href="http://kurniasepta.blogspot.com" target="_blank">
<img border="0" width="123" title="KLIK!" src="http://images.cooltext.com/531532.gif" height="34"/></a></textarea>

5. Sebelum disimpan, berikut ini hal-hal yang perlu kita ubah.

• Diatas kode <!-----> adalah bannernya dan di bawahnya adalah textarea, kotak berisi kode banner.
• http://kurniasepta.blogspot.com adalah URL yang dituju, kita ganti dengan URL kita sendiri.
• http://images.cooltext.com/531532.gif adalah URL gambar atau logo banner.
• Kita juga dapat mengatur lebar dan tinggi banner dengan mengubah angka-angka pada width dan height. dan kotak (textarea) dengan mengubah angka pada rows dan cols. Kalaupuan tidak diubah juga tidak akan jadi masalah
  

 Mungkin diantara kita masih, masih belum bisa membuat logo banner sendiri, jangan khawatir, karena kita juga bisa membuat logo banner secara online dengan mudah dan cepat. Kita bisa membuatnya di cooltext.com disana kita tinngal memilih modelnya, menganti judul, tulisan, dan warna, setelah itu sedikit registrasi dan kita akan mendapatkan kode HTMLnya. Ambil saja URL gambar atau logonya saja.

<a href="http://kurniasepta.blogspot.com" target="_blank"><br /> <img border="0" width="123" title="KLIK!" src="http://images.cooltext.com/531532.gif" height="34"/></a>

Setelah kita pasang atau tambahkan ke blog kita nanti hasilnya akan seperti di atas, ada yang mau tukeran link banner dengan saya? atau ada yang ingin mengoleksi banner? Silahkan :D

Slime

Blog kita akan terlihat lebih baik dan bagus jika didukung oleh tampilan yang yang baik juga, artinya selain konten (isi) blog kita baik atau bermutu setidaknya juga ditunjang tampilan blog kita yang juga harus indah dan bagus. Salah satu hal yang bisa kita lakukan untuk memperindah blog kita adalah dengan membuat tulisan atau teks yang ada di blog kita tak hanya diam, artinya berjalan dan bergerak-gerak :z

Setelah kita belajar membuat tulisan berjalan, yang dulu pernah kita pelajari bersama disini. Kita sekarang beralih, cara membuat tulisan berkedip-kedip. Mungkin kita juga bisa kasih julukan dengan tulisan genit :o Karena dengan tulisan berkedip-kedip ini akan menjadi daya tarik orang untuk melihatnya. Bayangkan saja jika ada cewek di dekat kita yang mengedip-ngedipkan matanya. :D

SELAMAT DATANG DI BELAJAR NGEBLOG DI BLOG

Itu contoh atau hasil dari pelajaran kita hari ini, yaitu membuat tulisan berkedip, lalu apa saja hasil dari modifikasi atau manfaat apa yang bisa kita peroleh dari kode html tulisan berkedip ini? Kita juga dapat membuat link dari tulisan berkedip itu, hasilnya akan seperti ini :

SELAMAT DATANG DI BELAJAR NGEBLOG DI BLOG

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

<blink><b>SELAMAT DATANG</b></blink>

5. Sedang untuk yang kita sisipkan link kodenya seperti ini

<blink><a href="http://www.kurniasepta.blogspot.com/"><b>SELAMAT DATANG </b></a></blink>

6. Kita dapat menganti tulisan yang nampak (SELAMAT DATANG), dengan berbagai keinginan kita. Dan link http://www.kurniasepta.blogspot.com/ dengan URL yang kita tuju.
7. Simpan kalu sudah selesai.

Menghilangkan Angka Pada Label

Pada fitur blog ada yang "label" Tampilkan semua label dari posting dalam blog Anda. Saat kita mengunakan fitur atau widget ini akan memunculkan label kita beserta jumlah postingan yang termasuk pada label tersebut. Misal

Kucing (10)
Ayam (45)
Monyet (9)
Unta(34)

Itu karena blog kebun binatang jadi labelnya juga nama-nama binatang :)
Kita bisa menghilangkan angka-angka pada label tersebut sehingga nantinya akan berubah menjadi seperti ini

Kucing
Ayam
Monyet
Unta

Sekarang langkah-langkah untuk menghilangkan angka pada label adalah sebagai berikut.
1. Login ke blogger
2. Pilih Tata Letak --> Edit HTML
3. Beri tanda centang pada Expand Template Widget
4. Cari kode berikut ini

(<data:label.count/>)

5. Jika sudah hapus/delete kode tersebut
6. setelah selesai Simpan Template

Mengganti Tulisan Posting Lama, Halaman Muka, dan Posting Lebih Baru

Mungkin kita tidak puas dengan tulisan yang ada di bawah halaman atau postingan blog kita yaitu tulisan posting lama, halaman muka dan postingan lebih baru. Karena tentunya berbagai alasan, mungin karena tidak indah atau ingin lebih menarik lagi dengan caranya mengubahnya menjadi atau dengan ikon gambar.

 

Cara Menganti Tulisan Posting Lama, Halaman Muka, dan Posting Lebih Baru
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

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>

6. Langkah selanjutnya, jika kita menginginkan menganti dengan tulisan yang baru (tulisan kita sendiri) langsung saja ganti yang yang tercetak tebal dengan tulisan kita sendiri. Misalnya <data:homeMsg/> dalam tampilan standar adalah halaman muka kita ganti dengan HOME.

Dan jika kita ingin mengganti dengan ikon gambar kita ganti kode yang bercetak tebal dengan <img src="http://anime7.graphic.googlepages.com/home_post.png"/> untuk tulisan (kode) <data:homeMsg/>

7. Simpan Template jika sudah selsai.

Membuat Gambar/Iklan Melayang di Blog

Setelah kita pernah belajar untuk membuat gambar melayang di pojokan atau float image yang belum baca, silahkan kilik saja di sini. Sekarang kita akan belajar yang sedikit sama dengan float image, tapi juga berbeda. Pernah tentunya saat kita datang ada gambar atau iklan yang selalu muncul mengikuti mouse kita dan kita harus men close agar gambar atau iklan itu hilang.

Apa manfaat membuat Gambar atau iklan ini melayang-layang diblog kita? Dengan ini tentunya kita dapat menampilkan gambar atau iklan di blog kita dan itu akan menghemat banyak tempat selain itu juga akan semakin potensial untuk diklik atau dilihat.

Cara Membuat Gambar/Iklan Melayang di Blog
1. Login ke blogger
2. Pilih tata letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode script berikut ini:

<style type="text/css">

#topbar{
position:absolute;
border: 1px solid #666666;
padding: 2px;
background-color: #333333;
width: 480px;
visibility: hidden;
z-index: 100;
}

</style>

<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>

<div id="topbar">
<a href="" onclick="closebar(); return false"><span style="float:right">[X]</span></a>

<script src="http://kumpulblogger.com/scahor.php?b=6024" type="text/javascript"></script>

</div>

Ada beberapa yang harus diubah untuk disesuaiakan dengan tampilan (template) kita,yitu :
border: 1px solid #666666;
padding: 2px;
background-color: #333333;
width: 480px;
Keterangan : Ganti lebar, warna border, dan backgroud sesuai dengan tampilan yang dinginkan. Dan kode yang miring ganti dengan kode banner(gambar) atau dengan script iklan.

5. Simpan 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 :)

Kembali membahas untuk mempercantik blog, kali ini kita akan belajar bagaimana mengubah cursor yang ada di blog kita dengan gambar. Ini baik juga untuk blog kita, sehingga akan membuat blog kita menjadi berbeda dengan blog-blog yang lain. Kalau yang lain standart maka blog kita berbeda dan jadi unik :)

Cursor yang ada di blog kita dapat kamu rubah dengan foto atau gambat yang kita suka. Atau kamu yang narsis habis bisa menggantinya dengan foto kamu sendiri. :) Yang jelas, buat saja blog kita dan menarik :p

 

Cara Mengubah Cursor Blog dengan Gambar
1. Login ke blogger
2. Pilih Tata Letak -> Tambah Gadget
3. Pilih HTML/JavaScript 
4. Masukan kode HTML berikut ini

<style type="text/css">body {cursor:url("http://img90.imageshack.us/img90/5195/cursorbc.png"),default}</style>

Kode yang bercetak miring adalah URL gambar yang ingi kita jadikan pengganti cursor, dan kamu dapat mengganti dengan URL gambar yang kamu inginkan.

5. Simpan jika sudah selesai

Mengganti Icon Blogger di Addres Bar

Ketika membuka atau blog kita maka akan muncul di addres bar (tempat unuk menuliskan alamat URL) akan muncul icon atau gambar kecil. Dan jika blog kita ada di blogger.com atau blogspot maka icon itu berupa gambar dari blogger.com seperti d ibawah ini.

http://vickyperumnasngeblog.blogspot.com/

Untuk kita-kita yang sedikit tak meninginkan icon blogger itu muncul di Addres Bar blog kita, bisa juga kita ganti icon blogger itu dengan yang lainnya. Misalkan denagn foto kita sendiri atau gambar-gambar yang begerak atau berformat gif. Tapi yang paling penting adalah ini sebuah icon jadi usahakan yang berukuran kecil saja, misal 24 x 24 pixel atau 32 x 32 pixel saja supaya loadingnya cepat.

Cara Mengganti Icon Blogger di Addres Bar
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'/>

7. Lalu Simpan kalu sudah selesai.

Berikut ini Icon-icon yang bisa kita gunakan:

http://img100.imageshack.us/img100/4658/image12du2.gif
http://img132.imageshack.us/img132/4733/image13lj1.gif
http://img145.imageshack.us/img145/7793/image14zg9.gif
http://img412.imageshack.us/img412/4403/image15jc7.gif
http://img264.imageshack.us/img264/7575/image16kn8.gif
http://img87.imageshack.us/img87/5862/image1an1.gif
http://img110.imageshack.us/img110/6218/image2ie0.gif
http://img98.imageshack.us/img98/9617/image3cr0.gif
http://img134.imageshack.us/img134/633/image4hx4.gif
http://img139.imageshack.us/img139/83/image5oa7.gif
http://img509.imageshack.us/img509/6449/image6fu0.gif
http://img527.imageshack.us/img527/6543/image7go9.gif
http://img507.imageshack.us/img507/5774/image8wn8.gif

Cara Membuat Judul Blog Berjalan

Membuat tulisan berjalan sudah pernah kita pelajari bersama, yaitu dengan menambahkan sedikit menambahkan kode html, mungkin untuk lebih jelanya kamu dapat baca . 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, Oh ya,,,, ada sedikit tips yang berkenaan dengan judul blog kita, yaitu kita dapat Mengganti judul blo kita agar blog kita lebih ramah dengan SEO.

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