
Assalamualaikum Wr.Wb. Buat Sahabat Blogger Yang Tercinta...
Hari ini aku dikejutkan oleh kawanku Syamsul dan Klopototolia TJ yang menuliskan kata "Mas Tolong Dong di Ambil Awardnya" pada dinding ChatBox ku. Hatiku merasa senang ketika mendengar itu dan hampir saja jantung ku mau copot rasanya...hehehehe. Ini adalah Award pertamaku semenjak aku aktif jadi blogger 1 tahun belakangan ini. Terima kasih buat kawanku Syamsul dan Klopototolia TJ yang telah berbaik hati memberikan awardnya kepada saya.
Untuk memperoleh Award ini sebenarnya tidak sulit, kita hanya sering2 berkunjung saja sekedar untuk menyapa sahabat Blogger yang lainnya. Dan seperti biasanya, Award ini juga Award backlink yang harus di bagi-bagi lagi kepada sobat2 blogger yang lainnya sebanyak 12 orang. Aturan mainnya dari para pemberi sebelumnya, ada 4 peraturan yaitu:
- Memberikan ucapan terima kasih dan memasang link pada pemberi Award.
- Menceritakan secara singkat siapa diri kita.
- Memberikan/menggulirkan award kepada 12 teman yang dianggap paling sering berkunjung dan memberikan komentar pada blog kita.
- Menghubungi / memberitahu teman calon penerima award melalui kotak komentar maupun buku tamu pada blog mereka.
Celoteh Galang hanyalah sebuah blog sederhana, tempat berbagi informasi tentang dunia blogger dan tempat celoteh-celoteh saya yang saya tuangkan di blog ini. Mengulas sedikit tentang diri saya yang hanyalah orang biasa tetapi bermimpi untuk menjadi orang yang luar biasa. Selain Ngeblog saya juga hobby Photography yang akhir-akhir ini saya tinggalkan karena padatnya kesibukan saya. Itulah sepenggal kisah tentang Celoteh Galang.
Di bawah ini adalah sobat-sobat Blogger yang dapat Award dari saya :
Untuk nama Sobat yang mendapat Award di atas sudi kiranya untuk membagi Award kepada sahabat-sahabat Blogger yang sering memberikan Komen atau menegur sapa di GuestBook di Blog sobat. Ini adalah Award yang saya terima dan saya akan berikan kepada Sobat

13
comments
Ini adalah trik buat memotong atau mempersingkat artikel di halaman depan, sebagian orang ada juga yg mempersingkat nya dengan mengunakan trik readmore, tapi kali ini kita hanya menampilkan hanya judulnya saja, dan yang terlihat di halaman depan hanya judul postingannya saja. Contohnya bisa Anda lihat Disini
Agar pada halaman depan hanya menampilkan judul posting saja, berikut langkah-langkahnya :
- Silahkan login ke blogger dengan ID anda.
- Klik Rancangan
- Klik menu Edit HTML.
- Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
- Carilah kode ]]></b:skin>
- Copy kode berikut, lalu paste di bawah kode ]]></b:skin>
<style type='text/css'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> .post-body{display:none;} </b:if> </b:if> </style> - Klik tombol SIMPAN TEMPLATE.
- Selesai. Silahkan lihat hasilnya.
Mudah bukan? namun, dengan memasang kode diatas masih menyisakan beberapa elemen seperti tanggal posting, komentar dan yang lainnya. Jika anda ingin menghilangkan semuanya dan yang tersisa hanya judul post nya saja, mungkin anda bisa menggunakan kode berikut :
<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
.post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks,
.post-icons, .date-header{display:none;}
</b:if>
</b:if>
</style>Jika ternyata masih ada elemen tersisa selain judul post, mungkin kode template anda tidak mengikuti standar template blogger. Bagaimana solusinya? anda harus mengenali struktur template anda.
Bagi anda pengguna browser internet firefox, kang Rohman punya tips mudah mengenali struktur template anda yaitu dengan menginstall add-ons Web Developer yang bisa anda download di add-ons for firefox.
Sekarang kang Rohman anggap anda telah menginstall add-ons web developer pada firefox yang anda gunakan. Silahkan buka alamat blog anda ( tentunya yang akan di edit sesuai artikel diatas ). Klik menu Information, kemudian pilih Display Div Order.
Bagi anda pengguna browser internet firefox, kang Rohman punya tips mudah mengenali struktur template anda yaitu dengan menginstall add-ons Web Developer yang bisa anda download di add-ons for firefox.
Sekarang kang Rohman anggap anda telah menginstall add-ons web developer pada firefox yang anda gunakan. Silahkan buka alamat blog anda ( tentunya yang akan di edit sesuai artikel diatas ). Klik menu Information, kemudian pilih Display Div Order.
Maka secara otomatis akan ditampilkan struktur div dari template anda. Contoh gambar :
Dari gambar tersebut terlihat bahwa tanggal posting serta komentar disimpan dalam elemen div :
.databarleft
.datebarright
Sehingga kode yang digunakan menjadi seperti ini :
<style type='text/css'>Semoga bisa dipahami.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
.post-body, .databarleft, .datebarright{display:none;}
</b:if>
</b:if>
</style>
Update : kode telah di sempurnakan agar tidak konflik dengan static page / static post
Sekian Terima Kasih
Hari ini ada sahabat Blogger yang bertanya kepada saya, Bagaimana cara membuat buku tamu seperti saya?Kali ini saya akan share bagamana cara membuat Shoutbox Melayang Dengan Light Effect jQuery yang ilmunya saya dapat dari teman saya yaitu Aziz Lamayuda. Buku Tamu kali ini adalah shoutbox melayang dengan jquery namun tampilannya berbeda dengan adanya light effect, dalam artian, saat button buku tamu di KLIK maka seluruh halaman akan gelap kecuali shoutbox atau buku tamunya. Untuk lebih jelasnya silahkan perhatikan gambar dibawah ini :

