小荻的粉絲團【Cyndi love's享食天堂】歡迎來找小荻分享美食聊聊天 (✿◖◡◗)

Cyndi♥  痞客邦 PIXNET  - Google Chrome_2013-12-19_21-07-58_副本_副本    

 

Cyndi為了讓自己的部落格弄得更美美的,花了一整個下午都在弄那個搞不清楚的語法啊,

 

翻遍了整個網路資訊,簡單易懂的分享給大家,新年快到了,快點幫自己的部落格弄點新衣吧XDD

 

 

 

 

瀏覽器網址列小圖示

 

首先有發現到Cyndi部落格最上面的瀏覽器網址列的圖示不一樣了呢?

 

有自己專屬的圖示更可愛了呢。

 

另存新檔_2013-12-19_14-38-08_副本_副本  

 

首先自己要先做一個約16X16的小圖示,記得在存檔的時候,

 

存檔類型要選擇ICO(Windows圖示),再按儲存噢。

 

管理後台 » 帳戶管理 » 網域設定 - Google Chrome_2013-12-19_14-39-32_副本

 

接下來來到部落格的管理後台

 

帳戶管理網域設定,選擇上傳新ICO檔

 

管理後台 » 帳戶管理 » 網域設定 - Google Chrome_2013-12-19_14-42-02_副本_副本  

 

選擇檔案→選擇剛剛做好的小圖示→開啟送出

 

最後要按右下角的儲存設定成真正完成噢。

 

Cyndi♥  痞客邦 PIXNET  - Google Chrome_2013-12-19_14-50-43_副本

 

有沒有看到呢? 瀏覽器網址列的小圖示就會是自己設計的小圖示囉~~~  

 

 

 

 

接下來就是要跟大家分享側邊浮動臉書粉絲頁

 

管理後台 » 部落格 » 側邊欄位設定 - Google Chrome_2013-12-19_14-51-19_副本

 

管理後台中的部落格側邊欄位設定新增版位

 

管理後台 » 部落格 » 側邊欄位設定 - Google Chrome_2013-12-19_15-00-28_副本

 

