Cara Pasang Widgwt Trans Lator Diblog

Pemasangan widget Translator atau"Penterjemah" pada blog amat perlu. Trans Lator Bisa Anda Lihat Di Samping kiri blog saya .Translator ini berguna apabila blog kita dikunjungi secara tidak sengaja dari oleh pengunjung dari negara lain yang melihat blog kita dan tidak tahu bahasa kita ,maka mereka boleh menggunakan widget ini untuk menterjemahkannya kedalam bahasa yang mereka inginkan.Berikut adalah cara untuk memasukkan translator pada laman blog

1. Login ke Blogger kemudian pilih menu Layout

2. Kemudian klik pada Add Gadget

3. pilih HTML/Javascript

4. Kemudian masukkan script berikut ini kedalamnya.

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'ms',
includedLanguages: 'ar,zh-CN,zh-TW,nl,en,tl,fr,de,hi,id,it,ms,ru,es,th,vi'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<a href="http://space-blogg.blogspot.com/2011/02/cara-pasang-widgwt-trans-lator-diblog.html" title="Get Widget Transator FREE!">Get Widget !</a><br />

5.Kemudian save.

http://space-blogg.blogspot.com/2011/02/cara-pasang-widgwt-trans-lator-diblog.html

Baca Selengkapnya »»  

Cara Mengganti Foto Profil Blog Dengan Animasi

Space mulai posting trick lagi nih,,

Kali ini kita akan nyoba ubah foto profil blogger di blog, tanpa menghapus foto aslinya.
Tentu saja, yang lebih menarik, foto profile kita akan menjadi gambar animasi.
Contohnya alias demonya, lihat aja di sebelah kiri, pada sidebar Profile No Jutsu.
Fotoku tuh Deidara yang bisa bergerak, alias pake format *GIF.
Nah, pada edit profile ,mungkin kita bisa langsung memasang URL foto berextensi GIF, namun, hasilnya di blog tetap akan muncul foto yang gak bergerak,,
Tapi tak ada yang tak mungkin, kita bisa mengubahnya sendiri.
Penasaran?
Yang mana sih Foto Profile di log itu???
Duh, kalo masih bingung coba lihat dibawah ni deh:

BEFORE	AFTER
Ahmad Dhoifullah Lihat profil lengkapku	Ahmad Dhoifulllah Lihat profil lengkapku

Mau jugah, ikutin nih caranya:

1. Login dulu ke Blogger
2. Kalo udah, masuk ke Tata Letak, trus Edit HTML
3. Centang atau tandai Expand Template Widget
4. Kemudian cari kode dibawah ini (pake CTRL+F biar cepet):

<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>

5. Kalo udah, kamu ganti kode tersebut dengan kode dibawah ini:

<a href='http://space-blogg.blogspot.com/2011/02/cara-mengganti-foto-profil-blog-dengan.html' target='_blank'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' src='URL FOTO KAMU DISINI' expr:width='data:photo.width' title='Buat Foto Profile Kamu Jadi Animasi!'/></a>

6. Nah, ganti yang warna hijau tuh dengan URL gambar animasi kamu, tapi gambarnya jangan gedhe-gedhe, mungkin lebar ama tingginya sekitar 100px lah,
7. Save deh template kamu, trus cek di blog kamu,, Taraaaaa!!!


Dan Tips ini yang PERTAMA DIDUNIA,, xixixixi,,
Jadi pas Dark Ard posting nih tips, belom pernah ada yang posting tips seperti ini,
Jadi artilel ini PERTAMAX!!! Alias menjadi yang pertama!!

http://space-blogg.blogspot.com/2011/02/cara-mengganti-foto-profil-blog-dengan.html


Hehe,, kalo kalian nemu tips yang sama kayak ini, berarti ya tips ini udah nyebar,,,

Baca Selengkapnya »»  

Membuat Menu Widget Scroll Di Blog

Salam blogger pada posting kali ini saya akan membarikan cara membuat widget scroll untuk menghemat tempat dan sekaligus mempercantik blog teman-teman.

