image
Free CSS Template

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat mi lacus, sed accumsan neque. Donec condimentum molestie laoreet.

Tampilkan postingan dengan label trik blog. Tampilkan semua postingan
Tampilkan postingan dengan label trik blog. Tampilkan semua postingan

Efek Daun berguguran & Bintang Jatuh

| 0 komentar | Sabtu, 30 Juli 2011

ane nieh ngesare trik blog yang sangat sederhana,supaya blog anda kelihatan lebih  menarik dan enak di lihat.
mungkin trik ini sudah tidak asing lagi bagi sobat blogger,tapi ane di sini hanya ingin mengshare ilmu.siapa tau di antara sobat  blogger ada yang lagi butuh.hehehe.


neih ane kasih tutorialnya semoga bermanfaat dan supaya  memudahkan  bagi sobat blogger untuk mempraktekannya.dan ane kasih sedikit gambarnya karena dengan gambar  bisa  menggatikan dari berjuta" kata".


Langkah"a:
1.masuk dulu ke blog, ya ialah masa masuk rumah hehehe,masuk
   alias log in pake ID punya sobat yak awas pake ID punya orang
   lain.
2.kemudian setelah masuk/udah di dasbor kemudian klik TATA
   LETAK / RANCANGAN.
3.Apabila sudah kemudian klik Elemen Laman. 
4.Apabila sudah kemudian klik Tambah Gatget,kemudian pilih
   gatget  HTML/Java Script seprti Gambar di bawah ini.




5.Apabila sudah maka copy kan script yang ada di bawah ini   
   kedalam otak HTML/Java Script.



-Yang Bintang Jatuh
<script src="http://www.geocities.com/sehatserasi72/efekbintangberjatuhan.js"></script>

-Yang Daun Berguguran
<script src="http://www.geocities.com/sehatserasi72/efekdaunberguguran.js"></script>



6.nah Copas script di atas seperti gambar di bawah ini.





Gimana Sobat blogger hasilnya hehehe.mantep kan semoga dengan ini pengunjung blog anda  bisa nyaman berada lama" di blog anda.



Semoga yang ane share kali ni bermanfaat bagi Sobat Blogger,sampai ketemu lagi di postingan berikurnya.

Cara membuat spoiler (show/hide)

| 0 komentar | Kamis, 30 Juni 2011

nah kali ini ane ngepost mengenai spoiler .
apa sih spoiler itu tuh jiga sobat blogger suka/perna maen ke kaskus pasti sudah tidak lagi asing dengan spoiler ini nah contohnya seperti yang ada di bawah ini.



KHUSUS DEWASA [17+] :


hayo liat apaan..........!!!!! hehehehehehe


nah seperti itulah contohnya gmna tertari ga sih..heheheheh
kalo sobat bloger pengen bisa kayak gitu tapi tidak tau scriptnya
nah sekarang saya akan memberikan scripnya tinggal COPAS jah scrip yg ada di bawah ini..hehehehehe


Script Spoiler [COPAS JAH] :

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler <em>[Judul yang miring]</em></b> : <input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"> </div><br /><div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;"><div style="display:none;">[ISI SPOILER]</div></div></div>


 CATATAN
bacaan yg berwarna merah di dalam spoiker bisa di ganti sesuai yg sobat bloger inginkan..!!


nah gmna mudah kan tinggal di edit" sedikit biar menarik kelihatannya heheheh...!!
semoga bermanfaat bagi sobat bloger..!





cara memasang read more di blog

| 3 komentar | Rabu, 29 Juni 2011





halo sobat bloger ketm,u lagi nieh .
di sini saya aka meng sahare bagai mana cara memasang read more secara otomatis di blog dan di samping nya akan muncul gambar pertama meski gambar yg di post ada di tengah tapi gambar secara otomatis bisa muncul sesuai yg anda inginkan,supaya blog anda tampil menarik heheheheh.
pertama-tama jang lupa save/backup dulu ke notpade ato apalah supaya kalo terjadi masalah anda tinggal mengembalikan lagi seperti semula.
ok langsung ajah ke TKP.
pertama-tama seperti biasa kalo mau ngutak ati yak  login blog rancangan Edit HTML →  jangan lupa centang bacaan Expand Template Widget jika sudah maka cari cari kode </head>
setelah ketemu kode yg di atas kemudian anda copy kan scrip yang ada di bawah ini.




