PIXNET Logo登入

❤️灰鴿❤️

跳到主文



灰鴿 ~

部落格全站分類：圖文創作

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 7月 10 週日 202208:35

  • Google Web Designer 開箱文



這個由 google 開發釋出的 免費視覺化設計開發速成工具軟體
可讓您創建基於 HTML5 的交互式設計和動態圖形。
(繼續閱讀...)
文章標籤

灰 鴿 發表在 痞客邦 留言(0) 人氣(77)

  • 個人分類：電腦 學園
▲top
  • 7月 10 週日 202208:35

  • AAAA(#9565023854)

有很多文章內容都不見了 ~ 等候恢復 QQ
(繼續閱讀...)
文章標籤

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

  • 個人分類：電腦 學園
▲top
  • 6月 22 週三 202214:03

  • Blogger 的小工具(#9556703129)

d.png
  在博客 BLOGGER 新增最新 留言、文章,小工具 
 在Blogger的後台新增小工具裡,想找最新文章與最新回應功能,你會發現 Blogger 沒有提供這兩種小工具。
Blogger 的小工具、等於是痞客邦側欄管理裡的版位,不同的是痞客邦的版位,只能擺在側欄,而Blogger 的小工具可以放在版面的任何地方 
既然沒有提供,我們就動手來製作,為了讓對 APP 程式,不甚了解的格友能輕易安裝,因此、我把CSS樣式碼、HTML、Script 全部寫在一起,你只要會複製貼上就好。
Blogger 把日誌(post)、網頁(page)、回應(comment) 等等 ... 的資料都存放在你部落格下的一個資料夾 (feeds) 的位址,當你要求下載資訊時,url 如下 :
 
(繼續閱讀...)
文章標籤

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

  • 個人分類：電腦 學園
▲top
  • 5月 09 週一 202213:56

  • 創建 Blogger 一頁式版型



如何利用 Blogger 佈景主題 創建一頁式版型?
看過來 ~ 🌼 Essential 主題舘 👀
這裡、常被蹂躪，實在、再也找不到待下去的理由 ...
(繼續閱讀...)
文章標籤

灰 鴿 發表在 痞客邦 留言(27) 人氣(148)

  • 個人分類：電腦 學園
▲top
  • 10月 23 週六 202117:35

  • Blogger 的特效選單 小工具



使用 CSS 動畫特效屬性打造，天搖地動

用 Blogger 的連結清單小工具，建立選單導覽列，把簡短的CSS樣式碼夾在連結清單上。 
(繼續閱讀...)
文章標籤

灰 鴿 發表在 痞客邦 留言(8) 人氣(50)

  • 個人分類：電腦 學園
▲top
  • 10月 23 週六 202111:49

  • Blogger 的留言貼圖小工具




這個 Blogspot 的「表情符號貼圖」小工具可以讓你在 Blogger 留言區加上emoji表情符號，以及輕鬆的管理增添表情符號貼圖 ..

Blogger 的留言、預設是可以使用<a href='要連結的網址'>A 連結標籤的</a>，不過這樣對不懂 HTML 語法的使用者，實在太不友善了 😢
在留言區可以顯示圖片，不僅能使留言更生動以外，當七嘴八舌講不清時，可貼上截圖，一圖勝過千言萬語 ... 呀
安裝這個貼圖 APP 後，訪客留言時只要鍵入 URL 網址,就會被自動的加上超連結 🌈
⭐訪客只需在留言區貼上圖片的網址, 便會被轉換成圖片顯示
前往預覽效果演示 👀
(繼續閱讀...)
文章標籤

灰 鴿 發表在 痞客邦 留言(0) 人氣(14)

  • 個人分類：電腦 學園
▲top
  • 2月 04 週四 202114:03

  • Blogger 的小工具

d.png
  在博客 BLOGGER 新增最新 留言、文章，小工具 


 在Blogger的後台新增小工具裡，想找最新文章與最新回應功能，你會發現 Blogger 沒有提供這兩種小工具。
Blogger 的小工具、等於是痞客邦側欄管理裡的版位，不同的是痞客邦的版位，只能擺在側欄，而Blogger 的小工具可以放在版面的任何地方 
既然沒有提供，我們就動手來製作，為了讓對 APP 程式，不甚了解的格友能輕易安裝，因此、我把CSS樣式碼、HTML、Script 全部寫在一起，你只要會複製貼上就好。
Blogger 把日誌(post)、網頁(page)、回應(comment) 等等 ... 的資料都存放在你部落格下的一個資料夾 (feeds) 的位址，當你要求下載資訊時，url 如下 :
 
日誌 ~ /feeds/posts/default?alt=json-in-script&max-results=10 
回應 ~ /feeds/comments/default 
網頁 ~ /feeds/pages/default
每個項目，都放在 (feeds) /下的不同路徑，有兩個參數，你最好要知道，start-index 從第幾筆開始，max-results 要下載幾筆資料，
假如、你要在別的地方使用，在 feeds 之前，需要加上 你的部落格的首頁網址，也就是你註冊的網址 
以我的格子 "https://e-717.blogspot.com" 為例 -> https://e-717.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=10&start-index=10 
看到這裡、你應該已看出，只要你填上誰部落格的網址，就能讀取誰的部落格資料了 ...
安裝須知 <<< 必看

在後台的設定裡，網站資訊提供，至少要設定成可讀取 
 

請檢查範本或其他小工具裡，看看是否已有安裝過 jQuery 程式庫，如果沒有安裝過請多加入以下，這行程式碼。
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

假如、你需要安裝多個外掛程式，通常都會使用到 jQuery，最好、將jQuery 程式庫貼在，範本的<head>之間</dead>，因為每一個小工具，並不一定會同時出現在同一個畫面。
如果、你是要安裝在痞客邦的側欄，就不需要引入 jQuery 程式庫，因為、痞客邦已有含入 jQuery ，只是、無法使用錢字號 $，必須將所有的 '$' 換成 jQuery，
或是在 <script src="....> 之後，程式開始的第一行，加入這行 ~  var $=$||jQuery; 
區塊的間距位置 或許需要調整 <style type="text/css">
#comment-list {margin-top: -42px; overflow:hidden;}

第一次、點按最新文章，展開時才會開始下載資料，會停頓一下...
進入 >> 後台管理 >> 版面配置 >> 新增一個「HTML/JavaScript」小工具
複製程式碼：
最新文章~ 程式碼： 

<div id="posts-list">
<img src="https://pic.pimg.tw/e717/1608523373-3319523954-g.png" id="iexpen" style="margin:0px 45%; transition: 1s;" />
<ul id="post-list"></ul>
</div>


<style type="text/css">
#posts-list {margin-top: -42px; overflow:hidden;}


#post-list div{margin:3px 0 3px -132px;
overflow:hidden; position: absolute; width:120px; height:100px;}
#post-list a {text-decoration:none; color:#222;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 10;}


#post-list {border: 1px dotted; overflow:hidden; padding:2PX; list-style:none;}
#post-list li{ min-height:110px; border-bottom: 1px solid; background:white;
padding-left:130px;overflow:hidden;position: relative; line-height: 150%;}
#post-list p{margin:5px;}
#post-list div img{width:102%; height:102%; transition: .5s;}
#post-list li:hover div img{transform:scale(1.3)}
#post-list li:hover span{color:#ff50fa;}
#post-list span{ margin-right:30px; line-height: 180%; font-size:18px;
font-weight: bold;}


