✍ 📁 🙈 🙉 🙊

Blogger width of page
修改頁面寬度

 blogger 頁面寬度 修改

 body { min-width: 50%;
        font-size:18px;
        overflow-x:hidden; 
        background-color:lavender; 
        width: ;  
        margin:auto;            } 

 .content-outer, .content-fauxcolumn-outer, .region-inner {
 background-color:lavender;
 min-width: 900px;    /*文章寬度最小*/
 max-width: 2500px;   /*文章寬度最大*/
 width: 100% ;        /*文章寬度*/ 
}

隱藏頂部Blogger 導覽列

 <style>
  #navbar { display:; }  
 </style>

Edit

#ccs #HTML #blogger #擴展Blogger版面寬度 #.content-outer #.content-fauxcolumn-outer #.region-inner

<h3>Blogger 標籤 改為 下拉選單 <<?>select><br>
讓文章更好檢索</h3>
<pre> 第一步 : 打開 Blogger 後台【範本】選擇【編輯HTML】,
          按下【ctrl】鍵 +【 F 】 搜尋關鍵字 標籤,
          修改 Blogger HTML 內標籤。
 第二步 : 打開 Blogger 後台 ,新增小工具,用 [HTML/JavaScript],
         新增 HTML 下拉式選單標籤顯示在你的網誌內。

<table border="1" style="width:100%">
<tbody><tr>
<td class="Td">Blogger的標籤</td>
<td class="Td">改成下拉選單標籤</td>
</tr><td>
<ul>
<li>管理員 本網誌 CSS
<li>管理員 免費程式
<li>管理員 網站管理員
<li>管理員 閱讀更多
<li>管理員 繁簡體轉換
<li>標簽 <<?>button> 按鈕
<li>標簽 <<?>div> 捲軸
<li>標簽 <<?>div> 對齊
<li>標簽 <<?>input>
<li>標簽 <<?>input> radio
<li>CSS Color code
<li>CSS content 插入內容
<li>CSS cursor 滑鼠游標
<li>CSS display flex flex-wrap
<li>CSS display 顯示類型
<li>CSS display flex
</td><td>
<select>
<option style="display:none;">管理員
<option>本網誌 CSS</option>本網誌 CSS
<option>免費程式</option>
<option>網站管理員</option>
<option>閱讀更多</option>
<option>繁簡體轉換</option>
</select>
<br>
<select>
<option style="display:none;">HTML
<option><<?>button> 按鈕
<option><<?>div> 捲軸
<option><<?>div> 對齊
<option><<?>input>
<option><<?>input> radio
</select>
<br>
<select>
<option style="display:none;">CSS
<option>Color code
<option>content 插入內容
<option>cursor 滑鼠游標
<option>display flex flex-wrap
<option>display 顯示類型
<option>display flex
</select>
</td></tr></tbody></table>

pre ,div ,ol { font-size: 20px ;}
 h3 { text-align: center;
     font-size: 30px;
     font-weight: bold;
     text-shadow: 10px 6px 10px grey;
     color: blue; }
</style>

<div style="border: 1px solid black; padding: 10px;">
第二步 : <br>
在後台 新增小工具 -><span class="njANJ"><br>
  <span class="ocsWod">HTML/JavaScript</span>
  <span class="Owr4ze">新增第三方功能或其他代碼到您的網誌 ,</span><br>
  <span class="Owr4ze">加入下列 HTML</span><br>
  </span><br>  
  
<pre><<?>style>
#ALL管理員   { width:150px;height:35px;position:
              fixed; top:165px;left:10px }
#ALLBlogger { width:150px;height:35px;position: 
              fixed; top:200px;left:10px }
#ALLhtml    { width:150px;height:35px;position: 
              fixed; top:235px;left:10px }
<<?>style>

<<?>div id="cckDPaa">
<<?>select class='ALLselect' id='ALL管理員' 
onchange='location=this.options [this.selectedIndex].value;'  
onmouseover='this.focus()'>
<<?>option style="display:none;" />管理員
<<?>/select>

<<?>select class='ALLselect' id='ALLBlogger' 
onchange='location=this.options [this.selectedIndex].value;'  
onmouseover='this.focus()'>
<<?>option style="display:none;" />Blogger
<<?>/select>

<<?>select class='ALLselect' id='ALLhtml' 
onchange='location=this.options [this.selectedIndex].value;'  
onmouseover='this.focus()'>
<<?>option style="display:none;" />HTML
<<?>/select>