Widget ini selain menghemat tempat juga mempermudah pengunjung blog memilih artikel yang ingin dibaca. Sangat bermanfaat jika kita pasang di blog kita agar pengunjung blog tidak mencari artikel lain di web lain dan supaya pengunjung betah membaca artikel di blog kita.

Ok lasung ke TKP kita mulai dari lahkah pertama sebagai berikut :

1. Login ke akun Blogger Sobat

2. Klik menu "Layout"

3. Klik pada "Page Element"

4. Klik "Add a Gadget " Kemudian pilih atau klik HTML/Javascript".

5. Copy Paste Script yang ada di bawah ini :

<div
style='overflow:auto;width:250px;height:250px;padding:10px;border:1px solid #eee'><ul>
LINK LIST ANDA DISINI
</ul></div>

6. Edit kodenya dulu, Kode yang berwarna biru adalah alamat URL yang ingin teman-tema masukan dan yang warna merah judul tampilan di widget silah diganti sesuai menu yang akan di masukkan. lihat kode yang temen mau ganti di bawah ini :

<div 
style='overflow:auto;width:250px;height:250px;padding:10px;border:1px solid #eee'><ul><li><ahref='http://sodiycxacun.blogspot.com/2010/04/pasang-icon-emotions-upin-dan-ipin-di.html'>Pasang icon emotions upin & ipin</a></li>
<li><a href='http://sodiycxacun.blogspot.com/2010/04/pasang-widget-recent-posts-atau-posting.html'>Pasang Widget Recent Posts Atau Posting Terbaru Di Blog</a></li>  
<li><a href='http://sodiycxacun.blogspot.com/2010/02/cara-membuat-posting-diblog.html'>Cara membuat Posting Blog</a></li>
<li><a href='http://sodiycxacun.blogspot.com/2009/11/belajar-buat-blo-lewat-blogger.html'>Cara membuat Blog</a></li>  
<li><a href='http://sodiycxacun.blogspot.com/2010/04/membuat-read-more.html'>Cara membuat read more</a></li>  
</ul></div>

Untuk menambah list tinggal copy paste kode yang sama,dan tinggal edit saja. Sebagai cotoh di kodenya di bawah ini

<li><a href='http://sodiycxacun.blogspot.com/2010/04/membuat-read-more.html'>Cara membuat read more</a></li>

Contoh hasilnya seperti di bawah ini :

• Pasang icon emotions upin & ipin
• Pasang Widget Recent Posts Atau Posting Terbaru Di Blog
• Cara membuat Posting Blog
• Cara membuat Blog
• Cara membuat read more

Keterangan Kode yang bewarna pink :

overflow:auto;
Kode ini agar tercipta scrolling atau penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.

width:300px;
Adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 300 pixel, nilai ini tentunya di sesuaikan dengan keinginan atau di sesuaikan dengan lebar sidebar yang ada. namun, agar selalu sesuai dengan sidebar maka sebaiknya memakai nilai 100% (width:100%).

height:200px;
Adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 250px atau nilai yang lainnya.

padding:10px;
Adalah kode pembuat jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di ubah sesuai keinginan. misal : padding:5px;

border:1px solid #eee
Agar bidang tersebut terlihat ada kotaknya, jika anda tidak menginginkan ada terlihat kotaknya, maka tinggal di hapus saja.

Selesai.....jangan lupa klik Save
selamat mencoba semoga bermanfaat.. jangan lupa comment ya untuk motifasi saya.
Terimakasih sudah berkunjung sapai ketemu di tutorial berikutnya.,.,.,.,.,

http://space-blogg.blogspot.com/2011/02/membuat-menu-widget-scroll-di-blog.html

Baca Selengkapnya »»  

Isengin Pengunjung Yuk!!!

Hehe,, niat usil muncul lagi,,

Kali ini kita isengin pengunjung blog kita pake ,

