Membuat Tulisan Mengikuti Cursor

Gb. Demo Tulisan Berputar

Udah pernah Tukang pilih Lihat tulisan Yang berputar-putar mengelilingi kursor Dan selalu mengikuti kursor di blog blogger? Tadi saya Baru Saja berkunjung Ke salat Satu blog Teman Yang menulis PESAN di Buku Tamu, di Sana saya melihat sebuah tulisan Yang berputar-putar mengelilingi kursor Dan selalu mengikuti kemanapun arah kursor tersebut.Penghasilan kena pajak ITU melihat saya jadi ingin untuk menuliskan CARANYA, siapa industri tahu ADA Yang ingin menghias blog nya Mencari Google Artikel tulisan berputar mengelilingi kursor Blognya. Panduan Cara Membuat Tulisan Berpuatar Mengelilingi Kursor

1. Masuk Ke dashboard blogger
2. KLIK Desain / Rancangan

3. Penghasilan kena pajak ITU KLIK Edit HTML

Kemudian CARI Kode

</ Body>

Dan letakkan skrip berikut sebelum Kode </ body> Tadi

<style type='text/css'>
/ * Lingkaran Styles Teks * /
# OuterCircleText {
/ * Opsional - JANGAN SET FONT-SIZE HERE, SET IT IN THE SCRIPT * /
font-style: italic;
font-weight: bold;
font-family: "sans ms komik ', verdana, arial;
color: # 999;

