DeeCan: TUTORIAL HIAS BLOG DI BLOGGER

Membuat Cursor Selalu Diikuti Oleh Text

Ketika saya blogwalking ke beberapa site para sobat, saya banyak menemukan cursor yang selalu diikuti oleh text. Saya berfikir bagaimana cara membuatnya. Akhirnya saya menemukan jawaban tersebut di salah satu site SMU negeri di Pekanbaru [ di sini ].
visit n learn
Tetapi setelah saya perhatikan ternyata kita hanya bisa memilih salah satu dari script yang telah diciptakan yang mempunyai text berbeda. Adapun text-text tersebut adalah "Selamat Menikmati Blog Ini", "Welcome", "Selamat Datang Di Blog Ini", "Selamat Datang" dan "Enjoy Stay Here".

Kemudian saya berfikir lagi, bagaimana misalnya saya tidak ingin menggunakan text yang telah diciptkan tersebut..? Dan bagaimana caranya agar saya bisa menciptakan text yang akan saya ciptakan sendiri..? Dan akhirnya terbuka juga rahasianya, dan sayapun sekarang bisa membuat cursor yang diikuti text yang saya inginkan.

Jika sobat tertarik untuk menciptakan cursor dengan text sendiri, silahkan ikuti langkah-langkah berikut ini :

1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilhan HTML/JavaScript
6. Pastekan script di bawah ini ke kolom Konten

<script>
//mouse
//Circling text trail- Tim Tilton
//Website: http://www.tempermedia.com/
//Visit http://www.dynamicdrive.com for this script and more
function cursor_text_circle(){
// your message here
var msg='pingin belajar'.split('').reverse().join('');

var font='Verdana,Arial';
var size=3; // up to seven
var color='#ff0000';

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 for just plain rotation w/out drag
var speed=.3;

// This is the rotation speed, set it negative if you want
// it to spin clockwise
var rotation=-.2;

// Alter no variables past here!, unless you are good
//---------------------------------------------------

var ns=(document.layers);
var ie=(document.all);
var dom=document.getElementById;
msg=msg.split('');
var n=msg.length;
var a=size*13;
var currStep=0;
var ymouse=0;
var xmouse=0;
var props="<font face="+font+" size="+size+" color="+color+">";

if (ie)
window.pageYOffset=0

// writes the message
if (ns){
for (i=0; i < n; i++)
document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
}
else if (ie||dom){
document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');
document.write('</div></div>');
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){
ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
}

if (ns||ie||dom)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
var y=new Array();
var x=new Array();
var Y=new Array();
var X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}

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

var makecircle=function(){ // rotation properties
if (ie) outer.style.top=iecompattest().scrollTop+'px';
currStep-=rotation;
for (i=0; i < n; i++){ // makes the circle
var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval
}
}

var drag=function(){ // makes the resistance
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}
makecircle();
// not rotation speed, leave at zero
setTimeout(function(){drag();},10);
}
if (ns||ie||dom)
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", drag, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", drag );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
drag();
};
}
else
window.onload = drag;
}

}
cursor_text_circle();

</script>

7. Silahkan ganti tulisan berwarna merah dengan tulisan pilihan anda
8. Klik Simpan
9. Selesai

Cara masukin logo!!

Banyak para netter pemula (newbie) atau mungkin para netter lain yang mungkin bingung gimana cara buat favicon atau icon yang bisa muncul di address bar yang bisa menunjukkan identitas si pemilik blog atau website.
Akan saya beberkan sedikit cara untuk membuatnya, tapi ini khusus untuk di BLOGGER bukan di WORDPRESS sebab di BLOGGER ada format untuk edit HTML.
Ada 2 caranya:

1. Cari format yang bertuliskan:
]]></b:skin>

Lalu paste kode HTML ini:
<link href='http://i465.photobucket.com/albums/rr20/jakabanda/JBGIF-1.gif' rel='SHORTCUT ICON'/>

Tepat dibawah ]]></b:skin> jadi formatnya:

]]></b:skin>
<link href='http://i465.photobucket.com/albums/rr20/jakabanda/JBGIF-1.gif' rel='SHORTCUT ICON'/>

Kode HTML yang berwarna merah Anda ganti dengan kode HTML icon milik Anda. Ukuran icon saya sarankan berukuran 16 x 16 pixel, bisa format apa saja: GIF (gambar animasi) atau PNG (gambar icon non animasi) atau bisa dengan format lain. Anda bisa upload icon atau gambar Anda di photobucket.com lalu edit image saja di sana, daftar gratis.

2. Cari format yang bertuliskan:

]]></b:skin>

Lalu paste kode HTML ini:


<link href='/favicon.ico' rel='shortcut icon'/>
<link href='http://www.iconj.com/ico/6/t/6tu57idfpu.ico' rel='shortcut icon'/>


Tepat dibawah ]]></b:skin> jadi formatnya:
]]></b:skin>

<link href='/favicon.ico' rel='shortcut icon'/>
<link href='http://www.iconj.com/ico/6/t/6tu57idfpu.ico' rel='shortcut icon'/>


Kode HTML yang berwarna merah Anda ganti dengan kode HTML icon milik Anda. Ukuran icon sama dengan keterangan di atas. Hanya saja Anda upload icon-nya di iconj.com, tinggal upload di icon generator lalu Anda akan diberi kode Direct Link dan HTML Code (copy dan paste sesuai dengan format di atas). Untuk upload icon di iconj.com tanpa daftar, gratis dan langsung jadi.

Cara Bikin Tag Cloud Melayang