Gimana maksudnya? Ini sih gag cuman tombol aja, kita juga bisa menggunakan media lain sebagai pemancing pengunjung, agar kita dapat iseng ke mereka..
Hahahahahaha

Untuk contoh singkatnya, coba kalian liat dibawah ini, tekan aja sesukamu:

Ups,, tombol yang terakhir kata-katanya kasar beud,, hehehe,,
Jangan ditiru ya pemirsa! Merusak moral bangsat tuh,,,
Ne cara bikinnya:

<input type="button" value="NAMA TOMBOL"onclick="alert('Kata-kata Makian, hinaan, umpatan, terserah Loe deh,, masukin disini');" />

Contohnya tadi yang kayak gini:

<input onclick="alert('Huh!!! Nyolot amat sih!! Udah dibilangin jangan tekan!!');" type="button" value="JANGAN TEKAN TOMBOL INI!" />

Kalo pake gambar gimana? ya kodenya kayak gini:

<img src="" alt="" onclick="alert('Kata-kata Makian, hinaan, umpatan, terserah Loe deh,, masukin disini');" />

Jelas ya,,,,
Met iseng-iseng,,,

http://space-blogg.blogspot.com/2011/02/isengin-pengunjung-yuk.html

Baca Selengkapnya »»  

Membuat Read more Otomatis

Cara Membuat Readmore Otomatis di Blog | Tips Blogspot | Membuat Readmore Otomatis >>> Cara membuat readmore otomatis pada blog tanpa harus memasukan kode <span class="fullpost"> </span> setiap kali anda akan membuat posting sebuah artikel, postingan anda akan terpotong secara otomatisketika posting anda sudah di publikasikan. Langsung aja ya tanpa harus basa basi berikut Cara Membuat Readmore Otomatis di Blog anda agar menjadi lebih ringkas dan professional :

1. Login ke blogger dengan ID anda.
2. Pilih Rancangan atau Tata Letak.
3. Pilih Edit HTML.
4. Centang kotakkecil di samping sebelah kiri tulisan "expand template widget".
5. Lalu cari kode : </head>  untuk mempermudah pencarian tekan F3.
6. Lalu masukkan code di bawah ini tepat di atas </head>
   
   <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>
   <script type='text/javascript'>
   //<![CDATA[
   function removeHtmlTag(strx,chop){
   if(strx.indexOf("<")!=-1)
   {
   var s = strx.split("<");
   for(var i=0;i<s.length;i++){
   if(s[i].indexOf(">")!=-1){
   s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
   }
   }
   strx = s.join("");
   }
   chop = (chop < strx.length-1) ? chop : strx.length-2;
   while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
   strx = strx.substring(0,chop-1);
   return strx+'...';
   }
   function createSummaryAndThumb(pID){
   var div = document.getElementById(pID);
   var imgtag = "";
   var img = div.getElementsByTagName("img");
   var summ = summary_noimg;
   if(img.length>=1) {
   imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
   summ = summary_img;
   }
   var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
   div.innerHTML = summary;
   }
   //]]>
   </script> 
7. Kemudian anda cari kode  <data:post.body/>
8. Ganti kode <data:post.body/> dengan kode di bawah ini :
   
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
   <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
   </script>
   <span class='rmlink' style='float:right;padding-top:20px;'>
   <a expr:href='data:post.url'> <b> Baca Terusannya</b> &#187;&#187;&#160;&#160; </a></span>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
   </b:if>
9. Kemudian Save Template.

Keterangan Readmore ......

Kita dapat menentukan letak tumbnails ( gambar ), jumlah karakter tulisan baik tanpa maupun dengan tumbnail serta tinggi dan lebar tumbnails pada postingan dengan cara merubah kode merah tebal di atas dan berikut penjelasannya :

