Showing posts with label Modifikasi blog. Show all posts
Showing posts with label Modifikasi blog. Show all posts

Monday, 9 January 2012

Cara Membuat Teks Pada Cursor

Jika teman teman bosan dengan tampilan cursor pada blog teman teman,membuat teks pada cursor menjadi alternatif untuk mengganti tampilan blog anda menjadi lebih keren.
Untuk membuat teks pada cursor caranya cukup mudah,tinggal copy script simpan dan munculah teks pada tampilan cursor blog teman teman.
Tanpa perlu panjang lebar langsung saja ke TKP :

 Untuk membuat teks pada cursor ikuti langkah langkah berikut :

1.Pertama masuk ke Dashboard blogger anda,klik Design >>Page Element
2.Pilih Add a Gadget
3.Copy /masukkan script dibawah ini :


<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #a4336a;
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 = "Tulis teks anda disini";
/* 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 =20;
// 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 = 15;
// Rotation speed, set it negative if you want it to spin clockwise (decimals

allowed)
var rotation = 0.3;
// 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.2;
////////////////////// 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>

4.Simpan dan cek hasilnya.

Untuk mengganti jenis font,ketebalan dan lainnya teman teman bisa mengeditnya di teks yang berwarna biru.Sedangkan untuk mengganti tampilan tulisan/teks yang di cursor silahkan ganti teks "Tulis teks anda disini"
Sebelum teman teman menggunakan script diatas, teman teman bisa test dengan cara copy script diatas kedalam notepad.Simpan dengan ekstensi html,misalnya tekscursor.html,kemudian buka atau double klik pada file tekscursor.html tersebut

Thursday, 8 December 2011

Setting album Slideshow di Flickr

Setelah mengupload gambar ke Flickr,selanjutnya kita dapat mengelompokkan gambar gambar tersebut menjadi sebuah album yang nantinya akan kita buat slideshow.Agar tampilan slideshow kita nantinya menarik,maka kita kelompokkan gambar gambar tersebut sesuai dengan temanya.
Untuk setiap album yang kita buat kita bisa jadikan widget slideshow terpisah.Untuk mengatur dan membuat album dalam flickr silahkan ikuti langkah langkah berikut:

1.Pilih Organize & Create >> Your Set pada menu navigasi ,
2.Klik Your Firs Set
3.Berikan sebuah nama untuk album baru yang akan kita buat,misalnya rnb1,untuk memasukkan gambar pada album rnb1 caranya tinggal kita drag pada kotak seperti gambar dibawah

4.Kemudian kita simpan gambar yang telah kita masukkan dalam album rnb1 dengan cara klik save
5.Sebuah album slide show dengan gambar pilihan kita sudah siap digunakan dalam blog,
Kemudian kita tinggal mengambil scrip slideshow dan memasangnya kedalam blog

Tuesday, 12 April 2011

Cara membuat popular post

Sesuai judul, kali ini kita belajar membuat widget popular post di blogspot. nanti widget ini bisa kita tampilkan di sidebar blog sobat masing-masing. fungsinya adalah untuk menampilkan postingan paling populer menurut jumlah comment terbanyak.

lho bukanya semua udah tahu cara buat widget popular post. emang iya sih, tapi kali ini kita mau belajar buat popular post versi terbaru karena yang lama saya rasa terkadang tidak dapat berfungsi dengan baik. ya udah langsung aja yuk kita simak cara bikinnya. gampang kok.



1. masuk dulu dong ke account blogger sobat masing-masing.

2. cari menu rancangan - elemen laman

3. silahkan sobat mau ditempatkan sidebar mana, terserah sobat. klik menu tambah gadget-html/javascript.

4. silahkan copy script dibawah lalu paste-kan di gadget html tersebut.


<script language='javascript'>
aBold = false;
numposts=200;
maxshowresult=7;
home_page = "http://Blogsobat.blogspot.com/";
</script>
<script type='text/javascript'>
//<![CDATA[
var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write("<ul>");function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'" class="recent-link">'+postTitlear[f]+" ("+postCommentar[f]+" comments)</a>";document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
//]]>
</script>

Keterangan untuk yang cetak merah
(abold= false;)        = bisa dirubah menjadi true jika ingin tulisanya menjadi cetak tebal.
(numposts=200;)    = hasil dari penelusuran 200 postingan
(maxshowresult=7;)= jumlah popular post yang ingin ditampilkan
home_page            = rubah dengan URL blog sobat


5. klik simpan, Selesai
silahkan lihat hasilnya.