Flexslider


Widget memainkan peran yang sangat baik di blog wordpress dan blogger. Berikut ini adalah kotak bergaya seperti facebook lainnya, widget ini dirancang dalam tiga gaya yang luar biasa dan akan meluncur dengan mulus saat Anda meletakkan kursor pada spanduk widget karena efek jQuery yang saya sertakan. Metode ini sangat mudah, Anda harus mengikuti metode langkah demi langkah.

Cara Menambahkan Widget ke Blog / Situs Anda

Hal pertama adalah menambahkan kode skrip java di templat.
1. Masuk ke Blogger → Dashborad
2. Klik pada Drop Down Menu dan pilih Layout
3. Tambahkan Gadget HTML / JavaScript
4. Tempel kode di bawah ini di dalamnya.
<style> 
/ * 
ColorBox Core Style: 
CSS berikut ini konsisten antara tema contoh dan tidak boleh diubah. 
* / 
#colorbox, #cboxOverlay, #cboxWrapper {position: absolute; atas: 0; kiri: 0;z-index: 9999; overflow: hidden;} 
#cboxOverlay {position: fixed; lebar: 100%; tinggi: 100%;} 
#cboxMiddleLeft, #cboxBottomLeft {clear: left;} 
#cboxContent {position: relative;} 
#cboxLoadedContent {overflow: auto;} 
#cboxTitle {margin: 0;} 
#cboxLoadingOverlay, #cboxLoadingGraphic {posisi: absolute ; atas: 0; kiri: 0; lebar: 100%;} 
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {cursor: pointer;} 
.cboxPhoto {float: left; margin: otomatis; perbatasan: 0; display: block;}
.cboxIframe {width: 100%; tinggi: 100%; display: blok; border: 0;} 
/ * 

Gaya Pengguna: 
Ubah gaya berikut untuk mengubah tampilan ColorBox. Mereka 
diurutkan & ditabrak sedemikian rupa sehingga merepresentasikan sarang dari HTML yang dihasilkan. 
* / 
#cboxOverlay {background: # 000; opacity: 0,5! important;} 
#cboxbox { 
box-shadow: 0 0 15px rgba (0,0,0,0,4); 
-moz-box-shadow: 0 0 15px rgba (0,0,0,0,4); 
-webkit-box-shadow: 0 0 15px rgba (0,0,0,0,4); 
} 
#cboxTopLeft {width: 14px; tinggi: 14px; latar belakang: url (http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0 0;}http : // 1 . bp . blogspot . com / - FiJ _ Xz7txEg / Txrt0sy1TiI/ AAAAAAAAAFWk / Llzvkeyy _ J8 / s1600 / kontrol . png ) no-repeat 0 0;}http : // 1 . bp . blogspot . com / - TcJGMnSfOCY / TxrtzzHDLVI /AAAAAAAAFAFc / mdndgrisRuA / s1600 / perbatasan .
#cboxTopCenter {height: 14px; latar belakang: url (http://1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x kiri atas;} #cboxTopRight {width: 14px; tinggi: 14px; latar belakang: url (http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px 0;} #cboxBottomLeft {width: 14p; tinggi: 43px; latar belakang: url (http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0 -32px;} #cboxBottomCenter {height: 43px;} background: url (http://1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) ulangi-x kiri bawah;}png ) ulangi-x kiri atas;} http : // 1 . bp . blogspot . com/ - FiJ _ Xz7txEg / Txrt0sy1TiI / AAAAAAAAAFWk / Llzvkeyy _ J8 / s1600 /kontrol . png ) no-repeat -36px 0;} http : // 1 . bp . blogspot . com / - FiJ _Xz7txEg / Txrt0sy1TiI / AAAAAAAAAFWk / Llzvkeyy _

J8 / s1600 / kontrol . png ) no-repeat 0 -32px;} http : // 1 . bp . blogspot .com / - TcJGMnSfOCY / TxrtzzHDLVI / AAAAAAAAFAFc / mdndgrisRuA / s1600/ perbatasan . png ) ulangi-x kiri bawah;} http : // 1 . bp . blogspot . com / -FiJ _ Xz7txEg / Txrt0sy1TiI / AAAAAAAAAFWk

