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

Cara Membuat Efek Petir di Blog

Cara Membuat Efek Petir di Blog | Untuk artikel saya sebelumnya pernah juga membahas tentang bagaiamana cara membuat efek meteor. Postingan ini sekedar ingin berbagi kepada anda yang suka menghiasi blognya dengan berbagai macam keindahan guna mempercantik tampilan blog kesayangannya. Ok berikut cara membuatnya. Untuk demonya langsung lihat pada blog anda nantinya, karena kode scriptnya 100% bekerja.

Langkah Membuat Efek Petir di Blog

1. Log in ke Blogger

2. Klik Rancangan

3. Tambah Gadget

4. Pilih HTML/Javascript

5. Masukkan kode berikut ke dalam HTML/Javascript

<style

type="text/css">body { background-image:

url(http://i958.photobucket.com/albums/ae69/putrablidz/storm.gif);

background-color:transparent; }</style>

6. Selesai dan simpan, silahkan lihat hasilnya

Sekian postingan tentang cara membuat / memasang efek petir pada blog, semoga bermafaat.

http://teknik-blog-tutorial.blogspot.com/2012/04/cara-membuat-efek-petir-di-blog.html

Baca Selengkapnya »»  

Membuat TaskBar Navigation Menu

Pada postingan kali ini saya akan memberikan tutorial sederhana membuat navigation bar berbentuk taskbar horizontal yang stylish seperti taskbar yang ada di bawah pada blog ini. Tampilan taskbar navigation menggunakan kombinasi transparansi dan gradien color sehingga memberikan tampilan efek kaca seperti taskbar di Win7. Taskbar navigation ini dapat menjadi daya tarik tersendiri bagi pengunjung blogger, selain merapikan menu-menu utama pada halaman blog, taskbar ini dapat digunakan untuk memberikan kemudahan me-navigasikan blog sobat....gimana keren-kan ??? Oke jika tertarik silakan simak tutorialnya...

© Copyright 2010 MonozCore

1. Login ke blog sobat dan jangan lupa untuk mem-backup template blog sobat terlebih dahulu.
2. Klik Dashboard > Design > Edit HTML.
3. Cari kode </Head> pada template blog sobat (tekan CTRL + F pada keyboard anda untuk menampilkan kotak pencarian di browser untuk mempercepat pencarian).
4. Copy kode berikut ini tepat diatas kode </Head>.
   
   The Code...
   <!-- Begin CSS TaskBar Navigation by MonozCore -->
   <style>
   #taskbar {
   background: url() bottom repeat-x;
   width: 100%;
   height: 34px;
   clear: both;
   bottom: 0;
   position: fixed;
   font-family:arial;
   text-decoration: none;
   color: #FFFCFC;
   background: #;
   font-weight:bold;
   font-size:13px;
   overflow:hidden;
   -moz-border-radius-topright: 8px;-webkit-border-top-right-radius: 8px;border-top-right-radius:8px;
   -moz-border-radius-topleft: 8px;-webkit-border-top-left-radius: 8px;border-top-left-radius:8px;
   box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
   background-color:#619bb9;
   background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
   background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc));
   }
   #taskbar a {
   text-decoration:none;
   color:white;
   }
   #icon-box {
   text-align: left;
   color:white;
   position:fixed;
   left: 10px;
   bottom: 3px;
   }
   
   #icon-box a:hover img {
   border: 1px solid #ffffff;
   bottom: 2px;
   }
   
   #icon-box a:hover{
   color: #666666;
   }
   
   #welcome-box {
   text-align: center;
   color:white;
   font-weight:bold;
   font-size:13px;
   font-family:arial;
   text-decoration: none;
   position:fixed;
   bottom: 8px;
   left:160px;
   right:200px;
   width:auto;
   }
   </style>
   <!-- End CSS TaskBar Navigation by MonozCore -->
   Pada kode CSS #Welcome-Box yang berwarna biru silakan disesuaikan ukurannya biar tampilannya sesuai dengan template sobat.
   
   left:160px;
   right:200px;
   width:auto;
   
