樂夫輕鬆遊

最近有人注意到進入樂夫輕鬆遊的網頁，
會顯示一個FB粉絲團按讚的提醒，
也想知道怎麼做的，那樂夫就在此把小技巧分享出來給大家參考囉~
廢話不多說，直接來看看以下的程式碼區塊~ Go!

<style type="text/css">
.fbPopBox{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
    display: none;
    z-index: 1000;
}
.fbPopBox-div{
    position: absolute;
    top: 120px;
    left: 38%;
    width: 400px;
    padding: 5px 5px;
    background-color: white;
    border-radius: 10px 10px 10px 10px;
}
.fbPopBox-close{
    position: absolute;
    right: -15px;
    top: -10px;
    border-radius: 10px 10px 10px 10px;
    cursor: pointer;
}
.fbPopBox-title{
    background-color: rgba(61, 147, 204, 1);
    border-radius: 10px 10px 0px 0px;
    color: white;
    font-size: 150%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    z-index: 100;
}
</style>

配色上或大小不想跟樂夫相似度太高，可以透過CSS調整一下 background-color 的設定!!

<!--使用pixnet 平台已有引入JQuery 可省略-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- 此為記錄cookie 的套件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript">
var readCount = 5; //避免過度影響觀看，6次才出現1次提醒，隔日重計
var waitPopSec = 6; //停留6秒後才顯示提醒
function callFbPopBox(){
    var popFbBox = jQuery.cookie("popFbBox");
    if(popFbBox==null || popFbBox=='' || popFbBox >=readCount){
        jQuery('.fbPopBox').fadeIn();
    }else{
        var popFbBoxInt = parseInt(popFbBox)+1;
        jQuery.cookie("popFbBox", popFbBoxInt, { expires: 1, path: '/' });
    }
}
function closeFbPopBox(){
    jQuery('.fbPopBox').fadeOut();
    jQuery.cookie("popFbBox", '1', { expires: 1, path: '/' });
}
jQuery(document).ready(function() {
    setTimeout(callFbPopBox,waitPopSec*1000);
    jQuery('.fbPopBox-close').on('click', closeFbPopBox);//點選關閉按紐
    jQuery('.fbPopBox').on('click', closeFbPopBox);//點選空白處即可關閉
    //按ESC 即可關閉
    jQuery(window).on("keyup", function (e){
        if (e.which == 27) closeFbPopBox();
    })
});
</script>

<div class="fbPopBox">
<div class="fbPopBox-div">
<div class="fbPopBox-title">
    <strong>樂夫輕鬆遊</strong>
    <img class="fbPopBox-close" src="https://c1.staticflickr.com/1/724/33039351921_f6f1016cf2_o.png"/>
</div>
<div style="color: #666; font-size: 14px; text-align: center;">如果喜歡樂夫的文章，請幫我們按個讚唷~ （・◇・）/~~~</div>
<iframe class="pix-iframe" frameborder="0" scrolling="no" src="https://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Floveplay6688&amp;width=400&amp;height=310&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true" style="border:none;overflow:hidden;width:400px;height:210px;"></iframe>
</div>
</div>

HTML這邊的標題、說明文字，也可以改成自己想說的字樣喔!!

把上面三個區塊全部都給貼到【側欄管理】>【自訂欄位】中，
當然不要忘記把 loveplay6688 換成自己的FB粉絲團帳號或ID唷~
不然可就要感謝各位幫樂夫多多宣傳呢~ 哈哈XD
ps. 因為pixnet的側欄在手機版網頁不會出現，所以手機版也就不會跳出提醒囉~

不知道有人注意到側欄滑出FB視窗嗎？下一篇~ 【在Blog網頁側邊滑出FB粉絲頁】

那就分享到這邊，使用上若有什麼想法或疑問，歡迎按讚加入底下粉絲專頁跟樂夫分享或提問喔~~