Subscribe EddyT-Web

clixsense.com




2007年8月12日 星期日

在blogspot文章插入Digg推文按鈕

本文章將依序介紹如何新增Digg推文按鈕在blogspot文章,如果您與艾迪一樣對於語法尚不是那麼樣熟練,先下載被粉版後再繼續操作唷~


備份完成後,將 [ 展開小裝置範本框 ] 打勾,首先找到 <h3 class='post-title'>,2007-08-12_071147.png


接著輸入語法


<script type='text/javascript'>
digg_url = '<data:post.url/>';
digg_title = '<data:post.title/>';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>,輸入完儲存模板。 2007-08-12_071652.png



預覽大略如下圖


2007-08-12_072016.png


為求部落格文章整齊度的美觀,我們可以在語法前後加上一段例如:


開頭加上 <div style='float:left; margin-right:5px'>,然後別忘了</div>做結尾;當中含意表示此<div>排列靠左,並與右方相距5px的距離。艾迪解釋得不好,用說的不容易懂。如下圖:



2007-08-12_072652.png


位置的變化如下圖:


2007-08-12_073243.png


基於任何原因的考量下,如果想將推文按鈕設置在文章結尾。可以找到 <p><data:post.body/></p> 之後,將語法加它後面。


2007-08-12_073637.png


(這是我示範時採用的位置,您也可以加在 <div class='post-footer'> 的後面..等等的其他位置。)


2007-08-12_073704.png


位置的變化如下圖:




2007-08-12_073830.png



如果你不喜歡這種大貼紙,Digg也有較精緻的按鈕,只要在語法中再插入一行 digg_skin = 'compact'; ,如下:


<div style='float:left; margin-right:5px'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
digg_title = '<data:post.title/>';
digg_skin = 'compact';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div>


2007-08-12_074231.png


貼紙就變成是小巧精緻的式樣囉! 


2007-08-12_074419.png


它還可以讓你改變底色,加入 digg_bgcolor = '#0000ff' ; ,其中 #0000ff 是色碼,可自行變換:


<div style='float:left; margin-right:5px'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
digg_title = '<data:post.title/>';
digg_skin = 'compact';
digg_bgcolor = '#0000ff';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div>


2007-08-12_074728.png


如下圖:


2007-08-12_074920.png


以上,本文章至此介紹告一段落,半瓶水響叮噹~希望能給讀者帶來一些幫助


也可搭配 控制模組只在首頁或內頁顯示 文章中的技巧,部落格的頁面將能做更多運用與變化唷!

2 則留言:

匿名 提到...

請問若是用天空部落格的CSS語法,該如何修改?

艾迪 提到...

ㄜ..我沒有使用過天空耶,所以我並不清楚他的CSS內容,不好意思唷

emailcash.com.tw