5. Cari kode </Body> kemudian copy kode berikut ini tepat diatas kode </Body>.
   
   The Code...
   <!-- Begin TaskBar Navigation by MonozCore -->
   <div id='taskbar'>
   <div align='right' style='padding:0;'>
   <table><tr valign='midlle'>
   <td>
   
   <!-- Begin Copyrights -->
   
   &#169; Copyright  2010 <a href='http://monozcore.blogspot.com' target='blank'><data:blog.title/></a>
   
   <!-- End Copyrights -->
   
   </td>
   <td>
   
   <!-- Begin clock script -->
   
   <script src='http://localtimes.info/clock.php?cp3_Hex=FFB200&amp;cp2_Hex=000000&amp;cp1_Hex=FFFCFC&amp;fwdt=96&amp;ham=0&amp;hbg=1&amp;hfg=0&amp;sid=0&amp;mon=0&amp;wek=0&amp;wkf=0&amp;sep=0&amp;continent=Asia&amp;country=Indonesia&amp;city=Jakarta&amp;widget_number=1000' type='text/javascript'/>
   
   <!-- End clock script -->
   
   </td></tr></table></div>
   </div>
   
   <!-- Begin QuickLaunch Box -->
   
   <div id='icon-box'>
   
   <a href=' Taruh Link Anda Disini' title='Judul Link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqK_9iWOXoaPnHzu0-YhLUa9DHofNNNx-iCXKZiGjxN1JPruEMEK2u73YbK0JCpqwR3CwMuDbhUWfDsGB3DqRjbLOX82TflAXijehIMs3FJPnSoty6DrClLU7qrxjwTOc4cNUZ9crfHc4/s800/backtotop.png'/></a>
   
   <a href=' Taruh Link Anda Disini' title='Judul Link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGaN7sgnGg6Xt34wJfIZ5DwTI88Mmx6-4CULyKgNf6XSVVnaYy0hy_xO-jiZaUUrLyjykA3Sca53huHqYCOi3NRfejLj9outwyqBLQ_I4RUAnpr94BfUajHWG5LQzBw90PCsNOCrbNJRk/s800/Winamp-1.png'/></a>
   
   <a href=' Taruh Link Anda Disini' title='Judul Link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9AmPX0PR9AiZYd6Kx8OQ1Ps6rVt9oMo5q8CJgWq25t_8gJWPgKgWSqqzkSIwdPq0MWKwsaFb9BylXz04FDk2sPIWldDfSuyCZqx86VTHn8Q9fb6hCWf8IBbTrDL5zVDscGaFK4piE21E/s800/chat24.png'/></a>
   
   <a href=' Taruh Link Anda Disini' title='Judul Link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirtz3mf1ygF1EqXYUkU75zHngCzJC4Fy9m32-H0nqy4UK3DeKhoQj29WV7zuK3H0LrPs2H4sMVr8Nie7_cUzZMWTBJjXKTitfGVm89BdR90PlIoemmf7K5qhuWNRv1U0sNHif5huJsqDU/s800/fb_logo24.png'/></a>
   
   <a href='http://www.docs.google.com' onclick='NewWindow(this.href,&apos;Google Office&apos;,&apos;925&apos;,&apos;700&apos;,&apos;yes&apos;,&apos;center&apos;);return false' onfocus='this.blur()' title='Google Office'><img src='http://lh5.ggpht.com/_mFe4nvV0PXc/TOteuTF4SuI/AAAAAAAAAYI/4q8zN7mGn-k/s800/google_docs.png'/></a>
   
   <!-- End QuickLaunch Box -->
   
   <!-- Begin Welcome Note -->
   
   <div id='welcome-box'>
   <marquee direction='left'>Welcome to <data:blog.title/></marquee>
   </div>
   
   <!-- End Welcome Note -->
   
   </div>
   <!-- End TaskBar Navigation by MonozCore -->
6. Silakan di simpan dan lihat hasilnya.

Kode CSS taskbar navigation ini silakan disesuaikan terlebih dahulu baik ukuran, warna, icon dan jumlan quick-link agar sesuai dengan template sobat. Semoga tutorial singkat ini dapat memberikan manfaat buat sobat blog MonozCore. Jika masih ada kesulitan dalam menerapkan taskbar navigation silakan tanyakan di kotak komentar...

.: Selamat Mencoba :.

http://monozcore.blogspot.com/2011/09/membuat-taskbar-navigation-menu.html

Baca Selengkapnya »»  

Falling Angel / Devil For Bloggers

Membuat tampilan blog dengan efek falling angel / devil yang menarik dan unik. Efek ini menggunakan javascript falling image dengan menggunakan gambar Angel / Devil. Gambar Angel / Devil menggunakan ukuran tinggi 144 pixel dengan format Gif / PNG. Untuk contoh dapat dilihat di MozWidget.blogspot.com.