1. var thumbnail_mode = "float";: Letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”; 
2. summary_noimg = 250;: Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail; 
3. summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail; 
4. img_thumb_height = 120;: Tinggi thumbnail dalam ukuran pixel; 
5. img_thumb_width = 120;: Lebar thumbnail dalam ukuran pixel; 
6. READMORE-<data:post.title/>: Tulisan READMORE bisa diganti misalnya dengan “Baca Selengkapnya” dan apabila anda tidak ingin menampilkan judul dibelakang Readmore, Anda bisa menghapus code script ini <data:post.title/>.

 http://kolombloggratis.blogspot.com/2011/03/cara-membuat-readmore-otomatis-di-blog.html

Baca Selengkapnya »»  

Cara Membuat Spoiler di Blogspot

Fungsi utama dari sebuah spoiler sendiri adalah untuk mengurangi beban loading page, biasanya yang dimasukin ke dalam spoiler adalah image dengan resolusi besar, jadi dengan spoiler image, tidak akan diload secara langsung sehingga dapat mempercepat waktu loading. Selain fungsi diatas, dengan spoiler kita dapat menghemat space pada posting kita sehingga akan lebih rapi dan nyaman dibaca oleh pengunjung blog anda.

Contoh Spoiler :

Spoiler Contoh:

Ini adalah contoh spoiler

Cara membuat Spoiler di Blogspot seperti diatas sangat mudah, Anda tinggal memasukkan kode HTML berikut ini :

Cara Membuat Spoiler :

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Judul Spoiler</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

"Masukkan isi spoiler yang anda inginkan disini"
</div>
</div>
</div>

Cukup mudah bukan ? Mungkin ini bisa jadi alternatif bila anda ingin menampilkan gambar dalam ukuran yang besar, sehingga tidak membuat pengunjung anda menunggu terlalu lama.

http://pandhawa-tiga.blogspot.com/2011/11/cara-membuat-spoiler-di-blogspot.html

Baca Selengkapnya »»  

Ada Kupu-kupu Terbang di Blog

Cara melbuat animasi kupu-kupu terbang di blog | Bagi anda yang suka dengan berbagai macam keindahan terutama yang suka menghiasi blognya dengan bermacam-macam animasi atau segalanya, pada postingan kali ini saya akan share cara membuat animasi kupu terbang pada blog. Mungkin anda mau lihat postingan yang lain, misalnya memasang bunga sakura di blog

Berikut cara memasang animasi kupu terbang di blog :

1. Masuk ke akun Blogger

2. Klik Rancangan

3. Klik Tambah Gadget

4. Klik HTML/Javascript

5. Pastekan kode script berikut ke dalam HTML/Javascript

<script type='text/javascript'>
//<![CDATA[
var Ymax=8; //MAX # OF PIXEL STEPS IN THE "X" DIRECTION
var Xmax=8; //MAX # OF PIXEL STEPS IN THE "Y" DIRECTION
var Tmax=10000; //MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES


//FLOATING IMAGE URLS FOR EACH IMAGE. ADD OR DELETE ENTRIES. KEEP ELEMENT NUMERICAL ORDER STARTING WITH "0" !!


var floatimages=new Array();
floatimages[0]='http://i.mnpls.com/110/11047.gif';
floatimages[1]='http://i.mnpls.com/110/11047.gif';
floatimages[2]='http://i.mnpls.com/110/11047.gif';
floatimages[3]='http://i.mnpls.com/110/11047.gif';



//*********DO NOT EDIT BELOW***********
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var wind_w, wind_h, t='', IDs=new Array();
for(i=0; i<floatimages.length; i++){
t+=(NS4)?'<layer name="pic'+i+'" visibility="hide" width="10" height="10"><a href="javascript:hidebutterfly()">' : '<div id="pic'+i+'" style="position:absolute; visibility:hidden;width:10px; height:10px"><a href="javascript:hidebutterfly()">';
t+='<img src="'+floatimages[i]+'" name="p'+i+'" border="0">';
t+=(NS4)? '</a></layer>':'</a></div>';
}
document.write(t);