#cboxBottomRight {width: 14px; tinggi: 43px; background: url (http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px -32px;} #cboxMiddleLeft {width: 14px; lebar: background: url (http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -175px 0;} #cboxMiddleRight {width: 14p; background: url (http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -211px 0;} #cboxContent {background: #fff; overflow: terlihat;}#cboxLoadedContent {margin-bottom: 5px;} #cboxLoadingOverlay {background: url (http://1.bp.blogspot.com/-PPvu-446sn4/Txrt1QsGH1I/AAAAAAAAFWw/_jWYVingReal .png) pusat pusat tanpa pengulangan;}/ Llzvkeyy _ J8 / s1600 / kontrol . png ) no-repeat -36px -32px;} http : // 1 . bp . blogspot . com / - FiJ _ Xz7txEg / Txrt0sy1TiI /AAAAAAAAAFWk / Llzvkeyy _ J8 / s1600 / kontrol . png ) repeat-y -175px 0;}http : // 1 . bp . blogspot . com / - FiJ

_ Xz7txEg / Txrt0sy1TiI / AAAAAAAAFAF / Llzvkeyy _ J8 / s1600 / kontrol .png ) repeat-y -211px 0;} http : // 1 . bp . blogspot . com / - PPvu - 446sn4 /Txrt1QsGH1I / AAAAAAAAFAFww / _ jWYVoR1HX8 / s1600 / loading -background - com . png ) pusat pusat tanpa-pengulangan;} http : // 1 .



#cboxLoadingGraphic {background: url (http://1.bp.blogspot.com/-31strss_1-E/Txrt1J6NThI/AAAAAAAAFWo/4P12CJPj924/s1600/loading.gif) pusat-pusat tanpa pengulangan;} #cboxTitle {posisi: absolute; bawah: -25px; kiri: 0;perataan teks: tengah; lebar: 100%; font-weight: bold; warna: # 7C7C7C;}#cboxCurrent {position: absolute; bawah: -25px; kiri: 58px; font-weight: bold; warna: # 7C7C7C;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {position: absolute; bawah: -29px; latar belakang: url (http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0px 0px; lebar: 23px; tinggi: 23px; indentasi teks: -9999px;}#cboxPrevious {kiri: 0px; background-position: -51px -25px;} # cboxPrevious.hover {posisi latar: -51px 0px;}bp . blogspot . com / - 31strss _1 - E / Txrt1J6NThI / AAAAAAAAFAF / 4P12CJPj924 / s1600 / loading . gif ) pusat pusat tanpa-pengulangan;} http : // 1 . bp . blogspot . com / - FiJ _Xz7txEg / Txrt0sy1TiI / AAAAAAAAAFWk / Llzvkeyy _ J8 / s1600 / kontrol .


png ) no-repeat 0px 0px; lebar: 23px; tinggi: 23px; text-indent: -9999px;}