Cara Pemasangan

• Login ke blog sobat.
• Klik "Design" kemudian klik "Edit HTML".
• Cari kode </Head> kemudian copy-paste kode berikut ini di atas kode </Head>.
  
  
  
  <script language='JavaScript'>
  var no = 5;
  var speed = 10;
  var snowflake = &quot;https://lh6.googleusercontent.com/-2zCqZKYrTSE/TtnartDybXI/AAAAAAAAAkw/QffnU1XvJlQ/s800/Angel.png&quot;;
  </script>
  <script language='JavaScript' src='http://monozcore-project.googlecode.com/files/MonozCore_FallinImages.js'/>
  Keterangan :
  - var no = 5 // Jumlah gambar yang ditampilkan.
  - var speed = 10 // Kecepatan gerak gambar (semakin kecil semakin cepat).
  - var snowflake // URL link gambar.
  

• Kode yang berwarna biru merupakan URL Link Gambar, silakan sobat ganti dengan URL Link Gambar Angel / Devil atau gambar lain yang sobat inginkan.

• Apabila sobat sudah menggunakan script falling image, sobat blogger cukup mengganti URL Link gambar saja.

• Klik "Save" dan lihat hasilnya. 

Pilihan Gambar Angel / Devil

https://lh6.googleusercontent.com/-yLgBipZfADc/Ttm-TmZeDzI/AAAAAAAAAkk/B4X0OjliB2o/s800/wonderwoman02.png

https://lh4.googleusercontent.com/-i-1pOMJGtJo/TtT1Rh_xAsI/AAAAAAAAAjU/OVlbGfde-0o/s144/Pixie.png

https://lh6.googleusercontent.com/-2zCqZKYrTSE/TtnartDybXI/AAAAAAAAAkw/QffnU1XvJlQ/s800/Angel.png

https://lh3.googleusercontent.com/-CxK_IZ4fKX0/TykfeJ7ZguI/AAAAAAAAA0I/unMpVEjMTXk/s144/Vampire1.png

https://lh3.googleusercontent.com/-0KEgIC4mscs/Tykfg73yYZI/AAAAAAAAA0Q/liE8JLwzCN8/s800/Demon.png

https://lh6.googleusercontent.com/-rpNUiXM3jSY/Tykgo0bBtxI/AAAAAAAAA0c/DzfZpgzMQ2w/s800/new_wonderwoman.png

https://lh6.googleusercontent.com/-7d0e4hSn2Ak/Tytil3_XwwI/AAAAAAAAA1c/o0FqZ8pRgfU/s800/sexy-bat-girl.png

https://lh6.googleusercontent.com/-YaujlB2E4Vg/Tytil7nTsZI/AAAAAAAAA1g/Cj1nYPIlvrw/s800/Vampire2.png

https://lh6.googleusercontent.com/-tE9dwlJs0xU/T0RnDY-gYnI/AAAAAAAABHc/MHVNL8yeGdA/s800/pink-butterfly.png

https://lh5.googleusercontent.com/-ALpTrT5gW5o/T0RspUUvtyI/AAAAAAAABHw/KUO9M2-1vY8/s800/BatGirl.png

https://lh4.googleusercontent.com/-xm2dEvsfhQ4/T0RspVG2fNI/AAAAAAAABHs/RPSmysD_zII/s800/devilicious.png

https://lh3.googleusercontent.com/-y8Y5imMIEsk/T0RspCZ6VRI/AAAAAAAABHo/KhouENrV_TM/s800/redhotdemon.png

https://lh6.googleusercontent.com/-zufAEfV4PrM/T1x_g5hOvrI/AAAAAAAABWs/IMzOJPTVgDQ/s800/devil_angel_lolita.png

Gimana Moz's Blogger kerenkan infonya ??? jangan lupa cendolnya yaa...supaya kreasinya makin unik dan bermanfaat...Terima kasih.

.:Semoga Bermanfaat:. 

http://monozcore.blogspot.com/2012/02/falling-angel-devil-for-bloggers.html

Baca Selengkapnya »»  

Widget Artikel Terbaru

Aloo Moz's Blogger... gimana kabarnya ??? semoga sehat dan bahagia, info unik kali ini tentang cara membuat Widget Artikel Terbaru (Recent Post) yang unik dan keren, pastinya...hehehe... Widget ini akan menampilkan daftar postingan artikel blog terbaru dengan ringkasan artikel. Widget ini berfungsi untuk memudahkan pengunjung blog mengetahui info artikel terbaru yang ada di blog.

