Latest Post
Tampilkan postingan dengan label Tips-Trik Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Tips-Trik Blogger. Tampilkan semua postingan

Generator Text Pelangi


Paste your text here:





You may use the options at right to customize the output.




  Go Text!  




Output will be generated here:





Output: 154 characters.






Options:


Color style



Output format




Brightness (0-255)

Contrast (0-255)



Reverse direction
Invert hues






Preview

Lorem
ipsum
dolor
sit
amet,
consecutive,
adipiscing
(Click background to toggle between black and white.)



Num. repetitions
Resolution (1=finest):












 

Cara memasang widget menu horizontal menu di Blogger/Blogspot:





1. Masuk ke dashboard > Design/Rancangan > template
 
 
2. Masukkan kode CSS tepat di ATAS ]]></b:skin> (gunakan Ctrl + F untuk mencari)
 Kode
 CSS:

ul#menu {width: 100%;height: 43px;background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ5yreSwaGa-5GVBZh1fe5PBG00oo1QVRB4dwFcqGKKYQ0Mjc4a6nktYa850hsJKHcweMsqCaAaIWB8sHcrI9i2u0OD2Hn7aXfegRgMj8EeEfqoroODbfh6bsJcFL-m8dbt4c-w-Tie7M/s1600/menu-bg.gif") top left repeat-x;font-size: 0.8em;font-family: "Lucida Grande", Verdana, sans-serif;font-weight: bold;list-style-type: none;margin: 0;padding: 0;}
ul#menu li {display: block;float: left;margin: 0 0 0 5px;}
ul#menu li a {height: 43px;color: #777;text-decoration: none;display: block;float: left;line-height: 200%;padding: 8px 15px 0;}ul#menu li a:hover {color: #333;}
ul#menu li a.current {color: #FFF;background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVBVgdW8GUHvTQc1yLGe4rd3CGlN-0TTTVjD94Se8xSQi8iVICS8oEVf2nk0fNwz4jgLmMH6LsHn6R3Kwwhx39yCkY7NalIZ4xoUVFh42DqrFzbKczj_4_W0d5iXAfAB9g1wTmjuk8RFk/s1600/current-bg.gif") top left repeat-x;padding: 5px 15px 0;}
3. Save template.
4. Copy Kode HTML, ganti #(url homepage anda) dengan url homepage blog, dan  # dengan url-url lain yang ingin dipasang di menu. Ganti kata-kata Home, Daftar Isi Blog, dan lain-lain dengan anchor text yang diinginkan.
Kode HTML:
<ul id="menu">
<li><a class="current" href="
#(url homepage anda)">Home</a></li>
<li><a href="
#">Daftar Isi Blog</a></li>
<li><a href="
#">Contact Me</a></li>
<li><a href="
#">Advertise</a></li>
<li><a href="
#">SMS Gratis!</a></li>
</ul>
Contoh:
<li><a class="current" href="http:/ebitz-id.blogspot.com">Home</a></li>
Jika ingin menambah atau mengurangi link menu, tambah atau hapus baris:

<li><a href="#">anchor text</a></li> sebelum </ul>.


5. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget


6. Setelah pop up window muncul, pilih opsi HTML/Javascript

7. Kemudian masukkan Kode HTML yang telah diedit ke kolom configure HTML/Javascript.

7. Klik save.
8. Drag/geser widget menu horizontal tersebut ke bawah/atas header. 
9. Save lagi.
10. Done!


 

Cara membuat perkataan mengikuti kursor di blog

Ada berbagai cara yang dibuat bagi menukar bentuk(menghias) kursor seperti membuatnya bertaburan dengan bintang,berbentuk buih(bubble) dan membuat perkataan mengikuti kursor.


Cara membuatnya:

1.Masuk ke design dan pilih Page elements
design
2.Add a Gadget
gadget
3.Html/Javascript


dan masukkan kod dibawah ini

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'comic sans';
color: #9B1750;
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">
;(function(){
var msg = "Masukkan Perkataan anda disini";
var size = 22;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.2;
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>
Ubahkan perkataan yg dikehendakki pada teks yang berwarna oren diatas
4.Kemudian klik save.
 

Cara pasang kursor bintang berjatuhan

Sebelumnya saya pernah repost untuk Cara membuat perkataan mengikuti kursor di blog Sebagai mana  tajuknya tutorial cara kali ini adalah cara untuk memasang Cara pasang kursor bintang berjatuhan.Efek bintang berjatuhan ini akan tampil bila mana cursor digerakkan pada blog.



Berikut adalah cara memasangnya:
1.Login ke Blogger
2.Klik Pada Design → Page elements
3. Add a Gadget → HTML/JavaScript





Kemudian pilih warna yang dingini pada  kod berikut :

Bintang warna hitam
<script src="https://sites.google.com/site/teknikbuatblog/tbb/black_star.js" type="text/javascript"></script>

Bintang warna hijau
<script src="https://sites.google.com/site/teknikbuatblog/tbb/green_star.js" type="text/javascript"></script>

Bintang warna merah
<script src="https://sites.google.com/site/teknikbuatblog/tbb/red_star.js" type="text/javascript"></script>

Bintang warna puteh
<script src="https://sites.google.com/site/teknikbuatblog/tbb/white_star.js" type="text/javascript"></script>

Bintang warna kuning
<script src="https://sites.google.com/site/teknikbuatblog/tbb/yellow_star.js" type="text/javascript"></script>


Setelah memasukkan kodnya,klik pada save untuk melihat hasilnya.
Semoga Berhasil.
 

Membuat Link Efek Pelangi di Blog

Sebelumnya saya pernah repost untuk Cara membuat perkataan mengikuti kursor di blog dan Cara pasang kursor bintang berjatuhan. Sebagai mana  tajuknya tutorial cara kali ini adalah cara untuk Membuat Link Efek Pelangi di Blog


Jika cursor diarahkan pada suatu link, maka link tersebut akan menampilkan efek warna warni yang berubah-ubah. Efek link yang berubah warna di sebut dengan nama Link Rainbow Effect. Kalau di negara kita, sering di sebut dengan nama Link Efek pelangi. Seperti di blog ini, Jika cursor anda arahkan pada link aktif maka efeknya text akan berganti warna seperti pelangi.

Kalau sobat blogger mencari tutorial tentang cara buat link berwarna warni atau berkedap kedip di situs atau blog lain, maka tutorial tersebut pasti meminta sobat blogger untuk Edit Template. Tapi kali ini saya akan share tanpa edit Template yaitu hanya dengan tambahan di HTML saja.

Cara Buat Link Efek Pelangi di blog :
  • Kunjungi blogger.com
  • Di Menu Drop Down klik Layout ---> Add a gadget ---> HTML/JavaScript
  • Lalu Copy Paste kode berikut pada kolom yang tersedia :
<script src="http://tutorialblogspot.googlecode.com/files/LinkPelangi.js" type="text/javascript"></script>
  • Klik Simpan.

Tambahan :
Saat sobat blogger memasukkan kode tersebut, jangan kasih Title atau Judul pada kolom pertama, biarkan kosong.
Semoga Bermanfaat
 
 
Copyright © 2012-2013. GO-LINK│*Cafe Information™ - All Rights Reserved