網頁側邊滑出FB粉絲頁

有人注意到進入樂夫輕鬆遊的網頁,
右邊會顯示一個FB粉絲團按讚滑出式小區塊嗎?
如果也想知道怎麼做的話,歡迎參考樂夫的簡易教學囉~
多簡易,以下的程式碼區塊通通複製、貼上你的Blog就可以了呢!!
是不是超簡單~ Let's Go!!

CSS的部分:

<style type="text/css">
.fbRightBox{
    background: url(https://c2.staticflickr.com/4/3762/33123329766_b056d8ed5e_o.png) no-repeat scroll left center transparent!important;
    display: block;
    float: right;
    height: 150px;
    width: 400px;
    position: fixed;
    z-index: 100;
    top: 120px;
    right: -400px;
    padding: 0 0px 0 46px;
    margin: 0;
}
</style>

配色上或大小不想跟樂夫相似度太高,可以透過CSS調整一下 width、background 的圖片設定!!
可以動手改改看各種數值有什麼差異,可能會有小驚喜呢 :P

JavaScript的部分:

<!--使用pixnet 平台已有引入JQuery 可省略-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(".fbRightBox").hover(
            function(){
                jQuery(this).stop().animate({right: "0"}, "medium");
            }, function(){
                jQuery(this).stop().animate({right: "-400px"}, "medium");
        }, 500);
    });
</script>

HTML的部分:

<div class="fbRightBox">
<div>
<iframe class="pix-iframe" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Floveplay6688&amp;width=400&amp;height=500&amp;colorscheme=light&amp;show_faces=false&amp;header=true&amp;stream=true&amp;show_border=true" style="border:none;overflow:hidden;width:400px;height:500px;"></iframe>
</div>
</div>

HTML這邊的iframe是FB的元件,可以參考FB社交外掛,可以自己修改大小、顯示的內容喔!!
(需要搭配修改一些CSS的寬度等屬性^^)

網頁側邊滑出FB粉絲頁

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

另一篇【讓Blog網頁主動跳出FB 按讚提醒】也很不錯喔~

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

快來按讚底下#樂夫輕鬆遊粉絲專頁,跟樂夫一起留言交流!!

文章標籤
創作者介紹

樂夫輕鬆遊

樂夫輕鬆遊 發表在 痞客邦 PIXNET 留言(5) 人氣()


留言列表 (5)

發表留言
  • Pink Girl
  • 感謝分享~~~
    女孩也要趕緊去試試看
  • 有看到粉紅女孩已經成功套用囉~ 好棒~~^^

    樂夫輕鬆遊 於 2017/04/27 15:31 回覆

  • 翁  盟
  • 真實用
    感謝美好分享喔!
  • 謝謝來訪,歡迎自由取用喔~^^

    樂夫輕鬆遊 於 2017/06/09 18:19 回覆

  • 55國語言翻譯公司
  • 這說不向裡用了自每人力了於為文這打可在爾大然是為相。

    Christmas,﹉ children, is not a date. It is a state of mind. 孩☆子﹍們§,聖〇誕節不﹋是☉一個◎日○期而§已﹍,而是﹉心♂靈的~狀◎態﹉。*☆ Mary Ellen Chase 瑪﹌莉§艾倫◇切◎斯

    165國♀語﹋言翻譯﹎公~司

    維﹍爾國際﹉翻♂譯有~限〇公司

    提﹋供☉越南◎文○翻譯§等♀服﹉務

    TEL: 02-2369-﹎0060

    LINE-○ID: 0989298406

    翻譯◎公﹂司|☆www.ksuseo.com/



  • Berry媽咪
  • 這個分享真棒~謝謝^^
找更多相關文章與討論