function moveimage(num){
if(getidleft(num)+IDs[num].W+IDs[num].Xstep >= wind_w+getscrollx())IDs[num].Xdir=false;
if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true;
if(getidtop(num)+IDs[num].H+IDs[num].Ystep >= wind_h+getscrolly())IDs[num].Ydir=false;
if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true;
moveidby(num, (IDs[num].Xdir)? IDs[num].Xstep : -IDs[num].Xstep , (IDs[num].Ydir)? IDs[num].Ystep: -IDs[num].Ystep);
}


function getnewprops(num){
IDs[num].Ydir=Math.floor(Math.random()*2)>0;
IDs[num].Xdir=Math.floor(Math.random()*2)>0;
IDs[num].Ystep=Math.ceil(Math.random()*Ymax);
IDs[num].Xstep=Math.ceil(Math.random()*Xmax)
setTimeout('getnewprops('+num+')', Math.floor(Math.random()*Tmax));
}


function getscrollx(){
if(NS4 || NS6)return window.pageXOffset;
if(IE4)return document.body.scrollLeft;
}


function getscrolly(){
if(NS4 || NS6)return window.pageYOffset;
if(IE4)return document.body.scrollTop;
}


function getid(name){
if(NS4)return document.layers[name];
if(IE4)return document.all[name];
if(NS6)return document.getElementById(name);
}


function moveidto(num,x,y){
if(NS4)IDs[num].moveTo(x,y);
if(IE4 || NS6){
IDs[num].style.left=x+'px';
IDs[num].style.top=y+'px';
}}


function getidleft(num){
if(NS4)return IDs[num].left;
if(IE4 || NS6)return parseInt(IDs[num].style.left);
}


function getidtop(num){
if(NS4)return IDs[num].top;
if(IE4 || NS6)return parseInt(IDs[num].style.top);
}


function moveidby(num,dx,dy){
if(NS4)IDs[num].moveBy(dx, dy);
if(IE4 || NS6){
IDs[num].style.left=(getidleft(num)+dx)+'px';
IDs[num].style.top=(getidtop(num)+dy)+'px';
}}


function getwindowwidth(){
if(NS4 || NS6)return window.innerWidth;
if(IE4)return document.body.clientWidth;
}


function getwindowheight(){
if(NS4 || NS6)return window.innerHeight;
if(IE4)return document.body.clientHeight;
}


function init(){
wind_w=getwindowwidth();
wind_h=getwindowheight();
for(i=0; i<floatimages.length; i++){
IDs[i]=getid('pic'+i);
if(NS4){
IDs[i].W=IDs[i].document.images["p"+i].width;
IDs[i].H=IDs[i].document.images["p"+i].height;
}
if(NS6 || IE4){
IDs[i].W=document.images["p"+i].width;
IDs[i].H=document.images["p"+i].height;
}
getnewprops(i);
moveidto(i , Math.floor(Math.random()*(wind_w-IDs[i].W)), Math.floor(Math.random()*(wind_h-IDs[i].H)));
if(NS4)IDs[i].visibility = "show";
if(IE4 || NS6)IDs[i].style.visibility = "visible";
startfly=setInterval('moveimage('+i+')',Math.floor(Math.random()*100)+100);
}}


function hidebutterfly(){
for(i=0; i<floatimages.length; i++){
if (IE4)
eval("document.all.pic"+i+".style.visibility='hidden'")
else if (NS6)
document.getElementById("pic"+i).style.visibility='hidden'
else if (NS4)
eval("document.pic"+i+".visibility='hide'")
clearInterval(startfly)
}
}


if (NS4||NS6||IE4){
window.onload=init;
window.onresize=function(){ wind_w=getwindowwidth(); wind_h=getwindowheight(); }
}


//]]>
</script>

6. Simpan dan lihat hasilnya

Sekian tutorial membuat animasi kupu di blog, selamat mencoba pada blog kesayangan anda.

http://teknik-blog-tutorial.blogspot.com/2012/04/ada-kupu-kupu-terbang-di-blog.html

Baca Selengkapnya »»