Showing posts with label Tutorial blog. Show all posts
Showing posts with label Tutorial 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

Sunday, 11 December 2011

Cara memasang iklan dibawah judul posting

Jika sebuah blog sudah memiliki banyak traffick ataupun berpagerank tinggi akan dengan mudah menghasilkan uang dari blog tersebut.Salah satu cara untuk menghasilkan uang dari blog adalah dengan memasang iklan dari situs penedia iklan ppc seperti google adsense,kumpul blogger,adsenscamp ataupun yang lainnya.
Untuk lebih banyak mendapatkan peluang mengalirnya duit maka dalam menempatkan posisi iklan harus sebagus mungkin.Salah satu posisi iklan yang paling bagus adalah dibawah judul posting.
Untuk memasang iklan dibawah judul posting silahkan ikuti langkah langkah berikut :
1.Login ke account blogger anda
2.Pilih Design >> Edit HTML
3.Centang expand widget template pada pojok kanan,kemudain cari kode <div class='post-header-line-1'/>
Untuk mempermudah pencarian gunakan Ctrl + F
Paste script iklan anda dibawah kode <div class='post-header-line-1'/>,
kemudian save template.

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

Wednesday, 30 November 2011

Cara Upload Foto/Gambar ke Flickr

Untuk dapat menampilkan slideshow foto keblog,maka terlebih dahulu anda harus mengupload foto/gambar  ke situs penyedia layanan seperti flickr.Situs Flickr adalah milik yahoo yang tidak kita ragukan lagi pelayanan kualitasnya.
Untuk dapat mengunggah gambar ke Flickr terlebih dahulu anda harus login keFlickr,untuk login silahkan gunakan account Yahoo anda,bagi yang belum mempunyai account yahoo bisa baca panduannnya cara membuat Account Yahoo (Email).
Setelah login selanjutnya anda akan diminta membuat nama account baru di Flickr
Ketikkan nama kemudian klik Create My Account,lalu klik Upload pada pojok kanan atas


Klik Browse untuk mencari gambar di Komputer
Klik browse lagi dibawahnya untuk mengunggah gambar lebih dari satu,
Pada Choose the privacy setting pilih Pulic(anyone can see them)
Kemudian klik Upload,tunggu sampai proses upload selesai,dan lihat hasilnya

Klik Save untuk menyimpan gambar

Friday, 18 November 2011

Berbagi artikel secara otomatis difacebook dan Twitter

Hampir dari semua orang yang mengerti internet pasti memiliki akun di Facebook dan Twitter,hal ini bisa dimanfaatkan bagi seorang blogger  untuk mempromosikan blog atau webnya ke dua situs sosial tersebut.Terus bagaimana kita bisa mempublikasikan postingan kita secara otomatis di Facebook dan Twitter?Ada berbagai macam cara untuk share artikel di Facebook dan Twitter secara otomatis,salah satunya adalah dengan Twitterfeed.
Untuk memulai langkah ini langsung saja kita login di Twitterfeed,atau bagi anda yang belum mempunyai akun di Twiterfeed silahkan registrasi terlebih dahulu,anda bisa langsung klik di Twitterfeed,kemudian klik tombol Register Now

Kemudian isi email dan password pada sign up form,klik Create Account


Masukkan url rss feed anda,kemudian klik Test Rss Feed untuk mengecek Valid tidaknya url,
Jika url yang anda masukkan valid,maka akan muncul pesan "Feed Parse OK",lanjutkan tahap berikutnya dengan mengklik Continue to Step 2.
Selanjutnya kita akan menghubungkan terlebih dahulu dengan Facebook pada Avalaible Service
Klik connect with Facebook untuk menghubungkan dengan akun Facebook anda,Kemudian kita diminta login pada account Facebook
 Setelah sukses terhubung dengan Facebook kemudian klik "Create Service"

Kembali ke halaman Avalaible Service dan Pilih Twitter

Klik Authenticate Twitter untuk menghubungkan dengan twitter pada halaman seperti gambar dibawah ini
Selanjutnya masuk/login pada account twitter anda
Setelah sukses terhubung dengan twitter kemudian klik "Create Service"
Selanjutnya masuk dihalaman Publishing,disitu anda akan melihat dua akun yang telah aktif/terhubung dengan dengan adanya tanda ceklist
Klik "All Done"