photo 13_zpsf1a0f09e.jpg


雖然已經搬到pixnet超過3個月了

但這些小東西的妝潢卻是最近才開始著手進行!!

最主要當然是因為無名已經正式宣佈要終止服務了////

再怎麼偷懶也得上工了這樣  


台灣是個寫部落格非常盛行的國家XD

每次到國外旅遊

跟國外的朋友聊天(如果說到自已有寫Blog)

國外的朋友都很訝異…

有鑑於無名的關閉→多數的朋友應該會搬到痞客邦

所以再來分享一篇小小的Blog佈置教學


其實也是很簡單的東西(大家邊看邊動手應該就會成功了)

 
 photo 01_zpsd1b85d12.jpg

 

寫到這裡不得要說痞客其實還不錯柳

尤其在後台修改這個部份很完善

也提供很多app跟blog連結

例如facebook登入的狀態下就可以直接在痞客留言(是不是很方便!!!)

痞客提供超多app可以安裝在自家的blog

大家有空可以針對這部份去研究(看看哪些適合自已)




先來分享比較簡單的個人網址小icon教學好了

以前在無名可能就要透過語法的方式來搞定

可是痞客在後台就有設定摟!!

我自已也是搬過來之後,才發現痞客的環境其實很友善XD


 photo 10_zps6547b061.jpg

↑ ↑ 首頁的管理後台→右上角 帳戶管理



 photo 11_zpsc866942a.jpg

↑ ↑ 點選 網域設定



 photo 12_zps339aa2de.jpg

↑ ↑ 點選 上傳新ico檔



 photo 13_zps4878ecef.jpg

↑ ↑ 選擇自已的ico檔後 >開啟



 photo 14_zpsd115b32e.jpg



這樣子自已的網址列就有專屬的小icon摟

除了網址列之外

在歷史的瀏灠紀錄上面一樣看的到自已專屬的小icon

歷史的瀏灠紀錄的前三個分別是 露易絲 Stella 的blog瀏灠紀錄!!!



因為痞客本身就有支援這樣的小設定

所以擁有自已網址列前面的小圖就變的超級簡單///



 photo 15_zpsd8823544.jpg



小icon的部份

妳們可以找自已喜歡的圖案

做成16x16大小的圖檔

像我是用修圖軟體做一張白底紅色的狼→存檔時選存ico檔即可




= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =



接下來要教大家如何新增側邊浮動的facebook粉絲頁連結

過去一般我們都是把fb的連結固定式的掛在側邊

可是現在流行的是→可以動的fb連結柳

隱藏的時後只會出現facebook的橫bar

滑鼠移過去的話→這個橫bar就會自動開啟妳的fb粉絲頁讓網友們連結!!



其實也沒有到很難

小小的修改二串語法就可以搞定///

首先請 →按我← 先把這張facebook的圖另存新檔



存檔後要上傳到自已的網路圖床

像我的圖床是在photobucket

就把這張facebook的橫bar傳到自已的網路空間 (支援照片外連的網路空間)

這樣才不會造成別人流量超過/會害到別人破圖哦!! <<<很重要!



 photo 21_zps3164b4aa.jpg

↑ ↑ 進入管理後台→點選 自訂樣式



 photo 22_zps17442dc9.jpg

↑ ↑ 點選 CSS原始碼編輯




- - - - - - -- - - - - - -以下為貼在CSS原始編輯碼內的語法- - - - - - - - - - - - - -



.fbbox{background: url("請貼上自己上傳的圖片網址") 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;}



↑ ↑ 將上面這段語法貼在CSS語法的最末端 (這樣比較好找)



 photo 23_zps9c420fef.jpg

↑ ↑ 上面這張照片就是我的語法(截圖給大家參考)

藍色標記的區城,就是我自已支援照片外連圖床的網址

這個地方要換成妳們上傳圖片後的網址///
-----------最後按"儲存"



= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = 



 photo 24_zps4bdb7be6.jpg

↑ ↑ 我們再回到"管理後台" 的 "側邊欄位設定" >新增版位



