Cari Artikel

April 02, 2013

Cara Membuat dan Memasang Efek Gelembung (Bubble) Pada Cursor Mouse di Blog

Anda tahu kan apa itu cursor mouse? Sebuah tanda panah kecil yang biasanya akan ikut bergerak seiring dengan gerakan mouse anda, itulah yang disebut dengan cursor mouse. Biasanya, cursor mouse yang kita lihat, tidak memiliki apa-apa alias berbentuk casual dan monoton. Agar terlihat lebih cantik, anda ternyata bisa memodifikasinya sedikit dengan memberinya efek gelembung (bubble). Tentu saja efek ini tidak akan terlihat di komputer anda saat anda offline, akan tetapi ini hanya akan terlihat saat anda masuk ke dalam halaman blog anda.

cursor mouse


Bila anda ingin memasang efek ini pada blog anda silahkan anda simak caranya berikut ini.

Cara Membuat dan Memasang Efek Gelembung (Bubble) Pada Cursor Mouse di Blog

Step 1

Masuk ke halaman dashboard > Layout > Add Gadget > HTML/JavaScript

Step 2

Letakkan kode berikut ke dalam halaman HTML/JavaScript
<script type="text/javascript">
var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // warna untuk border-top, border-right, border-bottom, border-left dan background gelembung
var bubbles=100; // jumlah maksmal gelembung
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();
window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";
document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}

function bubble() {
var c;
if (x!=ox || y!=oy){
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}

for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}

function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;

function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown;
}

window.onresize=set_width;

function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}

window.onscroll=set_scroll;

function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}

function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}

</script> 

Step 3

Biarkan title/judul widget kosong > klik Save

Coba anda lihat di halaman blog anda, setiap kali anda menggerakkan cursor mouse akan terlihat bubble yang keluar dari cursor mouse anda.

Semoga bermanfaat.

Memodifikasi Bentuk Label Widget Menjadi Metrostyle


Label atau biasa dalam bahasa Indonesia disebut dengan kategori, merupakan widget yang mengumpulkan artikel dalam kategori-kategori tertentu. Label ini biasanya dipasang sebagai widget pada sidebar atau footer di blog. Selain itu, label juga biasanya terlihat pada bagian atas atau akhir dari sebuah artikel.

Biasanya, kita mendapati Label pada sidebar dalam bentuk daftar list yang terlihat sedikit monoton dan tidak memiliki style. Anda mungkin pernah berpikir untuk memodifikasi bentuk Label agar bisa terlihat lebih eye catching sehingga anda atau pengunjung senang dan nyaman berlama-lama di blog anda.

Nah, sebagai awal tulisan saya (karena lama banget saya gak update artikel di sini) saya akan berbagi tips atau cara dengan anda mengenai bagaimana memodifikasi bentuk label menjadi metrostyle.

label widget

Memodifikasi Bentuk Label Widget Menjadi Metrostyle

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget tempate

Step 2

Letakkan kode berikut tepat di atas kode ]]></b:skin>
/*--- thekampoengblogger.blogspot.com Labels --- */
.Label a{
padding-left:10px;
background:#0090D5;
padding:0 10px;
color:#fff!important;
height:26px;
line-height:26px;
text-decoration:none;
border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
float:left;
margin-left:1px;
margin-top:1px;
font-size:13px; }
.Label a:hover{
background:#ffffff;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: px;
}
Catatan!
Untuk mengganti warna label anda dapat mengganti kode warna #0090D5 dengan kode warna yang anda inginkan. (Untuk mencari kode warna, anda dapat melihat kode warna kami disini)

Step 3

Klik Save Template

Step 4

Masuk ke halaman Layout, klik edit pada widget Kategori/Label.

Step 5

Ikuti beberapa instruksi berikut
Title = Kategori
Show = All Labels
Sorting = Alphabetically
Display = Cloud
Hilangkan tanda centang Show number of posts per label.

Step 6

Klik Save
  

March 27, 2013

Blog Saya Diapprove Google Adsense dalam 2 Hari dan Chitika dalam 20 menit!

Apakah anda berpikir judul tersebut terlalu berlebihan? Bagaimana mungkin sebuah blog diapprove oleh dua adsense besar dengan begitu cepat? Anda mungkin tidak dapat mempercayainya, sayapun awalnya, juga tidak dapat mempercayainya sampai akhirnya peristiwa tersebut benar-benar terjadi pada blog saya. Ya, blog saya benar-benar di approve oleh Google Adsense (GA) dalam 2 hari dan Chitika dalam 20 menit! Alhamdulillah, saya sangat bersyukur saya diberikan begitu banyak kesempatan emas.

approve google adsense


Rasanya tidak ada tips khusus yang bisa saya berikan disini selain kerja keras dan rajin mengupdate tulisan anda di blog. Selain itu, saya rasa hanya mengikuti aturan-aturan publisher yang dibuat oleh adsense tersebut. Itu saja. Loh gak ada tips lainnya? Hmm.. kalau anda mengatakan blog harus berbahasa Inggris termasuk tips, maka anda memang harus mulai mencoba membuat sebuah blog berbahasa Inggris terlebih dahulu sebelum anda mulai mendaftarkan diri menjadi publisher adsense. Mengapa? karena menurut pengalaman saya di Google Adsense, bahasa pendukung adsense sangat berpengaruh saat pendafataran. Saya mengambil contoh blog saya Eureka Dentistry yang pada dasarnya memang menggunakan bahasa Inggris sebagai bahasa artikelnya. Blog saya tersebut boleh dikatakan masih seumur jagung, kurang dari sebulan umurnya, sekitar 2 minggu lah saat pertama kali saya mendaftarkannya ke GA. Waktu itu, karena blog saya yang masih sangat belia, jumlah trafik pengunjung saya juga tidak begitu banyak, bahkan sangat sedikit, hanya sekitar 1-5 pengunjung perhari.

