IRWAN'S BLOG: tips

Tampilkan postingan dengan label tips. Tampilkan semua postingan

cara membuat buku tamu di blog

Cara Membuat Buku Tamu Tersembunyi di Blog

Cara Membuat Buku Tamu Tersembunyi di Blog - Cara memasang buku tamu/guest book tersembunyi di blog atau cara agar buku tamu/guest book bisa tersembunyi di blog.

Buku tamu merupakan tempat untuk menaruh pesan singkat di blog anda ketika sedang ada yang berkunjung. Membuat buku tamu harus menggunakan jasa web yang menyediakan layanan buku tamu. Maksud dari judul tersembunyi disini bukan lah buku tamu yang tidak bisa dilihat oleh pengujung, tetapi buku tamu ini akan berada di sebelah artikel blog yang akan terbuka jika ada yang klik gambar buku tamu tersebut. Langkah ini merupakan salah satu langkah dalam menghemat tempat di blog kita.Buku tamu juga dapat menaikan trafic blog. Jika anda tertarik untuk membuat buku tamu tersembunyi ini, silahkan ikuti langkah berikut:

Sebelum anda membuat buku tamu di blog anda, anda harus memiliki kode buku tamu, anda bisa mendapatkannya

Selasa, 20 November 2012

cara membuat animasi pada judul blog

Cara Membuat Animasi Pada Judul Blog

Sebelum memulai posting ketawa dulu ah ... hahahahah ... ini tandanya senang Teman irwan ... hehehe, sebenarnya saya agak ragu-ragu memposting tentang hal ini Cara Membuat Animasi Pada Judul Blogkarena masih newbie banget .. masih hijau dalam dunia persilatan Blogger hehehe , karena baru beberapa bulan saya mengenal dunia persilatan bloger ini.

Nah buat Teman irwan ... ini script nya .. tinggal copy trus login ke blogger kemudian Tata Letak > Tambah Widget > Html/Java Script > pastekan script tersebut kemudian Simpan Template ... jadi deh, mudah kan ... hehehe, oh iya scriptnya di bawah ini ...

<script language="JavaScript">

</script>
<script language="JavaScript">

</script>

Jangan lupa Teman irwan tulisan yang warna kuning (Duniairwan) diganti ama judul blog nya atau apalah terserah Teman irwan aja deh ... mudah-mudahan ada mampaat nya untuk kita semua .. amin, selamat mencoba dan salam ....

cara membuat buku tamu di blog

Diposting oleh Irwanaris komentar (0)

Cara Membuat Buku Tamu Tersembunyi di Blog

Cara Membuat Buku Tamu Tersembunyi di Blog - Cara memasang buku tamu/guest book tersembunyi di blog atau cara agar buku tamu/guest book bisa tersembunyi di blog.

Sebelum anda membuat buku tamu di blog anda, anda harus memiliki kode buku tamu, anda bisa mendapatkannya

cara membuat animasi pada judul blog

Diposting oleh Irwanaris komentar (0)

Cara Membuat Animasi Pada Judul Blog

<script language="JavaScript">

</script>
<script language="JavaScript">

</script>

cara mengganti kursor pada blog

Diposting oleh Irwanaris komentar (0)

Cara Mudah Mengganti Cursor di Blog + Koleksi Cursor

Posted by Widget and Tutorial at 7:56 AM

Kali ini Widget and Tutorial bakal membagikan tutorial tentang cara mengganti kursor di blogspot. Caranya mudah kok. Langsung praktik aja yuk. Begini langkahnya :

Login blogger kamu
Masuk ke Dashboard >> Design >> Page Element
Add a gadget dan pilih HTML/JavaScript
Copy Paste kode di bawah ini

Kode 1 : Mengubah kursor tapi tidak mengubah ketika menyorot link

<style type="text/css">
body{cursor: url("http://dl8.glitter-graphics.net/pub/330/330658m8v492ivpa.gif"), auto;}
</style>