<<?>script type="text/javascript">
var Alllength =  ALLlabel.length;
var i;
for (i = 0 ;i < Alllength; i=i+2 ){
var okok = 0 ;

if(ALLlabel[i].indexOf('管理員') > -1 && okok == 0){
var x = document.getElementById("ALL管理員");
var option = document.createElement("option");
var value = document.createElement("value");
option.text = ALLlabel[i].replace(/管理員/,"");
option.value =ALLlabel[i+1];
x.add(option);okok=1;}

if(ALLlabel[i].indexOf('Blogger') > -1 && okok == 0){
var x = document.getElementById("ALLBlogger");
var option = document.createElement("option");
var value = document.createElement("value");
option.text = ALLlabel[i].replace(/Blogger/,"");
option.value =ALLlabel[i+1];
x.add(option);okok=1;}

if(ALLlabel[i].indexOf('標簽') > -1 && okok == 0){
var x = document.getElementById("ALLhtml");
var option = document.createElement("option");
var value = document.createElement("value");
ALLlabel[i] = ALLlabel[i].replace(/標簽/,"");
option.text =  "<" + ALLlabel[i].replace(/@/,">") ;
option.value =ALLlabel[i+1];
x.add(option);okok=1;}
<<?>/script>
</pre>

Edit

#ccs #HTML #Blogger Label select #Blogger Label

blogger/mediamanager

<h3>Blogger mediamanager 媒體經理<br>
Googlr Blogger 管理圖片。</h3>

<div>你可以在網誌文章中加入相片、影片和其他圖片，<br>
你可以前往 <a href="http://blogger.com/mediamanager" rel="noopener" target="_blank">blogger.com/mediamanager</a> 尋找及管理資料。
</div>

<ol>
  <li class="ghelp-hidden"><a href="https://www.blogger.com/" target="_blank" rel="noopener">登入 Blogger</a>。</li>
  <li>在左上角選取所需網誌。</li>
  <li>按一下您要編輯的文章或建立新文章。</li>
  <li>按一下頂端的「插入圖片」圖示 <img src="//lh3.googleusercontent.com/PE6A_TGVAeJi26UsrOEcRqqcsISeDGQeuQN979cSQnG9x5yGWlSBmUsUdQ0_suDGBA=w36-h36" width="18" height="18" alt="Insert image" data-mime-type="image/png" data-alt-src="//lh3.googleusercontent.com/PE6A_TGVAeJi26UsrOEcRqqcsISeDGQeuQN979cSQnG9x5yGWlSBmUsUdQ0_suDGBA">。</li>
  <li>選擇上傳圖片的來源位置。</li>
  <li>選取一或多張圖片，然後按一下 [插入]<strong></strong>。
    <ul>
      <li>新增圖片後，如要變更圖片大小、說明文字或對齊方式，請按一下圖片。</li>
    </ul>
  </li>
</ol>

<style>

pre ,div ,ol { font-size: 20px ;}
 h3 { text-align: center;
     font-size: 30px;
     font-weight: bold;
     text-shadow: 10px 6px 10px grey;
     color: blue; }
</style>

Edit

#ccs #HTML #blogger #mediamanager #blogger mediamanager #Googlr Blogger 管理圖片。 #Blogger mediamanager 媒體經理

Google Apps Script

<h3>我的 Google Apps Script 範例程式碼</h3>
<div> //  紅色是你的試算表地址<br>
var SpreadSheet = SpreadsheetApp.openByUrl('<r>https://docs.google.com/spreadsheets/d/1loDC9_v5gdeosEd01_S4x619gCmxZS6SF4uRQLo3rOg/edit#gid=0</r>') ;</div>
<pre>var SheetName = SpreadSheet.getSheetByName('工作表1');
var obj = {} ;
var objA =  {  檔案名稱: SpreadSheet.getName(), 
               工作表名: SheetName.getName(), 
               資料筆數: SheetName.getLastRow(), 
               資料項目: SheetName.getLastColumn(), } ; 
var A1=1,A2=1,B3=4,B2=4 ;

function doGet(e) {   
   var  parameter = [] ;   
   if(typeof e !== 'undefined') { parameter = e.parameter ; }

//  Google 試算表 刪除欄位 deleteColumns
if( parameter.dow == "deleteColumns"){ 
    SheetName.deleteColumns(parameter.colIndex,parameter.numcols) ;
    return ContentService.createTextOutput("ok" ); }

//  Google 試算表 插入欄位 insertColumns
if( parameter.dow == "insertColumns"){ 
    SheetName.insertColumns(parameter.colIndex,parameter.numcols) ;
    return ContentService.createTextOutput("ok" ); }

//  刪除多個列 delete Rows            
if( parameter.dow == "deleteRows"){ 
    SheetName.deleteRows(parameter.rowIndex,parameter.numRows) ;
    return ContentService.createTextOutput("ok" ); }

// ** 插入列 Insert Row **
if( parameter.dow == "insertRows"){ 
    SheetName.insertRows(parameter.rowIndex, parameter.numRows) ;
    return ContentService.createTextOutput("ok" ); }

// ** 清空 工作表 內容 **
if( parameter.dow == "clearALL"){ 
    var first = SheetName;
    first.clear();
    return ContentService.createTextOutput("clearALL ok" ); }

// ** 讀取所有 或 指定範圍 資料 **
if( parameter.dow == "ReadData"){
    ReadData(parameter.A1,parameter.A2,parameter.B1,parameter.B2);
    return ContentService.createTextOutput(JSON.stringify(obj)).
    setMimeType(ContentService.MimeType.JSON)  }

// ** 加入多數內容 ******
if( parameter.dow == "setValuesALL"){
    setValuesALL(parameter.Row , parameter.Col , 
                 JSON.parse(parameter.Sdata)) ;
     return ContentService.createTextOutput('setValuesALL ok') }

Logger.log(objA)

return ContentService.createTextOutput(JSON.stringify(objA)).
        setMimeType(ContentService.MimeType.JSON)   ;
}

// ** 加入多數內容 **
function setValuesALL(Row,Col,TT){
var range = SheetName.getRange(Row,Col,TT.length,TT[0].length);
    range.setValues(TT); }

//  讀取所有 或 指定範圍 資料 ***
function ReadData(A1,A2,B1,B2) { 
//  讀取指定範圍用
if(A1 != null){
    var data = SheetName.getRange(A1,A2,B1,B2).getValues();}
//  讀取所有用
else {var data = SheetName.getDataRange().getValues()}

obj = data;
Logger.log(obj); }

</pre>

<h3>Google Spreadsheet
<br><br>
<img style="width:80%;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcVe4K_ORUNzZ9blmwt9AhsyCSZ381_hOtqNVYvFa8nFEITz9zQZd1fwsXpc7xB9C87qW5dkCOClkIfTC57AAzWFluzf0nxGSOf-HjPkhWO3qbN7UyqwXyyDijuAfWJsemwmhlL6ac83jc6VqqXAp8hXITCD-DQW1HBZa5sU7pOTBO4p0/s2600/app1.jpg" /></h3>
<pre> 製作完你的試算表後，紅框標示的區塊，就是去到執行 或 編寫 Apps Script
 指令碼的地方。</pre>

<br>
  
☛ <a  href="https://developers.google.com/apps-script" target="_blank" title="HTML">Google Apps Script 官網</a> 
<br>
☛ <a  href="https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet" target="_blank" title="HTML">使用 google Apps 腳本自動執行任務</a>

.T3 {width:150px;border: 1px solid black;text-align: center;color : blue; 
     background:radial-gradient(circle farthest-corner at left,yellow,red);background:radial-gradient(circle farthest-corner at left,yellow,red);}
.T2 {width:80px;text-align: center}

pre { font-size: 20px ;}
 h3 { text-align: center;
     font-size: 30px;
     font-weight: bold;
     text-shadow: 10px 6px 10px grey;
     color: blue; }
</style>

<h3>Google Apps Script development platform
<br><br>
<img style="width:80%;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja7higLn_5MgI7cpNonQrpXhe-h8JjNoDQ6rctVKFYA6OG1bFxhAxYBnpHRHzXZN-B0sUEv1duFeSidqyKebk-2q3BREWzHvieKFwd1w-i-enFIftkhI8eotxgk0NPyx80f4myd11FVlCUz7dL2qqit9YBpi5XjuBAX3G85gta6aGkvtw/s1600/app2.jpg" /></h3>

<pre> 進入 Apps Script 指令碼的地方，編寫寫你的 app script，測試偵錯之後，
 發佈部署上網，供 HTML 向 Google 試算表 讀取或寫入資料 的橋樑。</pre>

pre { font-size: 20px ;}
 h3 { text-align: center;
     font-size: 30px;
     font-weight: bold;
     text-shadow: 10px 6px 10px grey;
     color: blue; }
</style>

Edit

#ccs #HTML #blogger #google blogger #google apps script #Google Sheets 為網頁資料庫 #免費資料庫 #doGet(e) #deleteColumns() #insertColumns() #免費資料庫

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

Blogger width of page

Blogger width of page
修改頁面寬度

隱藏頂部Blogger 導覽列

Blogger Label select

blogger/mediamanager

Google Apps Script

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

Blogger width of page

Blogger width of page 修改頁面寬度

隱藏 頂部Blogger 導覽列

Blogger Label select

blogger/mediamanager

Google Apps Script

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

Blogger width of page
修改頁面寬度

隱藏頂部Blogger 導覽列