#cboxNext {kiri: 27px; background-position: -75px -25px;} 
# cboxNext.hover {posisi-background: -75px 0px;} 
#cboxClose {right: 0; background-position: -100px -25px;} 
# cboxClose.hover {posisi-background: -100px 0px;} 
.cboxSlideshow_on #cboxSlonton {posisi-latar belakang: -125px 0px; kanan: 27px;} 
.cboxSlideshow_on # cboxSlideshow.hover {posisi-latar: -150px 0px;} 
.cboxSlideshow_off #cboxSlideshow {posisi-latar belakang: -150px -25px;kanan: 27px;} 
.cboxSlideshow_off # cboxSlideshow.hover {posisi-latar belakang: -125px 0px;} 
/ * --------------------------- -------------------------------------------------- ------ * / 
/ * Facebook Likebox popup Untuk Blogger
/ * ------------------------------------------------ ----------------------------------- * / 
#subscribe { 
font: 12px / 1.2 Arial, Helvetica, san -serif; warna: # 666; 
} 
#subscribe a, 
#subscribe a: hover, 
#subscribe a: visited { 
text-decoration: none; 
} 
.box-title { 
color: # 3B5998; 
ukuran font: 20px! penting; 
font-weight: bold; 
margin: 10px 0; 
perbatasan: 1px solid #ddd; 
-moz-border-radius: 6px; 
-webkit-border-radius: 6px; 
border-radius: 6px; 
box-shadow: 5px 5px 5px #CCCCCC; 
padding: 10px; 
garis-tinggi: 25px; font-family: arial! important; 
} 
.box-tagline { 
color: # 999;
margin: 0; 
perataan teks: tengah; 
} 
# subs-container { 
padding: 35px 0 30px 0; 
posisi: relatif; 
} 
a: tautan, a: dikunjungi { 
border: tidak ada; 
} 
.demo { 
display: none; 
} 
</style> <script src = 'http: //ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'> </script> <script src = "http: // yourjavascript. com / 11215013191 / jquery.colorbox-min.js "> </script> <script type =" text / javascript "> jQuery (document) .ready (function () { if (document.cookie.indexOf ('visited = true ') == -1) { var lima belasDays = 1000 * 60 * 60 * 24 * 30; var kedaluwarsa = Tanggal baru ((Tanggal baru ()). http : // ajax . googleapis . com / ajax / libs / jquery / 1 .5 / jquery . min . js '> </script> http : // yourjavascript . com / 11215013191/ jquery . colorbox - min . js "> </script> http : // blogger - templat







document.cookie = "visited = true; expires =" + expires.toUTCString (); 
$ .colorbox ({width: "400px", inline: true, href: "# berlangganan"}); 
} 
}); 
</script> 
<! - Ini berisi konten tersembunyi untuk panggilan inline -> 
<div style = 'display: none'> 
<div id = 'berlangganan' style = 'padding: 10px; latar belakang: #fff; '> 
<h3 class = "box-title"> Terima semua pembaruan melalui Facebook. Cukup Klik Tombol Suka Di Bawah ini <center> <p style = "line-height: 3px;" > ▼ </p> </center> </h3> 
<center> 
<iframe src = "// www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com% 2F freebloggerthemes& amp; width = 300 & colorscheme = light & amp; show_faces = true & amp; border_color =% 23ffffff & stream; stream = false & header = false & tinggi; tinggi = 258 "scrolling =" no "frameborder =" 0 "style =" border: none;overflow: disembunyikan; lebar: 300px; tinggi: 258px; "allowtransparency =" true "> </iframe> 
</center> 
<p style =" float: right; margin-right: 35px; font-size: 9px; "> Didukung oleh | <a style =" font-size: 9px; warna: # 3B78CD; text-decoration: none; "href =" http://blogger-templatees.blogspot.com "> Blog Gadgets </a> Melalui <a style =" font-size: 9px; warna: # 3B78CD; text-decoration: none; "href ="http://www.mybloggertricks.com "> Widget Blogger </a> </p> </div></div>. blogspot . com "> Blog Gadgets </a> Melalui <a style =" font-size: 9px; warna: # 3B78CD; dekorasi teks: tidak ada; "href =" http : // www .mybloggertricks . com "> Widget Blogger </a> </p>


Setelah menambahkan kode Ganti freebloggerthemes dengan URL facebook yang Anda tentukan dan klik simpan.
Catatan - Jika Anda sudah memiliki skrip jQuery di templat Anda, hapus baris berwarna merah. 

Ini dia. Sekarang ketika Anda memiliki kode lengkap, salin saja di dalam gadget dan simpan. Kamu selesai. Jika Anda menyukai Kotak Pop Up Like Facebook Sekali Pakai Untuk Blogger ini, silakan bagikan dan tulis komentar sebagai tanggapan Anda

Media Sosial

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna

Tidak ada komentar:

Leave a Reply