Kode 2 : Mengubah kursor walaupun saat menyorot link

<style type="text/css">body{cursor: url("http://dl8.glitter-graphics.net/pub/330/330658m8v492ivpa.gif"), auto;}body a:hover{cursor: url("http://dl8.glitter-graphics.net/pub/330/330658m8v492ivpa.gif"), auto;}</style>

Ganti tulisan yang berwarna ungu dengan link URL gambar kamu.

Berikut adalah link kursor koleksi saya (untuk mendapatkan link URL nya, klik kanan pada gambar >> Copy image URL) :

Cara membuat menu drop down pada blog

Diposting oleh Irwanaris komentar (0)

Cara Membuat Mega Drop Down Menu Dengan CSS

Ditulis Oleh Fajar Lesmana | Selasa, 09 Oktober 2012 | 21:10

Bosan dengan tampilan drop down menu biasa-biasa saja, pingin agak keren dan berkelas, coba menu mega drop down menu ini. Menu ini merupakan menu horizontal dimana menu drop down nya tidak seperti biasanya, melainkan sangat besar dan bercabang.

DEMO

1. Login ke blog kamu

2. Pilih Template > Edit HTML > Cari kode ]]></b:skin>

3. Setelah ketemu letakan kode CSS di bawah ini tepat di atas kode ]]></b:skin>

body, ul, li {
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
text-align:left;
}

/* Navigation Bar */

#menu {
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;

/* Rounded Corners */

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

/* Background color and gradients */

background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

/* Borders */

border: 1px solid #002232;

-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
float:left;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}

#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;

/* Background color and gradients */

background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

/* Rounded corners */

-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}

#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
padding-right:21px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyB12hKULpHLYOG1XUx2kSYZk3zYUmZACPtUK88-nthEHXnvaBW7grvMdVod1Q-7zNoqHB6SFDDEf7XCd_9KeEOh-myuTB10HNK5W08XGJ9VmXiWYH8pHXVK_7J9ZR7ZkTj8pO0gmw18hS/s1600/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyB12hKULpHLYOG1XUx2kSYZk3zYUmZACPtUK88-nthEHXnvaBW7grvMdVod1Q-7zNoqHB6SFDDEf7XCd_9KeEOh-myuTB10HNK5W08XGJ9VmXiWYH8pHXVK_7J9ZR7ZkTj8pO0gmw18hS/s1600/drop.png") no-repeat right 7px;
}

/* Drop Down */

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute !important;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;

/* Gradient background */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px ;
z-index:444 !important;
    top:auto;
}

/* Columns */

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

/* Right alignment */

#menu .menu_right {
float:right !important;
margin-right:0px;
}
#menu li .align_right {
/* Rounded Corners */
-moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}

/* Drop Down Content Stylings */

#menu p, #menu h2, #menu h3, #menu div li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}

#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
.imgshadow {
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;

/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

/* Shadow */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;

/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}

.tabs-inner .widget li a {
padding: 1px ;
display:block !important;
border: 1px solid transparent !important ;
}

Simpan.

4. Kembali ke menu Tata Letak > Add Gadget > Pilih HTML/JavaScript > Copy kode di bawah ini.