/ Akhir * opsional * /
/ * Mulai Diperlukan - Jangan Edit * /
position: absolute; top: 0; kiri: 0; z-index: 3000; kursor: default;}
# OuterCircleText div {position: relative;}
# OuterCircleText div div {position: absolute; top: 0; kiri: 0; text-align: center;}
/ * End Diperlukan * /
/ * Gaya Lingkaran Akhir Teks * /
</ Style>
<script type='text/javascript'>
/ / <[CDATA [
/ * Mengelilingi teks trail-Tim Tilton
Website: http://www.tempermedia.com/
Kunjungi: http://www.dynamicdrive.com/ untuk Original Source dan ton script
Modifikasi Di sini untuk lebih banyak fleksibilitas dan dukungan browser modern
Modifikasi seperti pertama kali terlihat di http://www.dynamicdrive.com/forums/
username: jscheuer1 - Pemberitahuan ini harus tetap untuk penggunaan hukum
* /
; (Function () {
/ / Anda pesan di sini (STRING QUOTED)
var msg = " AR Blog (Blogger Tutorial) ";
/ * SISA DARI NILAI Editable BAWAH ADALAH SEMUA NOMOR kuotasi * /
/ / Set gaya font itu ukuran untuk menghitung dimensi
/ / Set untuk jumlah ukuran piksel yang diinginkan font (angka desimal dan negatif tidak diperbolehkan)
var size = 24;
/ / Set ke 1 untuk kedua lingkaran polos, menetapkan satu dari mereka untuk 2 untuk oval
/ Nomor / Lain & desimal dapat memiliki efek yang menarik, terus rendah (0 sampai 3)
var circleY = 0,75; var circleX = 2;
/ / Semakin besar pembagi ini, semakin kecil ruang antara huruf
/ / (Desimal diperbolehkan, bukan angka negatif)
var letter_spacing = 5;
/ / Semakin besar pengganda ini, semakin besar lingkaran / oval
/ / (Desimal diperbolehkan, bukan angka negatif, pembulatan beberapa diterapkan)
var diameter = 10;
/ / Rotasi kecepatan, mengaturnya negatif jika Anda ingin berputar searah jarum jam (desimal diperbolehkan)
var rotasi = 0,4;
/ / Ini bukan kecepatan rotasi, kecepatan reaksinya, tetap rendah!
/ / Set ini ke 1 atau desimal kurang dari satu (desimal diperbolehkan, bukan angka negatif)
var kecepatan = 0,3;
/ / / / / / / / / / / / / / / / / / / / / / Stop Edit / / / / / / / / / / / / / / / / / / / / / /
jika | kembali (&& window.addEventListener window.attachEvent | document.createElement!);
msg = msg.split ('');
var n = msg.length - 1, a = Math.round (ukuran 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 = illegalChars.test (e.pageY)? e.pageY: e.clientY; / / y-posisi
xmouse = illegalChars.test (e.pageX)? e.pageX: e.clientX; / / x-posisi
},
makecircle fungsi = () {/ / rotasi / posisi
if (init.nopy) {
o.style.top = (b | | document.body) scrollTop + 'px'.;
o.style.left = (b | | document.body) scrollLeft + 'px'.;
};
currStep - = rotasi;
for (var d, i = n; i> -1; - i) {/ / membuat lingkaran
. d = document.getElementById ('iemsg' + i) gaya;
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 () {/ / membuat perlawanan
y [0] = Y [0] + = (ymouse - Y [0]) * kecepatan;
x [0] = X [0] + = (xmouse - 20 - X [0]) * kecepatan;
for (var i = n; i> 0; - i) {
y [i] = Y [i] + = (y [i-1] - Y [i]) * kecepatan;
x [i] = X [i] + = (x [i-1] - X [i]) * kecepatan;
};
makecircle ();
},
init = function () {/ / menambahkan divs pesan, & menetapkan nilai awal untuk array posisi
if (illegalChars.test (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 = ukuran + 'px';
if (window.addEventListener) {
window.addEventListener ('beban', init, false);
document.addEventListener ('Gunaka mouse, 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>

PADA Bagian tidak

/ / Anda pesan di sini (STRING QUOTED)
var msg = " AR Blog (Blogger Tutorial) ";

silakah Ganti tulisan AR Blog (Blogger Tutorial) Mencari Google Artikel tulisan Yang ANDA inginkan, KARENA tulisan itulah Yang nantinya Akan berputar-putar mengeliligi kursor

Membuat Text Animasi Tulisan Berwarna

Tutorial Cara Membuat Text Animasi atau Animasi Tulisan Berwarna di Blogger.

Pada artikel kali ini saya akan menuliskan panduan cara bikin teks flash (teks animasi flash / tulisan berwarna bergaya flash) yang nantinya bisa teman-teman pasang pada postingan blog (untuk mempercantik tulisan) atau di widget/sidebar (sebagai widget selamat datang yang keren).

Tutorial blog ini berbeda dengan Tutorial Cara Bikin Tulisan Kelap Kelip (Blink) yang sudah saya tuliskan dulu, karena tutorial cara membuat text animasi flash atau animasi tulisan berwarna ini menggunakan scriptsedangkan untuk membuat tulisan kelap kelip (Blink) tidak memerlukan script, hanya kode html saja.

Sebelum saya menuliskan panduan membuat text animasi flash atau animasi tulisan berwarna, saya akan memperlihatkan demonya dulu, agar teman-teman bisa melihat langsung bagaimana hasilnya nanti.

Demo Text Flash Animasi Berwarna / Tulisan Flash Animasi Berwarna

Selamat Datang Di Blog Ahmad Rifai Net

Nah itulah seperti itulah nanti penampakannya di blog teman. Next ...

Panduan Tutorial Cara Membuat Text Animasi atau Animasi Tulisan Berwarna

Untuk Di Pasang Pada Postingan Bagi teman-teman yang ingin memasukkan text flash animasi ini pada postingan silakan ikuti langkah berikut:

1. Buat posting baru / Edit postingan yang sudah ada.
2. Masukkan kode script Text / Tulisan Flash Animasi Berwarna di sana (kode ada di bawah). Sebelum memasukkan kode script pastikan teman memasukkannya di bagian Edit HTML bukan di Compose(lihat di sebelah kanan atas forum isian posting)
3. Terbitkan Entri (boleh juga dipratinjau dulu)

Untuk Di Pasang Pada Widget Bagi teman-teman yang ingin memasukkan text flash animasi ini pada widget/sidebar silakan ikuti langkah berikut:

1. Pergi ke Rancangan / Design
2. Klik Tambah Gadget / Add Gadget
3. Masukkan kode script Text / Tulisan Flash Animasi Berwarna di sana (kode ada di bawah)
4. Simpan

Nah itulah langkah yang harus di lakukan.

Kode Script Text / Tulisan Flash Animasi Berwarna

<div style="-moz-box-shadow: inset 0 1px 5px 0 #fff; background: #990099; border: 1px solid #ECEDE8; box-shadow: inset 0 1px 5px 0 #555; font-family: Cataneo BT; font-size: 21px; font-weight: bolder; padding: 5px 20px; text-align: center;">
<script type="text/javascript">
var message="Selamat Datang Di Blog Ahmad Rifai Net"
var bgsGR1color="#FFFFFF" /* Warna utama teks */
var bgsGR2color="#FFFF00" /* Warna teks flash pertama */
var bgsGR3color="#00FF66" /* Warna teks flash ke dua */
var flashspeed=100 // kec. ganti warna (1/1000 dt)
var flashingletters=15 // jumlah teks pertama (tips / hiting jumlah text, kemudian bagi 2)
var flashingletters2=18 // jumlah berwarna teks ke dua (tips / hiting jumlah text, kemudian bagi 2)
var flashpause=1 // waktu jeda pergantian warna (1/1000 dtk)
var n=0
if (document.all||document.getElementById){document.write('<font color="'+bgsGR1color+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')}else
document.write(message)
function crossref(number){var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj}function neon(){if (n==0){for (m=0;m<message.length;m++)
crossref(m).style.color=bgsGR1color}
crossref(n).style.color=bgsGR2color
if (n>flashingletters-1) crossref(n-flashingletters).style.color=bgsGR3color 
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=bgsGR1color
if (n<message.length-1)
n++
else{n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return}}
function beginneon(){if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)}
beginneon()
</script>
</div> 

Catatan :

Ganti tulisan Selamat Datang Di Blog Ahmad Rifai Net yang ada di line 3 dengan tulisan yang teman mau. var flashingletters=19 - var flashingletters2=19 : pada link 8 & 9 . Ganti angka 19 dengan angka yang teman mau (Tips* hitung seluruh tulisan dan spasi yang teman masukkan pada line 3 (kode 1) atau line 5 (kode 2), kemudian bagi 2, setelah itu ganti angka 19 dengan hasil pembagian tadi.

 Selamat mencoba membuat text animasi tulisan berwarna & Semoga berhasil

Membuat Breadcrumb Di Blogger

Bagaimana Cara Bikin Navigasi Breadcrumb Di Blogger?

Sebelum saya teruskan menulis Cara Membuat Breadcrumb Di Blogger mungkin ada yang masih belum tahu apa itu Breadcrumb, jika masih belum tahu apa yang di maksud dengan breadcrumb silahkan ihat contohnya ada di blog ini, yang ada di atas judul artikel itu lo.

Okey mari kita mulai...

Cara Mudah Memasang Navigasi Breadcrumb Di Blogspot/Blogger

Langkah Pertama yang harus anda lakukan adalah login ke blogspot.com, kemudian Pilih menu Tata Letak(Layout) =>> Edit HTML, setelah anda berada di halaman Edit Html silahkan Centang bagian yang ada tulisanExpand Widget Templates.

Sekarang Cari Kode Ini

<b:includable id='post' var='post'>

Kemudian letakkan kode berikut tepat di bawah kode <b:includable id='post' var='post'> tadi:

<em>Browse: <a expr:href='data:blog.homepageUrl'>Home</a> / <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> / </b:if>
</b:loop>
</b:if> / <a expr:href='data:post.link'><data:post.title/></a></em>

Setelah itu silahkan simpan pengaturan template anda.

Catatan* Breadcrumb tersebut hanya akan terlihat di halaman artikel (post page) saja.

Itu adalah cara mudah Memasang Navigasi Breadcrumb Di Blogspot/Blogger, selain cara di atasa anda bisa juga menggunakan cara lain yaitu dengan menambahkan sedikit kode CSS di template blogger anda.

Cara Pasang Breadcrumb Di Blogger + Kode CSS

Sebenarnya cara ini hampir sama dengan cara pertama, naun perbedaannya adalah cara ini di sertai dengan kode css.

Silahkan ikuti langkah-langkah di atas, setelah anda sampai pada bagian Expand Widget Templates maka lanjutkan dengan tutorial berikut.

Cari kode ini ]]></b:skin>

Pasang kode CSS berikut tepat di atas kode ]]></b:skin> tadi

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

Kemudian cari kode <b:includable id='post' var='post'&gt
Setelah itu letakkan kode berikut tepat di bawah kode <b:includable id='post' var='post'> tadi:

<div class='breadcrumbs'>
Browse: <a expr:href='data:blog.homepageUrl'>Home</a> / <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> / </b:if>
</b:loop>
</b:if> / <a expr:href='data:post.link'><data:post.title/></a>
</div>

Kemudian silahkan simpan perubahan template anda dan silahkan cek di halaman artikel (post page) apakah Breadcrumb sudah ada.

Jika di saat anda menyimpan template timbul pesan eror atau perubahannya tidak bisa di simpan silahkan cek kembali pengaturannya apakah sudah sesuai atau belum dengan tutorial yang tertulis di sini.

Menambahkan Facebook Like Button Di Blogger

Hallo Teman...

Kali ini saya akan menuliskan panduan cara menambahkan Facebook 'Like' Button di blogger. Bagi siapa saja yang tertarik ingin menambahkan Facebook 'Like' Button di blog blogger tapi belum tahu bahaimana caranya silakan baca terus tutorial Cara Menambahkan Facebook Like Button ini, dan bagi teman-teman yang sudah tau caranya silakan koreksi, jika ada yang salah silakan di tegur ya...

Ok Langsung saja ...

Tutorial Cara Menambahkan Facebook Like Button Di Blogger

Seperti biasa, pertama silakan login dulu ke blogger

Setelah itu silakan klik Design / Rancangan / Tata Letak, kemudian klik bagian Edit Html

Cari Kode

]]></b:skin>

Letakkan kode berikut di atas ]]></b:skin> tadi

.fb_like_box {
-moz-border-radius:5px 5px 5px 5px;
border-radius:10px;
background:#f5f5f5;
border:1px dotted #ddd;
margin-bottom:10px;
padding:10px;
width:500px;
height:20px;
}

Penting Untuk Diketahui !!!

Silakan ganti kode yang saya beri warna merah (500) dengan ukuran lebar yang sesuai dengan template teman.

Simpan dulu dengan cara mengklik tombol Simpan / Save (Letakknya di bawah).
Beri centang pada pada bagian Expand Widget Templates. Jika belum tahu tempatnya silakan lihat di cara membuat auto read more di blogger

Masukkan kode berikut di bawah kode <data:post.body/>

<div class='fb_like_box'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like expr:href='data:post.url' font='' send='true' show_faces='false' width='400'/>
</div>

Sekarang silakan simpan kembali template anda dan silakan lihat hasilnya, apakah Facebook Like Button nya sudah terlihat.

Oh ia ...
Jika anda meninginkan Facebook Like Button nya terlihat di halaman posting saja silakan pasang kode yang ini, kode di atas tidak perlu di pasang.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb_like_box'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like expr:href='data:post.url' font='' send='true' show_faces='false' width='400'/>
</div>
</b:if>

Selamat Mencoba dan semoga berhasil ...