<!- abonzertv.blogspot.com, unexpectedweb.blogspot.com -->

<style>
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.column {
  float: left;
  width: 100%;
  display: block;
  margin-bottom: 16px;
  padding: 0 8px;
}


.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 5px 16px;
}

.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: #424242;
}


.hovdiv.green:hover {
  background-color: #4caf50;
  color:#fdfdfd !important;
}

.hovdiv.red:hover {
  background-color: #f44336;
  color:#fdfdfd !important;
}

.hovdiv.pink:hover {
  background-color: #e91e63;
  color:#fdfdfd !important;
}

.hovdiv.cyen:hover {
  background-color: #009688;
  color:#fdfdfd !important;
}

.hovdiv:hover .title{
   color:#fdfdfd !important;
  }

.description{
color:#757575;
}

.hovdiv:hover .description{
   color:#fdfdfd !important;
}

</style>





<h2>WebTools</h2>
<p>Many Useful web tools developed in JavaScript and other pages.</p>
<br>

  <a href="http://unexpectedweb.blogspot.in/p/home.html">
  <div class="column">
    <div class="card">
      
      <div class="container hovdiv green">
        <h5 class="codetype">PAGE</h5>
        <h3 class="title" style="color:#1b5e20;">About</h3>
        <p class="description"> Blog where you'll find some interesting things around the web, that you never knew existed.</p>
                
      </div>
    </div>
  </div>
  </a>


  <a href="http://unexpectedweb.blogspot.in/p/gmail-tracking-url.html">
  <div class="column">
    <div class="card">
      
      <div class="container hovdiv red">
        <h5 class="codetype">JS, GMAIL, Google Analytics</h5>
        <h3 class="title" style="color:#b71c1c;">Gmail Tracking URL</h3>
        <p class="description">Track your outgoing Gmail messages have been read or not.</p>
                
      </div>
    </div>
  </div>
  </a>


  <a href="http://unexpectedweb.blogspot.in/p/epoch.html">
  <div class="column">
    <div class="card">
      
      <div class="container hovdiv cyen">
        <h5 class="codetype">JAVASCRIPT, </h5>
        <h3 class="title" style="color:#1c67b7;">Epoch Converter</h3>
        <p class="description">Convert normal Date and Time into epoch time, also known as Unix time </p>
                
      </div>
    </div>
  </div>
  </a>


  <a href="http://unexpectedweb.blogspot.in/p/youtube-download-link-extractor.html">
  <div class="column">
    <div class="card">
      
      <div class="container hovdiv pink">
        <h5 class="codetype">JAVASCRIPT, YOUTUBE, HACK</h5>
        <h3 class="title" style="color:#b71caa;">YouTube Download link Extractor</h3>
        <p class="description">Find the direct download link of YouTube video from the source-code of page.</p>
                
      </div>
    </div>
  </div>
  </a>

  <a href="http://unexpectedweb.blogspot.in/p/url-decoder.html">
  <div class="column">
    <div class="card">
      
      <div class="container hovdiv cyen">
        <h5 class="codetype">JAVASCRIPT</h5>
        <h3 class="title" style="color:#1c67b7;">URL Decoder</h3>
        <p class="description">Decode and Encode URI Component, Simplify the complex link. </p>
                
      </div>
    </div>
  </div>
  </a>
  
  

.hovdiv.cyen:hover {
  background-color: #009688;
  color:#fdfdfd !important;
}

<a href="http://yourlink.com">
  <div class="column">
    <div class="card">
      // select color of Div, add previous in style. here cyen is the class name

      <div class="container hovdiv cyen"> 
        <h5 class="codetype">PAGE</h5>
        <h3 class="title" style="color:#1b5e20;">About</h3> // Select Dark Color in same range
        <p class="description"> Blog where you'll find some interesting things around the web, that you never knew existed.</p>
                
      </div>
    </div>
  </div>
  </a>

function initialize() {

   var ss = SpreadsheetApp.getActiveSpreadsheet();
   var mysheet = "abonzer";
   
   if (ss.getSheetByName(mysheet ) == null){
       ss.insertSheet('abonzer');
       var sheet = ss.getActiveSheet();
   
       sheet.deleteRows(200, 800);
       sheet.deleteColumns(11, 15);
   
    }
}