<div id='menu'>
<li><a class='drop' href='#'>Home</a>
<div class='dropdown_2columns'>
<div class='col_2'>
<h2>Welcome !</h2>
</div>
<div class='col_2'>
<p>Ini adalah menu denan Mega Drop Down menu. Cara membuatnya hanya menggunakan CSS tanpa JavaScript</p>
</div>
<div class='col_2'>
<h2>Cross Browser Support</h2>
</div>
<div class='col_1'>
<img alt='' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-AbYp4VHuoX1WUhPscHaTarK_Lnm2AF8vqtRrly_wCotehXdVP1bqV8mZVY3Bk3mKbevZnGj00RTe8UBKGn2DWjY9rVgwrU3yN4ZU5zu-PMMZqP8wBebs_2tPimHc9PLD_GFvvVgfsJSK/s1600/browsers.png' width='125'/>
</div>
<div class='col_1'>
<p>Mega Drop Down Menu ini telah diuji dan berhasil untuk semua browser.</p>
</div>
</div>
</li>
<li><a class='drop' href='#'>5 Columns</a>
<div class='dropdown_5columns'>
<div class='col_5'>
<h2>Ini adalah contoh untuk kolom 5</h2>
</div>
<div class='col_1'>
<p class='black_box'>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p class='italic'>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p class='strong'>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_5'>
<h2>Fitur Post Dengan Images</h2>
</div>
<div class='col_3'>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO0YQbwJtp48uVgwkkKzdiLfd18DPhyphenhyphen45gjNIOkgVENk22-LhukbzUn5M1bfqzHzOIA4Vr7d8vJ9NuyFhqmmyfN7rssb3Ho3uU-2XEy5SeA5SdF5xFFh0g3nKstjFVADOUwFfMJ1VtuUGi/s1600/01.jpg' width='70'/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p><br/>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI2F0IRGck6tqjUwqkO_InjOaZNM-BoLEIKZBq81lKnqcEHRFOkXfUNvHL9vS66dbAhLL6hj14VA4WrqZCRoBAcxGF9_QGneRobnFhDU6Gzf9j33TTJguw7V1-_Yg56NaEU8nomvy0WaFV/s1600/02.jpg' width='70'/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p>
</div>
<div class='col_2'>
<p class='black_box'>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
</div>
</li>
<li><a class='drop' href='#'>4 Columns</a>
<div class='dropdown_4columns'>
<div class='col_4'>
<h2>This is a heading title</h2>
</div>
<div class='col_1'>
<h3>Some Links</h3>
<ul>
<li><a href='#'>ThemeForest</a></li>
<li><a href='#'>GraphicRiver</a></li>
<li><a href='#'>ActiveDen</a></li>
<li><a href='#'>VideoHive</a></li>
<li><a href='#'>3DOcean</a></li>
</ul>
</div>
<div class='col_1'>
<h3>Useful Links</h3>
<ul>
<li><a href='#'>NetTuts</a></li>
<li><a href='#'>VectorTuts</a></li>
<li><a href='#'>PsdTuts</a></li>
<li><a href='#'>PhotoTuts</a></li>
<li><a href='#'>ActiveTuts</a></li>
</ul>
</div>
<div class='col_1'>
<h3>Other Stuff</h3>
<ul>
<li><a href='#'>FreelanceSwitch</a></li>
<li><a href='#'>Creattica</a></li>
<li><a href='#'>WorkAwesome</a></li>
<li><a href='#'>Mac Apps</a></li>
<li><a href='#'>Web Apps</a></li>
</ul>
</div>
<div class='col_1'>
<h3>Misc</h3>
<ul>
<li><a href='#'>Design</a></li>
<li><a href='#'>Logo</a></li>
<li><a href='#'>Flash</a></li>
<li><a href='#'>Illustration</a></li>
<li><a href='#'>More...</a></li>
</ul>
</div>
</div>
</li>
<li class='menu_right'><a class='drop' href='#'>1 Column</a>
<div class='dropdown_1column align_right'>
<div class='col_1'>
<ul class='simple'>
<li><a href='#'>FreelanceSwitch</a></li>
<li><a href='#'>Creattica</a></li>
<li><a href='#'>WorkAwesome</a></li>
<li><a href='#'>Mac Apps</a></li>
<li><a href='#'>Web Apps</a></li>
<li><a href='#'>NetTuts</a></li>
<li><a href='#'>VectorTuts</a></li>
<li><a href='#'>PsdTuts</a></li>
<li><a href='#'>PhotoTuts</a></li>
<li><a href='#'>ActiveTuts</a></li>
<li><a href='#'>Design</a></li>
<li><a href='#'>Logo</a></li>
<li><a href='#'>Flash</a></li>
<li><a href='#'>Illustration</a></li>
<li><a href='http://blazerracing.blogspot.com/'>Get This Menu</a></li>
</ul>
</div>
</div>
</li>
<li class='menu_right'><a class='drop' href='#'>3 columns</a>
<div class='dropdown_3columns align_right'>
<div class='col_3'>
<h2>Lists in Boxes</h2>
</div>
<div class='col_1'>
<ul class='greybox'>
<li><a href='#'>FreelanceSwitch</a></li>
<li><a href='#'>Creattica</a></li>
<li><a href='#'>WorkAwesome</a></li>
<li><a href='#'>Mac Apps</a></li>
<li><a href='#'>Web Apps</a></li>
</ul>
</div>
<div class='col_1'>
<ul class='greybox'>
<li><a href='#'>ThemeForest</a></li>
<li><a href='#'>GraphicRiver</a></li>
<li><a href='#'>ActiveDen</a></li>
<li><a href='#'>VideoHive</a></li>
<li><a href='#'>3DOcean</a></li>
</ul>
</div>
<div class='col_1'>
<ul class='greybox'>
<li><a href='#'>Design</a></li>
<li><a href='#'>Logo</a></li>
<li><a href='#'>Flash</a></li>
<li><a href='#'>Illustration</a></li>
<li><a href='#'>More...</a></li>
</ul>
</div>
<div class='col_3'>
<h2>Here are some image examples</h2>
</div>
<div class='col_3'>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI2F0IRGck6tqjUwqkO_InjOaZNM-BoLEIKZBq81lKnqcEHRFOkXfUNvHL9vS66dbAhLL6hj14VA4WrqZCRoBAcxGF9_QGneRobnFhDU6Gzf9j33TTJguw7V1-_Yg56NaEU8nomvy0WaFV/s1600/02.jpg' width='70'/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p><br/>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO0YQbwJtp48uVgwkkKzdiLfd18DPhyphenhyphen45gjNIOkgVENk22-LhukbzUn5M1bfqzHzOIA4Vr7d8vJ9NuyFhqmmyfN7rssb3Ho3uU-2XEy5SeA5SdF5xFFh0g3nKstjFVADOUwFfMJ1VtuUGi/s1600/01.jpg' width='70'/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p>
</div>
</div>
</li>
</div>