• Trik Mempercepat Koneksi Internet Speedy
• Blog Avatar Companion
• Fungsi Tombol Keyboard F1 s/d F12
• Popup Facebook Like Box With Timer
• JQuery Twitter Ticker

Pada contoh diatas, coba dekatkan mouse sobat ke daftar list recent post monozcore diatas. Pada saat mouse didekatkan maka akan muncul tool tip info yang berisi ringkasan postingan artikel blog. Gimana keren-kan ???. Pembuatan widget ini cukup mudah... oke buat yang tertarik kita langsung aja ke TKP...

Cara Pemasangan

• Login ke blog sobat.
• Klik "Design" kemudian klik "Add a Gadget" setelah itu pilih "HTML/Javascript".
• Copy-paste kode berikut ini pada kotak postingan gadget.
  
  
  <style type="text/css">
  /* FEEDBLITZ WIDGET */
  .postnew li a:hover {
  display:block;
  text-decoration:none;
  background:#efefef;
  }
  .postnew li a:visited {
  text-decoration:none;
  }
  .postnew {
  float:left;
  width:380px;
  }
  .postnew ul {
  width:90%;
  list-style-type:none;
  }
  .postnew li a {
  text-decoration:none;
  border-top:1px solid rgb(204,204,204);
  line-height:1.6em;
  font-size:12px;
  display:block;
  padding:3px 0px 3px 0;
  }
  .feedburnerFeedBlock div, .date, .feedItemAuthor, .feedTitle, .fbsubscribelink, .creditfooter {
  display:none;
  padding:2px 3px;
  margin-left:95px;
  margin-bottom:12px;
  width:162px
  }
  .feedburnerFeedBlock  li:hover .date {
  font-size:13px;
  font-weight:bold;
  text-align:left;
  display:block;
  position:absolute;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic4T_pgWwovlPCGBX86KV7RWJbCV0U5MhKtdECUaEA8vYWT8z09ioD3CQh2_LOyyOI9fSxTH-DgwH68BBucU4yB1JMZuCGH38wV56Y-KOFqCwoqSiZMiJzqB7myrwen9y4391D0rg6Zd8/s400/tooltips-date.gif) no-repeat scroll 10px 0px; color:#333; padding:0px 35px; margin-right:10px;
  width:114px
  }
  .feedburnerFeedBlock  li:hover div {
  line-height:1.2em;
  border-radius:8px 8px;
  -moz-border-radius:0 0 8px 8px;
  -khtml-border-radius:0 0 8px 8px;
  -webkit-border-radius:0 0 8px 8px;
  border-radius:0 0 8px 8px;
  font-size:90%;
  display:block;
  position:absolute;
  border:1px solid #D8D8D8;
  background:#E5E5E5  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyQtQS1hUUCgYk4EbT8vr0m69LtooPfWrqa_ndTwB6aY2oCmek_CAzQmzlMla594re5Tvyr-ryl2VUaEuazZ1zYTzcNeVLQD5ZMBt6VheRmatFyS-3YiuBMQIkmaWOoJIvsdbAh53CJE8/s1600/tooltips-background.png) repeat-x;
  color:#333;
  padding:35px 10px 10px 10px;
  }
  </style>
  
  <script src="http://feeds.feedburner.com/ monozcore?format=sigpro&nItems=5&format=openLinks=new
  &displayDate=true&displayExcerpts=true&displayTitle=false&excerptLength=50&dateLocation=below" type="text/javascript" ></script>
  <div style="text-align:center;font-size:80%;"><a href="http://monozcore.blogspot.com/2012/02/widget-artikel-terbaru.html" style="text-decoration:none;color:white;">Get this widget</a></div>

• Gunakan feed burner sebagai rss feed blog sobat kemudian ganti teks "monozcore" pada kode script di atas dengan nama blog sobat. Untuk nItems=5 merupakan banyaknya daftar recent post yang ingin ditampilkan, pada kode diatas recent post yang ditampilkan sebanyak 5 postingan artikel terbaru.
• Klik "Save" dan lihat hasilnya...

Gimana Moz's Blogger kerenkan infonya ??? jangan lupa cendolnya yaa...supaya kreasinya makin unik dan bermanfaat...Terima kasih.

.:Semoga Bermanfaat:.

http://monozcore.blogspot.com/2012/02/widget-artikel-terbaru.html

Baca Selengkapnya »»