WAWABLOG: bloggers

Tampilkan postingan dengan label bloggers. Tampilkan semua postingan

Minggu, 25 November 2012

cara memasang animasi not di blog

sebekumnya trimakasih sudah berkunjung ke sini, baik kali ini "Belajar Bloger" akan memberi trik buat mempercantik blog anda dengan animasi widget di samping blog, lang ung aja ke tkp,, hhee sedikit ngwur mklum masih belajar..

pertama- tama
1. login dulu ke blogger anda.
2. selanjutnya klik Tata Letak
3. tambahkan widgate html/javascript
4. lalu masukan kode html javascript di bawah ini,

<div style="position: fixed; bottom: 0px; left: 2px;"><br /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="160" height="600" title="grab this widget @ widgetindex.blogspot" src="https://3715858991571922434-a-1802744773732722657-s-sites.googlegroups.com/site/widgetindex14/musicnote.swf" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>

5. lalu simpan/save
6. dan lihat hasilnya ,,traaa
blogger anda sekarang jadi sedikit lebih menarik dengan adanya animasi not yang berterbangan,,
7. jangan lupa pollow dan like nya ya ok..

selamat mencoba, semoga berhasil

Kamis, 22 November 2012

cara membuat arsip keren di blog

Kebayang ngak gan kalo dalam waktu 1 bulan kita memosting 30-50 postingan... >_< dengan blog archives kita belum di modifikasi menjadi blog archive menggunakan scroll, tentunya blog kita akan terlihat tersesaki dan banyak memakan tempat oleh ulah archive ini.

Lalu solusinya gimana yahh???
Nah, dengan memberi batasan tinggi pada widget blog arcive tersebut ini akan membuatnya lebih simpel dan tidak memakan ruang di sidebar, dan tentunya akan ada fasilitas scroll kebawah untuk melihat seluruh isi arsive blog tersebut.

Tips ini ane kasih cara dengan menambahkan kode css, karena lebih mudah Menggunakan Css Tanpa Harus mencari dan menambahkan kode div pada kode widget Archive Blog,
Okh langsung kita obrak abrik tuh blog hihi... Cekidot for me===>

Membuat Scroll Pada Archive Blog dengan CSS
1. Login ke blogger
2. Sebelumnya buat dulu widget Arsip Blog, yaitu dengan cara menuju ke Tata Letak >> Tambah Gadget >> Pilih Arsip Blog/Blog Archive.
3. Tapi jika sebelumnya sobat udah memasang widget/gadget Arsip Blog pada blog sobat, maka langkah nomer 2 dilewati saja.
4. setelah sesesai membuat widget arsip blognya, Langsung menuju halaman Template >> Edit HTML
5. Cari kode BlogArchive1 dengan menggunakan Ctrl + F, usahakan saat anda cari kode tersebeut harus ada, karena itu adalah ID dari widget yang kita edit, jadi pada CSS harus sama.

6. Setelah itu Cari kode ]]></b:skin>
Kemudian, letakkan kode berikut di atas kode ]]></b:skin>

#BlogArchive1 .widget-content{
height:250px;
width:auto;
overflow:auto;
}

Yang perlu agan perhatikan adalah :

BlogArchive1 adalah ID dari widget BlogArchive1.
height:250px; adalah tinggi dari widget Arsip Blognya. Ganti dengan ukuran tinggi yang anda inginkan

cara membuat logo indonesia di blog

hy gan,, coba lihat pojok kiri bawah blog saya ada kan logo INDONESIA naahh itu lah yang akan saya bahas pada posting kali ini
,,,,, ya itu cuma ungkapan rasa cinta kita pada indonesia,, dan agar apabila orang luar melihat blog kita mereka bisa tau bahwa indonesia juga bisa maju dalam teknologii

ko saya jadi ngawur ya hahahaaa, tapi ga apa apa ya yang penting indonesia bisa,

oke langsung saja LIHAT TUTORIAL BERIKUT

1.login blogger
2. masuk Rancangan/Design
3. > ELEMEN LAMAN
4. >add gadget
5.> HTML/java script

tinggal copas scriptnya sesuai gambar pilihan anda

1. I LOVE INDONESIA Pada pojok kanan atas

2. Logo Blogger Indonesia Pojok Kiri Atas

3. Logo Blogger Indonesia Pojok Kanan Atas

4. Logo Blogger Indonesia Pojok Kiri Bawah

5. Logo Blogger Indonesia Pojok Kanan Bawah

Cara Membuat Animasi Teks Mengikuti Kursor

