Tugas Blog 3

Cara Mengganti Template blog

Template Blogger

Saat ini ada berbagai macam template Blogger yang bisa kamu gunakan secara gratis. Mulai dari template Responsive, SEO Ready, Ads Ready, Slideshow dan masih banyak lagi. Sebelum memulai memasang template baru, kamu bisa pilih terlebih dahulu template Blog yang ingin kamu gunakan.

Situs Download Template Blogger

Berikut ini beberapa rekomendasi situs tempat download template Blog yang bisa kamu coba. Jika sudah menemukan template yang kamu suka, download template tersebut dan ikuti langkah-langkah berikut ini untuk memasang template pada Blogger.

· Gooyabi Templates

· My Blogger themes

· BTemplates

· Templateism

· CO.Templates

· ThemeXpose

· DeluxeTemplates

· ProTemplatesLab

Cara Memasang Template Blogger

Template yang sudah kamu download tadi biasanya berformat .xml. Berikut adalah cara memasang template tersebut ke dalam Blogger (Blogspot):

· Masuk ke Blogger.com, lalu pilih menu Template.

· Ke pojok kanan atas lalu pilih Backup/Restore.

· Klik Choose File lalu pilih file XML (template blog) yang kamu download tadi.

· Jika sudah klik Upload, maka secara otomatis template baru akan terpakai.

Itulah cara mudah untuk mengganti template pada Blogger, untuk kamu yang masih bingung, jangan lupa untuk bertanya di kolom komentar. Selamat mencoba!

Cara Membuat Efek Gelembung

Masuk ke dasbor blogger
Buka halaman tata letak
klik tambahkan Gadget/add a gadget
Pilih gadget HTML/JavaScript
Masukkan Script efek gelembung yang saya sertakan dibawah nanti pada bagian konten/content
klik simpan/save

Cara Mengganti Cursor Mouse

Mouse pointer atau penunjuk mouse adalah tanda yang menyatakan posisi mouse pada layar. Umumnya berbentuk tanda panah akan tetapi bisa diubah sesuai keinginan. Untuk itu pada postingan kali ini saya akan membagikan cara mudah merubah pointer atau cursor mouse pada Blog anda. Cursor mouse merupakan salah satu bagian penting pada Blog, karena merupakan bagian yang paling sering mendapat perhatian dari pengunjung. Dengan merubah kursornya dengan tampilan yang lebih unik tentunya Blog anda akan terlihat lebih menarik. Jika anda tertarik untuk mengganti kursor pada Blog anda, silakan ikuti tutorialnya dibawah,

Langkah-langkah:

· Kunjungi situs www.cursors-4u.com.

· Disana anda akan disugukan banyak contoh dari kursornya.

· Anda dapat memilih berdasarkan kategori yang ada.

Silakan anda pilih salah satu gambar yang anda ingin gunakan pada Blog anda.

Jika anda telah menentukan kursor mana yang akan anda gunakan, klik gambar tersebut untuk mendapatkan kode dari kursornya.
Sekarang copy kode yang diberikan untuk kursor yang telah anda pilih. (Option #1 - Universal CSS/HTML Code)

Nah anda sekarang telah mendapatkan kodenya.

Untuk memasangnya di Blog anda, Pilih Tata Letak >> Tambahkan Gadget >> HTML/Javascript.
Isikan konten dengan kode yang sebelumnya telah anda copy.
Jika sudah klik "Simpan".

Cara Membuat Tulisan Bergerak Mengikuti Kursor di Blog

Kreasi | Informasi | Selamat siang sobat,...Cara membuat tulisan bergerak mengikuti arah cursor di blog atau cara agar tulisan bisa mengikuti cursor di blog atau cara menjadikan tulisan mengikuti pergerakan cursor pada blog adalah posting saya hari ini.

Hallo sobat semua.. Apa kabar kalian hari ini? Saya harap kalian sehat dan baik-baik saja :)
Baiklah, pada kesempatan yang baik ini, Gede Sitdown Blog akan memposting artikel mengenai cara membuat tulisan agar mengikuti kursor di blog. Menurut saya, tujuan dari pembuatan ini hanyalah sebagai kreasi untuk mempercantik tampilan blog dan sebagai informasi bagi sobat blogger lain yang ingin membuatnya agar terlihat berbeda dari tampilan blog yang lain seperti yang terlihat pada blog ini. Baiklah, bagi yang tertarik dan ingin membuatnya, berikut ini langkah-langkah cara membuat teks/tulisan mengikuti gerakan cursor di blog:

1. Masuk ke dashbor blog sobat.
2. Klik Tata Letak >> Tambah Gadget >> Pilih HTML/Java Script.
3. Copy code berikut ke dalam box HTML/Java Script

<style type='text/css'>

#outerCircleText {

font-style: italic;

font-weight: bold;

font-family: 'comic sans ms', verdana, arial;

color: #ff840a;

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(){

// Pesanmu di sini, bahasa sundanya yaitu "Pesan anjeun di dieu.." hehehe... (QUOTED STRING)

var msg = "TULISAN YANG INGIN DITAMPILKAN";

// 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.2;

// 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;

// BERHENTI NGEDITNYA..! Parantos cicing di dieu! Ulah diteraskeun..! //

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>

Penting : Ganti tulisan yang berwarna merah dengan tulisan/teks yang sobat inginkan.

4. Simpan dan lihat hasilnya.

Bagaimana? Mudah sekali bukan? :)
Demikianlah postingan mengenai cara membuat tulisan mengikuti kursor di blogkali ini. Semoga bermanfaat buat semua.

Cara menampilkan jumlah pengunjung blog di blog kita

1. Masuk ke blog anda.
2. Klik Menu Opsi lain.

3. Klik Tata Letak

4. Klik Add Gadget.

5. Klik HTML/Javascript.

6. Copy kode berikut :

7. Pastekan ke kotak / kolom Konten

8. Klik Simpan

9. Lihat Blog anda, Hasil seperti gambar dibawah ini.

Cara Memasang Jam Atau Menambahkan Jam Di Blog Keren

1. Silahkan klik atau buka link http://flash-clocks.com/analog-flash-clock-page1.html
2. Di tab atau halaman baru pilih salah satu tampilan widget jam yang anda suka.
3. Jika sudah ada yang di pilih, lalu " Klik HTML Embed Tag dan Copy semua code tersebut yang muncul.

Lihat contoh gambar di bawah :

4. Sekarang buka akun blogger anda.

5. Pilih menu tata letak > Add gadget > Html/Javascript > Paste code tadi yang di ambil > Klik Save
Lihat contoh gambar di bawah :

6. Lihat hasilnya.

Cara Membuat Animasi Di Blog

adapun langkah-langkah dalam memasang widget animasi bergerak yaitu :

masuk atau login ke blog kalian

klik Rancangan / Design kemudian klik Elemen laman / page Elements

pilih HTML/JAVA SCRIPT

lalu copy pastekan script-script berikut ini ( sebaiknya jangan di beri judul )

script di bawah ini telah di setting sedimikian rupa agar animasi tersebut ada tepat di pojok kiri bawah blog . jika kalian tidak mau animasi tersebut berada di pojok kiri bawah blog kalian .. silakan kalian hapus atau edit kembali script yang berwarna hijau pada contoh di bawah ini setelah gambar animasi ..

silakan copas :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="widget animasi lucu bergerak atau gif" alt="animasi bergerak naruto dan onepiece"/></a><small><center><a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank">animasi bergerak helikopter</a></center></small></div>

=>untuk mengedit animasi apa yang kalian ingin gunakan silakan edit "Tulisan berwarna biru "( ubah alamat animasi favorit yang anda suka)
=> untuk mengedit tinggi animasi silakan edit : "hegiht : 130px"
( angka dapat kalian atur sesuai dengan kebutuhan)
=> untuk mengedit panjang gambar : "width : 110px"
( angka dapat kalian atur sesuai dengan kebutuhan)=> untuk mengedit/ mengatur lokasi sesuai kebutuhan misal animasi bergerak ini dapat di
buat agar tidak ada di pojok/sudut blog . melainkan diam / berada pada posisi
yang kalian ingin kan , jika kalian tertarik untuk mengeditnya .silakan kalian edit "position : fixed ; bottom:0px;left:10px"
position fixed : maksudnya adalah posisi animasi akan selalu bergerak . jika andaingi posisi animasi tersebut hanya diam pada satu posisi maka silakan hapus position : fixed ini
bottom : 0px : maksud bottom 0px ini adalah jarak antara animasi dengan sisi bawah .
jika kalian ingin membuat animasi tersebut tidak berada di bawah ,misalkan kalian ingin animasi berada di atas silakan kalian editbottommenjadi topleft : 10px : maksud left :10px ini adalah jarak antara animasi dengan sisi kiri . jika kalian ingin membuat animasi tersebut tidak berada di kiri,misalkan kalian ingin animasi berada di kanan silakan kalian editleft menjadi right.

saran ..!!!!
jika anda ingin mengedit animasi menjadi di kanan dan di atas sebaiknya edit saja seperti ini"position : fixed ; top:0px;right:10px"