Jangan Lupa Juga Ya Follow Twitternya (^_^) @PuTra_HaLiem
Ini dia Membuat Widget Video Melayang Di Blog :
1. Login Ke Blogger
2. Dashbord > Tata letak > Gadget
3. Pilih saja HTML Java Script
Sebelum Lanjut Selahkan Copy Code Script Di Bawah Ini!
-----------------------------------------------------------
<style type='text/css'>-----------------------------------------------------------
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:40%;
margin:0px 0px 0px -182px;
width:620px;
height:515;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center><font color="red"><font size=4><blink>Jangan Lupa Di Follow Twitternya yaa (^_^)</blink></font></font></center>
<center>
<iframe width="560" height="400" src="//www.youtube.com/embed/tU_sdnGoMmo" frameborder="0" allowfullscreen></iframe>
</center>
<!-- HTML End -->
<br/>
<div class="twitter">
<!-- Twitter --> <center><iframe title="" style="width: 250px; height: 20px;" class="twitterx-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351& align=&button=blue&id=twitter_tweet_button_0& lang=ID&link_color=&screen_name=PuTra_HaLiem&show_count=& show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe></center> </div>
<a class='close' href='#'>×</a>
</div>
Keterangan :
Warna Merah Dan Hijau Adalah Ukuran Lebar Panjang Kotak Videonya
Warna Biru Adalah Code Embed Dari youtube
Dan Warna Merah Mudah Adalah ID Atau Username Twitter Anda!
Nah itulah Bagaimana Cara Membuat Widget Video Melayang Di Blog , gampang kan teman, Sekian dulu dari saya semoga bermanfaat dan membantu anda sekalian.
DEMO <---- Klik (^_^)
0 komentar:
PERHATIAN.!
Berikan Komentar Anda Tentang Artikel Di Atas!