close

甜心屋自製 yahoo部落格邊框教學 -簡易篇

樂於分享的人..都有一顆柔軟的心^_^


撇開美美的創作不談..
心玲覺得寫這篇教學的分享者真的很用心.
希望大家能從不懂到懂..互相分享學習..

其實很多blog創作分享者,
不計辛勞的為各位服務..
目的只有一個..就是喜歡默默的帶給大家喜悅..
因為這樣也能溫暖我們的心.

各位創作分享同好..心玲也為妳們拍拍手^_^..
blog..是讓我們抛開煩惱.放鬆心情.展現自我的地方.
但要好好照顧自己不要太累哦!^^
願平安喜樂
 
                                                                                                                  心玲  合十


甜心屋自製 yahoo部落格邊框教學 -簡易篇

很多人都想製作屬於自己的專屬邊框 來打造自己的部落格 所以甜心這次的教學就是yahoo部落格邊框教學-簡易篇

為什麼要稱呼為簡易篇 畢竟不懂語法以及語法尺寸的朋友很多

就連甜心都是一各語法白痴

 所以甜心這次要用簡單的教學讓大家輕鬆製作邊框 等到都熟練了 我門在去學習真正的語法還不遲

首先我們先了解部落格邊框語法的基本指示區塊

/*shared rounded corner for all modules部落格邊框語法←在此可以輸入中文名稱*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url(http://邊框左上角橫幅圖片網址01.gif
) left top no-repeat;margin-right:5px;}
.ycntmod .rctop div {background:url(http://邊框右上角直幅圖片網址02.gif
) right top no-repeat;height:98px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcbtm {zoom:1;background:url(http://邊框左下角橫幅圖片網址03.gif) left bottom no-repeat;margin-right:5px;}
.ycntmod .rcbtm div {background:url(
http://邊框右下角直幅圖片網址04.gif) right bottom no-repeat;height:152px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcl {padding-left:6px;background:url(
http://邊框左邊框線圖片網址05.gif) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:6px;background:url(
http://邊框右邊框線圖片網址06.gif) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

yahoo部落格的一般邊框框線 是由6張圖片配合著語法組合而成

既然稱為簡易篇 當然我們一開始不可能自己去編輯語法 甜心的小方法就是

請各位可以運用一各自己認為大小符合自己條件的邊框

例如 甜心製作好發表過的邊框 語法裡如上述所說的 他會有6張圖片網址

 每張圖片都依序另存在自己的電腦裡面

甜心就取一各最近發表過的邊框來運用吧

甜心屋自製 日式姬系粉色超可愛動物邊框

首先甜心先取他的左上角圖片另存在自己電腦裡 在使用甜心最愛用的動畫軟體G5來製作

Ulead GIF Animator5甜心發表Ulead GIF Animator 5註冊版+中文化下載點這裡

  甜心在部落格發表過分享此軟體的文章 資源來自網路上 請大家支持正版

接下來來試著做看看吧

步驟一 剛提到的 請先將六張圖片分別另存在自己的電腦後 我們來開啟第一張圖片

步驟二 開啟圖片後 我們取的是他的尺寸來製作 所以請將裡面的圖片逐一刪除

步驟三 加入圖像 將自己收集而來的圖片素材 加入到畫格裡

步驟四 加入自己喜歡的素材圖片後 一定不夠邊框的長度 點圖片後使用上方的複製貼上的工具 來增加整體感

在這你就可以開始做自己想要的發揮意境 你可以加些小東西 例如娃娃 或是字體

步驟五 同上述提到 你可以再自行增加一些喜歡的素材圖片 使得你的邊框更為生動喔 現在就發揮你的想像力吧!!

步驟六 每個人的風格不同 當然也有很多人喜歡靜態的邊框來佈置自己的部落格 喜歡動態可使用下方工具來增加畫格

喜愛靜態的朋友 則不需~

步驟七 發揮自己的想像 來製作出自己喜歡的邊框效果 但是儲存前 請記得一定要來看看預覽圖

步驟八 當預覽後 沒有需要修改的地方時 將圖片做儲存動作 請記得 一定要儲存GIF檔案

儲存步驟在圖片裡

基本邊框共有六張圖片來構成 甜心取第一張來作示範 其實方式都相同

都是分別開啟圖片來製作出整體感

底下是邊框分割的示意圖供大家參考

當你六張圖片全部製作完成後 想自己使用或是想分享給大家使用

你可以自己製作預覽圖

也可以順便看看自己還未放在網頁上呈現出來的是怎樣的效果

一切\準備就緒後 就是將六張圖片分別上傳至網路取得圖片網址

想取得免費上傳空間 請點這裡

取得網址後 在分別將網址貼在語法中 簡單來說 妳可以隨意取走甜心製作的邊框語法

去掉甜心裡面的圖片網址 再將你的新網址黏貼進去

不過請千萬記得 圖片尺寸一定要是跟你取走的語法是相同的

不然出現的會是很搞笑的邊框喔!!

這篇邊框教學屬於簡易篇 跟其他懂語法製作邊框的達人

當然還是有所差距 希望大家一起加油喔!!

甜心這次的教學 其實拖了滿久的時間

很久以前就很想製作邊框教學讓大家都能自己製作專屬邊框

由於要解說的地方實在太繁雜

甜心的表達有限 如果做的不好 還請多多包含

關於製作上有問題的朋友 歡迎發問喔

甜心知道的地方 只要有時間 甜心會一一作回覆 但是甜心不會的地方 還請見諒喔!

arrow
arrow
    全站熱搜

    babyhouseyumi 發表在 痞客邦 留言(0) 人氣()