Awal mula mendaftar GA saya hanya menggunakan sistem coba-coba saja, dapat alhamdulillah, gak dapat ya gak apa-apa. Setelah menyelesaikan sekitar 16 artikel berbahasa inggris, saya pun memberanikan diri untuk mendaftar di GA. Email pertama yang saya dapatkan dari GA adalah pemberitahuan bahwa GA akan mereview blog saya dalam 3 hari kerja. Ya saya tunggu saja, hari-hari berlalu, saya terus menambahkan artikel saya yang berbahasa inggris hingga hari kedua tengah malam, saya ingat betul, saat saya menyelesaikan artikel ke -24 saya, saya mencoba membuka email saya untuk melihat apakah sudah ada notifikasi yang masuk. Daaan ternyata... Alhamdulillah! GA saya di approve! saya senang sekali saat itu, saya benar-benar tidak menyangka bisa diterima oleh GA, padahal blog saya rasa-rasanya masih sangat-sangat baru dan artikel yang saya buat masih sangat-sangat sedikit, ditambah lagi trafik pengunjung yang sangat rendah. Saya tidak menyangka, tapi saya mulai berpikir bahwa bila memang rejeki itu untuk saya, maka tidak akan kemana-mana larinya.


Berlanjut lagi ke Chitika. Dan ini adalah yang lebih heboh (menurut saya). Saya di approve Chitika hanya dalam 20 menit!. Ini bukti email yang saya dapatkan dari Chitika.



Lagi-lagi, dengan blog Eureka Dentistry saya yang masih minim trafik. Saya masih kurang mengerti dengan review yang dilakukan oleh pihak Chitika adsense ini, yang saya tahu, alhamdulillah chitika saya bisa di approve juga. Oh ya untuk pendaftaran Chitika Adsense anda bisa melihat di artikel saya yang berikutnya.

Bila ada yang ingin anda tanyakan mengenai approve GA dan Chitika silahkan tinggalkan komentar anda di bawah. Semoga bermanfaat.

March 22, 2013

Memasang Related Post (Artikel Terkait) Sederhana di Blog

Anda mungkin sudah membacar artikel saya sebelumnya yang berjudul memasang related post (artikel terkait) bergambar di blog. Nah, saya akan melanjutkan pembahasan mengenai related post, kali ini saya akan membahas tentang memasang related post (artikel terkait) sederhana di blog. Related post yang satu ini hanya berupa daftar list artikel yang berhubungan dengan postingan anda. Meskipun sederhana,  related post ini masih tetap terlihat keren dengan latar biru dan garis biru di awal list.

related post

Memasang Related Post (Artikel Terkait) Sederhana di Blog

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2

Letakkan kode berikut tepat di atas kode </head>
<!--Awal Kode Related Posts-->
<!--Hapus--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
margin-top: 20px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 17px;
font-weight: normal;
color: black;
font-family: Arial Narrow;
margin-bottom: 0.75em;
padding-top: 0em;
}
#related-posts a{
font-size:16px;
color: #555555;
font-variant:small-caps;
}
#related-posts a:hover{
text-decoration: none;
color: #ffffff;
font-weight: bold;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:none;
text-color:#000000
}
#related-posts ul li{
list-style-type: none;
border-left: 2px solid #1399CF;
border-bottom: 1px dotted #1399CF;
margin-bottom: 3px;
padding-left: 30px;
padding-top:0px;
}

#related-posts ul li:hover{
background-color: #1399CF;
border-left: 2px solid #B3CA3D;
border-bottom: 1px dotted #B3CA3D;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://the-kampoeng-blogger.googlecode.com/files/relatedpostsederhana.js' type='text/javascript'/>
<!--Hapus--></b:if>
<!--Akhir kode Related Post-->
Catatan!
Anda dapat memodifikasi warna background dan border dari list/daftar related post dengan mengganti kode warna yang berwarna biru dengan kode warna yang lain (Lihat kode warna HEX dan RGB HTML)

Step 3

Letakkan kode berikut tepat di atas kode <div class='post-footer'>
<!-- Awal Kode Related Post-->
<!--Remove-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script> </div> <!--Remove--></b:if> <!-- Akhir Kode Related Post-->
Catatan!
Anda dapat mengganti jumlah list berdasarkan label dengan mengganti  maxresults=5 dengan jumlah list yang anda inginkan.

Step 4
Klik Save Template

Semoga bermanfaat.
Wassalam. 

Memasang Related Post (Artikel Terkait) Bergambar (Thumbnail) di Blog

Menambahkan related post (artikel terkait) akan membuat pengunjung anda bereksplorasi di blog anda. Pengunjung akan lebih lama mengunjungi blog anda dan dapat melihat artikel-artikel menarik di dalam blog anda dari related post ini. Tentu saja ini akan baik bagi blog anda, karena bila pengunjung merasa blog anda adalah salah satu referensi yang bagus untuk dibaca, maka mungkin anda akan mendapatkan promosi gratis dari pengunjung.
related post

Untuk memasangnya anda perlu melakukan beberapa langkah. Berikut adalah langkah dalam memasangnya di blog.

Memasang Related Post (Artikel Terkait) Bergambar (Thumbnail)

Sebelum melakukan perubahan pada halaman HTML Template, sebaiknya anda mem-backup template anda terlebih dahulu.

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2

Letakkan kode berikut tepat di atas kode </head>
<!--Awal Kode Related Posts Bergambar by www.thekampoengblogger.blogspot.com -->
<!-- hapus --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quothttps://lh4.googleusercontent.com/-BLn1tWYPSJs/UTh11-QM3SI/AAAAAAAAA9c/3vkQZ7gmDd4/s84/no%2520image.png&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://the-kampoeng-blogger.googlecode.com/files/relatedpostbergambar.js' type='text/javascript'/>
<!-- hapus --></b:if>
<!--Akhir Kode Related Posts Bergambar-->

Step 3

Letakkan kode berikut tepat di atas kode <div class='post-footer'>
<!-- Awal Kode Related Posts Bergambar-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://thekampoengblogger.blogspot.com'><img alt='Tips Blog' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!--Akhir Kode Related Posts Bergambar by www.thekampoengblogger.blogspot.com-->