Perhatian
Ganti teks yang berwarna merah dengan kata-kata lainnya.

5. Simpan dan lihat hasilnya.

SEMOGA BERMANFAAT YACH.....

Cara membuat tulisan berputar di sekitar kursor

Diposting oleh Irwanaris komentar (0)

CARA MEMBUAT TULISAN BERPUTAR DI SEKITAR KURSORM PADA BLOG

Membuat tulisan yang berputar di sekitar kursor pada blog akan mempercantik blog kita, dapat memberi kesan yang lebih dari biasa, banyak hal cara yang dapat digunakan mempercantik blog kita. salah satunya akan di tulis di blog ini.
ini dia langkah - langkah dalam membuat tulisan berputar pada kursor
1. pertama login di blog kalian, kemuadian ke dasbor
2. pilih rancangan kemudian tata letak, tambah gadget
3. pilih HTML/Java script
4. kemudian masukan script di bawah ini

<style type="text/css">
        /* Oval Text Styles */
        #outerCircleText {
        /* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
        font-style: italic;
        font-weight: bold;
        font-family: 'GPL_Outline_Free';
        color: #696969;
        /* 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 Oval 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 = "pipit";

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

5. Selanjutnya sebelum menyimpan kalian bisa mengganti tulisan "pipit" dengan tulisan yang kalian inginkan.
6. Selesai, kalian bisa menyimpannya dan kemudian lihat hasil blog kalian

SEMOGA BERMANFAAT :)

buat menu drop down

Diposting oleh Irwanaris komentar (0)

Buat menu drop down

Berikut tutorialnya

Sebuah menu drop down diperlukan ketika anda memiliki konten yang cukup banyak. Ini dimaksudkan agar anda lebih mudah mengaturnya dan pengunjung blog andapun lebih leluasa memanfaatkannya. Dengan menu navigasi yang teratur dan cantik (drop down menu), akan membuat pengunjung blog menjadi lebih betah berlama-lama di blog anda. Berikut langkah-langkah yang harus dilakukan untuk membuat menu drop down:

1. 1. Menuju ke menu Blogger > Tata letak > Add Gadget

2. 2. Pilih Widget HTML/JavaScript, taruh widget tepat dibawah

<li>

</li>

<li>

<a href=' http://nagadygta26.blogspot.com/search/label/Biology '>Biology</a>

</li>

<li>

<ul>

<li><a href=' http://nagadygta26.blogspot.com/2012/11/tutorial-buat-blog.html '>Tutorial Blog</a></li>

<li><a href=' http://nagadygta26.blogspot.com/search/label/Widget%20Blog '>Widget Blog</a></li>

<li><a href=' http://nagadygta26.blogspot.com/search/label/Artikel%20Blog '>Artikel About Blog</a></li>

</ul></li>

<li>

<a href=' http://nagadygta26.blogspot.com/search/label/My%20Blog '>Contact Me</a>

<ul>

<li><a href=' http://www.facebook.com/fandydorksinaga'>Facebook</a></li>

<li><a href=’https://twitter.com/ry_putry'>Twitter</a></li>

<li><a href=' https://mail.google.com/mail/?shva=1#inbox '>Gmail</a></li>

</ul></li>

<li>

<a href=' # '>Bahan Ajar TIK</a>

<ul>

<li><a href=' http://nagadygta26.blogspot.com/search/label/Corel%20Draw'>Corel Draw</a>

<ul>

<li><a href='http://nagadygta26.blogspot.com/search/label/Materi%20Corel%20Draw'>Materi</a></li>

<li><a href=' http://nagadygta26.blogspot.com/search/label/Microsoft%20Excel'>Microsoft Excel</a>

<ul>

<li><a href='http://nagadygta26.blogspot.com/search/label/materi%20microsoft%20excel'>Materi</a></li>

<li><a href=' http://nagadygta26.blogspot.com/search/label/Microsoft%20Power%20Point'>Microsoft Power Point</a>

<ul>

<li><a href=' http://nagadygta26.blogspot.com/search/label/Materi%20Power%20Point'>Materi</a></li>

</li></li></li></ul></li>

</ul></div>

3. 3. Sekarang menuju menu Design/tata letak pada dashboard blog anda dan klik > Edit HTML

4. 4. Jangan lupa untuk mem-Backup template anda dan cari kode berikut (gunakan CTRL+F),

IRWAN'S BLOG

cara membuat buku tamu di blog

Cara Membuat Buku Tamu Tersembunyi di Blog

Selasa, 20 November 2012

cara membuat animasi pada judul blog

Cara Membuat Animasi Pada Judul Blog

cara membuat buku tamu di blog

Cara Membuat Buku Tamu Tersembunyi di Blog

cara membuat animasi pada judul blog

Cara Membuat Animasi Pada Judul Blog

cara mengganti kursor pada blog

Cara Mudah Mengganti Cursor di Blog + Koleksi Cursor

Cara membuat menu drop down pada blog

Cara Membuat Mega Drop Down Menu Dengan CSS

Ditulis Oleh Fajar Lesmana | Selasa, 09 Oktober 2012 | 21:10

Cara membuat tulisan berputar di sekitar kursor

Artikel Terkait:

buat menu drop down

About this blog

animasi

Followers

Mengenai Saya

About

Blog Archive

Blogger news

Blogroll

Blogger templates

menu my blog

Labels

Blogroll

Blog Archive