html: 2月 2018

2/28/2018

HTML to JavaScript Convertor

想要將 HTML 標記語言轉成 JavaScript 來輸出，語法簡單，難度卻難在 '單引號'、"雙引號" 對字串組成，很容易混淆觀不清，總產生錯誤,也要忙上一段時間因雙單引號引起出錯，若有這個困擾或是想學習單、雙引號的應用，可以透過 HTML to JavaScript Converter 這個免費的線上服務來取得協助，快速的入門。

HTML to JavaScript Convertor

Google Search Console

前往

網站管理員
提交 Sitemap 檔案
這有助 Google 瞭解該如何檢索您的網站。

http://html.cc9394.com/atom.xml?redirect=false&start-index=1&max-results=500
http://html.cc9394.com/feeds/posts/default?orderby=updated
http://html.cc9394.com/atom.xml?redirect=false
http://html.cc9394.com/sitemap.xml
http://html.cc9394.com/rss.xml

管理員網站管理員

Google Search Console

前往

Blogger-下拉式選單相簿

Blogger 版面的寬度

Blogger 版面的寬度 <b:template-skin>
<b:variable default='930px' name='content.width' type='length' value='1440px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='180px'/>
<b:variable default='360px' name='main.column.right.width' type='length' value='180px'/>

<![CDATA[
body {
min-width: 800px;
}

.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: 800px;
max-width: $(content.width);
width:100%;
}

800px 是要把最小寬度
1440px 是頁面的最大寬度

Blogger 版面的寬度

管理員金句

如上面例子 , 以走馬燈方式顯然常用聖經金句。

將 Blogger 「標籤」變成「走馬燈標籤」

將 Blogger 「標籤」變成「走馬燈標籤」,如右側例子。
先在後台新增小工具 -> 選安裝標籤 ,
再在後台範本 -> 編輯HTML , 搜尋這標籤以下片段:

<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

將以上內容替換為:

<marquee onmouseover="this.stop();" onmouseout="this.start();" style='font-size:20px; color:#538b01; font-weight:bold; font-style:italic;'>
<b:loop values='data:labels' var='label'>
<a expr:href='data:label.url'>
<data:label.name/> |
</a>
</b:loop>
</marquee>

將 Blogger 「標籤」變成「走馬燈標籤」

將 Blogger 「標籤」變成「走馬燈標籤」,如右側例子。
先在後台新增小工具 -> 選安裝標籤 ,
再在後台範本 -> 編輯HTML , 搜尋這標籤以下片段:

2/27/2018

左側指數圖

左側指數圖

小時鐘

右上角小時鐘

<div ondblclick="location.href='http://html.ug5g.com/search/label/管理員%20小程式#小時鍾'" title="Double click to HTML Code" style="cursor: pointer;width:100px;position:fixed;top:20px;right:100px;"><canvas id="canvas" >Your browser does not support the canvas element. </canvas></div>  <script>function clock(){   var now = new Date();   var sec = now.getSeconds();   var min = now.getMinutes();   var hr  = now.getHours();   var yy  = now.getFullYear();   var mm  = now.getMonth()+1;   var dd  = now.getDate();   var d7  = now.getDay();   var c7  =["日","一","二","三","四","五","六"]; sec= sec<10 ? sec="0"+sec :sec; min = min <10  ? min ="0"+min  :min ; hr = hr>=12 ? hr-12 : hr; hr = hr<10  ? hr="0"+hr :hr; mm = mm<10  ? mm="0"+mm :mm; dd = dd<10  ? dd="0"+dd :dd; var td = dd+"/" + mm +"/"+yy; var tdd = "星期"+c7[d7];    var ctx = document.getElementById('canvas').getContext('2d');   ctx.save();   ctx.clearRect(0,0,canvas.width,canvas.height);   ctx.translate(canvas.width/2,canvas.height/2-20);   ctx.scale(0.25,0.25);   ctx.rotate(-Math.PI/2);   ctx.strokeStyle = "black";   ctx.fillStyle = "white";   ctx.lineWidth = 5;   ctx.lineCap = "round";    // Hour marks   ctx.save();   for (var i=0;i<12;i++){     ctx.beginPath();     ctx.rotate(Math.PI/6);     ctx.moveTo(100,0);     ctx.lineTo(120,0);     ctx.stroke();   }   ctx.restore();    // Minute marks   ctx.save();   ctx.lineWidth = 5;   for (i=0;i<60;i++){     if (i%5!=0) {       ctx.beginPath();       ctx.moveTo(117,0);       ctx.lineTo(120,0);       ctx.stroke();     }     ctx.rotate(Math.PI/30);   }   ctx.restore();     var sec = now.getSeconds();   var min = now.getMinutes();   var hr  = now.getHours();   hr = hr>=12 ? hr-12 : hr;    ctx.fillStyle = "black";    // write Hours   ctx.save();   ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )   ctx.lineWidth = 14;   ctx.beginPath();   ctx.moveTo(-20,0);   ctx.lineTo(80,0);   ctx.stroke();   ctx.restore();    // write Minutes   ctx.save();   ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )   ctx.lineWidth = 10;   ctx.beginPath();   ctx.moveTo(-28,0);   ctx.lineTo(112,0);   ctx.stroke();   ctx.restore();     // Write seconds   ctx.save();   ctx.rotate(sec * Math.PI/30);   ctx.strokeStyle = "#D40000";   ctx.fillStyle = "#D40000";   ctx.lineWidth = 6;   ctx.beginPath();   ctx.moveTo(-30,0);   ctx.lineTo(83,0);   ctx.stroke();   ctx.beginPath();   ctx.arc(0,0,10,0,Math.PI*2,true);   ctx.fill();   ctx.beginPath();   ctx.arc(95,0,10,0,Math.PI*2,true);   ctx.stroke();   ctx.fillStyle = "rgba(0,0,0,0)";   ctx.arc(0,0,3,0,Math.PI*2,true);   ctx.fill();   ctx.restore();    ctx.beginPath();   ctx.lineWidth = 5;   ctx.strokeStyle = '#325FA2';   ctx.arc(0,0,142,0,Math.PI*2,true);   ctx.stroke();    ctx.restore();  ctx.fillStyle = "Blue"; ctx.textAlign="center";  ctx.font = "bold 18px serif"; ctx.fillText(td,canvas.width/2,canvas.height-46); ctx.fillText(tdd,canvas.width/2,canvas.height-30);   window.requestAnimationFrame(clock); }  window.requestAnimationFrame(clock); </script>

html 測試左入右出

<div id="LR18314847">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
input HTML
</textarea>
<div class="DP">00</div>
</div>
<script>
LiRoT('LR18314847','300');
</script>

2/26/2018

管理員 html 測試上入下出

html 測試上入下出

<div id="ud123">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
HTML input
</textarea>
<div class="DP">00</div>
</div>
<script>udFT('ud123','300');</script>

html 測試單入單出

Google 上傳圖片 / Blogger 上傳圖片，改成無糊效果或黑白效果

Blogger 上傳圖片或 Google 上傳圖片後，網址為 : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIXRtt3lDiwZqqLYz4vGwxlii3I9ABshakfJEJmexnArTVfen4E-eerzZAIvU6aRbFjlR8B3tBTC3OT8UYCFG0aR_CFKBVgikUUAbinZqGxGqNfHXE4anRvl7Z9vTNO5qZbFYfkgYIKSud/s1600/IMG-20170401-WA0007.jpg"，
在圖片網址中 s1600 為圖片 1600px 寬，在 s1600 之後插入參數後得出無糊效果 / 黑白效果。

無糊效果:
在 s1600 之後插入這行參數 : -fcrop64=1,000007b9ffffd845:Soften=1,60,0
圖片網址改為："https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIXRtt3lDiwZqqLYz4vGwxlii3I9ABshakfJEJmexnArTVfen4E-eerzZAIvU6aRbFjlR8B3tBTC3OT8UYCFG0aR_CFKBVgikUUAbinZqGxGqNfHXE4anRvl7Z9vTNO5qZbFYfkgYIKSud/ -fcrop64=1,000007b9ffffd845:Soften=1,60,0 /IMG-20170401-WA0007.jpg"

黑白效果:
在 s1600 之後插入這行參數 : -fcrop64=1,ffffffaa:ansel=1,FF0000
圖片網址改為："https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIXRtt3lDiwZqqLYz4vGwxlii3I9ABshakfJEJmexnArTVfen4E-eerzZAIvU6aRbFjlR8B3tBTC3OT8UYCFG0aR_CFKBVgikUUAbinZqGxGqNfHXE4anRvl7Z9vTNO5qZbFYfkgYIKSud/ -fcrop64=1,ffffffaa:ansel=1,FF0000 /IMG-20170401-WA0007.jpg"

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIXRtt3lDiwZqqLYz4vGwxlii3I9ABshakfJEJmexnArTVfen4E-eerzZAIvU6aRbFjlR8B3tBTC3OT8UYCFG0aR_CFKBVgikUUAbinZqGxGqNfHXE4anRvl7Z9vTNO5qZbFYfkgYIKSud/s1600/IMG-20170401-WA0007.jpg"

onmouseover ="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIXRtt3lDiwZqqLYz4vGwxlii3I9ABshakfJEJmexnArTVfen4E-eerzZAIvU6aRbFjlR8B3tBTC3OT8UYCFG0aR_CFKBVgikUUAbinZqGxGqNfHXE4anRvl7Z9vTNO5qZbFYfkgYIKSud/,ffffffaa:ansel=1,FF0000/IMG-20170401-WA0007.jpg'"
onmouseout ="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIXRtt3lDiwZqqLYz4vGwxlii3I9ABshakfJEJmexnArTVfen4E-eerzZAIvU6aRbFjlR8B3tBTC3OT8UYCFG0aR_CFKBVgikUUAbinZqGxGqNfHXE4anRvl7Z9vTNO5qZbFYfkgYIKSud/s1600/IMG-20170401-WA0007.jpg'"/>
把滑鼠移到左面圖片時。

Google 上傳圖片 / Blogger 上傳圖片，改成無糊效果或黑白效果

Blogger 要如何上傳、管理圖片

Blogger 要如何上傳、管理圖片。

Blogger 要如何上傳、Blogger 管理圖片、Blogger 圖片圖床。Blogger 上傳圖片後，會自動存放在 Picasa 圖床。
前往圖床網址 https://get.google.com/albumarchive 。

Blogger 傳圖片的介面，必須編輯文章或網頁時，才能上傳圖片。因此想要上傳時，可按以下步驟：

1.Blogger 後台。
2.新文章。
3.插入圖片 [按功能欄圖畫 ]。
4.新增圖片，選擇上傳圖片方法。

圖片上傳的動作完成後，這張圖就自動存放在 Picasa 圖床了，因此有沒有儲存文章，都不會讓這張圖片消失。

我上傳圖片後，當你切換到「HTML 模式」，這張圖片的語法也許長得像這樣：

紅色字是這圖片網址，當中藍色 s1600 是這張圖被為 1600px 寬。

前往1600px 寬圖片網址 :

https://4.bp.blogspot.com/-aYcyfNZIe4Y/WUZAa7g5QsI/AAAAAAAAQBo/AkAUEIM3J-QvMfgzunpfBCbOnoBMcI5FwCLcBGAs/s1600/images.jpg

Blogger 要如何上傳、管理圖片

Blogger 要如何上傳、管理圖片。

圖片上傳的動作完成後，這張圖就自動存放在 Picasa 圖床了，因此有沒有儲存文章，都不會讓這張圖片消失。

我上傳圖片後，當你切換到「HTML 模式」，這張圖片的語法也許長得像這樣：

紅色字是這圖片網址，當中藍色 s1600 是這張圖被為 1600px 寬。

前往1600px 寬圖片網址 :

https://4.bp.blogspot.com/-aYcyfNZIe4Y/WUZAa7g5QsI/AAAAAAAAQBo/AkAUEIM3J-QvMfgzunpfBCbOnoBMcI5FwCLcBGAs/s1600/images.jpg

將Blogger標籤(分類)變成下拉式選單

本網誌頂部有下拉拉式選單例子。
先在後台新增小工具 -> 選安裝標籤 ,
再在後台範本 -> 編輯HTML , 搜尋這標籤以下片段:

<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if> (<data:label.count/>)
</li>
</b:loop>
</ul>

將以上內容替換為下列紅字:

<select class='MMselect' id='Blogger' onchange='location=this.options [this.selectedIndex].value;' onmouseout='this.blur()' onmouseover='this.focus()'>
<option style='display:none;' >Blogger</option>
</select>
<script>
<b:loop values='data:labels' var='label'>
var libTT = "<data:label.name/>".substring(0,7);
if(libTT == "Blogger"){
var x = document.getElementById("Blogger");
var option = document.createElement("option");
var valueA = document.createElement("value");
option.text = "<data:label.name/>";
option.value = "<data:label.url/>";
x.add(option);}
</b:loop>
</script>






<select class='MMselect' id='other' onchange='location=this.options [this.selectedIndex].value;' onmouseout='this.blur()' onmouseover='this.focus()'>
<option style='display:none;' >other</option>
</select>
<script>
<b:loop values='data:labels' var='label'>
if("<data:label.name/>".indexOf('管理員') == -1){
if("<data:label.name/>".indexOf('Blogger') == -1){
if("<data:label.name/>".indexOf('jquery') == -1){
if("<data:label.name/>".indexOf('get') == -1){

var x = document.getElementById("other");
var option = document.createElement('option');
var valueA = document.createElement('value');
var nnss = '<data:label.name/>';
option.text = nnss ;
option.value = '<data:label.url/>';
x.add(option);
}}}}
</b:loop>
</script>




<style type='text/css'>

. MMselect option:hover {font-style: italic; font-weight:bold; color:White;background-color:Gray;}

. MMselect {padding:15;}

. MMselect optgroup { font-size:1px;}

. MMselect option {padding-top: 5px; }

</style>

訂閱：留言 (Atom)

2/28/2018

HTML to JavaScript Convertor

HTML to JavaScript Convertor

Google Search Console

Google Search Console

Blogger-下拉式選單相簿

Blogger-下拉式選單相簿

Blogger 版面的寬度

Blogger 版面的寬度

管理員 金句

將 Blogger 「標籤」 變成 「走馬燈標籤」

將 Blogger 「標籤」 變成 「走馬燈標籤」

2/27/2018

左側指數圖

左側指數圖

右上角 小時鐘

html 測試 左入右出

2/26/2018

html 測試 上入 下出

html 測試 單入 單出

Google 上傳圖片 / Blogger 上傳圖片，改成 無糊效果 或 黑白效果

Google 上傳圖片 / Blogger 上傳圖片，改成 無糊效果 或 黑白效果

Blogger 要如何上傳、管理圖片。

Blogger 要如何上傳、管理圖片。

將Blogger標籤(分類)變成下拉式選單

MP3

img

TradingView

/* 股票*/

管理員金句

將 Blogger 「標籤」變成「走馬燈標籤」

將 Blogger 「標籤」變成「走馬燈標籤」

右上角小時鐘

html 測試左入右出

html 測試上入下出

html 測試單入單出

Google 上傳圖片 / Blogger 上傳圖片，改成無糊效果或黑白效果

Google 上傳圖片 / Blogger 上傳圖片，改成無糊效果或黑白效果