CARA MEMBUAT WIDGET STATUS TWITTER DI BLOG
Demo hasil widget dapat sobat lihat pada screenshoot diatas dan scriptnya dapat langsung dicopy aja terus pasang di sidebar blog sobat dan jangan lupa ganti username twitternya.
<div style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnJ5ZzhDwwM00uX8Yd73hkimiqbaUbsPolzEIeEw7Xfid6vaXFt6aAvqZa469yFADykNJnYDOxG8ciztzTFPHhQfp73vETWSVQxsYIRLuXaKb6enF1Ys8eTcU9LfCVscSCzbmjemW23Q1q/s1600/tweet.png) no-repeat;padding-top:45px;padding-left:8px">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 10,
interval: 3000,
width: 285,
height: 123,
theme: {
shell: {
background: 'transparent',
color: '#000000'
},
tweets: {
background: 'transparent',
color: '#000000',
links: '#135a9e'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'default'
}
}).render().setUser('rayhanzhampiet').start();
</script>
</div>
<br />
<div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&
align=&button=blue&id=twitter_tweet_button_0&
lang=en&link_color=&screen_name=rayhanzhampiet&show_count=&
show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe> </div>
Simpan dan lihat hasilnya.
CARA MEMBUAT EFEK GAMBAR TRANSPARAN
Kali ini saya akan memberi trik untuk membuat efek pada gambar. Efek ini dikenal dengan nama mouse over efek on image.....atau efek mouse pada gambar.
Anda berminat. Ikuti langkah dibawah ini:
1. Login ke blogger
2. Ketika anda sedang memposting masukan kode ini.
<img src="Masukkan URL Gamabar Anda Disini" style="opacity:0.2;filter:alpha(opacity=40)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
3. Masukan url anda pada tulisan berwarna merah!! efeknya akan terlihat dari redup menjadi cerah..
Selamat mencoba..
Anda berminat. Ikuti langkah dibawah ini:
1. Login ke blogger
2. Ketika anda sedang memposting masukan kode ini.
<img src="Masukkan URL Gamabar Anda Disini" style="opacity:0.2;filter:alpha(opacity=40)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
3. Masukan url anda pada tulisan berwarna merah!! efeknya akan terlihat dari redup menjadi cerah..
Selamat mencoba..
CARA MEMBUAT MENU POP UP SELAMAT DATANG PADA BLOG
Kali ini ita akan belajar tutorial bagaimana membuat pop up selamat datang pada blog. Pop up atau jendela munculan akan nampak apabila anda berkunjung ke blog. Anda bisa memodifikasi pop up ini dengan gambar, pesan untuk subscribe, dan lain sebagainya. Pop up ini dibuat oleh wierd walker untuk mempercantik dan menambah efek pada blog anda. Jika anda tertarik untuk membuatnya ikuti langkahnya dibawah ini:
1. Masuk ke Rancangan --> Edit HTML
2. Carilah kode </head>
3. Letakkan kode dibawah ini diatas kode </head>
<script type="text/javascript" src="<span style="color: red; margin: 0px; padding: 0px;">http://wierdwalker.googlecode.com/files/leightbox.js</span>"></script>
<script type="text/javascript" src="<span style="color: red; margin: 0px; padding: 0px;">http://wierdwalker.googlecode.com/files/prototype.js</span>"></script>
4. Masuk lagi ke Rancangan - Edit Laman
5. Tambahkan gadget lalu pilih HTML/Javascript
6. Masukkan kode berikut ini pada gadget tersebut
<!-- Welcome page Start by http://blogtrikdantips.blogspot.com/ -->
<style>a.lbAction {
padding: 0 3px;
text-decoration: none;
float: right;
position: absolute;
top: -20px;
right: -20px;
color: #000000;
border: 5px solid #000000;
background: #CCCCCC;
z-index: 102;
}
a.lbAction:hover {
background: #FFFFFF;
}
a.lbAction:active {
background: #999999;
}
div.leightbox {
color: #333;
display: none; /* toggle display to show/hide the popups when designing & previewing */
position: absolute;
top: 50%;
left: 50%;
margin: -250px 0 0 -200px;
width: 500px;
height: 400px;
padding: 0;
border: 1em solid #000000;
background: #FFFFFF;
z-index: 101;
overflow: none;
}
div.scrollbox {
margin: 0 auto;
width: 100%;
height: 100%;
text-align: left;
overflow: auto;
}
.scrollbox h1{text-align: center;}
.scrollbox p{text-align: center;}
.scrollbox img{float:left;margin:0px 0px 0xp 10px;}
div#overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color:#000000;
-moz-opacity: 0.80;
opacity: .80;
filter: alpha(opacity=80);
}
div.lightbox[id]{ position:fixed; }
div#overlay[id]{ position:fixed; }
</style><div style="padding-top:15px;">
<a id="EPEntryButton" onclick="document.getElementById("HTML88").style.display="none";document.getElementById("Text88").style.display="none"">ENTER</a>
</div>
<div id="EPGrab"><a href=" http://danisatya.blogspot.com/" target="_blank">Make your own</a></div>
<div id="EPDarkLayer"></div>
<!-- CSS part -->
<style>
#welcome-wrapper{width:40%;margin:0 auto;height:0px;text-align:center;}
/* welcome message widget */
#Text88, #EPEntryButton, #EPGrab {position:relative;z-index:510;top:100px;}
#Text88 {background-color:#fff;border:solid 10px orange;color:#222;display:none;padding:15px;}
#HTML88 {z-index:499;display:none;}
/* DarkLayer div */
#EPDarkLayer {background-color:#000;opacity:0.6;filter:alpha(opacity=60);top:0px;left:0px;z-index:500;position:fixed;}
/* Entry button */
#EPEntryButton {background-color:lawngreen;border:outset 3px #000;color:#333;cursor:pointer;font-size:25px;padding:5px;text-decoration:none;}
#EPGrab {color:white;padding-top:10px;}
</style>
<!--[if IE 6]>
<style>
#EPDarkLayer {position:absolute;}
</style>
<![endif]-->
<!----------// POPUP (AUTOLOAD) //---------->
<div id="pop01" class="leightbox">
<div class="scrollbox">
<h1>Welcome To My Blog</h1>
<p>A blog by <a href=" http://danisatya.blogspot.com/ ">Tips blogging dan Tutorial blog</a></p>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZNRFUr5An14xhf3hUEYRwc6-_f4sX8O_HiaoRAGnZNLLIQhWOOYfFKYBuHi12tMO4Kz8xYUnca_XFILfksK9ZATeLDflsAMn5lcqlu0PzEnWUAnqU0WIFWo5PhqkiKBT9hlxqSRpp4aLS/s1600/WelcomeToMyPageRdFlower2.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="300" width="294" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZNRFUr5An14xhf3hUEYRwc6-_f4sX8O_HiaoRAGnZNLLIQhWOOYfFKYBuHi12tMO4Kz8xYUnca_XFILfksK9ZATeLDflsAMn5lcqlu0PzEnWUAnqU0WIFWo5PhqkiKBT9hlxqSRpp4aLS/s320/WelcomeToMyPageRdFlower2.jpg" /></a>
</div>
<a href="#" class="lbAction" rel="deactivate">Enter The Blog</a></div>
<!----------// POPUP (AUTOLOAD script: add AFTER the autoload popup div) //---------->
<script type="text/javascript">
lb = new lightbox();
lb.initCallable('pop01');
lb.activate();
</script><!-- Welcome page End -->
7. Ganti tulisan berwarna biru dengan Url blog Anda. Selamat mencoba...
1. Masuk ke Rancangan --> Edit HTML
2. Carilah kode </head>
3. Letakkan kode dibawah ini diatas kode </head>
<script type="text/javascript" src="<span style="color: red; margin: 0px; padding: 0px;">http://wierdwalker.googlecode.com/files/leightbox.js</span>"></script>
<script type="text/javascript" src="<span style="color: red; margin: 0px; padding: 0px;">http://wierdwalker.googlecode.com/files/prototype.js</span>"></script>
4. Masuk lagi ke Rancangan - Edit Laman
5. Tambahkan gadget lalu pilih HTML/Javascript
6. Masukkan kode berikut ini pada gadget tersebut
<!-- Welcome page Start by http://blogtrikdantips.blogspot.com/ -->
<style>a.lbAction {
padding: 0 3px;
text-decoration: none;
float: right;
position: absolute;
top: -20px;
right: -20px;
color: #000000;
border: 5px solid #000000;
background: #CCCCCC;
z-index: 102;
}
a.lbAction:hover {
background: #FFFFFF;
}
a.lbAction:active {
background: #999999;
}
div.leightbox {
color: #333;
display: none; /* toggle display to show/hide the popups when designing & previewing */
position: absolute;
top: 50%;
left: 50%;
margin: -250px 0 0 -200px;
width: 500px;
height: 400px;
padding: 0;
border: 1em solid #000000;
background: #FFFFFF;
z-index: 101;
overflow: none;
}
div.scrollbox {
margin: 0 auto;
width: 100%;
height: 100%;
text-align: left;
overflow: auto;
}
.scrollbox h1{text-align: center;}
.scrollbox p{text-align: center;}
.scrollbox img{float:left;margin:0px 0px 0xp 10px;}
div#overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color:#000000;
-moz-opacity: 0.80;
opacity: .80;
filter: alpha(opacity=80);
}
div.lightbox[id]{ position:fixed; }
div#overlay[id]{ position:fixed; }
</style><div style="padding-top:15px;">
<a id="EPEntryButton" onclick="document.getElementById("HTML88").style.display="none";document.getElementById("Text88").style.display="none"">ENTER</a>
</div>
<div id="EPGrab"><a href=" http://danisatya.blogspot.com/" target="_blank">Make your own</a></div>
<div id="EPDarkLayer"></div>
<!-- CSS part -->
<style>
#welcome-wrapper{width:40%;margin:0 auto;height:0px;text-align:center;}
/* welcome message widget */
#Text88, #EPEntryButton, #EPGrab {position:relative;z-index:510;top:100px;}
#Text88 {background-color:#fff;border:solid 10px orange;color:#222;display:none;padding:15px;}
#HTML88 {z-index:499;display:none;}
/* DarkLayer div */
#EPDarkLayer {background-color:#000;opacity:0.6;filter:alpha(opacity=60);top:0px;left:0px;z-index:500;position:fixed;}
/* Entry button */
#EPEntryButton {background-color:lawngreen;border:outset 3px #000;color:#333;cursor:pointer;font-size:25px;padding:5px;text-decoration:none;}
#EPGrab {color:white;padding-top:10px;}
</style>
<!--[if IE 6]>
<style>
#EPDarkLayer {position:absolute;}
</style>
<![endif]-->
<!----------// POPUP (AUTOLOAD) //---------->
<div id="pop01" class="leightbox">
<div class="scrollbox">
<h1>Welcome To My Blog</h1>
<p>A blog by <a href=" http://danisatya.blogspot.com/ ">Tips blogging dan Tutorial blog</a></p>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZNRFUr5An14xhf3hUEYRwc6-_f4sX8O_HiaoRAGnZNLLIQhWOOYfFKYBuHi12tMO4Kz8xYUnca_XFILfksK9ZATeLDflsAMn5lcqlu0PzEnWUAnqU0WIFWo5PhqkiKBT9hlxqSRpp4aLS/s1600/WelcomeToMyPageRdFlower2.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="300" width="294" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZNRFUr5An14xhf3hUEYRwc6-_f4sX8O_HiaoRAGnZNLLIQhWOOYfFKYBuHi12tMO4Kz8xYUnca_XFILfksK9ZATeLDflsAMn5lcqlu0PzEnWUAnqU0WIFWo5PhqkiKBT9hlxqSRpp4aLS/s320/WelcomeToMyPageRdFlower2.jpg" /></a>
</div>
<a href="#" class="lbAction" rel="deactivate">Enter The Blog</a></div>
<!----------// POPUP (AUTOLOAD script: add AFTER the autoload popup div) //---------->
<script type="text/javascript">
lb = new lightbox();
lb.initCallable('pop01');
lb.activate();
</script><!-- Welcome page End -->
7. Ganti tulisan berwarna biru dengan Url blog Anda. Selamat mencoba...
CARA MEMBUAT EFEK GAMBAR BERUBAH KETIKA TERSENTUH CURSOR
Penasaran? Copy kode dibawah ini..
<a href="Target link" target="_blank"><img onmouseout="this.src='URL gambar pertama'" onmouseover="this.src='URL gambar kedua'" src="URL gambar pertama" /></a>Ket:
URL gambar pertama: ganti dengan url gambar pertama anda
URL gambar kedua: ganti dengan url gambar kedua anda.
Letakkan cursor anda pada gambar dibawah ini, lihat perubahan pada gambar :)
Bisa diletakkan di sidebar atau postingan. Selamat mencoba...
<a href="Target link" target="_blank"><img onmouseout="this.src='URL gambar pertama'" onmouseover="this.src='URL gambar kedua'" src="URL gambar pertama" /></a>Ket:
URL gambar pertama: ganti dengan url gambar pertama anda
URL gambar kedua: ganti dengan url gambar kedua anda.
Letakkan cursor anda pada gambar dibawah ini, lihat perubahan pada gambar :)
Bisa diletakkan di sidebar atau postingan. Selamat mencoba...
Langganan:
Postingan (Atom)
