痞客邦pixnet部落格設定側邊出現浮動動態臉書facebooklikebox教學

 FB浮動視窗教學01  
如何在痞客邦pixnet部落格設定側邊出現浮動動態臉書facebooklikebox按鈕呢?


歷經網路google學習及測試後,只要按下列步驟,就可以完成設定

1.上傳您所要的FB浮動標籤圖片,如下圖所示~

☆圖片可以自由發揮設計
上傳完畢後,記錄下圖片網址

 FB浮動視窗教學01  

2.在自訂樣式CSS最底端加入下列語法

操作:部落格後台→左邊欄位→部落格管理→拉到最底的樣式管理→自訂樣式
→開始編輯CSS原始碼

 FB浮動視窗教學02 


痞客邦 CSS語法
http://pic.pimg.tw/dreammaker88/1385216825-3865907938.jpg ==>換成自己要的圖片連結

.fbbox{background: url("http://pic.pimg.tw/dreammaker88/1385216825-3865907938.jpg") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.fbbox div{border:none;position:relative;display:block;}
.fbbox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.fbbox span a{color: #808080;text-decoration:none;}
.fbbox span a:hover{text-decoration:underline;}

3.在側邊欄位新增語法

操作:部落格後台→左邊欄位→部落格管理→側邊欄位設定
 

 


放測邊欄位語法

分絲專頁有內容語法+按讚人員大頭照~語法
Sharehealthinformationè修改成自己的分絲專頁簡短網址

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fbbox").hover(function(){
$(this).stop().animate({right: "0"}, "medium");
}, function(){
$(this).stop().animate({right: "-250"}, "medium");
}, 500);
});
</script>
<div class="fbbox" style="">
<div>
    <iframe src="https://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fsharehealthinformation&amp;width=300&amp;height=500&amp;colorscheme=light&amp;show_faces=true&amp; header=true&amp;stream=true&amp;show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:590px;background:#fff;"></iframe>
</div>
</div>

分絲專頁只有按讚人員大頭照~語法
Sharehealthinformationè修改成自己的分絲專頁簡短網址

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fbbox").hover(function(){
$(this).stop().animate({right: "0"}, "medium");
}, function(){
$(this).stop().animate({right: "-250"}, "medium");
}, 500);
});
</script>
<div class="fbbox" style="">
<div>
 <iframe src="https://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fsharehealthinformation&amp;width=300&amp;height=500&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=500" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 300px; width: 500px;background:#fff;"></iframe>
</div>
</div>

您知道富翁好野人)是怎麼產生的嗎?

每一批富翁就是:
當別人不明白的時候,他明白他在做什麼
當別人不理解的時候,他理解他在做什麼
當別人明白了,他富有了;當別人理解了,他成功了。
                                                                 【香港李嘉誠】

想要成功致富、過非凡自由生活的您  !
一定要搭上富爸爸窮爸爸作者羅伯特.T.清崎( Robert Toru Kiyosaki)與秘密作者之一Bob Proctor (包伯.普克特)一致推薦~【VEMMA 維瑪的自動跟進系統】這班成功列車!

 

喜歡 VeMMA 維瑪的自動跟進系統嗎^^! 歡迎您立即免費註冊試用喔^^!
現在就可以立即開始讓 Vemmabuilder 系統幫你賺錢!!

 

全世界每一秒鐘都有人加入我們的行列,美商維瑪 VEMMA 邀請您共創健康自由財富人生!

機會稍縱即逝~請把握住這班已經啟動的成功列車

【貼心幫手Raymond】貼心提醒:
加入免費體驗後,請與Raymond聯絡,讓Raymond引導你如何使用自動賺錢系統!

Skype 

Me?? Skype Me?? 在线咨询/离线留言
Skype:  eve_fay                QQ:1926074636

 

創作者介紹
創作者 Raymond 的頭像
Raymond

貼心幫手網路創業家-在家工作聯盟兼職系統

Raymond 發表在 痞客邦 留言(2) 人氣()