Pages

Jumat, 29 Maret 2013

Cara Membuat PopUp Like Facebook dan Follow Twitter di Blog


Cara Membuat PopUp Like Facebook dan Follow Twitter di Blog

v  Silahkan masuk ke blogger anda.
v  Kemudian masuk pada Tata letak.
v  Pilih HTML/Java Secript
v  Masukan Kode Dibawah ini :

<style> /* ColorBox Core Style: Ini kode css biasa silahkan ubah jika anda mau merubah desain tampilannya @ http://yoshiwafa.blogspot.com. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block;} .cboxIframe{width:100%; height:100%; display:block; border:0;} /* User Style: Change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{background:#000;opacity:0.5 !important;} #colorbox{ 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; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0 0;} #cboxTopCenter{height:14px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x top left;} #cboxTopRight{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px 0;} #cboxBottomLeft{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/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) repeat-x bottom left;} #cboxBottomRight{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px -32px;} #cboxMiddleLeft{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -175px 0;} #cboxMiddleRight{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -211px 0;} #cboxContent{background:#fff; overflow:visible;} #cboxLoadedContent{margin-bottom:5px;} #cboxLoadingOverlay{background:url(http://1.bp.blogspot.com/-PPvu-446sn4/Txrt1QsGH1I/AAAAAAAAFWw/_jWYVoR1HX8/s1600/loading-background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(http://1.bp.blogspot.com/-31strss_1-E/Txrt1J6NThI/AAAAAAAAFWo/4P12CJPj924/s1600/loading.gif) no-repeat center center;} #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;} #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;} #cboxPrevious{left:0px; background-position: -51px -25px;} #cboxPrevious.hover{background-position:-51px 0px;} #cboxNext{left:27px; background-position:-75px -25px;} #cboxNext.hover{background-position:-75px 0px;} #cboxClose{right:0; background-position:-100px -25px;} #cboxClose.hover{background-position:-100px 0px;} .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;} .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;} .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;} .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;} /*-----------------------------------------------------------------------------------*/ /* Facebook Likebox popup For Blogger /*-----------------------------------------------------------------------------------*/ #subscribe { font: 12px/1.2 Arial,Helvetica,san-serif; color:#666; } #subscribe a, #subscribe a:hover, #subscribe a:visited { text-decoration:none; } .box-title { color: #3B5998; font-size: 16px !important; font-weight: bold; margin: 5px 0; border:1px solid #ddd; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; box-shadow: 5px 5px 5px #CCCCCC; padding:5px; line-height:25px; font-family:arial !important; } .box-tagline { color: #999; margin: 0; text-align: center; } #subs-container { padding: 35px 0 30px 0; position: relative; } a:link, a:visited { border:none; } .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=false') == -1) { var fifteenDays = 0; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); $.colorbox({width:"350px", height:"470px", overflow:"none", inline:true, href:"#subscribe"}); } }); </script> <!-- This contains the hidden content for inline calls --> <div style='display:none'> <div id='subscribe' style='padding:10px; background:#fff;'> <h3 class="box-title"> <center>Di Like dan Follow Ya Sahabat<br/> Terima Kasih Banyak</center> <center><p style="line-height:3px;" ></p></center></h3> <center> <small>Tunggu sampai tombol Like dan Follow muncul</small><br/><br/> <a href="https://twitter.com/HasanItsybitsy" class="twitter-follow-button" data-show-count="true" data-size="large" data-show-screen-name="false">Follow @HasanItsybitsy</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FKomputer-Media%2F187547511295803%3Fref%3Dhl&amp;width=292&amp;height=200&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:200px;" allowtransparency="true"></iframe><br/> <small><b>Klik sembarang atau klik tanda silang [x] untuk menutup</b></small> </center> </div> </div>
 
v  Warna Biru Kode Like Box Facebook Anda, Warna Merah User Name Twitter anda, Warna Hijau Ganti dengan Kata-kata anda.
v  Kemudian Simpan


Catatan:
Untuk mendapatkan Kode Like Box Facebook, anda harus mengikuti langkah-langkah berikut:
1.      Buka halaman pengembang Facebook, dalam hal ini adalah harus membuka URL https://developers.facebook.com/docs/reference/plugins/like-box/
2.      Masukkan URL Halaman Facebook atau Fans Page yang Anda kelola kemudian tentukan setelan untuk tampilan like box. Dalam hal ini misalnya: mengatur ukuran lebar dan tinggi, warna, maupun elemen yang akan ditampilkan pada like box. Dan untuk lebih jelasnya perhatikan gambar di bawah ini.



3.      Klik tombol ‘Get Code’ untuk mendapatkan kode plugin like box Anda, seperti tampak pada gambar di bawah ini.

4.      Silahkan salin Kode Like Box anda ke yang code yang warna biru diatas (warna biru kode like box facebook anda).



Reaksi:

8 komentar:

  1. mainan'a script trs,,, makin deket2 ma web master

    BalasHapus
    Balasan
    1. skrang waktunya unjuk kepala .....

      Hapus
  2. bang caramisahin blog archive, atau entri nya supaya nga jd nyatu gmana ya ?
    di mohon bantuannya :)

    BalasHapus
  3. Mantap akhrnya setelah googling kesana dan kemari dapet juga yang work di blog ane

    BTW kunjungi balik dong gan blog ane bila perlu follow

    http://adikadarmesta-adika.blogspot.com/

    BalasHapus
    Balasan
    1. done Gun ..... Follow juga yaaaa

      Hapus
  4. Gan kalo mau munculin sekali aja gimana caranya ?

    BalasHapus
    Balasan
    1. maksud'e munculin satu kali ????

      Hapus