Step 4

Klik Save Template

Semoga bermanfaat.
Wassalam.
 

March 21, 2013

Buat Komentarmu Lebih Seru dengan Smiley!

Smiley merupakan emoticon-emoticon lucu, yang biasanya digunakan untuk mengekspresikan perkataan seseorang. Smiley sangat bagus untuk membuat diskusi komentar menjadi lebih menarik dan menyenangkan. Dengan menggunakan smiley pada komentar, anda tentunya lebih dapat mengekspresikan apa yang ingin anda katakan kepada orang lain. Pada kesempatan kali ini saya akan memberikan tips mengenai bagaimana cara memasang smiley kolobok yang lucu di kolom komentar sehingga membuat kolom komentar anda lebih menarik dan menyenangkan.

smiley

Memasang Emoticon Kolobok di Kolom Komentar Blog

Step 1

Masuk ke halaman dashboard > Template > HTML >Expand widget template

Step 2

Letakkan kode berikut di atas kode  </body>
<script src='https://helplogger.googlecode.com/svn/trunk/kolobok threaded.js' type='text/javascript'/>

Step 3

Letakkan kode berikut tepat di bawah kode <div class='post-footer-line post-footer-line-3'>
<b:if cond='data:blog.pageType == &quot;item&quot;'><script type='text/javascript'>
//<![CDATA[
function moreSmilies() {
document.getElementById('smiley-more').style.display = 'inline';
document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()"><div style="font-size:small; font-weight:bold;color:#000000;">Hide Emoticons /<a href="http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html">Add Emoticons</div></a></span>';
}

function lessSmilies() {
document.getElementById('smiley-more').style.display = 'none';
document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()"><div style="font-size:small; font-weight:bold;">Show Emoticons</div></a>';

}
//]]>
</script>
<div class='emoticons'>
<span id='smiley-more' style='display: none;'>
<img src='http://4.bp.blogspot.com/-k4ujC23cSgI/UTIq7eUkmuI/AAAAAAAABAQ/YUNL9_RhDB0/s1600/smile3.gif'/>:)
<img src='http://2.bp.blogspot.com/-XSBJ7zBZKZs/UTIrT-hMYyI/AAAAAAAABAY/6B26_8Ttwj4/s1600/sad.gif'/>:(
<img src='http://2.bp.blogspot.com/-Ph2wxEvy2mc/UTIr8-fdHjI/AAAAAAAABAo/3use2PsPhMA/s1600/taunt.gif'/>:))
<img src='http://3.bp.blogspot.com/-pcE-4ot-gjk/UTIsLRff6SI/AAAAAAAABAw/LYvZ8__88Ak/s1600/cry2.gif'/>:((
<img src='http://1.bp.blogspot.com/-lNNTReQVc0A/UTIrjDhVLAI/AAAAAAAABAg/BsVMYnr54pI/s1600/rofl.gif'/>=))
<img src='http://1.bp.blogspot.com/-8C5UH12mxf0/UTIzmsxczDI/AAAAAAAABDA/2seHdqLVQ6Q/s1600/suicide.gif'/>=D&gt;
<img src='http://4.bp.blogspot.com/-lhTywmMZ58E/UTI04kjJ3WI/AAAAAAAABDY/qNgtijEr_E8/s1600/biggrin.gif'/>:D
<img src='http://1.bp.blogspot.com/-gG_Wn6D6Ux4/UTIyqFyfKbI/AAAAAAAABCo/qEmU8s8ndVI/s1600/tongue.gif'/>:P
<img src='http://3.bp.blogspot.com/-Zb5g0OWHx4c/UTIsuPLt90I/AAAAAAAABA4/cmP1ltBmVF0/s1600/shock.gif'/>:-O
<img src='http://1.bp.blogspot.com/-TSIzPWeGBwk/UTI0S-nw5tI/AAAAAAAABDQ/xyHPCFZH4fI/s1600/think.gif'/>:-?
<img src='http://1.bp.blogspot.com/-qpnD1BYon5w/UTI0AIeKX6I/AAAAAAAABDI/HsllV7NYTqk/s1600/unsure.gif'/>:-SS
<img src='http://4.bp.blogspot.com/-SpvC8mHHwhg/UTIzQMUVGKI/AAAAAAAABCw/_NKKVyQtulk/s1600/flowers1.gif'/>:-f
<img src='http://3.bp.blogspot.com/-qlyn_deOhFw/UTIzY8aRgqI/AAAAAAAABC4/pfSojMdD33s/s1600/doh.gif'/>d(
<img src='http://2.bp.blogspot.com/-H4e_O5BFVP8/UTIumwhVmKI/AAAAAAAABBw/SKhY4DDxKkk/s1600/air_kiss.gif'/>:-*
<img src='http://3.bp.blogspot.com/-h4yNmhdKUVU/UTIwUKpvVOI/AAAAAAAABCY/B0FEZVRGHe4/s1600/threaten.gif'/>b-(
<img src='http://4.bp.blogspot.com/-veVoDPEc7I4/UTIv9wCS0jI/AAAAAAAABCQ/4c5FgCHAiU4/s1600/help.gif'/>h-(
<img src='http://2.bp.blogspot.com/-_ttAcnBbAaw/UTIvKtxfWvI/AAAAAAAABCA/X2JLEShhOQU/s1600/good.gif'/>g-)
<img src='http://2.bp.blogspot.com/--o9jZ1nMcec/UTIuyCBgS_I/AAAAAAAABB4/Jf03oz5yKrU/s1600/beee.gif'/>5-p
<img src='http://2.bp.blogspot.com/-6-BTJcVpwY0/UTIvhF_PL-I/AAAAAAAABCI/SS-LDADTSls/s1600/yahoo.gif'/>y-)
<img src='http://3.bp.blogspot.com/-khAwhIYbgvQ/UTItD_PfNyI/AAAAAAAABBI/HMpRMQh5Uak/s1600/crazy.gif'/>c-)
<img src='http://2.bp.blogspot.com/-fsTXhXl10Gg/UTIs7Ll01AI/AAAAAAAABBA/QkWgWAAFG3g/s1600/spiteful.gif'/>s-)
<img src='http://2.bp.blogspot.com/-CIuUuJeuyGI/UTIueHgTxOI/AAAAAAAABBo/BzXkTEEDlhw/s1600/drinks.gif'/>d-)
<img src='http://2.bp.blogspot.com/-Mc5ed3Ymk7s/UTI1GIXMAMI/AAAAAAAABDg/PyDOfoXgsl0/s1600/cheer.gif'/>w-)
<img src='http://2.bp.blogspot.com/-JOgaMRI61Jk/UTItsGc5KdI/AAAAAAAABBY/6UDCabfZQbg/s1600/hi+2.gif'/>:-h
<img src='http://2.bp.blogspot.com/-wmOB_Z6LPp4/UTIt9FhZiwI/AAAAAAAABBg/7VoefgIQjEs/s1600/give_heart.gif'/>:X
</span>
<span id='smiley-toggle'><a href='javascript:moreSmilies()'><div style='font-size:small;font-weight:bold;'>Show Emoticons <img src='http://4.bp.blogspot.com/-k4ujC23cSgI/UTIq7eUkmuI/AAAAAAAABAQ/YUNL9_RhDB0/s1600/smile3.gif'/></div></a></span>
</div></b:if>

 Step 3