#post-list > li:nth-of-type(2n+1){background:#f0fbfb !important;}
</style>


<script>


$(function() {


function psone(data) {


var tent = data.feed.entry, temp='';


if (!tent) { $('#post-list').html('<span>沒文章 下載</span>'); return(0);}


for ( i in tent) {


temp += '<li><a href="'+ tent[i].link[4].href+ '"></a><div>';
temp += tent[i].content.$t.match(/<img\S*.[^>]*>/) + "</div><p><span>";
temp += tent[i].title.$t+' : </span>';
temp += tent[i].published.$t.replace(/[T].*/,"") +"<br />";
temp += tent[i].content.$t.replace(/<\S[^>]*>/g,"").substr(0,30) + '</p></li>';
}


$('#post-list').append(temp);


}


var cx=0,ip=0;


$("#post-list").animate({ height: 'toggle'}, 0);


jQuery("#iexpen").click(function(){


if(ip==0){ $.ajax({
url: '/feeds/posts/default?alt=json-in-script&max-results=10',
type: 'get',
dataType: 'jsonp',
success: psone,


}); ip++;
}


if(cx==0){ cx=1; $("#iexpen").css('transform' , 'rotate(180deg)'); }


else{cx=0; $("#iexpen").css('transform' , 'rotate(0deg)'); }


$("#post-list").animate({ height: 'toggle',opacity: 'toggle'}, 1200);


});});


