Cara Membuat Fanspage Melayang dengan Modifikasi CSS

adscblog

Bagi anda para blogger tentu nya sudah tak asing dengan yang namanya FansPage yang dimana Fanspage ini di buat di Facebook anda,banyak variasi fanspage yang di buat oleh para blogger,Fanspage ini di pasang di blogger dan akan muncul ketika ada para pengunjung yang datang ke blog kita

Dengan di pasang nya Fanspage melayang ini di blog  tentu nya sangatlah bermanfaat karena bisa meningkatkan traffic blog apabila banyak para pengunjung yang menyukai halman Fanspage yang anda miliki

Baca Juga : Cara memasang Fanspage di widget Blog

Walaupun pada artikel sebelum nya saya pernah share tentang pemasangan Fanspage ini,baik itu fanspage melayang ataupun tidak melayang yang berada di bagian widget sebeleh kanan atau kiri blog yang kita miliki

Namun kali ini saya masih share tentang Fanspage melayang di blog dengan sedikit sentuhan CSS di bagian Background nya,menurut ini lumayan bagus untuk di pasang di blog dan oleh karena itu saya akan berbagi dengan sobat blogger dengan fanspage melayang dengan sentuhan Css ini

Adapun cara pemasangan Fanspage melayang ini anda hanya cukup mengikuti langkah-langkah di bawah ini

• Silahkan sobat blogger masuk ke blogger dengan email ataupun Pasword anda
• Setelah itu silahkan Masuk ke bagian edit html
• Setelah berada di bagian edit html silahkan anda cari kode </bskin> atau </style> untuk memudahkan pencarian anda,silahkan anda tekan tombol Ctrl+F di tombol komputer anda kemudian letakan Css berikut sebelum kode tersebut

/* Message Box */
#box-message {
position:fixed !important;
position:center;
top:400px;
left:50%;
margin:125px 60px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#00B2FF;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #00b2ff;
-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:-2px;
right:-2px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:3px solid #00b2ff;
-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;
}

• Setelah itu silahkan anda cari lagi kode </body> pada umum nya kode tersebut berada di bagian akhir template,kemudian silahkan anda letakan kode berikut sebelum kode </body>

<script type='text/javascript'>
$(window).bind(&quot;load&quot;, function() {
  // modifikasi http://www.infotrens.com
// Animate Top Value When Page Loaded Completed
$(&#39;#box-message&#39;).animate({top:&quot;50px&quot;}, 1000);
// Remove Mailbox When Close Button On Click
$(&#39;a.close&#39;).click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/infotrens?ref=hl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=272353683179695' style='border:none; overflow:hidden; width:292px; height:258px;'/>
</center>
<!-- HTML End -->
<a class='close' href='#'>X</a>
</div>

• Kemudian Save template dan lihat hasil nya

Untuk Url  www.facebook.com/infotrens Silahkan anda ganti dengan alamat Fanspage anda
Nah itulah cara pembuatan Fanspage melayang di blog dengan sedikit sentuhan Css di bagian background nya semoga artikel ini bisa membantu sobat blogger,selamat mencoba dan salam blogger

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 01 Juli and have 0 komentar