Klik Save Template

March 20, 2013

30+ Efek Blog Paling Dicari Oleh Blogger!

Malam ini saya akan melanjutkan postingan saya tentang efek blog. Di blog, banyak sekali efek blog yang di buat oleh desainer efek agar bisa mempercanti blog-blog yang ada. Tapi tetap saja, meskipun menarik memasang efek di blog seringkali membuat blog menjadi bertambah beban loadingnya. Sebagai saran saja, bila anda ingin memasang efek pada blog anda, maka sebaiknya anda hanya menempatkan satu efek saja pada blog anda, karena bila efek blog anda terlalu banyak, maka kemungkinan besar blog anda akan lama loadingnya. Bijaksanalah dalam memilih efek blog yang akan anda pasangkan di blog anda. Berikut ini adalah kumpulan 50+ efek blog paling dicari oleh blogger. Semoga bisa menambah indah blog anda.

efek blog

Efek Ringan 

Cara Memasangnya di Blog

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2

Letakkan kode efek diatas kode </body>

Step 3

Klik Save Template

Hati Berjatuhan

<script src='http://the-kampoeng-blogger.googlecode.com/files/hatiberjatuhan.js' type='text/javascript'></script>

Kupu-kupu Terbang

<script src='http://the-kampoeng-blogger.googlecode.com/files/Kupu-kupu.js' type='text/javascript'></script>

Salju

<script src='http://the-kampoeng-blogger.googlecode.com/files/Salju.js' type='text/javascript'></script>

Kembang Api

 <script src='http://the-kampoeng-blogger.googlecode.com/files/kembang-api.js' type='text/javascript'></script>

Gelembung

<script src='http://the-kampoeng-blogger.googlecode.com/files/gelembung.js' type='text/javascript'></script>

Bertabur Bintang

<script src='http://the-kampoeng-blogger.googlecode.com/files/bertabur%20bintang.js' type='text/javascript'></script>

Efek Berat

Cara Memasangnya di Blog

Step 1

Masuk ke halaman dashboard > Layout > Add gadget > HTML/JavaScript

Step 2

Masukkan kode script efek ke dalam halaman HTML/JavaScript

Step 3

Klik Save

Meteor Jatuh

<script language="javascript">
nd_mode="meteor";
nd_control="on";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/meteor%20jatuh.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Bunga Mekar

<script language="javascript">
nd_mode="flowers";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20bunga%20mekar.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

 Bom Atom

<script language="javascript">
nd_mode="bomb";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20bom%20atom.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 Banjir

<script language="javascript">
nd_mode="flood";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek-banjir.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Graffiti

<script language="javascript">
nd_mode="graff";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20graffity.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Senjata

<script language="javascript">
nd_mode="gun";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/Efek%20Senjata.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Ufo

<script language="javascript">
nd_mode="ufo";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20ufo.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

 Shaver

<script language="javascript">
nd_mode="shaver";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20shaver.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Bloody Gun

<script language="javascript">
nd_mode="blood";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/Efek%20Bloody%20Gun.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

Paint Ball

<script language="javascript">
nd_mode="paint";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/Efek%20Paint%20Ball.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

 Chainsaw

<script language="javascript">
nd_mode="chainsaw";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20chainsaw.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Dinosaurus

<script language="javascript">
nd_mode="dino";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20dinosaurus.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Lebah

<script language="javascript">
nd_mode="wasp";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/Efek%20Lebah.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Lalat

<script language="javascript">
nd_mode="fly";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Semut

<script language="javascript">
nd_mode="ants";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/Efek%20semut.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Siput

<script language="javascript">
nd_mode="snail";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/Efek%20siput.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Cacing

<script language="javascript">
nd_mode="worms";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20cacing.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

 Mold

<script language="javascript">
nd_mode="mold";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20mold.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

 Bayi Merangkak

<script language="javascript">
nd_mode="baby";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20bayi%20merangkak.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Telur Mata Sapi

<script language="javascript">
nd_mode="eggs";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20telur%20mata%20sapi.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Kopi Tumpah

<script language="javascript">
nd_mode="coffee";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efekkopitumpah.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

 Terbakar

<script language="javascript">
nd_mode="burn";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20terbakar.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

 Tomat

<script language="javascript">
nd_mode="tomato";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20tomat.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Creampie

<script language="javascript">
nd_mode="creampie";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20creampie.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

 Murka

<script language="javascript">
nd_mode="god";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efekmurka.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

Bunga Mawar 1

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><script src="http://spiceupyourblogextras.googlecode.com/files/spiceupyourblogrosethin.js" type="text/javascript">
/***********************************************

* Flower fall effect by Paul Crowe @ http://www.spiceupyourblog.com
* Please keep this notice intact

***********************************************/
</script><a href="http://www.spiceupyourblog.com" target="_blank"><font size="1">Get Flower Effect</font></a>