TAG CLOUD MELAYANG
Kemarin pas lagi jalan-jalan didunia maya aku ngelihat web dengan tampilan Tag/Label dengan tulisan yang melayang, bukan yang cuman diem aja.., tapi bergerak bebas saat cursor mouse didekatkan, karena penasaran akhirnya ngorek informasi dari mbah 'Google',
alhasil aku nemuin caranya, ternyata nama tagnya "Cumulus",dengan tampilan flashnya, dan bisa diterapkan tuk blogspot, tapi yang template baru ya..
Susah nggak...?, tentu saja tidak Maria....( kayak telenovela aja..),
Gini nih caranya..

* Pertama masuk ke account Blogger.
* Kedua kalau belum ada widget Labels, Add dulu Widgetnya, judulnya terserah, disini saya pake TAG CLOUD.
* Ketiga kebagian Layout, pilih Edit HTML, jangan lupa tuk ceklist di Expand Widget Template ( tuk jaga-jaga mendingan backup pake Download Full Template )
* Kempat cari kode ini

<em><b:section class='sidebar-box' id='sidebar2' preferred='yes'>.</em>

Kalo mo cepet pake Ctrl+F dan Copy Paste code diatas
* Kelima Copy Paste code dibawah ini

<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

tepat dibawah kode
<b:section class='sidebar-box' id='sidebar2' preferred='yes'>

"240", "300&quot
Klo mo rubah warna backgroundnya cari kode ini

"#ffffff"

Menambahkan Read more, atau Baca Selengkapnya

Menambahkan Read more, atau Baca Selengkapnya, atau Baca selanjutnya di Blogspot / Blogger.com
Menambahkan read more, baca selengkapnya, atau baca selanjutnya pada blog, ndak tau juga sih, bahasa kerennya apah, kalau dalam bahasa inggris mah ada, expandable post summaries istilahnya. Ini adalah sebuah metoda agar setiap posting blog berisi sebuah paragraf pendek, yang merupakan perkenalan dari materi yang diposting yang diikuti dengan link "Read more", a.k.a baca selengkapnya a.k.a baca selanjutnya

karena panjang jadi aku bikin baca selengkapnya jadi kalian klik baca selengkapnya aja yah!!!

Ini membuat si pembaca mendapatkan perkenalan pendek dengan setiap materi yang diposting pada halaman utama blog. Dia kemudian bisa mengklik read more jika dia tertarik dengan materi tersebut. Banyak blogger merasa kesulitan ketika mereka mencoba untuk mengikuti instruksi dari petugas Blogger Help. Berikut ini disampaikan langkah-langkah untuk membuat link tersebut dengan cara yang mudah.
Ada tiga langkah yang akan dilakukan jika kita ingin mengimplementasikan cara ini:

Masukkan Fungsi IF dalam CSS

Langkah pertama adalah menempatkan fungsi if didalam css (ndak usah pusing dengan istilah-istilah yang baru anda kenal, ikuti saja langkah perlangkahnya). Ini akan mengubah cara posting ditampilkan dalam halaman lain, untuk melakukan ini Login ke Panel Kontrol dan klik Tata letak, kemudian klik Edit HTML, sebelum mengubahnya Klik dulu Download Template Lengkap untuk menyimpan template yang aktif sekarang, sekedar berjaga-jaga seandainya ada kesalahan, kita tetap bisa menggunakan template yang lama, simpan template yang lama.

Kemudian gulunglah layar edit template, sehingga ditemukan tag , dan pastekan kode ini tepat diatas tag head tersebut:

<em><style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
</em>

Kemudian klik tombol Simpan Template, kemdian perhatikan tag ]]> yang berada tepat diatas tag , pastekan lagi sekali lagi kode tersebut diatas tag itu. Sehingga hasilnya kira-kira seperti ini:

padding: 0;
width: 240px;
}
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
]]></b:skin>
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
</head>

perhatikan tulisan yang berwarna biru merupakan tulisan asli dari template yang disediakan blogger.com, sedangkan yang berwarna merah adalah kode yang kita tambahkan kemudian.Link Readmore
Langkah berikutnya adalah membuat link "Read More" atau "Baca Selengkapnya" atau "Baca selanjutnya", pertama-tama terlebih dahulu kita harus menchecklist pada Expand Template Widget (kalau langkah yang ini tidak dikerjakan, teks yang akan dicari tidak dapat ditemukan). Kemudian carilah tag dan pastekan kode berikut dibawahnya:

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>Baca selengkapnya!</a>
</b:if>

sekali lagi klik tombol Simpan Template.

Memodifikasi Posting
Langkah terakhir adalah memodifikasi template posting, yang menunjukkan dimana kita meletakkan paragraf yang akan dilihat si pembaca, dan dimana meletakkan kode yang hanya muncul kalau link baca selengkapnya di klik. Untuk itu klik pada tab Pengaturan dan klik tab Format, kemudian gulung layar sampai ditemukan kotak isian untuk Template Posting, pastekan kode berikut ini:

Ini adalah awal dari posting saya. <p><span class="fullpost">dan ini adalah akhirnya.</span></p>

Kemudian klik Simpan Pengaturan.
Sekarang coba lakukan posting tulisan baru. pada tulisan baru muncul tulisan seperti ini:
Ini adalah awal dari posting saya.

dan ini adalah akhirnya.
Perhatikan: terdapat 2 buah paragraf pada layar posting anda!, paragraf yang pertama akan muncul pada halaman pertama, sedangkan paragraf yang kedua akan mundul kalau pengguna mengklik tombol Baca selengkapnya, ketiklah tanpa terlebih dahulu menghapus paragraf tersebut, setelah selesai diketik baru kemudian tulisan tersebut dihapus (tapi paragrafnya jangan dihilangkan).
Selamat belajar...