複製以下的網址貼上,並將【放入自己的粉絲頁的網址後面的部分】改成自己的噢。

 

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abtlikebox{background: url("http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style> <div class="abtlikebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2F【放入自己的粉絲頁的網址後面的部分】&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span><a href="http://mbt33.blogspot.in/2012/12/two-new-stylish-floating-facebook-like.html" target="_blank">Get This!</a></span></div></div> </div> </div>

 

管理後台 » 部落格 » 側邊欄位設定 - Google Chrome_2013-12-19_15-01-38_副本  

 

接著就會出現存好的板位,再把他往左移

 

建議移到左側的最下方噢,最後儲存版面就好囉。

 

Cyndi♥  痞客邦 PIXNET  - Google Chrome_2013-12-19_21-27-14_副本_副本    

 

就可以看到側邊浮動的臉書囉。 

 

 

 

想要更進階一點嗎?設計成自己專屬的側邊浮動臉書。

 

這一部分Cyndi研究了好久,一直卡住,終於成功了。

 

首先要設計157X50的圖示(Cyndi是設成這樣,寬跟高如果想改變也是可以的噢),

 

一定要存成png檔!!!

 

好功夫 KUNGFU PANDA - 未命名_副本8521_副本

 

點進自己要的圖示照片,點滑鼠右鍵複製語法

 

語法很長,並不是全部都要,

 

選擇http://pic.pimg.tw/XXXXXXXX/XXXXXXXXXXX.png這一段複製,

 

XXXXXXX 代表每個人照片網址的英文數字噢。

 

管理後台 » 部落格 » 側邊欄位設定 - Google Chrome_2013-12-19_21-40-42_副本  

 

來到管理後台部落格側邊欄位設定,剛剛設定好的板位,按設定

 

管理後台 » 部落格 » 側邊欄位設定 - Google Chrome_2013-12-19_21-35-33_副本    

 

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abtlikebox{background: url("http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style> <div class="abtlikebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2F【放入自己的粉絲頁的網址後面的部分】&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span><a href="http://mbt33.blogspot.in/2012/12/two-new-stylish-floating-facebook-like.html" target="_blank">Get This!</a></span></div></div> </div> </div>

 

將黃色的部分改成剛剛複製的http://pic.pimg.tw/XXXXXXXX/XXXXXXXXXXX.png這段網址貼上,按送出

 

最後要記得按儲存設定噢。

 

Cyndi♥  痞客邦 PIXNET  - Google Chrome_2013-12-19_21-47-17_副本  

 

原本的臉書圖示就變成自己設計的噢。 

 

 

 

忙了快一整天終於成功的弄出新的版面,希望大家喜歡。

 

如果對於上面不清楚怎麼用或遇到問題可以在下面留問題告訴Cyndi噢,

 

Cyndi會竭盡所有力量幫你解答的,大家一起幫部落客穿新衣吧。   

 

覺得Cyndi的這篇文章對你來說很實用的話,麻煩不要吝嗇幫我推推一下噢   

 

 

 

按讚加入Cyndi的粉絲頁,更快知道Cyndi的一手消息噢

 Cyndi love's 享食天堂

也可以宣傳你的粉絲專頁 

如果您喜歡Cyndi的文章,可以在臉書按或著是下面的留言板按,讓Cyndi知道你噢

  您的鼓勵是Cyndi繼續寫文章的動力噢,有什麼想說的話,也歡迎在下面的留言板告訴我噢

未命名_副本2     謝謝您的光臨,歡迎下次再來噢

文章標籤
創作者介紹

芯小荻 's blog ♥

芯小荻 發表在 痞客邦 PIXNET 留言(26) 人氣()


留言列表 (26)

發表留言
  • 白白 ♥ Abby ♥
  • 超詳細超好用的
    我馬上就試了 一次成功
    Cyndi人超好的 !!!!!
    快幫你推 ~~~~
  • ya 看到你換你那美美的照了!!!!
    瀏覽器網址小圖示有要做嗎?

    芯小荻 於 2013/12/19 23:21 回覆

  • 嵐嵐*
  • 好實用!!!我也要來用用看看~~~
  • 嵐嵐成功了要跟我說噢^^

    芯小荻 於 2013/12/19 23:21 回覆

  • 悄悄話
  • almpa
  • 推~
    好強~超棒的!!
    馬上來試試~先謝謝Cyndi唷^^
  • 如果成功了或著是哪裡有問題都要跟Cyndi講一下讓我知道噢^^
    這樣確保大家都有試成功,一起改變部落格變美美的!!!

    芯小荻 於 2013/12/19 23:18 回覆

  • 白白 ♥ Abby ♥
  • 我還在努力修改照片 XDDD
  • 哈哈 加油!!!
    成功的時候跟我分享一下噢^^

    芯小荻 於 2013/12/20 00:02 回覆

  • almpa
  • 我成功了~
    可是我的存檔沒有ICO選項+挑不到滿意的照片來修改成專屬側邊~^^"
    不過終於出現側邊浮動臉書粉絲頁~超開心的^^
    謝謝Cyndi~>//3//<
  • almpa是用什麼軟體做側邊的圖示呢?

    芯小荻 於 2013/12/20 00:02 回覆

  • 悄悄話
  • 悄悄話
  • 艾摩爾
  • 好實用喔感謝你^^
  • 不會不會噢^^ 艾摩爾有試看看嗎?

    芯小荻 於 2013/12/21 01:13 回覆

  • 悄悄話
  • ☆萌萌★
  • 推推~~~好實用的教學!!!讓我這個笨蛋都把粉絲專頁放上去了太棒了
  • 有看到萌萌的浮動式臉書囉~~~~ya 恭喜成功!!!^^

    芯小荻 於 2013/12/21 21:20 回覆

  • 悄悄話
  • 小泡芙
  • 淺顯易懂的教學,改天來試試看^^
  • 看到小泡芙有側邊浮動臉書了呢^^

    芯小荻 於 2014/01/05 16:54 回覆

  • 口妮姬娃
  • 推8
    你你你你你你你超厲害的耶
    其實我試了超多次都沒成功
    現在立刻來試試

    我不會你要教我喔 拜託拜託 哈哈
  • 恭喜口妮姬娃成功!!!!
    有什麼問題可以再問Cyndi噢^^

    芯小荻 於 2013/12/23 21:23 回覆

  • 妙妙阿卡醬♫妙麻
  • cyndi妳好^^"我有重新再貼語法上去,不過有點"卡圖"耶!
    請問這樣的高、寬比例是多少的呢?我想再重弄一次圖案大小~再試試看!
    這麼麻煩妳真是不好意思~非常感謝cyndi的幫忙^^
  • Cyndi是設157X50,不會啦~~~~如果還有什麼問題都可以找我幫忙噢^^

    芯小荻 於 2013/12/23 21:19 回覆

  • 猴屁
  • 謝謝CYNDI大美女!!!!我成功了YAYAYA
  • 恭喜猴屁^^

    芯小荻 於 2014/01/12 00:02 回覆

  • 悄悄話
  • 悄悄話
  • 白白 ♥ Abby ♥
  • cyndi你把網誌設成不能右鍵了喔
    我想要來使用小圖標無法了 !QQ
  • 小圖標是瀏覽器網址列小圖示嗎?那個不用語法唷,只要按照步驟就可以了^^

    芯小荻 於 2014/01/24 00:33 回覆

  • 悄悄話
  • 悄悄話
  • ★滴滴☆
  • 我不能複製網址??
  • 滴滴你是要哪個的語法?
    後來把網站給鎖起來不能複製了
    我貼給你

    芯小荻 於 2014/07/14 23:20 回覆

  • LikeFlower
  • 12推~~終於解開我的疑問....真的很感謝分享!!
    語法這東西真是又可怕又有趣XDD
    我也要去玩一玩~~
  • 不會不會噢~~很高興有幫到你的忙^^
    對呀有點複雜,要研究好久喔

    芯小荻 於 2014/07/14 23:20 回覆

  • travel雲
  • 大推!!!!!!
    超感謝!!!!!!!!!
    終於用好了!!!!!!
  • 恭喜恭喜!!!!
    有成功好為你開心呀~~~ :)

    芯小荻 於 2014/08/28 13:29 回覆

  • 悄悄話
  • Tia
  • 謝謝我會用了~~!
  • 不客氣唷 ^^

    芯小荻 於 2015/04/11 22:28 回覆

找更多相關文章與討論
【 X 關閉 】

【痞客邦】大學生網路社群使用習慣調查

親愛的讀者,痞客邦希望能了解大學生的網路社群使用習慣,
填問卷即可抽獨家好禮喔!
(注意:關閉此視窗將不再出現)