</script>



限制字數的長度 : 綠色 ! substr(0,30) 

 
 最新留言~ 程式碼：

<style type="text/css">
#comment-list {margin-top: -42px; position: relative;}
.autimg{ position: absolute; margin: 8px; width:80px;height:65px; box-shadow: 2px 2px 8px rgba(10%,10%,10%,0.6);left:0;}
.pimg{float:left; width:100px; height:80px;}


#com-list P{margin-top:5px; max-height:120px;}
#com-list a {text-decoration:none; color:#222;}
#com-list {border: 1px dotted; overflow:hidden; padding:2PX; list-style:none;}
#com-list li{ border-bottom: 1px solid; background:white; padding-top:6px; overflow:hidden; position: relative;}
#com-list li img{max-width:100px; max-height:90px;}
#com-list span{ margin-right:25px; color:#36F;}
.e717{max-width:130px; max-height:120px; }
#com-list > li:nth-of-type(2n+1){background:#e9fbfb !important;}


</style>


<div id="comment-list">
<img src="https://pic.pimg.tw/e717/1608523373-3319523954-g.png" id="iexpent" style="margin:0px 45%; transition: 1s;" />
<ul id="com-list"></ul>
</div>


<script>


$(function() {
$.ajax({
url: '/feeds/comments/default?alt=json&max-results=8',
type: 'get',
dataType: 'json',
success: xson
});


function xson(data) {


var tent = data.feed.entry, temp='';
if (tent !== undefined) {
for ( i in tent) {


temp += '<li><a href="'+ tent[i].link[2].href;
temp += '"><img class="autimg" src="https:'+ tent[i].author[0].gd$image.src.replace(/https?:.*/ig,'//1.bp.blogspot.com/-xifjV61gz-c/X_PIzvy2D3I/AAAAAAABHt8/jyd-FgLaLrcUXzDCIN4HDskegMWaXT98gCLcBGAsYHQ/s0/pic_338.jpg');
temp += '" /><div class="pimg"> </div><span>'+ tent[i].gd$extendedProperty[1].value.replace(/\s.*/i,"") + '</span>';
temp += tent[i].author[0].name.$t+' :<p>';
temp += tent[i].content.$t.replace(/(https?:\/\/.*?(gif|jpg|png))/ig,'<img src="$1" class="e717" />') + '</p></a></li>'; 
}
$('#com-list').append(temp);


} }


$('#com-list').animate({ height:'toggle' }, 0);


var cx=0;


jQuery("#iexpent").click(function(){


if(cx==0){ cx=1;
$("#iexpent").css('transform' , 'rotate(180deg)');
}


else{cx=0;
$("#iexpent").css('transform' , 'rotate(0deg)');
}
$("#com-list").animate({ height: 'toggle',opacity: 'toggle'}, 1200);


}); });


</script>



限制高度 : 綠色 !  #com-list P{margin-top:5px; max-height:120px;}
 痞客邦最新文章 ~ 程式碼：

<div id="e717_article"></div>


<style><!--


.fi-set img {
-webkit-transition: opacity .4s;
-moz-transition: opacity .4s;
-o-transition: opacity .4s;
transition: opacity .4s;
margin:6px 0px;
max-width:100%;
opacity:1;
border-radius:0px 50px;
border:1px solid #777;
-webkit-filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.7));
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.7));
}


