close

一開始開這個部落格,有一半是為了工作學習實驗用,有一半是好奇廣告收益到底如何?所以盡力挑了一個看順眼的版型就繼續了,結果實驗做著做著、文章寫著寫著、圖畫著畫著,開始有了些想法,所以開始開粉絲專頁、做系列文章,跟著就不滿足基本版型樣式啦!

2825C4AE-FB5D-4EA5-930E-547E992F6773.jpeg

決定來紀錄一下我做過的修改,因為...記不住啊!第一次爬文改好,想改第二次或作微調,卻怎麼都想不起來當初是怎麼做到的?看懂一點code卻不是真懂就是這樣鱉腳!要筆記筆記咩!


■ FB粉絲專頁

紛絲專頁是與粉絲朋友們隨時保持熱度的好工具,當然也是一個導流量的重要夥伴,當然要把這道門好好開在部落格上。

步驟1:到FB取得程式碼

開啟這個官方代碼產生器網頁連結,輸入粉絲專頁的網站後,填好想要的寬度、高度,「頁籤」留白的話,就會像下圖一樣是簡易式的面版,然後按下「取得程式碼」。

https://developers.facebook.com/docs/plugins/page-plugin

BSS.png

切到IFrame的頁籤,拷貝全部的程式碼。

FBI.png

步驟2:到痞客邦的後台,從「側欄管理」新增版位後,定義「標題」,並在下方「內容」欄位貼上FB程式碼碼,送出後就完成。

SIDFB.png


帶連結的圖片

把系列文章,用一個具代表性的圖片作為入口,既清楚又有吸引力!同樣也是從後台的「側欄管理」新增版位,定義「標題」,並在下方「內容」欄位製作這段程式碼:

<a target="_blank" href="目標網址"><img border="0" src="圖片網址"></a>

10F4900E-905D-4E32-A34A-C0CB27E5F22A.jpeg

如果已經把圖片上傳到痞客邦相簿,取得圖片網址的簡單方法是,開一篇新文章,插入該圖片,記得「顯示尺寸」要選「大(不超過1024)」,圖片出現後點擊兩下出現設定框,即可取得圖片網址。

4E813E20-0078-4BC5-A661-FF7D1D8A0356.jpeg

編輯好送出後就會有帶超連結的圖片出現啦!


同場加映,CSS版型調整

覺得大圖加大字比較好看(嗚嗚~老花眼症候群),但大部分的版型其實都塞不下,所以就得動動手腳了。不過因為我也只是個素人,說不清為啥,總之就是選一個能修改CSS的主題,用關鍵字找出設定總寬、內容寬、側欄寬的地方,放大,就搞定了!

素人蝦子摸象 Try and Error 大法,記得善用「預覽」,都改對了再儲存喔!

B6724F9E-DE4E-4111-A7CA-7AB33B5F528D.jpeg

F02257A1-CCCC-424C-97F7-5B7FC3BB44FB.jpeg

F73240A9-A889-44B5-966E-70F999063860.jpeg


最後,一路修改的感想是,剛開始看別人的部落格怎麼這麼豐富、成熟,自己的卻很卡在原生的版型上,然後就會覺得有點氣餒!不過隨著時間拉長,慢慢有fu覺得可以加加這個、畫畫那個,再Google找找作法,慢慢加慢慢累積,其實也漸漸越來越豐富了!就越來越能持續下去且想法很多,果然是不要放棄就對了!經營部落格的大家再一起加油吧!


■ 用痞客邦玩SEO系列文章 

[用痞客邦玩SEO] 痞客邦MIB廣告及Google AdSense設定

[用痞客邦玩SEO] 痞客邦設定Google Analytics及看懂數據

[用痞客邦玩SEO] 找比較熱門的文章來導流的結果

[用痞客邦玩SEO] 過去一年的數據洞察

[痞客邦樣式裝修] 素人學側欄添加FB粉絲專頁及圖片連結

[用痞客邦玩SEO] 打通Google Search Console及該怎麼看數據

[用痞客邦玩SEO] 就是打不通的GTM

[用痞客邦玩SEO] 從Search Console優化文章標題


 大媽咪和小兒子,用旅遊、畫畫、過生活      

D25E09F4-03ED-4966-8D97-A3D3D1B96E5B.png

大媽咪寫得好辛苦,用這裡訂車,懇求支持!

 大媽咪和小兒子出國去                

929EDE0F-0E88-47D6-80C7-A9EEDD4AA475.png 6A560C3C-E340-4647-82F2-E7E67B4E63CB.png

CEA31643-5EE2-4CFB-9E6B-73809FF42462.png

 大媽咪和小兒子遊台灣              

F635345E-8718-4AA8-83F1-3F5BA101FB99.jpeg   279203B0-E831-48F8-962A-36C1E7D1E0C2.jpeg

32CB388E-1BF8-4350-AC58-3CB040D8C684.jpeg   A97290DA-4247-442E-8B9B-A3F2B9C3EEA9.jpeg

arrow
arrow

    阿文 發表在 痞客邦 留言(1) 人氣()