Cara memberi lagu pada blog
lansung saja gan :
ini kode widget lagunya marron 5 (one more nigth)
<div style="text-align: center;"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://freewidget.info/izafullmusik/barat/5.8%20Maroon5_-_One_More_Night(www.fullmusik.net).swf" wmode="transparent" type="application/x-shockwave-flash" quality="high" title="Maroon 5 - one more night@fullmusik" width="180" height="60"></embed></div>
lagu ini mulai secara otomatis ketika blog di buka pengunjung
Tampilkan postingan dengan label BLOGGER. Tampilkan semua postingan
Tampilkan postingan dengan label BLOGGER. Tampilkan semua postingan
Senin, 22 April 2013
cara memberi fitur tv online pada blog
Cara memberi fitur tv online pada blog
pada membuat blog kita wajib memanjakan pengunjung dengan memberi fitur seperti tv online salah satunya . karena tv online yang saya akan posting kali ini, tv online no.1 di indonesia gan.
Langsung saja tanpa perlu panjang lebar langsung saja saya beri tahu caranya:
yang pertama tentu saja:
1.login ke blog anda.......
2.pergi ke dashbor
3.pilih Tata letak
4.klik add gadget
5.cari menu HTML/JAVASCRIPT kli....
6.beri judul widget ini terserah anda gan...
7. copy paste kode di bawah ini
<embed allowfullscreen="true" allowscriptaccess="sameDomain" bgcolor="#ffffff" devicefont="false" menu="true" name="MivoTV" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" scale="noscale" scroll="manual" src="http://id.imediabiz.com/MivoTV.swf?r=%27%20+%20Math.round%28Math.random%28%29%20*%2099999%29%20+%20%27" type="application/x-shockwave-flash" wmode="transparent" width="610" align="top" height="950"></embed>
8.selamat mencoba gan.....
9.bila ingin melihat contohnya klik disini
1 ini ada yang lain : cara memberi lagu pada blog secara otomatis ketika
blog di buka pengunjung langsung saja klik disini
2 ini ada juga widget helikopter gan...... klik disini
by:angga saputra
cara memberi animasi naruto vs sasuke pada blog
Cara memberi animasi naruto vs sasuke sangatlah mudah
langkah pertama:
1.tentunya login dulu ke blog anda
2.masuk ke dashbor blog
3.pilih tata letak
4.add gadget
5.pilih HTML/JAVASCRIP
6.beri judul pada widget burung ini (terserah anda)
7.paste kode widget di bawah ini
<div style="position: fixed; bottom: 0px; right: 20px;width:110px;height:80px;"><a href="http://dapur-tutorial.blogspot.com/2012/10/pasang-widget-animasi-naruto-vs-sasuke-di-blog.html"target="_blank" rel="dofollow"><img src="http://i1210.photobucket.com/albums/cc417/kusanagiblog/NarutoVSSasuke.gif"alt="gambar"title="Widget Naruto VS Sasuke"/></a></div>
8.selamat mencoba
by:angga saputra
langkah pertama:
1.tentunya login dulu ke blog anda
2.masuk ke dashbor blog
3.pilih tata letak
4.add gadget
5.pilih HTML/JAVASCRIP
6.beri judul pada widget burung ini (terserah anda)
7.paste kode widget di bawah ini
<div style="position: fixed; bottom: 0px; right: 20px;width:110px;height:80px;"><a href="http://dapur-tutorial.blogspot.com/2012/10/pasang-widget-animasi-naruto-vs-sasuke-di-blog.html"target="_blank" rel="dofollow"><img src="http://i1210.photobucket.com/albums/cc417/kusanagiblog/NarutoVSSasuke.gif"alt="gambar"title="Widget Naruto VS Sasuke"/></a></div>
8.selamat mencoba
by:angga saputra
Animasi burung pada blog
Cara memberi animasi burung pada blog sangatlah mudah
langkah pertama :
1.tentunya login dulu ke blog anda
2.masuk ke dashbor blog
3.pilih tata letak
4.add gadget
5.pilih HTML/JAVASCRIP
6.beri judul pada widget burung ini (terserah anda)
7.paste kode widget di bawah ini
<div style="height: 160px; left: 10px; position: fixed; top: 0px; width: 225px;">
<a href="http://www.blogger.com/blogger.g?blogID=3028178608232332388" target="_blank"><img alt="animasi blog" src="http://i567.photobucket.com/albums/ss114/fatiasa/bird_ann.gif" title="Click to get more." /></a></div>
8.selamat mencoba.......
by:angga saputra
langkah pertama :
1.tentunya login dulu ke blog anda
2.masuk ke dashbor blog
3.pilih tata letak
4.add gadget
5.pilih HTML/JAVASCRIP
6.beri judul pada widget burung ini (terserah anda)
7.paste kode widget di bawah ini
<div style="height: 160px; left: 10px; position: fixed; top: 0px; width: 225px;">
<a href="http://www.blogger.com/blogger.g?blogID=3028178608232332388" target="_blank"><img alt="animasi blog" src="http://i567.photobucket.com/albums/ss114/fatiasa/bird_ann.gif" title="Click to get more." /></a></div>
8.selamat mencoba.......
by:angga saputra
Kamis, 11 April 2013
Cara Membuat Menu Navigasi
Cara Membuat Menu Navigasi Horisontal Bercabang / Drop Down Menu
Template default bawaan blogger biasanya minim sekali dengan
widget-widget termasuk menu navigasi. Terkecuali jika kita mendownload
sendiri template dari blog lain. Menu navigasi penting artinya untuk
meningkatkan kunjungan ke blog kita, walaupun masih ada cara lain
seperti menambahkan label, recent posts, related posts ataupun popular
posts di blog kita. Menu navigasi biasanya terdiri dua macam; vertikal
dan horisontal. Menu navigasi Vertikal atau menu navigasi lurus ke atas
biasanya diletakkan di sidebar, sedangkan menu navigasi horisontal kita
letakkan di atas judul posting atau di bawah header/judul blog.
menu navigasi horizontal bercabang |
Membuat menu navigasi bisa dilakukan dengan berbagai cara, bisa
memasukkan kode css ke dalam template, ini permanen tentunya, dan cara
yang kedua cukup menambahkan widget dengan memasukkan kode tertentu ke
dalam widget/gadget tersebut. Pada tutorial ini saya akan membuat menu
navigasi horizontal dengan cara yang cukup mudah yang letaknya di bawah
header.
Oke langsung saja bagaimana cara membuat menu navigasi horisontal bercabang,
Masuk ke akun blogger> Dasbor > tata letak > Tambahkan gadget
> pilih HTML/Javascript, kemudian masukkan kode berikut ini. (Jangan
lupa saat menambahkan gadget, pilih gadget yang di bawah header.)
add menu navigasi |
<style>
#menunavigasihorisontal {
background: #848484;
width: 100%;
color: #FFF;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px; }
#bb2nav {
margin: 0;
padding: 0;}
#bb2nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;}
#bb2navli {
list-style: none;
margin: 0;
padding: 0;}
#bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
color: #FFF;
display: block;
font:bold 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 11px 12px;
text-decoration: none;
border-right:0px solid #627AAD;}
#bb2nav li a:hover, #bb2nav li a:active {
background: #2E9AFE;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 11px 12px;}
#bb2nav li {
float: left;
padding: 0;}
#bb2nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;}
#bb2nav li ul a {
width: 140px;}
#bb2nav li ul ul {
margin: -25px 0 0 161px;}
#bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav
li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
left: -999em;}
#bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li
li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav
li li li.sfhover ul {
left: auto;}
#bb2nav li:hover, #bb2nav li.sfhover {
position: static;}
#bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 1px 0 0 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
-moz-border-radius:4px;
-webkit-border-radius:4px;}
#bb2nav li li a:hover, #bb2nav li li a:active {
background: #627AAD;
color: #FFF;
display: block;}
#bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li
a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
margin: 1px 0 0 -14px;}
#bb2nav li li li a:hover, #bb2nav li li li a:active {
background: #627AAD;
color: #FFF;
display: block;}
</style>
<div id='menunavigasihorisontal'>
<ul id='bb2nav'>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>Tentang Saya</a>
</li>
<li>
<a href='#'>Contact</a>
<ul>
<li><a href='#'>Sub Halaman 1</a></li>
<li><a href='#'>Sub Halaman 2</a></li>
<li><a href='#'>Sub Halaman 3</a></li>
</ul>
</li>
<li>
<a href='#'>Daftar Isi ▼</a> <ul>
<li><a href='http://anggaputras.blogspot.com/'>Sub Menu 1</a></li>
<li><a href='http://anggaputras.blogspot.com/'>Sub Menu 2</a></li>
<li><a href='http://anggaputras.blogspot.com/'>Sub Menu 3</a>
<ul>
<li><a href='#'>Sub Sub Menu 1</a></li>
<li><a href='#'>Sub Sub Menu 2</a></li>
<li><a href='#'>Sub Sub Menu 3</a></li>
</ul>
</li>
</ul> </li>
</ul>
</div>
</div>
Pengaturan dan modifikasi;
1. Silahkan ubah warna background menu sesuai selera ditandai dengan kode seperti #2E9AFE
2. Untuk membuang cabang yang tidak dibutuhkan (mungkin terlalu banyak lihat kode berwarna biru
<ul>bisa juga sobat tambahkan di item menu lainnya jika ingin.
<li><a href='#'>Sub Sub Menu 1</a></li>
<li><a href='#'>Sub Sub Menu 2</a></li>
<li><a href='#'>Sub Sub Menu 3</a></li>
</ul>
3. Masukkan alamat halaman atau postingan blog yang dikehendaki pada kode # .
4. Perhatikan kode-kode yang sudah diberi warna saat menambah atau membuang item menu tertentu agar tidak error.
Oke saya kira sudah cukup jelas dan mudah, untuk live demo silahkan buka di sini
Selamat mencoba.
Update:
Buat sobat yang bermasalah saat memasang di elemen header cari kode berikut ini (warna merah):
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Sample Blog (Header)' type='Header'>
<b:includable id='main'>
ganti 1 menjadi 3 no menjadi yes sehingga menjadi seperti ini.
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>Setelah itu pindahkan kode HTML/javascriptnya diatas atau di bawah elemen header.
Buka juga CSS 3 drop down menu navigasi yang saya pakai ini
Rabu, 10 April 2013
Cara Membuat Menu Navigasi
Cara Membuat Menu Navigasi Horisontal Bercabang / Drop Down Menu
oke gan slahkan saja baca artikel terbaru
cara membantu agan semua baik lansung saja baca
Oke langsung saja bagaimana cara membuat menu navigasi horisontal bercabang,
<style>
#menunavigasihorisontal {
background: #848484;
width: 100%;
color: #FFF;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px; }
#bb2nav {
margin: 0;
padding: 0;}
#bb2nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;}
#bb2navli {
list-style: none;
margin: 0;
padding: 0;}
#bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
color: #FFF;
display: block;
font:bold 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 11px 12px;
text-decoration: none;
border-right:0px solid #627AAD;}
#bb2nav li a:hover, #bb2nav li a:active {
background: #2E9AFE;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 11px 12px;}
#bb2nav li {
float: left;
padding: 0;}
#bb2nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;}
#bb2nav li ul a {
width: 140px;}
#bb2nav li ul ul {
margin: -25px 0 0 161px;}
#bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav
li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
left: -999em;}
#bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li
li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav
li li li.sfhover ul {
left: auto;}
#bb2nav li:hover, #bb2nav li.sfhover {
position: static;}
#bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 1px 0 0 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
-moz-border-radius:4px;
-webkit-border-radius:4px;}
#bb2nav li li a:hover, #bb2nav li li a:active {
background: #627AAD;
color: #FFF;
display: block;}
#bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li
a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
margin: 1px 0 0 -14px;}
#bb2nav li li li a:hover, #bb2nav li li li a:active {
background: #627AAD;
color: #FFF;
display: block;}
</style>
<div id='menunavigasihorisontal'>
<ul id='bb2nav'>
<li>
<a href='http://anggaputras.blogspot.com/'>HOME</a>
</li>
<li>
<a href='http://anggaputras.blogspot.com/2013/03/blog-post.html'>TENTANG SAYA</a>
</li>
<li>
<a href='http://anggaputras.blogspot.com/2013/03/terimakasih-for-visitor.html'>KONTAK KE▼</a>
<ul>
<li><a href='http://anggaputras.blogspot.com/2013/03/e-mail-blog-ini.html'>E-Mail</a></li>
<li><a href='http://anggaputras.blogspot.com/2013/03/nohandphone-blog-ini.html'>No. Handphone</a></li>
<li><a href='https://www.facebook.com/aden.udinudin?ref=tn_tnmn'>Add to facebook</a></li>
</ul>
</li>
<li>
<a href='http://anggaputras.blogspot.com/'>MY BLOG ▼</a> <ul>
<li><a href='http://anggaputras.blogspot.com/search/label/Religious'>RELIGIOUS</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/film'>FILM</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/download'>DOWNLOAD</a>
<ul>
<li><a href='http://anggaputras.blogspot.com/search/label/berita%20olah%20raga'>BERITA OLAH RAGA</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/Berita%20Selebrity'>BERITA SELEBRITY</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/GAME'>GAME ONLINE</a></li>
</ul>
</li>
</ul> </li></ul>
</div>
<a href='http://anggaputras.blogspot.com/'></a> <ul>
<li><a href='http://anggaputras.blogspot.com/search/label/berita%20olah%20raga'>BERITA OLAH RAGA</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/Berita%20Selebrity'>BERITA SELEBRITY</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/LEGENDA'>LEGENDA</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/dua%20dunia%20videos%20full'>DUA DUNIA VIDEOS FULL</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/GAME'>GAME ONLINE</a>
<li><a href='http://anggaputras.blogspot.com/search/label/Klasemen%20Liga'>KLASEMEN LIGA :ISL,SPANYOL,SERIE A,ENGLAND DAN JADWAL PERTANDINGAN+HASIL PERTANDINGAN</a>
<ul>
<li><a href='http://anggaputras.blogspot.com/search/label/Hiburan'>HIBURAN</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/kabar%20dari%20timnas'>KABAR TIMNAS</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/NEWS'>NEWS</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/Cerita'>CERITA</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/Ilmu'>ILMU</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/Sastra'>SASTRA</a></li>
</ul>
</li>
</li></ul>
<ul>
<li><a href='http://anggaputras.blogspot.com/search/label/Trick%20dan%20tips'>TRICK DAN TIPS</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/Kabar%20ISL'>KABAR ISL</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/Gokil-Gokilan'>GOKIL-GOKILAN</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/TV%20online'>TV ONLINE</a></li>
</ul>
bisa juga sobat tambahkan di item menu lainnya jika ingin.
3. Masukkan alamat halaman atau postingan blog yang dikehendaki pada kode # .
4. Perhatikan kode-kode yang sudah diberi warna saat menambah atau membuang item menu tertentu agar tidak error.
Oke saya kira sudah cukup jelas dan mudah, untuk live demo silahkan buka di sini
Selamat mencoba.
Template default bawaan blogger biasanya minim sekali dengan
widget-widget termasuk menu navigasi. Terkecuali jika kita mendownload
sendiri template dari blog lain. Menu navigasi penting artinya untuk
meningkatkan kunjungan ke blog kita, walaupun masih ada cara lain
seperti menambahkan label, recent posts, related posts ataupun popular
posts di blog kita. Menu navigasi biasanya terdiri dua macam; vertikal
dan horisontal. Menu navigasi Vertikal atau menu navigasi lurus ke atas
biasanya diletakkan di sidebar, sedangkan menu navigasi horisontal kita
letakkan di atas judul posting atau di bawah header/judul blog.
menu navigasi horizontal bercabang |
Membuat menu navigasi bisa dilakukan dengan berbagai cara, bisa
memasukkan kode css ke dalam template, ini permanen tentunya, dan cara
yang kedua cukup menambahkan widget dengan memasukkan kode tertentu ke
dalam widget/gadget tersebut. Pada tutorial ini saya akan membuat menu
navigasi horizontal dengan cara yang cukup mudah yang letaknya di bawah
header.
Oke langsung saja bagaimana cara membuat menu navigasi horisontal bercabang,
Masuk ke akun blogger> Dasbor > tata letak > Tambahkan gadget
> pilih HTML/Javascript, kemudian masukkan kode berikut ini. (Jangan
lupa saat menambahkan gadget, pilih gadget yang di bawah header.)
add menu navigasi |
<style>
#menunavigasihorisontal {
background: #848484;
width: 100%;
color: #FFF;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px; }
#bb2nav {
margin: 0;
padding: 0;}
#bb2nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;}
#bb2navli {
list-style: none;
margin: 0;
padding: 0;}
#bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
color: #FFF;
display: block;
font:bold 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 11px 12px;
text-decoration: none;
border-right:0px solid #627AAD;}
#bb2nav li a:hover, #bb2nav li a:active {
background: #2E9AFE;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 11px 12px;}
#bb2nav li {
float: left;
padding: 0;}
#bb2nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;}
#bb2nav li ul a {
width: 140px;}
#bb2nav li ul ul {
margin: -25px 0 0 161px;}
#bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav
li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
left: -999em;}
#bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li
li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav
li li li.sfhover ul {
left: auto;}
#bb2nav li:hover, #bb2nav li.sfhover {
position: static;}
#bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 1px 0 0 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
-moz-border-radius:4px;
-webkit-border-radius:4px;}
#bb2nav li li a:hover, #bb2nav li li a:active {
background: #627AAD;
color: #FFF;
display: block;}
#bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li
a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
margin: 1px 0 0 -14px;}
#bb2nav li li li a:hover, #bb2nav li li li a:active {
background: #627AAD;
color: #FFF;
display: block;}
</style>
<div id='menunavigasihorisontal'>
<ul id='bb2nav'>
<li>
<a href='http://anggaputras.blogspot.com/'>HOME</a>
</li>
<li>
<a href='http://anggaputras.blogspot.com/2013/03/blog-post.html'>TENTANG SAYA</a>
</li>
<li>
<a href='http://anggaputras.blogspot.com/2013/03/terimakasih-for-visitor.html'>KONTAK KE▼</a>
<ul>
<li><a href='http://anggaputras.blogspot.com/2013/03/e-mail-blog-ini.html'>E-Mail</a></li>
<li><a href='http://anggaputras.blogspot.com/2013/03/nohandphone-blog-ini.html'>No. Handphone</a></li>
<li><a href='https://www.facebook.com/aden.udinudin?ref=tn_tnmn'>Add to facebook</a></li>
</ul>
</li>
<li>
<a href='http://anggaputras.blogspot.com/'>MY BLOG ▼</a> <ul>
<li><a href='http://anggaputras.blogspot.com/search/label/Religious'>RELIGIOUS</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/film'>FILM</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/download'>DOWNLOAD</a>
<ul>
<li><a href='http://anggaputras.blogspot.com/search/label/berita%20olah%20raga'>BERITA OLAH RAGA</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/Berita%20Selebrity'>BERITA SELEBRITY</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/GAME'>GAME ONLINE</a></li>
</ul>
</li>
</ul> </li></ul>
</div>
<a href='http://anggaputras.blogspot.com/'></a> <ul>
<li><a href='http://anggaputras.blogspot.com/search/label/berita%20olah%20raga'>BERITA OLAH RAGA</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/Berita%20Selebrity'>BERITA SELEBRITY</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/LEGENDA'>LEGENDA</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/dua%20dunia%20videos%20full'>DUA DUNIA VIDEOS FULL</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/GAME'>GAME ONLINE</a>
<li><a href='http://anggaputras.blogspot.com/search/label/Klasemen%20Liga'>KLASEMEN LIGA :ISL,SPANYOL,SERIE A,ENGLAND DAN JADWAL PERTANDINGAN+HASIL PERTANDINGAN</a>
<ul>
<li><a href='http://anggaputras.blogspot.com/search/label/Hiburan'>HIBURAN</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/kabar%20dari%20timnas'>KABAR TIMNAS</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/NEWS'>NEWS</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/Cerita'>CERITA</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/Ilmu'>ILMU</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/Sastra'>SASTRA</a></li>
</ul>
</li>
</li></ul>
<ul>
<li><a href='http://anggaputras.blogspot.com/search/label/Trick%20dan%20tips'>TRICK DAN TIPS</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/Kabar%20ISL'>KABAR ISL</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/Gokil-Gokilan'>GOKIL-GOKILAN</a></li>
<li><a href='http://anggaputras.blogspot.com/search/label/TV%20online'>TV ONLINE</a></li>
</ul>
bisa juga sobat tambahkan di item menu lainnya jika ingin.
3. Masukkan alamat halaman atau postingan blog yang dikehendaki pada kode # .
4. Perhatikan kode-kode yang sudah diberi warna saat menambah atau membuang item menu tertentu agar tidak error.
Oke saya kira sudah cukup jelas dan mudah, untuk live demo silahkan buka di sini
Selamat mencoba.
Klik
Kamis, 28 Maret 2013
Cara membuat tulisan mengikuti arah cursor
1.login blogger
2.Tata letak/layout
3.Tambah Gadget
4.HTML/Java Script
5.Copy Paste kode di bawah ini
<style type="text/css">
/* Circle Text Styles */
/*http://www.dynamicdrive.com/dynamicindex13/circletext.htm */
#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: #000;
/* 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 = "WELCOME TO MY BLOG";
/* 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>
6.Selesai
catatan: tulisan yang berwarna merah ganti tulisa yang anda inginkan
2.Tata letak/layout
3.Tambah Gadget
4.HTML/Java Script
5.Copy Paste kode di bawah ini
<style type="text/css">
/* Circle Text Styles */
/*http://www.dynamicdrive.com/dynamicindex13/circletext.htm */
#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: #000;
/* 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 = "WELCOME TO MY BLOG";
/* 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>
6.Selesai
catatan: tulisan yang berwarna merah ganti tulisa yang anda inginkan
Selasa, 19 Maret 2013
WIDGET HELIKOPTER
<a href="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="Click to get more." /></a><small></small><br />
<center>
<small><a href="http://christiantatelu.blogspot.com/" target="_blank">Animasi Blog</a></small></center>
</div>
Langganan:
Postingan (Atom)
Cari Blog Ini
SELECT YOUR LANGUAGE
like box facebook
Jam Real Madrid (bagi penggemar madrid)
sms free
Halaman |
|