Bunga Mawar 2

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><script src='http://spiceupyourblogextras.googlecode.com/files/spiceupyourblogrosefull.js' type='text/javascript'>
/***********************************************
* Flower fall effect by Paul Crowe http://www.spiceupyourblog.com
***********************************************/
</script><a href='http://www.spiceupyourblog.com' target='_blank'><font size='1'>Blogger Flower Effect</font></a>

March 19, 2013

Tragedi Penghapusan Blog The Kampoeng Blogger Oleh Blogger

Dua hari yang lalu, blog saya ini, the kampoeng blogger, dihapus oleh blogger dengan alasan di blog saya terdapat aktifitas mencurigakan yang dianggap spam oleh detektornya. Saya benar-benar kaget, saya tidak tahu mengapa Google menganggap blog saya ini spam, hacker bukan, spammer bukan, tapi koq dianggap sebagai spam, benar-benar aneh.

Pertama kali saya mengetahui kalau blog saya dihapus oleh blogger adalah saat saya masuk ke situs blog saya dan saya mendapati pesan bahwa blog saya telah terhapus (????). Bukan main kagetnya saya, saya periksa halaman dashboard saya, dan benar saja, blog the kampoeng blogger sudah masuk dalam daftar blog yang dihapus. Segera saja saya surfing di internet untuk mencari informasi mengapa blog saya bisa terhapus dan bagaimana agar blog saya bisa dikembalikan seperti sedia kala. Awalnya saya mengira bahwa blog saya mungkin dimasukkan dalam sandbox di google, tapi saya berpikir bahwa tulisan-tulisan saya di blog ini adalah murni tulisan saya sendiri, jadi tidak mungkin blog saya dimasukkan di sandbox google. Setelah mencari keman-mana, akhirnya saya mendapatkan sebuah artikel di sebuah blog yang ternyata memiliki pengalaman yang sama dengan saya. Ternyata blog saya dihapus karena detektor spam otomatis di blogger salah mengira tentang blog saya, pemilik blog yang juga blognya terhapus lalu mengajukan banding kepada blogger agar bisa mengembalikan blognya kembali, alhasil setelah mengirimkan email keberatan ke blogger, akhirnya si empunya blog dikirimi surat balasan dari blogger yang menyatakan permintaan maafnya atas kesalahan dalam mendeteksi blog yang mengandung spam.

Alhamdulillah, dari artikel tersebut akhirnya saya tahu, blog saya bisa kembali seperti semula. Akan tetapi saya tidak menganjungkan banding seperti yang dilakukan oleh blogger tersebut. Saya berusaha untuk kembali ke halaman dashboard saya dan menekan tombol restore di samping blog saya yang terhapus. Saya lalu mendapat notifikasi bahwa blogger akan melakukan review kembali terhadap blog saya, dan untuk itu saya harus bersedia menunggu selama dua hari.

Tidak sampai dua hari (tepatnya besoknya/hari ini) saya mendapatkan email pemberitahuan bahwa blogger telah salah dalam mengidentifikasi blog saya, dan untuk itu, blogger memberikan pernyataan maafnya kepada saya atas kesalahannya tersebut. Saya coba buka blog saya lagi, dan voila! alhamdulillah blog saya sudah kembali seperti semula. Saya coba cari blog saya di search engine, dan ternyata blog saya juga sudah kembali terindeks seperti semula. Alhamdulillah.

Saya benar-benar senang blog saya bisa kembali. Blog ini adalah salah satu blog kesayangan saya. Dan rasanya akan benar-benar tidak nyaman bila blog ini harus terhapus dengan sebab yang tak jelas.

Begitulah, akhirnya saya visa menulis lagi di blog ini. Ini adalah postingan pertama saya sejak blog ini terhapus. Semoga kedepannya kejadian penghapusan blog tidak terjadi lagi pada saya. Aamiin.

March 17, 2013

Memodifikasi Loading Page Blog Dengan Efek

Saat anda mengunjungi sebuah blog, sebelum masuk ke halaman blog,  anda akan menemukan bahwa saat loading akan terlihat halaman putih saja, blank page ini akan hilang bila halaman telah selesai loading. Anda mungkin berpikir bahwa halaman loading tidak dapat diganti dengan animasi sehinggaanda tidak bosan saat anda menunggu hingga halaman selesai loading. Tapi tahukah anda? anda dapat memodifikasi loading page ini dengan menggunakan kode tertentu dan memasang animasi yang anda inginkan di dalamnya. Apakah anda penasaran? Silahkan anda simak caranya berikut ini.

loading page

Cara Memasangnya di Blog

Sebelum anda melakukan perubahan pada halaman HTML Template, sebaiknya anda mem-backup template anda terlebih dahulu. 

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2

Letakkan kode berikut tepat di atas kode ]]></b:skin>
    /*  TKB Page Loading Effect (www.thekampoengblogger.blogspot.com) */
    #TKBloadingeffect {
        position: fixed;
        z-index: 50;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: #FDFEF8 url(URL Gambar Loading GIF disini) no-repeat center;
        line-height: 350px;
        text-align: center;
        font-size: 36px;
        color: #353231;
        text-indent: -9999px;
    }
    .MD #TKBloadingeffect { display: none; }
    @media only screen and (device-width: 768px) {
        #loading {
            position:absolute;
            width:1040px;
            min-height:768px;
        }
    }
    #TKBprogressbar {
        position: absolute;
        top: 0; left: 0;
        background: #de1301;
        opacity: 0.8;
        width: 0;
        height: 18px;
    }
    #TKBloader {
        height: 100%;
        display: none;
    }

Step 3