Untuk membuatnya sangat simple, kita tidak perlu mengutak-atik kode pada template kita, karena kalian tinggal memasangnya pada widget di Elemen Halaman. Untuk lebih jelasnya silahkan ikuti tahap-tahap pemasangannya dibawah ini:
1. Login Ke Blogger kalian
2. Pilih Rancangan ---> ELEMEN halaman
3. Tambah Gadget ---> Pilih HTML/Java Script
4. Simpan kode berikut dalam konten HTML/Java Scriptnya
1. Login Ke Blogger kalian
2. Pilih Rancangan ---> ELEMEN halaman
3. Tambah Gadget ---> Pilih HTML/Java Script
4. Simpan kode berikut dalam konten HTML/Java Scriptnya
<!-- Start Shoutbox light effect by azis -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var semahHeight = $(document).height();
var semahWidth = $(window).width();
//Set heigth and width to semah to fill up the whole screen
$('#semah').css({'width':semahWidth,'height':semahHeight});
//transition effect
$('#semah').fadeIn(1000);
$('#semah').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#semah').hide();
$('.window').hide();
});
//if semah is clicked
$('#semah').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
<style>a {color:#ffffff; text-decoration:none}
img { border: none; }
#semah {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#wadah .window {
position:fixed;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#wadah #azisshoutbox {
background:url(http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png) no-repeat 0 0 transparent;
width:272px;
height:460px;
padding:56px 0 20px 5px;
}
#tutupan {
padding:2px 0 0 0;
}
</style>
<ul><center> <a href="#azisshoutbox" name="modal"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" border="0" width="158" height="58" /></a> </center> </ul>
<div id="wadah">
<!-- Start Shoutbox -->
<div id="azisshoutbox" class="window">
<div id="tutupan"><input type="button" value="Close" class="close" />
</div></div><!-- End Shoutbox -->
<div id="semah"></div></div>
<!-- End of Shoutbox light effect by azis -->
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var semahHeight = $(document).height();
var semahWidth = $(window).width();
//Set heigth and width to semah to fill up the whole screen
$('#semah').css({'width':semahWidth,'height':semahHeight});
//transition effect
$('#semah').fadeIn(1000);
$('#semah').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#semah').hide();
$('.window').hide();
});
//if semah is clicked
$('#semah').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
<style>a {color:#ffffff; text-decoration:none}
img { border: none; }
#semah {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#wadah .window {
position:fixed;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#wadah #azisshoutbox {
background:url(http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png) no-repeat 0 0 transparent;
width:272px;
height:460px;
padding:56px 0 20px 5px;
}
#tutupan {
padding:2px 0 0 0;
}
</style>
<ul><center> <a href="#azisshoutbox" name="modal"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" border="0" width="158" height="58" /></a> </center> </ul>
<div id="wadah">
<!-- Start Shoutbox -->
<div id="azisshoutbox" class="window">
<div id="tutupan"><input type="button" value="Close" class="close" />
</div></div><!-- End Shoutbox -->
<div id="semah"></div></div>
<!-- End of Shoutbox light effect by azis -->
</div>
5. Jangan lupa disimpan
Catatan
- Untuk ukuran shoutbox/shoutmix/cbox kalian bisa kalian sesuaikan dengan background gambar.
- Untuk Shoutmix ukurannya Height: 380px dan Width: 261px
- Untuk Cbox ukurannya height:300px width:250px , untuk width yang bawah samakan dengan width pertama, karena di cbox ada 2 width
- untuk ukuran tidak harus terpaku pada punya saya diatas, kalian boleh menyesuaikannya sendiri.
untuk background gambar bisa kalian ganti dengan gambar kalian sendiri, namun jika ingin gambar buatan saya bisa menggunakan gambar dibawah ini :
http://i809.photobucket.com/albums/zz15/yuda03/GUESTBOOKRED.png
http://i809.photobucket.com/albums/zz15/yuda03/gbRED.png
http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png
http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png
TAMBAHAN :
Tampilan button shoutbox diatas letaknya didalam sidebar, dan karena ada permintaan salah satu sahabat blogger, yang meminta untuk memasang buttonnya disamping,
gan saya mau nanya ni, bisa gak bmbrnya di tempel di kanan gtu atw di kiri? mohon bntuannya ya :)
Supaya gambar berada melayang disamping silahkan kalian ganti kode ini:
<ul><center> <a href="#azisshoutbox" name="modal"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" border="0" width="158" height="58" /></a> </center> </ul>
dengan kode ini :
<ul><div style='display:scroll; position:fixed; top:5px; right:3px;'>
<a href="#azisshoutbox" name="modal"><img src="http://lh3.ggpht.com/_MvLBi88bM_I/TKBi6-LLyiI/AAAAAAAABgo/mXUIjU7ayaY/NiceGB.png" width="158" height="58" /></a>
</div>
</ul>
Untuk gambarnya juga saya sudah buatkan, dan silahkan tinggal digunakan.


