Membuat Read More Pada Postingan Blog

Mungkin teman2 blogger sudah banyak yang tau cara tuk membuat read more atau selengkapnya.... pada postingan di blognya masing2,tp ga da salahnya jg dunk klo kali ni aq pengen menjelaskan sedikit,anggap ja sebagai bahan catatan biar aq ga lupa,oke deh langsung ja ya q jelasin caranya.
1. Pertama Masuk ke account blogger.com
2. Masuk ke menu Layout(Tata letak)>edit html
3. Beri Tanda checklist pada Expand Widget Template
4. Cari kode

<p><data:post.body/></p>

di blog kalian dengan cara CTRL+F
5. Ganti kode di atas dengan kode berikut

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Read More......</a>
</b:if>

Kata yang berwarna Merah dapat Kita ganti dengan kata lain sesuka kita.
6. Setelah selesai klik Save Template.

Oke,setting pada html sudah selesai,sekarang kita akan setting pada template posting kita.
caranya :
1. Masuk ke menu Setting(Pengaturan)>Formatting
2. Pada Template entri Masukkan kode berikut.(Seharusnya masih kosong)
<span class="fullpost">

</span>
3. Klik Save setting

Pada saat kita akan membuat posting baru,pada edit html seharusnya sudah ada kode yang kita masukkan pada Template entri tadi.
Cara penggunaannya:
Tulis post yang mau di jadikan sebagai kepala post sebelum kode <span class="fullpost"> dan penggalan post lainnya diantara kode <span class="fullpost"> dan
</span> .
contoh:

Hari ini aku pengen pergi ke kebun raya
<span class="fullpost">------->Batas pemenggalan posting
tuk melihat hewan dan tumbuhan
</span>

dan tampilannya nanti akan menjadi :
Hari ini aku pengen pergi ke kebun raya
Read More......

Selesai.....

Catatan: sebelum mempraktekkan cara diatas,saya sarankan tuk membackup dulu data template anda,takut hal2 yang tidak diiinginkan terjadi.caranya dengan Download template lengkap pada edit html di tata letak.

Read more »

Membuat Title Bergerak

Tutorial Ini Mungkin bisa sedikit membantu para Blogger pemula seperti saya untuk memperindah tampilan pada blog yang baru dibuat,oke sekarang langsung ja ya kita praktekin pada blog yang ingin kita rubah tampilan titlenya....!
-Pertama Masuk ke ID blogger kamu
-Trus Panel Kontrol klik tulisan layout
-Lalu Klik tulisan Edit HTML. Di halaman itu cari tulisan <title><data:blog.pageTitle/></title>
dengan cara ctrl+ f setelah itu tulisan diatas ganti dengan tulisan

<b:include data='blog' name='all-head-content'/>

<script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>


-Angka yang diberi warna merah itu adalah kecepatan gerakkannya, kamu bisa mengganti dengan angka yang lain (semakin besar angkanya, semakin lambat gerakkan dan sebaliknya -Setelah itu klik Simpan Template
-Setelah itu lihat blog kamu, bila kecepatannya belum pas kamu bisa merubah angkanya tadi dengan yang lain.

Read more »

Cara Posting Javascript di Blog

Di Kalangan blogger pemula pasti pernah mengalami hal yang sama yang saya alami,ketika ingin memposting javascript di blog,script yang telah diposting malah tidak keluar ataupun tidak sesuai dengan yang kita posting,mungkin tutorial berikut dapat membantu teman2 yang sedang bingung ketika ingin memposting javacript. Jadi langsung saja ya tanpa basa-basi,takutnya ntar malah keburu basi.hehehe

A. Konversi Online
1. Kunjungi Encode Decode HTML Converter di sini.
2. Masukkan kode html / javascript yang ingin Anda tampilkan di posting di kotak yang tersedia, terus klik menu “Encode”
3. Copy dan paste hasil encode yang ada dalam kotak ke posting Anda. Selesai.
Catatan: Jangan lupa klik menu “Kode” atau “Code” sebelum memasukkan kode html yang sudah di-encode tadi.

Read more »

Membuat Teks Yang Mengelilingi Cursor

Mau membuat kursor kamu di ikuti oleh teks ? jika mau, caranya sangat mudah... anda hanya perlu mengikuti langkah di bawah ini

1. Log in ke blog anda > Layout (tata letak) >> Page Elements (laman elemen) >>> Add a Gadget (tambah gadget) >>>> HTML/JavaScript
2. Copy code di bawah ini dan paste di kotak 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='Cari Pengalaman'.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+" color="+color+" size="+size+">";

if (ie)
window.pageYOffset=0

// writes the message
if (ns){
for (i=0; i < n; i++)
document.write('<layer left="0" top="0" width="+a+" name="nsmsg'+i+'" height="+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>

3. Pada bagian yang berwarna merah ganti dengan teks yang anda inginkan.
4. Pada Bagian yang berwarna biru ganti dengan warna yang anda inginkan (kode warna dlm bentuk hexagonal).

Selesai, selamat mencoba !!!


Sumber : Klik Disini

Read more »