Vertical Tabs HTML Code

<!DOCTYPE html>
<html>
<head>
<style>

body {
    font-family: Verdana,sans-serif;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

h2 {
 font-style: oblique;
    font-weight: 400;
    margin: 10px 0;
    font-size: 20px;
 font-family: "Segoe UI",Arial,sans-serif;
}

div {
    display: block;
}

.red {
 color:#fff!important;
 background-color:#f44336!important;
 
}


.sidenav a { 
   text-decoration:none!important;
   padding: 4px 2px 4px 16px;
   display:block;
   
}


.sidenav{
 height:100%;
 width:200px;
 color: #000!important;
    background-color: #f1f1f1!important;
 position:fixed!important;
 z-index:1;
 overflow:auto;
 padding:4px 2px 4px 16px;
 box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}
.sidenav a:hover {
 background-color:#ccc;
 color:#000;
}


</style>
</head>


<body>

<nav class="sidenav" style="width:160px">
  <div style="padding:0.01em 16px;">
    <h2>Email Tracker</h2>
  </div>
  <a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'How to use')" style=" color: #333333;">How to use</a>
  <a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'Track Mail')" style=" color: #333333;">Track Mail</a>
  <a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'Tracking ID')" style=" color: #333333;">Tracking ID</a>
</nav>

<div style="margin-left:160px">
  

  <div id="How to use" class="city" style="padding: 8px 72px!important; display:none;">
    <h2>How to use Email Tracking Feature</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  </div>

  <div id="Track Mail" class="city" style="padding: 8px 72px!important; display:none;">
    <h2>Track Email Read Receipts</h2>
    <p>Paris is the capital of France.</p> 
    <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
  </div>

  <div id="Tracking ID" class="city" style="padding: 8px 72px!important; display:none;">
    <h2>Add your Analytics ID</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
  </div>

</div>

<script>
function openCity(evt, cityName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" red", "");
     
  }
  document.getElementById(cityName).style.display = "block";
   
    evt.currentTarget.className += " red ";
}
</script>

</body>
</html>

function importSubject() {
  // Log the subject lines of up to the first 50(change up to 500) emails in your Inbox
 var threads = GmailApp.getInboxThreads(0, 50);
 var subno = 'A'; // Select column
  var j=1; //counter for row no
  
  for (var i = 0; i < threads.length; i++) {
   
   subno = 'A' + j;// generate cell address
   SpreadsheetApp.getActiveSheet().getRange(subno).setValue(threads[i].getFirstMessageSubject());//get the subject of threads[i]
    j++;
 }
}

Save Email message Content/Body in plane Text :

function importMessage() {
  // Log the subject lines of up to the first 50 emails in your Inbox
 var threads = GmailApp.getInboxThreads(0, 50);
 var subno = 'B';
  var j=1;
  for (var i = 0; i < threads.length; i++) {
      subno = 'B' + j;
     var message = threads[i].getMessages()[0];  // get first message of thread[i]
   SpreadsheetApp.getActiveSheet().getRange(subno).setValue(message.getPlainBody());// get message body in plain text (not in html code) of threads[i]
    j++;
 }
}

Save Email Subject and message Content/Body in plane Text :

function importSubjectAndMessage() {
  // Log the subject lines of up to the first 50 emails in your Inbox
 var threads = GmailApp.getInboxThreads(0, 50);
 var subno = 'A'; // Select column
  var msgno = 'B';
  var j=1; //counter for row no
  
  for (var i = 0; i < threads.length; i++) {
   
   subno = 'A' + j;// generate cell address
    msgno = 'B' + j;
   SpreadsheetApp.getActiveSheet().getRange(subno).setValue(threads[i].getFirstMessageSubject());//get the subject of threads[i]
     var message = threads[i].getMessages()[0];  // get first message of thread[i]
   SpreadsheetApp.getActiveSheet().getRange(msgno).setValue(message.getPlainBody());// get message body in plain text (not in html code) of threads[i]
    j++;
 }
}