2.自訂欄位標題的地方(看你要輸入什麼文字)

3.自訂區塊內容的地方(copy以下的語法稍做修改)


<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="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fvivi2005.pochido&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe>
</div>
</div>




(注意:上面藍色標記區的文字 要改成妳的粉絲團網址的名字部份就好)

(舉例:我的FB粉絲團網址是https://www.facebook.com/vivi2005.pochido  所以上面的藍色標記區就打上vivi2005.pochido就好)



最後→儲存設定

再回來自已的痞客邦Blog

就可以看到側欄出現浮動式的facebook連結摟!!



 photo 26_zps43545437.jpg

↑ ↑ 上圖是facebook隱藏中



 photo 27_zpsdfb99162.jpg

↑ ↑ 滑鼠移過去之後 橫bar就會自已露出摟。



這個浮動式facebook的連結我第二次就成功摟///

所以如果妳們第一次沒有成功

再重頭來一次→應該是有步驟miss掉了



當然,如果妳想要花俏一點

也可以自已改facebook橫bar的顯示圖片噢。

希望大家都很順利的完成新妝的佈置與妝潢(哈哈哈)

無名掰掰(已哭)

 

 

1514941664  

↑ ↑ [LOVE GIFT]幸運狼X1:AVIVA保養品(旅行瓶~都是單價比較高的保養品噢/價值$150~$280)

 

 photo 672A547D540D-1_zps04ab7f10.png

1)) 痞客邦/FB的帳號請登入>登入後請按"推"   留言妳是第幾推(參考上圖)

2)) 回到文章一開始的地方按讚  留言妳是FB的第幾讚

現在FB登入也可以留言給我 

但FB的留言因為沒有樓層的數字所以無法參加抽獎噢:D

 


                                                              001 





狼晶晶 發表在 痞客邦 PIXNET 留言(37) 人氣()


留言列表 (37)

發表留言
  • 悄悄話
  • 江牛牛

  • 推推

    耶!我的是一隻牛唷~~^^
  • LetsDonkey
  • 之前的插圖不見了,原來這裡有分享
    謝謝囉,
    推推
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • suger25
  • 推推推
    我剛從無名換過來
    好多都在摸索中~
    ico真的太可愛了~
    立馬學了起來^____^
  • 悄悄話
  • thur802
  • 10推39讚
  • 悄悄話
  • nemo75726
  • 12推44讚
    狼晶的分享
    太實用囉!!!
    推推~~
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • fanny279ss
  • 50讚15推

    狼晶好厲害!好多部落客都在煩腦怎麼搬家,但狼晶一直推出實用教學:)
  • VIVIAN
  • 好開心妳在痞客邦!!(花灑)
    謝謝妳的文啦啦啦啦~
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 高儀善
  • 24推 59讚
  • 思思
  • 思推27
    真的太實用ㄌ~
    晚點來試看看!!
  • 潘爸的家
  • 28 推
    61 讚

    謝謝版主用心的解說!!
  • 悄悄話
  • Ms.Queenie
  • 想要自己做張facebook橫bar的顯示圖片,但不知到尺寸該調多少耶...請問提供一下嗎:)
  • Smooth Lee
  • 教學很詳細,感謝!
  • 真妮4
  • 感謝清楚教學,馬上操作去~~
  • eva3589
  • 我做的側邊有跑出圖片,但一拉開裡面是空白,也無法聯結,我那裡做錯了?
  • 萊佳形象美學診所
  • 實用推!!
    浮動FBbox有製作出來
    請問那我要如何把原本固定的FBbox隱藏起來?
  • Xaviere
  • 推!!謝謝你的分享~成功了^^
  • Sunnie
  • 16推77讚
    謝謝分享 好實用喔!!太謝謝妳了^_^
  • 悄悄話
  • 小球凜花 ✿
  • 超感謝的,以推以分享
    一次成功!!!!!!!!!!!!
  • 免客氣 :)

    狼晶晶 於 2015/04/06 15:05 回覆