Anda ingin membuat blog anda tampil menarik??? salah satunya yaitu dengan cara membuat animasi teks mengikuti kursor. Langsung aja dech kita ke pokok bahasan yaitu membuat animasi teks mengikuti kursor. Caranya adalah sebagai berikut:

1. Copy kode html/javascript di bawah ini!!!

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #66FF00;

/* End Optional */

/* Start Required - Do Not Edit */
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;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">

/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

;(function(){

// Your message here (QUOTED STRING)
var msg = "WaN'Ss OnE'Zz";

/* 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 = 24;

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

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

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

2. Buka blog anda lalu klik rancangan/tata letak
3. Terus pilih tambah gadget
4. Lalu pilih html/javascript
5. Setelah itu paste kode html/javascript di atas yang sudah diCopy tadi pada kolom konten
6. Dan jadi dech..... lalu lihat perubahannya. Pasti ada teks yang mengelilingi kursor/mouse anda

NB:

untuk merubah warna teks, anda tinggal ganti aja kode warna html nya dengan kode warna yang anda inginkan dengan cara mengganti kode warna yang berwarna hijau dengan kode warna yang anda inginkan.
untuk merubah kata yang mengelilingi kursor, maka ganti kata yang berwarna biru dengan kata yang anda inginkan.
untuk merubah ukuran hurufnya, anda tinggal ganti saja yang berwarna ungu dengan ukuran huruf yang anda inginkan.

Rabu, 21 November 2012

Cara membuat menu navigasi dropdown

di kesempatan ini mastony akan membahas bagaimana Cara membuat menu navigasi dropdown ( dengan anak menu/sub menu ) , Apa itu Menu Navigasi dropdown ..?Sebetulnya mastony sudah membahas pada postingan sebelumnya yaitu ..Cara membuat navigasi tanpa Dropdown .Namun kali ini ada sub menunya/anak menu.Navigasi Dropdownini sangat unik bila pointer mouse diarahkan pada induk menu ( menu yang di beri sub menu ) maka sub menu/anak menu akan jatuh kebawah .
Menu Navigasi di blog sangatlah penting untuk setiap pengunjung yang berkunjung ke blog kita,Sehingga dengan adanya menu navigasi pengunjung akan dengan mudah menemukan artikel - artikel dari blog kita,nah gimana ..?,sobat tertarik untuk membuat.
Berikut langkah - langkah sederhana ini :
1.Login ke blogger
2.Pilih Template >> Edit Html >> Cari cepat (CTRL+F ) Cari kode ]]></b:skin>
3.jika sudah Copy dan paste kode css berikut tepat sebelum/di atasnya kode ]]></b:skin>

#nav ,#nav ul{ list-style-type:none; margin:0; padding:0;width:auto;background:#008E00;;
height:auto;}
#nav li{list-style-type:none; margin:0; padding:0;float:left;position:relative;}
#nav li a{background:#008E00;color:#fff; text-align:center;  margin:0; padding:10px 12px 10px 12px;font-weight:bold;font-size:12px;font-famili:Georgia, Times New Roman, Arial;height:auto;display:block;text-shadow:0 1px 2px #000;text-decoration:none;}
#nav li a:hover,#nav ul li:hover a{background:#007D47; color:#fff; padding:10px 12px 10px 12px;text-decoration:none;}
#nav li li{float:none;width:170px;margin:0;padding:0;display:block;}
#nav li:hover li a{background:none;}
#nav li ul{z-index:200;
/*top:1em;
/*left:0;*/ height:auto;width:170px; margin:0; padding:0;position:absolute;display:none;}
#nav li:hover ul{display:block;}
#nav li ul a{background:#008E00;color:#fff; text-align:left;  margin:0; padding:8px 8px 8px 8px;font-weight:bold;font-size:12px;font-famili:Georgia, Times New Roman, Arial;height:auto;display:block;text-transform:capitalize;}
#nav li ul a:hover,#nav li ul li:hover a{background:#007D47; color:#fff;margin:0; padding:8px 8px 8px 8px;text-decoration:none;text-shadow:0 1px 2px #000;}

Jika sudah simpan Template sobat.Kemudian pilih Tata letak >> Add gadget >> Html/JavaScript >> lalu copy dan paste seperti Berikut :

<div id="nav">
<ul id="nav">
<li><a href="http://id-mastony.blogspot.com">
HOME</a></li>
<li><a href="http://id-mastony.blogspot.com/2012/07/about.html">ABOUT</a></li>
<li><a href="http://id-mastony.blogspot.com/2012/07/contak.html">CONTACT</a></li>
<li><a href="http://id-mastony.blogspot.com/2012/07/buku-tamu_13.html">BUKU TAMU</a></li>
<li><a href="http://draft.blogger.com/">CATEGORIES</a>
<ul><li><a href="http://id-mastony.blogspot.com/search/label/Postingan">Sub menu 1</a></li>
<li><a href="http://id-mastony.blogspot.com/search/label/Template">Sub menu 2</a></li>
<li><a href="http://id-mastony.blogspot.com/search/label/Tips%20Seo">Sub menu 3</a></li></ul></li>
</ul></div>

NOTE : untuk menambahkan sub menu/anak menu tinggal menambahkan dibawah <li> #Submenu </li>
Saya kira cukup sekian tentang Cara membuat menu navigasi dropdown di blog
Semoga bermanfaat bagi sobat ..

cara membuat efek meteor jatuh di blog

Cara Membuat Efek Meteor Jatuh.Yups.... kali ini akan share mengenai Cara Membuat Efek Meteor Jatuh.

.Yaah sekedar menambah koleksi TIPS BLOGGING saya, jadi langsung saya disini deh.....

Cara Membuat Efek Meteor Jatuh
1. login blog
2. rancangan -> add widget (HTML/JavaScript)
3. lalu masukkan kode dibawah ini

<script language="javascript">
nd_mode="meteor";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_top";
</script>
<script language="javascript" src="http://cayunkatel.googlecode.com/files/meteorjaruh.js">
</script>

4. simpan....

Cara Membuat Efek Hujan Rupiah di Blogmu

Gimana tertarik ? Mungkin kamu beranggapan kalau aku bohong! Tapi sejujurnya ini benar-benar sebuah trik untuk membuat blog kita (terutama di blogger) terus dihujani oleh lembaran-lembaran rupiah yang tak kunjung berhenti.
Membuat blog dihujani banyak uang?
Kenapa tidak? Kita tidak perlu banyak berusaha! Tiap blog kita dibuka oleh pengunjung, maka blog kamu secara otomatis akan langsung dihujani uang.

Ingin puluhan ribu Rupiah yang terus berjatuhan di blog anda?
Caranya sungguh mudah! Kamu tinggal memasukkan script ini di blog kamu!

1. Login di blogger kamu
2. Masuk ke tata letak
3. Klik dan pilih TAMBAH WIDGET
4. Nah, disitukan banyak menu. pilih dan klik HTML /JAVA SCRIPT
5. Copy dan paste kode dibawah ini :

<script src='http://yudhaime.googlecode.com/files/duit50000.js' type='text/javascript'></script>

6. Save

cara membuat efek kembang api di blog

Udah beberapa minggu ini saya belum mengupdate posting yang baru. Kebetulan karena ada kesempatan menulis, beberapa hari ke depan blog trik dan tips akan memberikan berbagai macam trik untuk membuat animasi pada blog sobat. Untuk kali ini kita akan membuat animasi yang manarik dan juga bisa menjadi inspirasi buat teman-teman blogger lainnya. Animasi yang akan kita buat yaitu efek kembang api pada blog. Jika sobat tertarik bagaimana tampilan dari animasi ini silahkan coba langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Carilah kode </body>
4. Paste kode dibawah ini diatas kode </body>

<script language="javascript" src="https://blogtrikdantips-blogspot.googlecode.com/files/fireworks1.js"></script>

5. Simpan template sobat dan lihat hasilnya

Jika sobat ingin membuat efek kembang api yang berbeda bisa dilihat langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan Gadjet lalu pilih HTML/Javascript
4. Masukkan kode dibawah ini:

<div style="position: fixed; bottom: 0px; right: 2px;"><br /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="160" height="600" title="grab this widget @ widgetindex.blogspot" src="http://5433001315082274311-a-1802744773732722657-s-sites.googlegroups.com/site/widgetindex/fireworks.swf" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>

5. Simpan gadjet sobat dan lihat hasilnya

Selamat mencoba!

WAWABLOG

Minggu, 25 November 2012

cara memasang animasi not di blog

Kamis, 22 November 2012

cara membuat arsip keren di blog

cara membuat logo indonesia di blog

Cara Membuat Animasi Teks Mengikuti Kursor

Rabu, 21 November 2012

Cara membuat menu navigasi dropdown

cara membuat efek meteor jatuh di blog

Cara Membuat Efek Hujan Rupiah di Blogmu

cara membuat efek kembang api di blog

Labels

Blog Archive

Popular Posts

Pages

About Me

Blogger news