Letakkan kode berikut tepat di atas kode </head>
     <script>
    (function($){
    $("html").removeClass("MD");

    $("#header").ready(function(){ $("#TKBprogressbar").stop().animate({ width: "25%" },1500) });
    $("#footer").ready(function(){ $("#TKBprogressbar").stop().animate({ width: "75%" },1500) });

    $(window).load(function(){
        $("#TKBprogressbar").stop().animate({ width: "100%" },600,function(){
            $("#mbl-lazyloading").fadeOut("fast",function(){ $(this).remove(); });
        });
    });
    })(jQuery);
    </script>

 Step 4

Letakkan kode berikut di atas kode </body>
  • Bila anda ingin Loading Page ini tampil hanya pada halaman Homepage saja, maka copy kode berikut
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='TKBloadingeffect'><div id='TKBprogressbar'></div><div id='TKBloader'>This Loading Effect is Powered By<a href="http://thekampoengblogger.blogspot.com">Blogger</a></div></div></b:if>

  • Bila anda ingin Loading Page ini tampil pada semua halaman, maka copy kode berikut
<div id='TKBloadingeffect'><div id='TKBprogressbar'></div><div id='TKBloader'>This Loading Effect is Powered By<a href="http://thekampoengblogger.blogspot.com">Blogger</a></div></div>

 Step 5

Klik Save Template

Catatan !
  • Ganti URL Gambar Loading di Sini dengan URL Gambar anda sendiri (dalam format GIF)
  • Anda dapat mengganti warna background #FDFEF8 dengan kode warna yang lain (lihat kode warna RGB dan HEX)
  • Anda juga dapat mengganti warna progress bar dengan warna lain, dengan cara mengganti kode warna #de1301 dengan kode warna yang lain. 

Berikut adalah URL Gambar loading yang bisa anda pilih

Merah




http://3.bp.blogspot.com/-vd1FeVCm7-o/UUV_xCzQNzI/AAAAAAAABX4/WjykjvCKPoY/s1600/TKB-Loading-1.gif
http://1.bp.blogspot.com/-VFI8K06DykY/UUWARlGw6oI/AAAAAAAABYI/TdLK8YvSz2A/s1600/TKB-loading-2.gif

http://2.bp.blogspot.com/-P4iKcPU-GUE/UUWApgtbJyI/AAAAAAAABYQ/Sg3RQRpmTf0/s1600/TKB-Loading-3.gif

Biru

 http://1.bp.blogspot.com/-PD3anyW494Q/UUWBhcMRL1I/AAAAAAAABYY/uIPX5eFg2dc/s1600/TKB-Loading-Blue-1.gif
http://2.bp.blogspot.com/-R_Rmq6XKKLY/UUWCXb43xHI/AAAAAAAABYg/bgUKykgRIIw/s1600/TKB-Loading-Blue-4.gif

http://4.bp.blogspot.com/-a4rE2T0lt9I/UUWCieakVUI/AAAAAAAABYo/rR2ym8NB7_I/s1600/TKB-Loading-Blue-5.gif

 Hijau

 

http://4.bp.blogspot.com/-Pm8jJpD9iYQ/UUWDRjlVKgI/AAAAAAAABYw/rsqulih4CKw/s1600/TKB-Loading-Green-1.gif

http://2.bp.blogspot.com/-S4qAlvhVJ3w/UUWDl5W64AI/AAAAAAAABY4/Poto6gMDrMA/s1600/TKB-Loading-Green-2.gif

Lainnya

 

  http://1.bp.blogspot.com/-JEdhhH-abAM/UUWEkW3sQVI/AAAAAAAABZE/yxOekBw7Rok/s1600/TKB-Loading-other.gif

http://2.bp.blogspot.com/-UqG46a9kSw4/UUWEkRQc_tI/AAAAAAAABZQ/AH-b-bTAAsQ/s1600/TKB-Loading-other2.gif


http://2.bp.blogspot.com/-nwlgx-by6Pc/UUWElOGTdzI/AAAAAAAABZY/IygFd-TxSOA/s1600/TKB-Loading-other3.gif
http://4.bp.blogspot.com/-H6G9KMp7Mv8/UUWEli_2v8I/AAAAAAAABZg/ki6-eqgSp6Y/s1600/TKB-Loading-other4.gif

Semoga bermanfaat.
Wassalam.

Membuat Efek Keyboard Pada Tulisan di Artikel Blog

Bila anda memiliki blog yang berisi tentang tutorial komputer, saat anda ingin menginstruksikan mengenai tombol keyboard tertentu, anda mungkin hanya akan menuliskannya dalam bentuk teks di blog anda, sehingga seringkali, anda harus menambahkan keterangan "tombol pada keyboard anda" pada instruksi tersebut. Nah, untuk itu, saya ingin memberikan tips dan trik untuk anda, dan tentunya anda pasti akan tertarik dengan yang satu ini, membuat efek keyboard pada tulisan di artikel blog.

Efek Keyboard pada tulisan di artikel blog


Efek keyboard ini bisa anda gunakan dalam artikel di blog anda, dan anda akan menemukan blog anda menjadi satu hal yang sangat menarik untuk di baca. Anda tidak percaya? coba saja anda memasangnya dan mengikuti langkah-langkah membuat efek keyboard pada tulisan di artikel blog.

Cara Memasangnya di Blog

Sebelum anda melakukan perubahan pada halaman HTML Template anda sebaiknya anda mem-backup template anda terlebih dahulu.

Step 1

Masuk ke halaman dashboard > Template > HTML

Step 2

