Cara Membuat Animasi Cursor Diikuti Teks Di Blog

Cara Membuat Animasi Cursor Diikuti Teks Di Blog merupakan lanjutan dari artikel sebelumnya yaitu Cara Membuat Tulisan Berjalan Di Blog,hampir sama tampilannya namun untuk yang satu ini sedikit berbeda yang mana teks akan selalu mengikuti arah cursor kemanapun cursor mengarah,cukup unik juga saya lihat tampilan ini jadi jangan sampai sobat tidak mencobanya animasi yang satu ini.

Meski telah banyak yang membahas tentang Cara Membuat Animasi Cursor Diikuti Teks Di Blog namun tidak ada salahnya saya sekedar mengingatkan kembali tentang animasi yang satu ini demi menyempurnakan artikel demi artikel yang saya buat.

Buat kalian yang penasaran nih dan ingin segera mencobanya silahkan perhatikan caranya di bawah ini.


1. Seperti biasa kalian harus login terlebih dahulu.
2. Pilih menu Tata Letak kemudian Add gadget kemudian pilihHTML/Javascript.
3. Copy script di bawah dan pastekan pada HTML/Javascript bagian konten.

<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'Cambria', verdana, arial;
color: #4acb35;
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 = "Silahkan Ganti Tulisan Ini";
/* 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>

Keterangan :

• Tulisan berwarna hijau adalah jenis hurup silahkan kalian ganti sesuai keinginan
• Tulisan berwarna merah adalah teks yang akan mengikuti arah cursor silahkan kalian ganti.

4. Setelah semuanya beres kemudian save dan lihat hasilnya.

Read More

Cara Mempercepat Loading Mozilla Firefox

Mozilla Firefox adalah web browser open-source yang dikembangkan untuk Windows, OS X dan Linux. Pertama kali dirilis pada tahun 2002, saat ini terdapat juga Firefox versi Android yang juga dengan cepat menjadi populer di kalangan pengguna mobile.
Berdasarkan informasi dari Wikipedia, saat ini Firefox memiliki pangsa pasar sebesar 18%-23% dari pengguna Internet di seluruh dunia. Menurut Mozilla sendiri, Firefox memiliki 450 juta pengguna dan meraih sukses khususnya di Indonesia, Jerman, Polandia dan Iran dimana Firefox dapat meraup pasar browser hingga 40%-50% di negara-negara tersebut.
Sebagai salah satu negara pengguna Firefox terbesar, sudah tentu banyak dari kamu yang menggunakan browser Firefox untuk menjelajah Internet. Nah, kali ini JalanTikus akan berbagi tips cara mempercepat loading Mozilla Firefox sehingga tidak lemot atau berat, atau membuat komputer blank/ hang.
Berikut ini adalah cara untuk mempercepat loading Firefox kamu :

• Jalankan browser Firefox kamu. Buat yang belum punya, download Firefox di JalanTikus.
• Ketikkan about:config pada address bar, kemudian tekan Enter.Selanjutnya akan muncul jendela dialog, klik tulisan “Saya berjanji akan berhati-hati” atau “I’ll be careful, I promise!”.
• Cari Key atau kata kunci dibawah ini untuk mengubahnya. Copy kata kunci/ key, kemudian Paste di kotak pencarian yang sudah disediakan, tekan Enter.Daftar Key atau kata kunci yang perlu di ubah agar loading Mozilla firefox jadi cepat:
  • network.http.pipelining ubah false menjadi true
  • network.http.proxy.pipelining ubah false menjadi true
  • network.dns.disableIPv6 ubah false menjadi true
  • network.http.max-connections ubah nilai nya jadi ‘64’
  • network.http.max-connections-per-server ubah nilai nya jadi ‘21’
  • network.http.max-persistent-connections-per-server ubah nilai nya jadi ‘8’
  • network.http.pipelining.maxrequests ubah nilai nya jadi ‘100’
  Klik Kanan Pada Area kosong, dan ikuti langkah di bawah ini :
  
  • Klik kanan - Pilih new - integer - Ketik "content.max.tokenizing.time" - Masukan dengan nilai "1000000"
  • Klik kanan - Pilih new - integer - Ketik "content.notify.interval" - Masukan dengan nilai "500000"
  • Klik kanan - Pilih new - integer - Ketik "content.notify.backoffcount" - Masukan dengan nilai "5"
  • Klik kanan - Pilih new - integer - Ketik "content.switch.threshold" - Masukan dengan nilai "500000"
  • Klik kanan - Pilih new -integer - Ketik "nglayout.initialpaint.delay" – Masukan dengan nilai "0"
  • Klik kanan - Pilih new - boolean - Ketik "content.interrupt.parsing" - Pilih "true" - Klik Oke
  • Klik kanan - Pilih new - boolean - Ketik "content.notify.ontimer" - Pilih "true" - Klik Oke
• Restart Firefox

Nah, itulah cara untuk mempercepat loading Firefox menjadi lebih cepat dan kamu bisa menikmati perbedaannya setelah berhasil diterapkan. Punya tips lain untuk meningkatkan kecepatan Firefox? Silakan share di kolom komentar dibawah.

Read More

Cara Memasang Logo Sekolah SIAP Padamu Negeri

Cara Memasang Logo Sekolah SIAP Padamu Negeri

Setiap operator sekolah Aplikasi Online SIAP PADAMU NEGERI wajib mengisi data rinci sekolah, termasuk memasang logo Sekolah. Berikut ini adalah langkah-langkah memasang Logo Sekolah di Aplikasi Online SIAP PADAMU NEGERI :

1. Login sebagai operator sekolah 
2. Klik menu Layanan Administrasi Sekolah
   
3. Klik tab menu Kelola Sekolah
   
4. Klik menu Profil, kemudian klik menu Lihat Info Sekolah
   
5. Kemudian akan tampil Info Sekolah, klik menu Edit Logo Sekolah diatas box Logo Sekolah
   

Read More

MEMBUAT BLOGROLL UNTUK DAFTAR LINK

Bagi para blog mungkin yang namanya blogroll itu adalah tampilan yang simpel, blogroll biasa nya banyak digunakan untuk meletakkan daftar link yang akan anda pasang , berisi postingan bahkan untuk memasang benner, tapi bagi semua yang belum tahu contohnya adalah seperti gambar dibawah ini.

-Pengendali Blog
-Pengendali Blog
-Pengendali Blog
-Pengendali Blog
-Pengendali Blog
-Pengendali Blog
-Pengendali Blog

Kenapa mesti ada Blogroll? Untuk saya pribadi :
1. Memudahkan saya melihat atau mengikuti update postingan sahabat tanpa harus repot login ke akun blogger.
2. Dengan Blogroll kita akan dibawa langsung ke link tujuan tanpa masuk ke beranda dan meng-klik readmore.
3. Kita lebih mudah berkunjung ke blog teman ataupun blog favorite kita.
4. Dari daftar blogroll yang kita miliki, kita dengan mudah berpindah dari blog satu ke blog lainnya. Tinggal pencet link yang ada.
5. Jika sobat mau menambahkan fungsi Blogroll ini silahkan di form komentar,hehehe.
<div style="border: 4px solid rgb(100, 100, 100); height: 100px; overflow: auto; text-align: left; width: 300px;">
-<a href="http://pengendali-blog.blogspot.com/" target="_blank">Pengendali Blog</a><br />
-<a href="http://pengendali-blog.blogspot.com/" target="_blank">Pengendali Blog</a><br />
-<a href="http://pengendali-blog.blogspot.com/" target="_blank">Pengendali Blog</a><br />
-<a href="http://pengendali-blog.blogspot.com/" target="_blank">Pengendali Blog</a><br />
-<a href="http://pengendali-blog.blogspot.com/" target="_blank">Pengendali Blog</a><br />
-<a href="http://pengendali-blog.blogspot.com/" target="_blank">Pengendali Blog</a><br />
-<a href="http://pengendali-blog.blogspot.com/" target="_blank">Pengendali Blog</a></div>
Keterangan:
>>Untuk tulisan yang saya tandai dengan warna merah itu adalah tinggi dari blogroll.
>>Untuk tulisan yang saya tandai dengan warna hijau itu adalah lebar dari blogroll.
>>Untuk tulisan yang saya tandai dengan warna biru itu adalah daftar link, ganti dengan link sahabat anda.
>>Dan untuk Tulisan yang saya tandai dengan warna orange itu adalah anchor text, ganti dengan judul blog sahabat anda.

Scrip Lain:

<div id="demo1" style="width:283px; height:150px; padding:8px; background:lightyellow; border:1px solid gray; resize:both; overflow:scroll">
<div style="background:#020D8A;"><font color="#FFFFFF"><b>TUTORIAL BLOG</b></font></div>

<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/multi-level-drop-down-dengan.html">1.MultiLevel Drop Down dengan jQuery</a><br />

<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-menu-dtree-di-blogger.html">2.Menu dTreedi Blogger</a><br />

<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/menu-horizontal-animasi-di-blog.html">3.Menu Horizontal Animasi di Blog</a><br />

<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/effect-jquery-link-nudging-di.html">4.Effect JQuery Link Nudging</a><br />

<div style="background:#020D8A;"><font color="#FFFFFF"><b>TUTORIAL LAIN</b></font></div>

<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/info-panel-slide-vertikal.html">5.Info Panel Slide Vertikal dengan jQuery</a><br />

<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-chatbox-slide-vertikal-dengan.html">6.Chatbox Slide Vertikal Dengan jQuery di Blog</a><br />

<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/daftar-isi-dengan-jquery.html">7.DaftarIsiDenganjQuery Accordion</a><br />

<a href="http://creatingwebsite-maskolis.blogspot.com/2011/01/slider-gambar-ala-drakon.html">8.Slider Gambar ala Drakon Template</a><br />

10.Translate Gambar Bendera di Blog<br />

<a href="http://creatingwebsite-maskolis.blogspot.com/2011/01/menu-navigasi-horisontal-dan.html">11.NavigasiHorisontaldanKotak Pencari </a><br />

<a href="http://creatingwebsite-maskolis.blogspot.com/2011/01/memasang-artikel-berlangganan-di-blog.html">12.ArtikelBerlangganan</a><br />

</div>

Itu saja cara cara yang saya berikan semoga bermanfaat dan dapat membantu kesulitan yang anda hadapi sekarang
sumber: http://pengendali-blog.blogspot.com

Read More

Membuat Efek Zoom Berputar Pada Gambar di Blog

Efek Zoom Berputar Pada Gambar. Berikut ini seocips akan membagikan tutorial seputar Blog yaitu tentang Cara membuat efek zoom berputar pada gambar di postingan blog Blogger. Tentunya seperti yang telah saya jelaskan di beberapa postingan terdahulu bahwa untuk membuat blog kita kelihatan lebih menarik maka kita dapat menambahkan efek pada gambar blog.

Keuntungan menggunakan efek seperti ini seperti yang sudah saya katakan diatas adalah untuk membuat tampilan blog kita menjadi kelihatan lebih menarik, efek ini akan terlihat ketika kursor mouse diarahkan pada gambar di postingan blog kita.

Seperti di artikel pada sebelumnya dimana saya telah membagikan tentang cara membuat efek rotasi pada gambar dengan CSS tanpa Jquery. Efek berikut ini juga sobat tidak perlu menggunakan jquery. Jika sobat tertarik dengan efek blog maka sobat dapat melihat artikel seperti wow slider with thumbnails atau juga image slider versi 6 dan animasi gelembung di blog. Untuk Live demo Efek Zoom Berputar adalah seperti pada gambar dibawah ini.

LIVE DEMO:

Untuk membuatnya berikut ini adalah Cara Membuat Efek Zoom Berputar Pada Gambar di Blog:

1) Masuk ke dashboard blogger lalu klik Template
2) Cari tag penutup ]]></b:skin> atau </style> ( kalau kode </style> ada lebih dari 1 silahkan coba dimana yang cocok). saran saya diatas kode ]]></b:skin>.
3) Pastekan CSS di bawah ini tepat di atas tag penutup ]]></b:skin> atau </style>

#seocips img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}
#seocips img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}

4) Untuk menerapkannya pada postingan blog contohnya adala kode di bawah ini, dalam mode HTML postingan.

<div id="seocips">
<div style="text-align: center;">
<a href="http://www.seocips.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn6tvullLY4U1Mdjk80rzSdN42OpY7RnSZdPmf8aCZqaZy83KduRCmXsXPcAZyZumvONpvFTFtBY6xjGZ6YE7dXC1mebCc1xbb0j5hRkZ-CURXdhdJV1Vgf4KR1GoQMv4W4wzQ3IMcjDU/s1600/Seocips-efect-blog.jpg" height="200" width="200" /></a></div>

Untuk kode berwarna merah diatas adalah url gambar, slihakan ganti dengan gambar yang sobat inginkan. sekarang tinggal sobat publikasikan artikel sobat dan lihat hasilnya pada gambar sobat. Nah sekian artikel untuk saat ini dan jangan lupa lihat artikel terbaru seocips yang lainnya atau follow blog ini untuk memudahkan sobat mendapatkan artikel terbaru dari www.seocips.com.

Read More