Saya (RIKI SEPRIYANTO) Sering disebut rcob merupakan seorang blogger pemula yang ingin membuat manfaat lewat blog saya, cita-cita saya sebagAi seorang programer sekarang saya lanjut kuliah di UNIVERSITAS DEHASEN BENGKULU.
Anda dapat menemukan saya di : 
Tambahkan Static Facebook Pop Out Seperti Box dengan Smooth JQuery Hover
Halo teman-teman Rcob , inilah jquery Facebook lain muncul untuk facebook seperti kotak widget untuk blogger (atau) situs web.Keuntungan widget ini adalah untuk ruang bebas pada halaman. Karena Facebook dapat mencegah situs normal seperti kotak. Pop Static Out Facebook box sebagai lembut dengan jQuery efek aktivasi untuk blogger, ini adalah kontrol keren lain. Di sini saya telah ditambahkan sebagai kotak dengan sederhana efek hover jQuery. Lihat Facebook pelat statis di sebelah kanan halaman dan menggerakkan mouse di atas piring dengan frame, seperti terlihat dengan menggeser ke kiri.
Tambahkan Sisi Kiri Static Facebook Pop Out Seperti Box dengan Jquery Hover Effect
Langkah 1: . Menambahkan Static Facebook Pop Out Seperti Box Widget Untuk tata letak Blogger
Sekarang mari kita mulai menambahkannya ... Langkah 2. Login ke Blogger Anda Account.Go untuk Anda Blogger Dashboard.Click pada tab Layout dari panel kiri dan klik Tambah Link gadget.
Langkah 3. Setelah klik Add a Gadget menghubungkan Sebuah kotak pop-up akan terbuka sekarangdengan banyak daftar gadget, Pilih HTML / JavaScript dari pilihan gadget dengan mengklik tanda plus biru untuk gadget tersebut.
Langkah 4. Pilih 'HTML / Javascript' dan tambahkan salah satu kode yang diberikan di bawah ini. Langkah 5. Sekarang Klik On Simpan 'JavaScript' Anda selesai.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"> </ script>
<script type="text/javascript">
/ / <-!
$ (document) ... ready (function () {$ (". w2bslikebox") membawa (function () {$ (ini) berhenti () bernyawa ({kanan: "0"}, "media");}, function (). {. $ (ini) berhenti () bernyawa. ({kanan: "-250"}, "media");}, 500);});
/ / ->
</ script>
<tipe style = "text / css ">
. w2bslikebox {background: scroll no-repeat meninggalkan pusat transparan penting, display: block; float: right; height: 270px; padding: 0 5px 0 46px; width: 245px; z-index: 99999; position: fixed; kanan:-250px; top: 20%;}
. w2bslikebox div {border: none; position: relative; display: block;}
. w2bslikebox rentang {bottom: 12px; huruf: 8px "lucida grande", tahoma, verdana, arial, sans-serif; position: absolute ; kanan: 6px; text-align: right; z-index: 99999;}
. w2bslikebox span {color: # 808080; text-decoration: none;}
w2bslikebox span:. hover {text-decoration: underline;}
< / style> <div class="w2bslikebox" style=""> <div> <a href = "http://24work.blogspot.com/" rel = "dofollow" target = "_blank" title = "My Trik Blogger "> <img src =" https://bitly.com/24workpng1 "alt =" Trik Blogger My "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; top: 0px; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"> <img src = "https://bitly .com/24workpng1 "alt =" Semua Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"> <img src = "https://bitly.com / 24workpng1 "alt =" Techtunes "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " /> </ A> <iframe scrolling = "no" frameborder = "0" scrolling = "no" style = "border: none menengah; overflow: hidden; height: 270px; width: 245px; background: # fff;"> </ iframe> </ div> </ div>
<script type="text/javascript">
/ / <-!
$ (document) ... ready (function () {$ (". w2bslikebox") membawa (function () {$ (ini) berhenti () bernyawa ({kanan: "0"}, "media");}, function (). {. $ (ini) berhenti () bernyawa. ({kanan: "-250"}, "media");}, 500);});
/ / ->
</ script>
<tipe style = "text / css ">
. w2bslikebox {background: scroll no-repeat meninggalkan pusat transparan penting, display: block; float: right; height: 270px; padding: 0 5px 0 46px; width: 245px; z-index: 99999; position: fixed; kanan:-250px; top: 20%;}
. w2bslikebox div {border: none; position: relative; display: block;}
. w2bslikebox rentang {bottom: 12px; huruf: 8px "lucida grande", tahoma, verdana, arial, sans-serif; position: absolute ; kanan: 6px; text-align: right; z-index: 99999;}
. w2bslikebox span {color: # 808080; text-decoration: none;}
w2bslikebox span:. hover {text-decoration: underline;}
< / style> <div class="w2bslikebox" style=""> <div> <a href = "http://24work.blogspot.com/" rel = "dofollow" target = "_blank" title = "My Trik Blogger "> <img src =" https://bitly.com/24workpng1 "alt =" Trik Blogger My "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; top: 0px; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"> <img src = "https://bitly .com/24workpng1 "alt =" Semua Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"> <img src = "https://bitly.com / 24workpng1 "alt =" Techtunes "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " /> </ A> <iframe scrolling = "no" frameborder = "0" scrolling = "no" style = "border: none menengah; overflow: hidden; height: 270px; width: 245px; background: # fff;"> </ iframe> </ div> </ div>
Dalam >> Customize Bidang Ganti " pages/Blogspot-tutorial/220888831260608 "dengan sendiri nama halaman facebook anda (Bukan nama profil Anda sendiri)
<script src="http://code.jquery.com/jquery-1.10.2.min.js"> </ script>
Catatan: Jika template Anda sudah memiliki jquery yang tidak menempatkan lagi, hanya menyalin setelah
Html dari atas beberapa hal yang bisa diganti:
Tambahkan Hover Gaya Facebook LikeBox Dengan Tombol Dekat Ke Halaman scrollbar
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </ script>
<style type="text/css">
img, a { border: 0; }
# pada {visibility: terlihat; }
# {off visibility: hidden; }
# facebook_div {width: 196px;
height: 340px;
overflow: hidden; }
# facebook_right {
z-index: 10005;
border: 2px solid # 3c95d9;
background-color: # fff;
width: 196px;
height: 353px;
position: fixed;
kanan:-200px; }
# facebook_right img {
position: absolute;
top: 2px-;
kiri: 35px-; }
# facebook_right iframe {
border: 0px solid # 3c95d9;
overflow: hidden;
posisi: statis;
height: 360px;
left:-2px;
top: 3px-; }
# facebook_left {
z-index: 10005;
border: 2px solid # 3c95d9;
background-color: # fff;
width: 196px;
height: 353px;
position: fixed;
kiri:-200px; }
# facebook_left img {
position: absolute;
top: 2px-;
kanan:-35px; }
# facebook_left iframe {
border: 0px solid # 3c95d9;
overflow: hidden;
posisi: statis;
height: 360px;
kanan:-2px;
top: 3px-; }
</ style>
<script type="text/javascript">
jQuery (document). ready (function () {
jQuery ("# facebook_right"). membawa (function () {
jQuery (ini)
. berhenti (true, false )
. bernyawa ({kanan: 0}, 500);}, function () {
jQuery ("# facebook_right")
. berhenti (true, false) bernyawa ({kanan:. -200}, 500);});
} );
</ script> <br /> <span id="on"> <a href = "http://24work.blogspot.com/" rel = "dofollow" target = "_blank" title = "My Trik Blogger "> <img src =" https://bitly.com/24workpng1 "alt =" Trik Blogger My "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; top: 0px; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"> <img src = "https://bitly .com/24workpng1 "alt =" Semua Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"> <img src = "https://bitly.com / 24workpng1 "alt =" Techtunes "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " /> </ A> <br id="facebook_right" style="top: 10%;">
<div id="facebook_div">
<img alt = "" />
<iframe allowtransparency = "true" frameborder = "0" scrolling = "no" style = "border: none; height: 346px; overflow: hidden; width: 200px; "> </ iframe> </ div></ div> </ div>
<style type="text/css">
img, a { border: 0; }
# pada {visibility: terlihat; }
# {off visibility: hidden; }
# facebook_div {width: 196px;
height: 340px;
overflow: hidden; }
# facebook_right {
z-index: 10005;
border: 2px solid # 3c95d9;
background-color: # fff;
width: 196px;
height: 353px;
position: fixed;
kanan:-200px; }
# facebook_right img {
position: absolute;
top: 2px-;
kiri: 35px-; }
# facebook_right iframe {
border: 0px solid # 3c95d9;
overflow: hidden;
posisi: statis;
height: 360px;
left:-2px;
top: 3px-; }
# facebook_left {
z-index: 10005;
border: 2px solid # 3c95d9;
background-color: # fff;
width: 196px;
height: 353px;
position: fixed;
kiri:-200px; }
# facebook_left img {
position: absolute;
top: 2px-;
kanan:-35px; }
# facebook_left iframe {
border: 0px solid # 3c95d9;
overflow: hidden;
posisi: statis;
height: 360px;
kanan:-2px;
top: 3px-; }
</ style>
<script type="text/javascript">
jQuery (document). ready (function () {
jQuery ("# facebook_right"). membawa (function () {
jQuery (ini)
. berhenti (true, false )
. bernyawa ({kanan: 0}, 500);}, function () {
jQuery ("# facebook_right")
. berhenti (true, false) bernyawa ({kanan:. -200}, 500);});
} );
</ script> <br /> <span id="on"> <a href = "http://24work.blogspot.com/" rel = "dofollow" target = "_blank" title = "My Trik Blogger "> <img src =" https://bitly.com/24workpng1 "alt =" Trik Blogger My "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; top: 0px; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"> <img src = "https://bitly .com/24workpng1 "alt =" Semua Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"> <img src = "https://bitly.com / 24workpng1 "alt =" Techtunes "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " /> </ A> <br id="facebook_right" style="top: 10%;">
<div id="facebook_div">
<img alt = "" />
<iframe allowtransparency = "true" frameborder = "0" scrolling = "no" style = "border: none; height: 346px; overflow: hidden; width: 200px; "> </ iframe> </ div></ div> </ div>
Catatan: - Jangan lupa untuk mengubah warna Merah kata kunci. Tambahkan jQuery Lightbox Popup Facebook Likebox Untuk Blogger BARU
Saya telah diberikan kepada Facebook sebagai jQuery popup box dan jQuery to facebook muncul sebagai kotak dengan gambar latar belakang di posting saya sebelumnya, jika Anda baru di sini, bahwa kunjungan pertama, sekarang aku kembali dengan widget yang sama, hanya mengubah gambar latar belakang dan ukuran widget ini. Aku hanya mencoba ini dan saya harap Anda menikmatinya. Cara Tambah Sebuah mengagumkan Facebook Fan Page JavaScript Untuk Blogger Go to blogger> Layout tab TerbukaSekarang Tambah widget HTML / JavaScript baru Sekarang paste kode yang diberikan di bawah ini:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"> </ script>
<tautan rel = "stylesheet" type = "text / css" /> <Script type = "text / javascript"> jQuery (document). ready (function () {if (document.cookie.indexOf ('dikunjungi = benar ') == -1) {var fifteenDays = 1000 * 60 * 60 * 24 * 30 ; var berakhir = new Date ((new Date ()) valueOf () + fifteenDays.); document.cookie = "dikunjungi = true; berakhir =" + expires.toUTCString (); colorbox $ ({width: "400px. ", inline: true, href:" # berlangganan "});}}); </ Script> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"> <img src = "https://bitly.com / 24workpng1 "alt =" Trik Blogger My "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; top: 0px; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"> <img src = "https://bitly .com/24workpng1 "alt =" Semua Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"> <img src = "https://bitly.com / 24workpng1 "alt =" Techtunes "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " /> </ A> <br style='display:none'> <div id = 'berlangganan' style = 'padding: 10px; background: # fff; '> <center> <img width: 300px; height: 150px; "/> </ center> <center> <iframe scrolling = "no" frameborder = "0" style = "border: none; overflow: hidden; width: 300px; height: 258px; "allowtransparency =" true "> </ iframe> </ center> </ div> </ div>
<tautan rel = "stylesheet" type = "text / css" /> <Script type = "text / javascript"> jQuery (document). ready (function () {if (document.cookie.indexOf ('dikunjungi = benar ') == -1) {var fifteenDays = 1000 * 60 * 60 * 24 * 30 ; var berakhir = new Date ((new Date ()) valueOf () + fifteenDays.); document.cookie = "dikunjungi = true; berakhir =" + expires.toUTCString (); colorbox $ ({width: "400px. ", inline: true, href:" # berlangganan "});}}); </ Script> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"> <img src = "https://bitly.com / 24workpng1 "alt =" Trik Blogger My "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; top: 0px; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"> <img src = "https://bitly .com/24workpng1 "alt =" Semua Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"> <img src = "https://bitly.com / 24workpng1 "alt =" Techtunes "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " /> </ A> <br style='display:none'> <div id = 'berlangganan' style = 'padding: 10px; background: # fff; '> <center> <img width: 300px; height: 150px; "/> </ center> <center> <iframe scrolling = "no" frameborder = "0" style = "border: none; overflow: hidden; width: 300px; height: 258px; "allowtransparency =" true "> </ iframe> </ center> </ div> </ div>
Catatan: - Jangan menambahkan atas berwarna merah . jQuery plugin jika blog Anda sudah jQuery plugin Ganti halaman% 2FBlogspot-tutorial% 2F220888831260608 Dengan nama pengguna Facebook Anda Kustomisasi:
Widget menyimpan sampai cookie di komputer pengunjung. Anda dapat mengubah frekuensi setelah widget akan muncul kepada pengunjung. Cukup mengubah nomor 30 dengan jumlah hari keinginan Anda. Katakanlah Anda ingin widget untuk muncul kembali setelah 30 hari setelah pertama kali. Daripada mengubah 30 sampai 7.
Sekarang Anda telah melakukan! Tambah Keren jQuery Pop-Up For Facebook Like Box
Setelah widget Popup Adsense saya baru-baru ini. Sekarang saya memutuskan untuk menyajikan beberapa segar untuk apa yang datang dengan baik jQuery Popup Box ke Facebook sebagai. Ini adalah widget yang sangat baik untuk meningkatkan rasa. Anda dapat melihat sebagian besar situs atau blog yang digunakan untuk meningkatkan pop yang belum dibayar, penggemar dan pendukung. Popup jQuery ini lucu untuk Facebook sebagai kotak adalah widget blogger besar. Segera setelah pengunjung baru datang ke blog Anda akan menampilkan pengunjung pop, yang dapat membantu meningkatkan ukuran dan mendapatkan lebih banyak lalu lintas ke tutorial berikutnya Facebook.In saya akan mencoba untuk membuatnya lebih interaktif dengan link ke profil media sosial dan Versi lengkap dengan segala isinya, yang dapat need.Check keluar acara ke bawah dan saya akan menunjukkan cara untuk menambahkan jQuery Popup lucu untuk Facebook sebagai kotak ke Blogger atau Wordpress? Tambahkan Facebook Likebox Popup Untuk Blogger Kembali ke Blogger> Desain Klik memilih Gadget Pilih HTML / javascript widget Paste kode berikut di dalamnya
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"> </ script>
<tautan rel = "stylesheet" type = "text / css" /> <Script
type = "text / javascript">
jQuery (document). ready (function () {
if (document.cookie.indexOf ('dikunjungi = palsu ') == -1) {
var fifteenDays = 1000 * 60 * 60 * 24 * 30 ;
var berakhir = new Date ((new Date ()) valueOf () + fifteenDays.);
document.cookie = "dikunjungi = true; berakhir =" + expires.toUTCString ();
colorbox $ ({width: "400px. ", inline: true, href:" # berlangganan "});
}
});
</ script> <a href = "http://24work.blogspot.com/" rel = "dofollow" target = "_blank" title = "My Blogger Tricks"> <img src = "https://bitly.com/24workpng1" alt = "Trik Blogger My" border = "0" style = "position: fixed; bottom: 10%; kanan: 0% ; top: 0px; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"> <img src = "https://bitly .com/24workpng1 "alt =" Semua Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"> <img src = "https://bitly.com / 24workpng1 "alt =" Techtunes "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " ! /> </ A> <- ini berisi konten tersembunyi untuk panggilan inline -> <div style='display:none'>
<div id = 'berlangganan' style = 'padding: 10px; background: # fff; '>
<h3 class="box-title"> Menerima semua update melalui Facebook.Hanya Klik Tombol Seperti Di bawah <center> <p style = "line-height: 3px;" > ▼ </ p> </ center> </ h3>
<center>
<iframe scrolling = "no" frameborder = "0" style = "border: none; overflow: hidden; width: 300px; height: 258px;" allowtransparency = "true"> </ iframe> </ center> </ div> </ div>
<tautan rel = "stylesheet" type = "text / css" /> <Script
type = "text / javascript">
jQuery (document). ready (function () {
if (document.cookie.indexOf ('dikunjungi = palsu ') == -1) {
var fifteenDays = 1000 * 60 * 60 * 24 * 30 ;
var berakhir = new Date ((new Date ()) valueOf () + fifteenDays.);
document.cookie = "dikunjungi = true; berakhir =" + expires.toUTCString ();
colorbox $ ({width: "400px. ", inline: true, href:" # berlangganan "});
}
});
</ script> <a href = "http://24work.blogspot.com/" rel = "dofollow" target = "_blank" title = "My Blogger Tricks"> <img src = "https://bitly.com/24workpng1" alt = "Trik Blogger My" border = "0" style = "position: fixed; bottom: 10%; kanan: 0% ; top: 0px; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"> <img src = "https://bitly .com/24workpng1 "alt =" Semua Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"> <img src = "https://bitly.com / 24workpng1 "alt =" Techtunes "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " ! /> </ A> <- ini berisi konten tersembunyi untuk panggilan inline -> <div style='display:none'>
<div id = 'berlangganan' style = 'padding: 10px; background: # fff; '>
<h3 class="box-title"> Menerima semua update melalui Facebook.Hanya Klik Tombol Seperti Di bawah <center> <p style = "line-height: 3px;" > ▼ </ p> </ center> </ h3>
<center>
<iframe scrolling = "no" frameborder = "0" style = "border: none; overflow: hidden; width: 300px; height: 258px;" allowtransparency = "true"> </ iframe> </ center> </ div> </ div>
Catatan: - Ganti halaman% 2FBlogspot-tutorial% 2F220888831260608 Dengan Facebook User nameFacebook Popup Widget dengan Lightbox Effect
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </ script>
<style type="text/css">
# fanback { width: 100%; height: 100%; } # fanbox { background: white; width: 420px;height: 270px; position: absolute; top: 58%; kiri: 63%; margin: 220px-0 0-375px; -webkit-box-shadow: inset 0 0 0 50px # 939393; -moz-box-shadow: inset 0 0 0 50px # 939393; box-shadow: inset 0 0 0 50px # 939393; -webkit-border-radius: 5px ; -moz-border-radius: 5px; border-radius: 5px; margin: 220px-0 0-375px; } # fanclose {height: 1px; width: 366px; margin: 0 auto; background: # F3F3F3; margin-top: 16px;position: relative; margin-left: 20px; } # linkit a.visited, # linkit a, # linkit a: hover { color: # 80808B; font-size: 10px; margin: 0 auto 5px auto; float: center; }</ style> <script type="text/javascript"> / / <[CDATA [ jQuery.cookie = function (key, value, pilihan) { / / kunci dan setidaknya nilai yang diberikan, mengatur cookie ... if (arguments.length> 1 && String (value)! == "[object Object]") {pilihan = jQuery. memperpanjang ({}, pilihan); if (value === nol | | nilai === terdefinisi) { options.expires = -1; } if (typeof options.expires === 'number') {var hari = Pilihan . berakhir, t = options.expires = new Date (); t.setDate (t.getDate () + hari); } value = String (nilai); return (document.cookie = [encodeURIComponent (key), '=' , options.raw nilai: encodeURIComponent (value),?options.expires '; berakhir =' + options.expires.toUTCString ():?'', / / penggunaan atribut berakhir, max usia tidak didukung oleh IE options.path ? '; path =' + options.path:'', ? options.domain '; domain =' + options.domain:'', options.secure?'; mengamankan ':'' .] join ('')); } / / Opsi kunci dan mungkin diberikan, mendapatkan cookie ... options = nilai | | {}; hasil var, decode = options.raw?function (s) {return s; }: DecodeURIComponent; return (hasil = regexp baru ('(: ^ |;)' + encodeURIComponent (key) + '= ([^;] *)') exec (document.cookie).)? decode (hasil [1]): null; }; / /]]> </ script> <a href = "http://24work.blogspot.com/" rel = "dofollow" target = "_blank" title = " Trik Blogger "> <img src =" https://bitly.com/24workpng1 "alt =" Trik Blogger My "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; top : 0px; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"> <img src = "https://bitly .com/24workpng1 "alt =" Semua Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"> <img src = "https://bitly.com / 24workpng1 "alt =" Techtunes "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " /> </ A> <script type="text/javascript"> jQuery (document). Ready (function ($) { if ($ kue. ('popup_user_login')! = 'yes') {$ ('# fanback ') delay. (100) fadeIn (.' medium '); $ ('# fanclose, # fan-exit'.) klik (function () { $ ('# fanback').. stop () fadeOut ('medium '); ;}) } $ kue (. 'popup_user_login', 'ya', {path: '/', Berakhir: 7}); }); </ script> <div id='fanback'> <div id = 'fan-exit'> </ div> <div id='fanbox'> <div id='fanclose'> </ div> <div class='remove-borda'> </ div> <iframe allowtransparency = ' true 'frameborder = '0' scrolling = 'no' none; overflow: hidden; margin-top: 19px-; width: 402px; height: 230px; '> </ iframe> <center> </ center> </ div> </ div>
<style type="text/css">
# fanback { width: 100%; height: 100%; } # fanbox { background: white; width: 420px;height: 270px; position: absolute; top: 58%; kiri: 63%; margin: 220px-0 0-375px; -webkit-box-shadow: inset 0 0 0 50px # 939393; -moz-box-shadow: inset 0 0 0 50px # 939393; box-shadow: inset 0 0 0 50px # 939393; -webkit-border-radius: 5px ; -moz-border-radius: 5px; border-radius: 5px; margin: 220px-0 0-375px; } # fanclose {height: 1px; width: 366px; margin: 0 auto; background: # F3F3F3; margin-top: 16px;position: relative; margin-left: 20px; } # linkit a.visited, # linkit a, # linkit a: hover { color: # 80808B; font-size: 10px; margin: 0 auto 5px auto; float: center; }</ style> <script type="text/javascript"> / / <[CDATA [ jQuery.cookie = function (key, value, pilihan) { / / kunci dan setidaknya nilai yang diberikan, mengatur cookie ... if (arguments.length> 1 && String (value)! == "[object Object]") {pilihan = jQuery. memperpanjang ({}, pilihan); if (value === nol | | nilai === terdefinisi) { options.expires = -1; } if (typeof options.expires === 'number') {var hari = Pilihan . berakhir, t = options.expires = new Date (); t.setDate (t.getDate () + hari); } value = String (nilai); return (document.cookie = [encodeURIComponent (key), '=' , options.raw nilai: encodeURIComponent (value),?options.expires '; berakhir =' + options.expires.toUTCString ():?'', / / penggunaan atribut berakhir, max usia tidak didukung oleh IE options.path ? '; path =' + options.path:'', ? options.domain '; domain =' + options.domain:'', options.secure?'; mengamankan ':'' .] join ('')); } / / Opsi kunci dan mungkin diberikan, mendapatkan cookie ... options = nilai | | {}; hasil var, decode = options.raw?function (s) {return s; }: DecodeURIComponent; return (hasil = regexp baru ('(: ^ |;)' + encodeURIComponent (key) + '= ([^;] *)') exec (document.cookie).)? decode (hasil [1]): null; }; / /]]> </ script> <a href = "http://24work.blogspot.com/" rel = "dofollow" target = "_blank" title = " Trik Blogger "> <img src =" https://bitly.com/24workpng1 "alt =" Trik Blogger My "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; top : 0px; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"> <img src = "https://bitly .com/24workpng1 "alt =" Semua Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"> <img src = "https://bitly.com / 24workpng1 "alt =" Techtunes "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " /> </ A> <script type="text/javascript"> jQuery (document). Ready (function ($) { if ($ kue. ('popup_user_login')! = 'yes') {$ ('# fanback ') delay. (100) fadeIn (.' medium '); $ ('# fanclose, # fan-exit'.) klik (function () { $ ('# fanback').. stop () fadeOut ('medium '); ;}) } $ kue (. 'popup_user_login', 'ya', {path: '/', Berakhir: 7}); }); </ script> <div id='fanback'> <div id = 'fan-exit'> </ div> <div id='fanbox'> <div id='fanclose'> </ div> <div class='remove-borda'> </ div> <iframe allowtransparency = ' true 'frameborder = '0' scrolling = 'no' none; overflow: hidden; margin-top: 19px-; width: 402px; height: 230px; '> </ iframe> <center> </ center> </ div> </ div>
Sesuaikan: widget hanya muncul pertama kali pengguna mengunjungi halaman Anda. Jika Anda ingin kotak facebook untuk popup evertime beban halaman, kemudian menghapus baris kode ini: . kuki $ ('popup_user_login', 'ya', {path: '/', Berakhir: 7}); 3 + Cara Untuk Sesuaikan The Facebook Fan Box Widget Dengan CSS The Facebook gaya Plugin sayangnya bukan tugas yang mudah karena detail sangat terbatas bersama di Facebook page Developers . Kustom Plugin akan membantu Anda berdiri keluar sebagai bisnis Anda merek dan pasar juga. Pada bulan April 2010, Daddydesigns posted tutorial tentang bagaimana gaya dan membuat modifikasi pada kotak penggemar di Facebook. Tutorial Anda diterima dengan baik, namun dengan pengenalan Facebook sebagai kotak bukannya Fan Box, perubahan algoritma membuatnya sulit untuk memodifikasi plugin menggunakan panduan yang sama. Setelah beberapa trial and error, berhasil membuat perubahan yang diperlukan dibuat oleh DaddyDesigns kecil untuk sepenuhnya menyesuaikan kotak dengan rasa seperti font kustom dan warna. Ini pasti tidak akan mungkin terjadi dengan bantuan cerah Anda. Sesuaikan Facebook Like Box Dengan CSS ke blogger itu sederhana 1. Pergi ke Dashboard Blogger >> Tata Letak >> Tambah gadget >> Tambahkan HTML / Javascript Box. 2. Paste kode berikut di HTML / Javascript Box.
Catatan: - Ganti halaman% 2FBlogspot-tutorial% 2F220888831260608 Dengan Facebook Pengguna nama Anda
Sesuaikan Facebook Like Box Menggunakan CSS Style 1: -
<Div style = "background: 110px; height: 250px; width:. 238px; border-radius: 13px 0px 0px 0px; overflow: hidden; "> <div style="height: 250px; overflow: hidden;"> <a href =" http:// 24work.blogspot.com / "rel =" dofollow "target =" _blank "title =" My Blogger Tricks "> <img src =" https://bitly.com/24workpng1 "alt =" Trik Blogger My "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; top: 0px; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"> <img src = "https://bitly .com/24workpng1 "alt =" Semua Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"> <img src = "https://bitly.com / 24workpng1 "alt =" Techtunes "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " /> </ A> <iframescrolling = "no" frameborder = "0" style = "border: none; overflow: hidden; width: 250px; height: 258px;" allowtransparency = "true"> </ iframe> </ div> </ div>
Dan sekarang klik Simpan
Style 2: -
<Div style = "-moz-box-shadow: 0px 15px 20px 0px # 777777;-webkit-box-shadow: 0px 15px 20px 0px # 777777; background-color: # f4f4f4; border-radius: 15px; border: 1px solid # cccccc; box-shadow: 0px 15px 20px 0px # 777777; height: 270px; margin: 30px; padding: 10px 0 10px 10px; width: 250px; "> <div style="height: 250px; overflow: hidden;"> <a href="http://24work.blogspot.com/" rel="dofollow" target title="My Blogger Tricks"> <img src = "https://bitly.com/24workpng1" alt = "Trik Blogger My" border = "0" style = "position: fixed; bottom: 10%; kanan: 0%; top: 0px;" /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"> <img src = "https://bitly .com/24workpng1 "alt =" Semua Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"> <img src = "https://bitly.com / 24workpng1 "alt =" Techtunes "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " /> </ A> <iframescrolling = "no" frameborder = "0" style = "border: none; overflow: hidden; width: 250px; height: 258px;" allowtransparency = "true"> </ iframe> </ div> </ div>
Style 3: -
<Div style = "background: rgb (0, 255, 0); background:-moz-linear-gradient (90deg, rgb (0, 255, 0) 14%, rgb (249, 228, 175) 69%); background:-webkit-linear-gradient (90deg, rgb (0, 255, 0) 14%, rgb (249, 228, 175) 69%); background:-o-linear gradient (90deg, rgb (0, 255, 0) 14%, rgb (249, 228, 175) 69%); background:-ms-linear-gradient (90deg, rgb (0, 255, 0) 14%, rgb (249, 228, 175) 69%) ; background: linear-gradient (90deg, rgb (0, 255, 0) 14%, rgb (249, 228, 175) 69%); width: 250px; padding: 0 0px; margin: 10px 0; border: 1px solid # c7c7c7; "> <div style="height: 250px; overflow: hidden;"> <a href =" http://24work.blogspot.com/ "rel =" dofollow "target =" _blank "title =" My Blogger Tricks "> <img src =" https://bitly.com/24workpng1 "alt =" Trik Blogger My "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; top: 0px; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"> <img src = "https://bitly .com/24workpng1 "alt =" Semua Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"> <img src = "https://bitly.com / 24workpng1 "alt =" Techtunes "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " /> </ A> <iframe scrolling = "no" frameborder = "0" style = "border: none; overflow: hidden; width: 250px; height: 258px;" allowtransparency = "true"> </ iframe> </ div> </ div>
Style 4: -
<Div style = "background: rgb (255, 192, 203); background:-moz-linear-gradient (90deg, rgb (255, 192, 203) 14%, rgb (249, 228, 175) 69%); background:-webkit-linear-gradient (90deg, rgb (255, 192, 203) 14%, rgb (249, 228, 175) 69%); background:-o-linear gradient (90deg, rgb (255, 192, 203) 14%, rgb (249, 228, 175) 69%); background:-ms-linear-gradient (90deg, rgb (255, 192, 203) 14%, rgb (249, 228, 175) 69%) ; background: linear-gradient (90deg, rgb (255, 192, 203) 14%, rgb (249, 228, 175) 69%); width: 250px; padding: 0 0px; margin: 10px 0; border: 1px solid # c7c7c7; "> <div style="height: 250px; overflow: hidden;"> <a href =" http://24work.blogspot.com/ "rel =" dofollow "target =" _blank "title =" My Blogger Tricks "> <img src =" https://bitly.com/24workpng1 "alt =" Trik Blogger My "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; top: 0px; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"> <img src = "https://bitly .com/24workpng1 "alt =" Semua Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"> <img src = "https://bitly.com / 24workpng1 "alt =" Techtunes "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " /> </ A> <iframe scrolling = "no" frameborder = "0" style = "border: none; overflow: hidden; width: 250px; height: 258px;" allowtransparency = "true"> </ iframe> </ div> </ div>
Facebook pribadi Anda sebagai kotak siap untuk dilayani! Itu saja. Paste kode ini di mana saja Anda inginkan dan kotak gaya pribadi Anda ditampilkan untuk kesempurnaan. Jika Anda memiliki masalah beritahu saya. Saya akan posting lebih banyak desain dan tutorial tentang topik ini pada minggu ini.Credits : Pembaca diminta untuk ramah link kembali ke halaman ini jika mereka ingin berbagi tutorial ini bekerja dengan pengunjung mereka. Ini satu-satunya tutorial diterbitkan setelah Daddydesigns tut yang menyediakan solusi dimodifikasi.
.jpg)
.jpg)
.jpg)
0 komentar:
Posting Komentar