Letakkan kode berikut tepat di atas ]]></b:skin>
kb{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid gray;padding:1px 5px;margin:0 5px;font-family:courier new;font-size:1.2em;-webkit-box-shadow:1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;-moz-box-shadow:1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;box-shadow:1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;background:-moz-linear-gradient(left, #fff 0%, #e2e2e2 25%);background:-webkit-gradient(linear, left top, right top, color-stop(0%, #ffffff), color-stop(25%, #e2e2e2));background:-webkit-linear-gradient(left, #fff 0%, #e2e2e2 25%);background:-o-linear-gradient(left, #fff 0%, #e2e2e2 25%);background:-ms-linear-gradient(left, #fff 0%, #e2e2e2 25%);background:linear-gradient(left, #fff 0%, #e2e2e2 25%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e2e2', GradientType=1 )}kb.space{padding:0 90px}kb:hover{cursor:default} 

 Step 3

Klik Save Template

Cara Menggunakannya di Artikel Blog

Bila anda ingin menggunakannya di artikel anda, maka anda dapat menggunakan kode berikut :
<kb> Teks anda di sini </kb>
Ganti kata yang diberi warna merah dengan kata yang anda inginkan. Lihat demonya di bawah ini.

 
Semoga bermanfaat.
Wassalam.

Cara Memasang Kotak Find Us on Facebook (Facebook Like Box) di Blog

Sebagai rival dari twitter, facebook telah menjadi sosial media yang kian hari kian trend di kalangan muda mudi di seluruh dunia. Selain sebagai ajang silaturrahmi ke sesama teman di berbagai belahan dunia, facebook juga bisa digunakan sebagai sarana untuk berbagi artikel dan informasi ke sesama pengguna facebook. Bila postingan sebelumnya kita telah membahas tentang memasang twitter di blog (baca lagi 10+ tombol follow me twitter unik dan gratis untuk blog anda), kali ini kita akan membahas tentang Cara Memasang Kotak Find Us on Facebook (Facebook Box) di Blog. 


Cara Memasang Kotak Find Us on Facebook (Facebook Box) di Blog

Step 1

Masuk ke situs Like Box-Facebook Developer https://developers.facebook.com/docs/reference/plugins/like-box/

Step 2

Isi URL Facebook anda di dalam kolom Facebook Page URL. Silahkan memodifikasi tampilannya dengan mengubah pengaturan yang ada (lebar, tinggi, dan lain sebagainya)

Step 3

Klik Get Code > IFRAME > Copy kode yang diberikan

Step 4

Masuk ke halaman dashboard > Layout > Add gadget >  HTML/JavaScript

Step 5

Letakkan kode tadi ke dalam halaman HTML/JavaScript

Step 6

Klik Save

Tampilan facebook like-box anda akan seperti ini.

Facebook like-box


Semoga bermanfaat.
Wassalam. 

10+ Tombol Follow Me Twitter Unik dan Gratis Untuk Blog Anda

Twitter sudah menjadi salah satu sosial media yang sedang naik daun saat ini. Yang muda yang tua hampir semuanya sudah mengenal apa itu twitter. Dengan menggunakan sosial media twitter ini anda dapat menyebarkan pesan pendek sejumlah maksimal 200 kata dalam satu klik saja! Benar-benar menakjubkan bukan. Bila dibandingkan dengan telegraph atau surat yang digunakan pada zaman dahulu untuk mengirim pesan ke teman yang jauh, aplikasi twitter ini menjadi satu hal yang mungkin sulit dibayangkan oleh orang di zaman dahulu.

Di blog sendiri, aplikasi twitter ini tentunya sangat membantu dalam menyebarkan artikel-artikel di blog. Anda tentu saja menjadi sangat terbantu dalam menyebarkan artikel anda kepada khalayak ramai dengan cepat dan gratis. Anda pun dapat memberikan update artikel gratis anda lewat twitter dengan menggunakan fitur follow dari twitter sehingga pengunjung anda yang juga pengguna twitter dapat selalu update dengan artikel-artikel di blog anda. Selain itu dengan adanya fitur retweet pengunjung anda juga bisa menyebarkannya kembali ke teman-temannya yang lain sehingga akan membuat pengunjung yang penasaran dengan artikel anda datang dan berkunjung ke blog anda.

Anda tentunya tertarik untuk memasangnya bukan? Bila anda masih belum memiliki akun twitter, saya menyarankannya untuk membuatnya. Nah bila anda sudah memiliki akun twitter, bersiaplah untuk mulai memilih 10+ tombol follow me twitter unik dan gratis untuk blog anda!


twitter


Cara Memasang Tombol Follow Me Twitter di Blog

 Step 1

Masuk ke halaman dashboard > Layout > Add Gadget > HTML/JavaScript

Step 2

Letakkan kode tombol twitter yang anda pilih dan letakkan di halaman HTML/JavaScript

Step 3

Klik Save

50+ Tombol Follow Up Twitter Unik dan Gratis




























Catatan !
Ganti kata "twitterandadisini" pada kode dengan username twitter anda.

Selamat mencoba!
Wassalam.

March 16, 2013

Cara Memasang Tombol Back to Top Auto Hide (Otomatis Tersembunyi) di Blog

Cukup lama juga ya saya tidak memposting artikel. Beberapa waktu yang lalu, waktu saya sempat terpakai untuk melakukan percobaan-percobaan pada widget serta mempermak blog saya agar nampak apik terlihat. Alhamdulillah kali ini saya bisa kembali membagi tips dan trik mempermak blog yang saya ketahui kepada anda warga blogger.
Cara Memasang Tombol Back to Top Auto Hide (Otomatis Tersembunyi) di Blog

Artikel kali ini saya akan membahas tentang bagaimana cara memasang tombol back to top auto hide (otomatis tersembunyi) di blog. Tombol ini, seperti namanya, akan membantu anda kembali ke bagian atas halaman tanpa perlu melakukan scrolling pada tombol scroll di samping kanan halaman. Kebanyakan tombol yang back to top yang anda lihat di blog, tidak memiliki fitur auto hide, dan akan selalu nampak meskipun halaman anda geser hingga ke bagian atas halaman. Widget yang akan saya bagi ini tentu saja berbeda dengan yang pernah anda lihat, dengan fitur autohide yang akan membuat tombol menjadi hilang secara otomatis saat halaman yang tampil berada pada bagian atas halaman. Dan pastinya dengan fitur back to top  auto hide ini anda tentu saja tidak akan terganggu dengan tombol back to top saat anda menggeser halaman ke bagian atas. Contoh tombol back to top auto hide ini dapat anda lihat di bagian samping kanan halaman blog ini.

Apakah anda pensaran? Baiklah, saya akan memberitahukan kepada anda bagaimana cara memasangnya di blog anda.

Cara Memasang Tombol Back to Top Auto Hide (Otomatis Tersembunyi) di Blog

Step 1

Masuk ke halaman dashboard > Layout > Add Gadget > HTML/JavaScript

Step 2

Letakkan kode berikut ke dalam halaman HTML/JavaScript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" >
var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="https://lh3.googleusercontent.com/-lT4CsPKBvYg/UTeJBkstIaI/AAAAAAAAA68/n_Sd0Y0U9DA/s35/1362613905_Previous.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },

    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },

    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },

    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}