.fi-set:hover img {opacity:0.5;
transition: 2s;
transform: rotate(-10deg) rotateY(360deg) rotate(10deg);
}
.fi-set:hover legend{ color:#f5e;}


.fi-set {
border-radius: 10px ;
border: 1px solid #f77;
padding: 5px;
margin: 12px auto;
text-align:center;
}


legend{
padding: 0px 6px;
margin: 0 auto;
}
--></style>


<script type="text/javascript">// <![CDATA[


var new_article = function(user,put,count="1"){


jQuery.getJSON("https://emma.pixnet.cc/blog/articles/latest?user="+ user +"&limit="+count+"&format=json&api_version=2", function(data){
if(data.error!="0"){
jQuery("#DebugZone").append("Message:" + data.message + "<br>");
return;
}
var fi_set ='';
jQuery.each(data.articles, function(i,blog){



fi_set = ('<fieldset class="fi-set">');
fi_set += '<legend>' + blog.title + '</legend><a href="' + blog.link + '" class="relate-link" title="' + blog.title + '">';
if(blog.thumb.match('90x90')!=null){
fi_set += '<img src="' + blog.thumb.substring(0,blog.thumb.length-9) + '200x130.jpg" class="article-image">';
}
else if(blog.thumb.match('width=90&height=90')!=null){
fi_set += '<img src="' + blog.thumb.substring(0,blog.thumb.length-12) + '225&height=135" class="article-image">';
}
else{
fi_set += '<img src="' + blog.thumb + '" class="article-image">';
}


fi_set += '</a></fieldset>';
jQuery(put).append(fi_set);
});
});
};


new_article('你痞客邦的帳號ID','#e717_article','6');


// ]]></script>




需要修改的參數 : 紅色 ~ 你在痞客邦的帳號 ID，藍色 ~ 要顯示幾篇文章
new_article('痞客邦的帳號','#e717_article','6');
 

 
填入程式碼：最後記得按儲存，醬就 OK 了!!
 

<- 裝在P客的範例、在側欄 ~~ 我在榖鴿的 ~ 醉心文章 
 
(繼續閱讀...)
文章標籤

灰 鴿 發表在 痞客邦 留言(0) 人氣(30)

  • 個人分類：電腦 學園
▲top
  • 2月 02 週二 202111:53

  • Blogger 的新範本


  找回走失的綿羊，改造 Blogger 翻頁區塊的樣式
如果您使用的是新的Blogger響應式佈景主題 ( Soho，Contempo，Notable和Emporio ) 您可能已經注意到，在新主題中，沒有Home，Next和Previous 連結，也沒有留言筆數，不知道為什麼 Blogger 要刪除。
 
(繼續閱讀...)
文章標籤

灰 鴿 發表在 痞客邦 留言(0) 人氣(11)

  • 個人分類：電腦 學園
▲top
  • 1月 28 週四 202109:26

  • Blogger 版面配置

1611573861409.jpg
 要怎樣在 Blogger 版面配置內，
添加可以放小工具的區塊空間 <b:section>
依據目前 Blogger 官方認定的網頁類型 pageType：有「item」、「archive」或「index」3種。
其實在小工具標記裡，也有一個同樣叫 pageType 的屬性，屬性值有 ~ 「all」、「archive」、「main」或「item」，預設值為「all」， 可選擇小工具只會顯示在網誌中指定的網頁上 ..
Blogger 以為大家都是神人匿? 都會搞這些況且、每次要讓小工具在不同的場景粉墨豋場時，都要打開範本設定，還真厚工 蹓!! 
為了不要老是要到範本裡撈魚，咱們就來把4種場景，打包裝到側欄裡，包場演出一撈泳浴
下面這一段是 Blogger 說明中心 : 對 <b:section> 區段標籤的解說 
(繼續閱讀...)
文章標籤

灰 鴿 發表在 痞客邦 留言(0) 人氣(9)

  • 個人分類：電腦 學園
▲top
  • 1月 20 週三 202107:15

  • 切換 新舊留言的順序


  使用 CSS 樣式碼，改變新舊留言的排列順序 

假如、你只純粹要讓最新留言浮在最上面，只要在你自訂的 > 部落格 CSS 原始碼 內，加入以下的這行 CSS樣式碼
#comment-text{ display:flex; flex-direction: column-reverse;}
 任意翻轉留言排列順序的小工具，共有製作3種款式 甲意那一款，自己夾回去 ..  
本工具需要使用到，JavaScript  程式語言，所以、請先到帳號中心，查看你的帳號，手機是否已有驗證，(有驗證過的帳號，才有執行程式的能力 )
(繼續閱讀...)
文章標籤

灰 鴿 發表在 痞客邦 留言(0) 人氣(3)

  • 個人分類：電腦 學園
▲top
123»

QQ-icon ⏰👀🍄⭐

JavaScript

留言排序

垃圾桶

參觀人氣

  • 本日人氣：
  • 累積人氣：

引類詳尋

  • 版型、分享 (17)
  • 叨叨絮語 (26)
  • 拈花惹草 (4)
  • 無關 ~ 風花雪月 (52)
  • 電腦 學園 (23)
  • 黑吐白兔 (32)
  • 有機生活-蔬果-美食 (3)
  • 未分類文章 (1)

格友的 新文章

我在榖鴿

最新文章