<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 500;
summary_img = 400;
img_thumb_height = 150;
img_thumb_width = 150;
</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>

kalau sudah di copy coba pratinjau saja,kalau tidak terjadi apapa berarti suskses.
kemudian ke langkah selanjutanya,
dengan cara yg sama rancangan → Edit HTML →  jangan lupa centang bacaan Expand Template Widget jika sudah maka cari cari kode <data:post.body/>.
kalau sudah ketemu kode yg di atas kemudian gode yg di atas ganti dengan kode di bawah ini 




<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script
type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:
right'>
<a expr:href='data:post.url'>Read More... </a>
</span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

jika usdah di copy , yak save lah. hehehehehe

CATATAN:
yg di scrip ke2 ada yg bacaanya warnanya BIRU berarti itu bisa di ubah sesuai keinginan anda
o right adalah mrupakan letak daripada tulisan read more tersebut.jika ingin di letakan di kiri yg tulis jah left
Read More... adalah bacaan dari Read More itu sendiri bisa di ganti dengan SELANJUTNYA,SELENGKAPNYA,DLL.


keterangan dari scrip di atas:
var thumbnail_mode = "float"; perintah untuk menampilkan gambar di sebelah float (di sebelah kiri) jika anda ingin menggantinya ke sebelah kanan nmaka tinggal ganti jah float nya dengan (no-float)
summary_noimg = 500; perintah untuk menetapkan berapa banyak karakter/huruf/tulisan akan ditampilkan di posting tanpa gambar.
summary_img = 400;  perintah untuk menetapkan berapa banyak karakter/huruf/tulisan akan ditampilkan di posting + gambarnya.
img_thumb_height = 150;   TINGGIi gambar dalam ukuiran pixel.
img_thumb_width = 150;    LEBAR gambar dalam ukuran pixel.



nah gmna sobat blogger semoga bermanfaat bagi anda....!!!!

Tulisan mengikuti cursore

| 0 komentar |



ane akan memulai share mengenai tips and trick blog ini postingan pertama ane mengenai tips and trick blog,kenapa baru sekarang nge postinya soalnya ane jga sama" baru belajar mengenai java script/HTML jadi ane terlebih dahulu mempelajari apa yg ane dapet dari internet dan tidak langsung nge COPAS seenaknya tapi ane mempelajarinya dulu . ni tips yg mungkin anda pakai supaya tampilan blog anda begitu menarik.
agar pengunjung blog anda tidak merasa bosan berada lama" di blog anda. saya akan memberikan tips and trick mengenai blog yg berfungsi unt agar ada sebuah tulisan mengikuti cursore cukup gampang kok anda tinggal meng copy script yg ada di dalam kotak di bawah ini

<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color:
#000000
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>

<script type='text/javascript'>
//<![CDATA[
;(function(){
// Your message here (QUOTED STRING)
var msg = "
Beginner-site"; 
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size =
25;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;
////////////////////// Stop Editing //////////////////////
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement
:
document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +
'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
//]]>
</script>



langkah pertama siapkan snack dan kopu yak..hehehehhe just kiding
ok kita mulai langkah pertama.
login dulu ke blog → rancanganElemen lamanTambah Gatget
kemudian pilih HTML/javaScript
dan COPAS script yg ada di dalam kotak yg di atas itu tuh..!hehehe


catatan:
tulisan yg warna biru bisa di ganti sesuai keinginan
#000000 = warna tulisan untuk kode warna bisa di cek Disini
beginner-sites = bacaan tulisannya nanti
25 = ukuran tulisannya


gmna hasilnya sobat blogger .......!!!
semoga info yg ane temuin ini bermanfaat bagi anda.!
see you di trik blog berikutnya..!!