scrolltotop.init()

</script> 

Step 3

Klik Save 

Sekarang coba anda perhatikan di bagian samping kanan blog anda, sudah terpasang tombol back to top bukan?
Bila anda ingin gambar tombol ikon yang lain, silahkan mengganti alamat URL yang di beri warna merah dengan URL gambar anda sendiri
Selamat mencoba!
Wassalam.

March 12, 2013

Cara Memasang Widget Chatbox (Buku Tamu) di Blog

Anda sudah mengetahui apa itu buku tamu di blog bukan? Biasanya, pengunjung yang datang dan jalan-jalan ke blog akan meninggalkan jejaknya di buku tamu tersebut. Selain itu, buku tamu ini juga bisa berfungi sebagai aplikasi chatting dengan pengunjung blog anda. Bila anda sering mengunjungi blog orang lain, maka anda akan melihat buku tamu ini melayang di samping blog atau bersembunyi di bagian samping blog tersebut. Tapi tahukah anda, bahwa ternyata ada banyak situs yang menyediakan widget chatbox ini secara gratis untuk dipasang di blog anda. Salah satunya adalah CBox. Berikut cara memasangnya di blog.

cara memasang widget chatbox (buku tamu) di blog

Cara Memasang di Blog

Step 1

Masuk ke situs http://www.cbox.ws/

Step 2

Klik Product > Sign Up Now 

Step 3

Isi data diri anda pada kolom Sign Up. Pada bagian Style pilih model chatbox yang anda inginkan (lihat modelnya pada bagian kanan/ yang diberi tanda hijau

cara memasang widget chatbox (buku tamu) di blog

Step 4

Anda akan di arahkan ke halaman control panel. Klik Look & Feel untuk memodifikasi tampilan CBox anda nantinya.
  • Layout options disini anda bisa mengatur tata letak CBox (Jangan lupa klik save)
  • Style presets mengubah model CBox
  • Colors and Fonts untuk mengubah warna dan huruf CBox
  • Edit CSS di halaman ini, bila anda mengetahui cara memasang kode CSS, anda dapat mengubah kode CSS CBox yang ada

Step 5

Bila anda telah selesai memodifikasinya, klik Publish! > Copy kode yang ada

Step 6

Letakkan kode tersebut ke dalam halaman widget HTML/JavaScript

Semoga bermanfaat.
Wassalam. 

March 11, 2013

Stop Plagiarisme!: Menghilangkan Fungsi Klik Kanan Tanpa Menggunakan JavaScript

Pada artikel saya sebelumnya, saya sudah membahas tentang bagaimana cara agar tidak bisa klik kanan di blog. Pada artikel tersebut, saya memberikan anda beberapa kode JavaScript yang harus anda pasang untuk menghilangkan fungsi klik kanan tersebut. Nah, pada artikel kali ini saya akan memberikan anda cara menghilangkan fungsi klik kanan tanpa menggunakan JavaScript. Cara ini tergolong cara yang sangat mudah, anda hanya perlu menambah beberapa kode ke dalam halaman HTML Template anda.
menghilangkan fungsi klik kanan tanpa menggunakan javascript

Cara Menghilangkan Fungsi Klik Kanan Tanpa Menggunakan JavaScript

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2

Letakkan kode berikut ke dalam kode <body>
oncontextmenu=”return false;”
Sehingga kodenya akan menjadi seperti ini
<body oncontextmenu=”return false;” >

Step 3

Klik Save Template

Selesai! dan blog anda sudah tidak bisa di klik kanan lagi.
Semoga bermanfaat.
Wassalam.

Stop Plagiarisme!: Cara Agar Tidak Bisa Klik Kanan di Blog Anda

Setelah anda membaca beberapa artikel saya tentang memproteksi tulisan dengan berbagai cara yaitu dengan memberikan link sumber otomatis dan mensetting blog agar teks tidak bisa diseleksi, pada kesempatan kali ini saya akan memberikan tips lagi untuk anda agar artikel anda bisa lebih aman dan tidak "dicuri" oleh orang lain dengan mensetting blog anda agar tidak bisa di klik kanan. Dengan mensetting blog anda agar tidak bisa di klik kanan, tentunya akan membuat orang lain tidak bisa menyalin tulisan anda dan hanya sekedar membacanya saja. Dengan begitu, Tulisan anda akan tetap aman, tanpa harus membuat peringatan di bawah artikel agar orang lain mencantumkan link sumber saat menyalin tulisan anda. Adapun bila orang lain ingin menyalinnya, maka mereka mungkin akan kembali menulisnya sendiri dan sepertinya hal tersebut mungkin tidak akan mudah bagi sebagian orang.

cara agar tidak bisa klik kanan di blog

Cara Agar Tidak Bisa Klik Kanan di Blog

Step 1

Masuk ke halaman dashboard > Layout > Add Gadget > HTML/JavaScript

Step 2

Letakkan kode berikut ke dalam halaman HTML/JavaScript
<script language="javascript">
<!--//Matikan Klik Kanan
var message="Oops, maaf anda dilarang klik kanan!"; ///////////////////////////////////
function clickIE() {
if (document.all) {(message);return false;}}
function clickNS(e) {
if (document.layers||(document.getElementById&&!document.all))
{
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;} document.oncontextmenu=new Function("alert(message);return false") // --></script>
Catatan!
Silahkan anda mengganti teks yang berwarna merah dengan pesan anda sendiri.

Step 3

Klik Save

Semoga bermanfaat.
Wassalam.