Semoga bisa membantu dan Semoga bermanfaat....
sumber : http://www.z33s.co.cc/2010/09/shoutbox-melayang-dengan-light-effect.html
AdsenseCamp terbukti membayar, kata-kata itulah yang memang pantas untuk PPC yang satu ini. Dengan rata-rata per klik iklan dihargai Rp300 sehingga banyak disukai oleh para pebisnis online atau Publisher seperti saya ini. Memang banyak PPC di Indonesia ini yang bagus seperti KlikSaya.com dan Kumpulblogger.com. Tapi saya sangat menyukai PPC yang satu ini karena akuratnya jumlah klik dan pembayarannya yang tepat waktu.
Salah satu bisnis online yang saya tekuni sekarang adalah bisnis periklanan, karena bisnis periklanan memiliki prospek yang lambat namun menghasilkan dalam waktu jangka panjang. Adsensecamp.com adalah web periklanan online yang bergerak dalam bidang iklan PPC (Pay Per Click). Anda bisa mengiklankan bisnis anda di sini, tentunya membayar dengan sejumlah rupiah. Tapi dengan banyaknya jaringan yang di miliki tidak ada ruginya juga beriklan di sini.
Selain itu kita bisa mendulang rupiah meskipun receh (tapi uang juga kan? ) , awalnya saya pesimis dengan menjadi publisher dari AdsenseCamp.com karena lama banget ga naik-naik earning saya. Tapi setelah lama berjuang dan akhirnya bisa menghasilkan uang yang cukup lumayanlah buat jajan atau sekedar buat membeli Cendol hehehe. Dibawah ini ada screenshot pembayaran saya dalam 3 bulan yang saya ambil waktu bulan Januari kemarin.
Bulan November : Rp 288.300
Bulan Desember : Rp 147.600
Bulan Januari : Rp 324.900
Cukup Lumayan Bukan...???
klik gambar untuk memperbesar
Bagaimana pendapat Anda..???Apakah berminat untuk bergabung dengan AdsenseCamp. Kalau mau bergabung klik aja DISINI atau Klik Banner di bawah ini


















