Blog Eden Creative ?

2 Tampilan AMP Carousel Untuk Widget Popular Post Blogger

2017-06-20T09:34:00.000-07:00

Cara membuat Widget Popular Posts Blogger dengan Layout Carousel Slide pada HTML AMP tidak terlalu sulit jika sudah tahu bagaimana penempatan widgetnya.
pengertian dasar dari AMP Carousel adalah menampilkan beberapa konten dalam garis horizontal. dengan ini widget Popular Posts Blogger akan lebih menarik dan mudah di gunakan oleh pengunjung. ada beberapa element dasar pada AMP Carousel yang bisa di coba mana yang lebih menarik dan cocok untuk tema template web/blog.
Elemen Type Pada AMP Carousel

type="carousel"
type="slides"
Auto Slide <amp-carousel type="slides" autoplay delay="2000">

Basic AMP Carousel

Penerapan Layout AMP Carousel Slide pada Widget Blogger

Pastikan Script Component sudah terpasang.

<script async="async" custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

Cara Pasang Widget Artikel Populer Dibawah Posting BLog.
Cari code berikut :

        <b:section class='main' id='main' showaddelement='no'>
          <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1'>...</b:widget>
          ---------- widget baru disini ----------
        </b:section>

Jika sudah di temukan dan tahu penempatannya harus dimana.
kemudian letakan code berikut di bagian --- widget baru disini ---

1. AMP Widget Popular Post Dengan Gambar Dan Judul Artikel

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
            <b:includable id='main'>
            <b:if cond='data:title != &quot;&quot;'>
                <h2><data:title/></h2>
            </b:if>
<div class='widget-content popular-posts'>
<amp-carousel height='150' layout='fixed-height' type='carousel'>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:showThumbnails'>
          <!-- Show thumbnails and Title -->
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
                <a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 300) : data:post.thumbnail' var='image'>
                    <amp-img expr:alt='data:post.title' expr:src='data:image' height='150' width='280'/>
                  </b:with><div><data:post.title/></div>
                </a>
            </b:if>
        </b:if>
      </b:loop>
</amp-carousel></div>
</b:includable>
</b:widget>

Gunakan CSS berikut atau edit jika ingin tampilan yang beda.

#PopularPosts1.PopularPosts a,#PopularPosts1.PopularPosts amp-img{width:280px;height:150px;}
#PopularPosts1.PopularPosts h2{position:relative;overflow:hidden;margin:0.83em 0px;text-transform:uppercase;}
#PopularPosts1.PopularPosts h2 div{padding:0 10px 0 0;display:inline;float:left;}
#PopularPosts1.PopularPosts a{position:relative;}
#PopularPosts1.PopularPosts a div{width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;background:rgba(0,0,0,.6);color:#fff;padding:8px 10px;position:absolute;bottom:0;left:0;}

2. AMP Widget Popular Post Dengan Gambar, Judul Artikel dan Snippet

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
            <b:includable id='main'>
            <b:if cond='data:title != &quot;&quot;'>
                <h2><data:title/></h2>
            </b:if>
<div class='widget-content popular-posts'>
<amp-carousel height='150' layout='fixed-height' type='carousel'>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:showThumbnails'>
          <!-- Show thumbnails Title and Snippets -->
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
            <div class='section'>
                <a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 300) : data:post.thumbnail' var='image'>
                    <amp-img expr:alt='data:post.title' expr:src='data:image' height='150' width='280'/>
                  </b:with><div class='judul'><data:post.title/></div>
                </a>
                <div class='konten'><data:post.snippet/></div>
            </div>
            </b:if>
        </b:if>
      </b:loop>
</amp-carousel></div>
</b:includable>
</b:widget>

Gunakan CSS berikut atau edit jika ingin tampilan yang beda.

#PopularPosts1.PopularPosts div.section,#PopularPosts1.PopularPosts a,#PopularPosts1.PopularPosts amp-img{width:280px;height:150px}
#PopularPosts1.PopularPosts h2{position:relative;overflow:hidden;margin:0.83em 0px;text-transform:uppercase}
#PopularPosts1.PopularPosts div.section{position:relative;overflow:hidden;}
#PopularPosts1.PopularPosts h2 div{padding:0 10px 0 0;display:inline;float:left}
#PopularPosts1.PopularPosts a{position:relative}
#PopularPosts1.PopularPosts a div{width:280px;z-index:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;background:rgba(0,0,0,.6);color:#fff;padding:8px 10px;position:absolute;bottom:0;left:0}
#PopularPosts1.PopularPosts div.section .konten{width:280px;height:100%;padding:8px 10px;background:rgba(0,0,0,.6);color:#fff;white-space:normal;position:absolute;top:0;left:0;z-index: 1;opacity:0;    transition: all .4s ease-in-out;}
#PopularPosts1.PopularPosts div.section:hover .konten{opacity:1}

LIHAT DEMO

Jika ingin menempatkan widgetnya di atas Footer. maka harus di buat <b:section> baru.
berikut penerapannya. salin code :
<b:section class='carousel-slides' id='carousel-slides' preferred='yes'>

----- masukan widget popular post seperti cara di atas di sini ------

</b:section>
isi bagian yang kosong dengan widget yang ada pada cara di atas,lalu letakan di atas tag HTML Footer.
Jika masih kesulitan cara penerapannya, silahkan diskusikan pada kolom komentar.

Pengaturan Saving SVG Illustrator untuk WEB design

2017-06-15T08:37:00.000-07:00

Seperti yang sudah kita ketahui SVG adalah gambar vector yang berbasis XML. SVG sudah sangat banyak di gunakan untuk keperluan web design karena vector tidak merubah kualitas resolusi dari gambar yang di buat.cara untuk membuatnya kalian bisa gunakan software dari Adobe Illustrator karena aplikasi ini paling banyak dan mudah untuk di gunakan. berikut tutorial singkat cara mengatur gambar untuk menyimpan dalam format SVG untuk keperluan WEB Design. Saya menggunakan Adobe Illustrator CS6 untuk Windows-32bit.
Contoh gambar yang saya gunakan dengan 1 warna dan 1 elemen path. contohnya seperti ini

cara penyimpanan (Save/Save As) dalam format SVG. karena jika memilih export tidak ada pilihan untuk format SVG
pilih File > Save As

kemudian pilih

SVG Profile: SVG 1.1
Type: SVG
Subsetting: Only Glypsh Used

Untuk pengaturan lainnya kalian bisa gunakan pengaturan yang biasa saya gunakan. karena menurut saya ini yang terbaik.
sebelumnya klik dulu More Options

Image Location: Link
CSS Properties: Style Elements (Mempermudah Pengaturan CSS dengan tag CLASS)
Decimal Place: 1 (Tergantung lengkungan pada gambar dan beberapa jumlah elemen lainnya)

Finishing klik OK atau ambil code SVG nya untuk penyimpanan langsung pada xHTML

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="150px" height="150px" viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
<style type="text/css">
<![CDATA[
    .st0{fill:#F44336;}
]]>
</style>
<g>
        <path class="st0" d="M91.4,133.1c-5.2,1.9-10.5,2.8-16.4,2.8c-7,0-13.4-1.4-19.5-4c-6.1-2.6-11.3-6.3-15.9-11.3
            c-4.5-4.7-8-10.3-10.8-16.6c-2.1-5.4-3.5-11-3.7-16.9c0-1.2,0-2.3,0-3.3c0-1.2,0-2.3,0-3.3c0.2-6.1,1.6-11.7,3.7-16.9
            c2.6-6.3,6.1-12,10.8-16.6c4.5-4.7,9.8-8.4,15.9-11.3c6.1-2.8,12.7-4,19.5-4c7,0,13.4,1.4,19.5,4c6.1,2.8,11.2,6.3,15.9,11.3
            c2.3,2.3,4.2,4.9,6.1,7.7l-5.6,6.3c-8.7,9.8-17.3,19.7-26,29.3c13.8-28.6-10.8-41-27.2-23.9c-3,3-5.2,6.8-6.1,10.8
            c-0.9,3.5-1.4,8.4-0.7,12.2c1.9,9.4,8.9,16.6,17.8,19.2c2.3,0.5,4,0.9,6.3,0.9c2.6,0,5.2-0.5,7.5-1.2c6.6-2.3,29.1-28.4,47.8-51.1
            C103.1-7.3,8.2,13.6,8.2,84.4c0,13.8,4.2,26.7,11.5,37.5c-0.2,1.6-0.5,3.5-0.5,5.2c-9.1-11.7-14.5-26.5-14.5-42.7
            c0-38.7,31.4-70.3,70.3-70.3c38.2,0,69.1,29.5,70.3,67.5C134.3,94.2,105.7,128,91.4,133.1z"/>
</g>
</svg>

Referensi Lengkap : Export SVG

Cara Mengatasi Render-Blocking Javascript DI PageSpeed Insights

2017-06-11T10:15:00.000-07:00

Untuk keperluan PageSpeed Insights agar penggunaan script seperti javascript pada jQuery Library bisa kita sembunyikan penempatanya. namun saya tidak bisa mengatakan dengan mengatasi masalah ini bisa membuat speed halaman web/blog lebih cepat. karana pada dasarnya halaman akan membaca keseluruhan penggunaan script yang ada.
Pernahkah anda mengalami seperti ini.

Karena pada script jQuery kita tidak di set Asynchronous (Async). cara mengatasinya lihat pada script jQuery anda. tempatkan Attribute async pada script tersebut seperti ini

<script async src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>

untuk pengguna template XML agar bisa tersimpan - async='async'

<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>

lihat penggunaan Attribute async
Cara lain dengan Javascript sebagai pemanggil url script.

<script type='text/javascript'>
(function() {
var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true; // set true untuk async jquery
    s.src = ('https:' == document.location.protocol ? 'https' : 'http') +
       '://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
})();
</script>

untuk permasalahan yang mungkin terjadi pada beberapa kasus untuk template blogger bisa lihat tutorialnya pada asynchronous javascript pada blogger

Asynchronous Javascript Pada Blogger Tidak berjalan pada Firefox ?

2017-06-11T09:14:00.001-07:00

Bagi para pengguna Template XML Blogger yang berniat untuk set javascript dari jQuery Library menjadi async (Asynchronous). mungkin ini di maksudkan Mengatasi Render-Blocking Javascript alhasil script jquery yang ada malah tidak berjalan pada peramban tertentu semisal firefox padahal kalau di buka pada browser Chrome/Opera berjalan lancar. lalu apa masalahnya ?
kemungkinan terjadi karena template Blogger anda valid HTML5. kok bisa ?
coba lihat pada template blogger anda temukan code <head>. tapi untuk kebutuhan agar valid HTML5 / hidden CSS Bundle Blogger biasanya kalian rubah menjadi <head> dan penutupnya menjadi </head>.
nah agar script jquery berjalan kembali cukup ganti code tadi menjadi <head> kembali tapi akan membuat template anda tidak valid HTML5 lagi bahkan Render-Blocking bertambah pada CSS Bundle BLogger.
Terus caranya agar Asynchronous Javascript Jquery tetap berjalan namun valid HTML5 juga bagaimana ?
Pertama lihat apakah anda sudah menempatkan script jquery librarynya. jika belum itulah penyebab utama kenapa script jquery lain tidak berjalan ^_^.
coba pasang script jquery librarynya yang sudah di set Async. (jika yang sudah ada abaikan)

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js' async='async' type='text/javascript'></script>

bisa juga seperti ini
diskusikan jika ada masalah pada script ini.

<script type='text/javascript'>
(function() {
var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true; // set true untuk async jquery
    s.src = ('https:' == document.location.protocol ? 'https' : 'http') +
       '://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
})();
</script>

Tempatkan code di atas biasanya penempatan sebelum penutup <head>.
contoh:

<head>

//Script Pasang di antara Tag Head

</head>

Sekarang memasuki kasus permasalahnnya.
Ask. "Saya sudah pasang jQuery di atas dan script jQuery yang sudah ada tidak berjalan pada firefox ?".
itu di karenakan karena tidak adanya fungsi callback script jQuery dimana penutup tag head yang sudah di rubah menjadi <head> menjadikan script librarynya tidak di ketahui penempatannya oleh Firefox.
cara mengatasinya.
script jQuery yang sudah ada tinggal tambahkan callback onload ceperti ini.

window.onload = function () {

//scipt jQuery anda
// seperti back to top atau apa sajalah yang berkaitan dengan jQuery

};

contoh penggunaanya misal script yang sudah ada pada bagian </body> seperti ini

<script type='text/javascript'>
//<![CDATA[
window.onload = function () {

    $('tagID 1, tagID 2').each(function() {
       //script lainnya
    });

    or

    function() {
      //script lainnya
    }

};//penutup onload
//]]>
</script>

Seharusnya dengan penambahan script di atas script jQuery anda akan berjalan lancar di semua Browser.
Tinggal kalian test saja bagaimana hasilnya dan buka pada beberapa peramban browser anda. apa sudah tidak ada masalah atau masih tidak berjalan.
cara lain mengatasi Render-Blocking Pada CSS atau Javascript saya buat pada artikel terpisah.
Cara Mengatasi Render-Blocking Javascript DI PageSpeed Insights
selebihnya kalian bisa diskusikan permasahannya

Memasukkan Update Tahun Otomatis Pada HTML - PHP - Javascript

2017-06-10T13:03:00.001-07:00

Script sederhana pasang pergantian tahun copyright secara otomatis pada HTML Web / Blog menggunakan dengan PHP ataupun Javascript.

Versi Javascript

Dengan javascript murni tempatkan biasanya pada bagian footer

<script type="text/javascript">
  document.write(new Date().getFullYear());
</script>

hasil outputnya :

atau juga seperti ini

Copyright &copy; 2016 <script type="text/javascript">
new Date().getFullYear()>2016&&document.write("-"+new Date().getFullYear());
</script>, Nama Website.

hasil outputnya :

Copyright © 2016, Nama Website.

Versi PHP

Tergantung pengaturan waktu yang digunakan.
apakah anda menggunakan Wordpress ? biasanya penerapan pada footer.php.

<?php echo date("Y"); ?>

hasil outputnya :

Atau juga seperti ini.

Copyright &copy; <?php
  $fromYear = 2016; 
  $thisYear = (int)date('Y'); 
  echo $fromYear . (($fromYear != $thisYear) ? '-' . $thisYear : '');?> Nama Website.

hasil outputnya :

Copyright © 2016, Nama Website.

Mengganti Logo Header menggunakan image SVG

2017-06-07T13:46:00.000-07:00

Seperti pada artikel menggunakan svg untuk penggabungan icon mengatakan tidak merekomendasikan mengganti logo header SVG dengan cara itu. Kenapa ? svg berbasis xml, setahu saya google index images lebih menyarankan url dalam tag <img src/> beserta atribut alt (ralat kalau admin salah mendefinisikan ^_^). meskipun saat ini Google sudah punya perangkat lunak yang berjalan untuk menangani SVG sebagai bitmap (konversi ke JPG) terlebih google pernah mengatakan "We index SVG content whether it is in a standalone file or embedded directly in HTML link". namun untuk embed SVG mentah langsung pada HTML saya masih meragukannya apa benar google bisa mengkonversi langsung dengan gambar utuh, tujuan pada artikel ini adalah untuk menghindari kasus-kasus seperti itu, dari pada ragu mending cari aman saja.
terus bagaimana menggunakan SVG untuk Logo header agar tetap terindex pada SEO images google ?

Image publishing guidelines.
Optimalisasi Gambar.

Biasanya ketika kita memasang SVG langsung pada HTML akan menggunakan baris code kurang lebih seperti ini.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
   x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
  <g>
    <circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
  </g>
</g>
</svg>

kalau hanya untuk menggunakan SVG pada icon-icon tertentu tidak jadi masalah. namun untuk logo header saya tidak menyarankan memasang langsung code tersebut.
alangkah baiknya Logo header tetap dalam bentuk <img src/> saja.
Rekomendasi penggunaan logo header dengan images.

cara 1 : format gambar bisa berupa svg/png/jpg/gif ataupun webp(Chrome, Opera, Android) ataupun JPEG XR (IE).

<img src="../images/logo.svg/png/jpg/gif" alt="logo Header Blog">

<img src="data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath ........  %3e%3c/path%3e%3c/g%3e%3c/svg%3e" alt="logo Header Blog">

Saya tidak menyarankan penggunaan background image CSS untuk mengganti logo header karena tidak semua Browser support.
kecuali kalian menggunakan bantuan javascript. apapun itu tetap tidak baik hal penting seperti logo header jika tetap memaksaan menggunakan background images. seperti yang saya bilang kita cari aman saja ^_*

.logo { 
  background-image: url("logo/image.svg");
  background-repeat: no-repeat;
  background-color:transparent;
}

/*
atau
===================================================
*/

.logo {
   background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath ........  %3e%3c/path%3e%3c/g%3e%3c/svg%3e");
   background-repeat:no-repeat;
   background-color:transparent;
}

Cara 2 : SVG Fallback - Guide
SVG Fallback Rekomendasi
ambil url logo dengan format PNG dan SVG dan letakan dimana logo anda akan di tampilkan

<img src="../images/logo.svg"
 data-fallback="../images/logo.png"
       alt="SVG Support Icon"/>

Simpan Javascript pada HTML biasanya di letakan di atas </body>
<script type="text/javscript">

function svgasimg() {
  return document.implementation.hasFeature(
    "http://www.w3.org/TR/SVG11/feature#Image", "1.1");
}

if (!svgasimg()){
  var e = document.getElementsByTagName("img");
  if (!e.length){
    e = document.getElementsByTagName("IMG");
  }
  for (var i=0, n=e.length; i<n; i++){
    var img = e[i],
        src = img.getAttribute("src");
    if (src.match(/svgz?$/)) {
      /* URL ends in svg or svgz */
      img.setAttribute("src", 
             img.getAttribute("data-fallback"));
    }
  }    
}

</script>

Hasil Code di atas seperti ini

Example

Kesimpulannya tautan url img lebih cepat terkonversi google dibanding jenis xml langsung pada html.

Segala kekurangan tentang tutorial mengganti logo header menggunakan gambar SVG bisa kalian pertimbangkan mana yang lebih baik. mungkin di antara pembaca ada yang lebih tahu dengan SEO images google.
di sini saya hanya membantu sedikit bagi yang awam cara menggunakan SVG pada logo header saja.

Membuat Layout Sidebar Sama Tinggi Dengan Konten

2017-06-05T13:46:00.000-07:00

masih dalam konteks CSS Flexbox. hampir sama dengan layout footer tetap di bawah dengan Flexbox. namun kali kali ini saya hususkan hanya pada sidebar dengan 2 kolom atau 3 kolom. Perhatikan code-code CSS agar lebih jelas apa dan bagaimana fungsinya.

ada beberapa cara agar sidebar sama tinggi dengan main konten atau sebaliknya yaitu menggunakan CSS ataupun dengan javascript atau jQuery, sebelum adanya CSS flexbox pilahan lain adalah menggunakan table namun bukan itu yang akan kita bahas, kita akan tetap memanfaatkan layout Flexbox.
cara pertama kita bahas dengan CSS Flexbox pada dasarnya hal ini paling mudah untuk kita pahami dan terapkan. hal yang pertama adalah membuat HTML nya dulu, tanpa itu CSS seribu kata pun gak akan nampak hasilnya..

kita ambil contoh HTML nya seperti ini

<div class="container"> <!-- FlexBox -->
    <div class="konten">Konten</div>
    <div class="sidebar-kiri">Sidebar Kiri</div>
    <div class="sidebar-kanan">Sidebar Kanan</div>
</div>

Buat CSS pada container menggunakan display:flex

.container{
  display: flex; /* atau inline-flex */
}


/*

Atau Lengkap Dengan Dukungan Semua Browser.
   
*/


.container{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; /* atau inline-flex */
}

CSS di atas sudah mewakili bahwa item yang berada pada wadah container sudah dalam posisi flexible - standarnya item-item tersebut memiliki arah horizontal / row. hasilnya seperti ini, dan memiliki sama tinggi.

namun untuk masing-masing kolom jangan pernah memberi nilai masukan height. misal height:100% kecuali min-height.
Perlu di ingat penggunaan display:flex berbeda dengan display:inline | block yang bergantung berapa nilai masukan seperti width: <integer>%/<integer>px/<integer>vw/<integer>....
untuk tambahan CSS lain kalian bisa diskusikan pada komentar.
solusi lain yaitu dengan memanfaatkan jQuery. karena hampir semua Web design/Blog menyimpan Script jQuery kenapa tidak kita manfaatkan saja untuk mengatur sama tinggi.
Code scriptnya kurang lebih seperti berikut. (perkecil jika kalian menguasai script Variabl atau if else) script ini untuk 3 kolom. kalau 2 kolom script akan lebih pendek.

// Object Kolom
var    c = $('.konten'); // class box .konten
var    s = $('.sidebar-kiri'); // class box .sidebar-kiri
var    k = $('.sidebar-kanan'); // class box .sidebar-kanan
// Dapatkan nilai tinggi dengan outerHeight(); / Height();
var getKontenHeight = c.outerHeight();
var getKiriHeight = s.outerHeight();
var getKananHeight = k.outerHeight();
// Cek jika konten lebih tinggi dari sidebar
if ( getKontenHeight > getKiriHeight ) {
    s.css('min-height', getKontenHeight);
}else{
if(getKananHeight > getKiriHeight){
    s.css('min-height', getKananHeight);}
}
if ( getKontenHeight > getKananHeight) {
    k.css('min-height', getKontenHeight);
}else{
if(getKiriHeight > getKananHeight){
    k.css('min-height', getKiriHeight);}
}
// cek  jika sidebar lebih tinggi dari konten
if ( getKiriHeight > getKontenHeight) {
    c.css('min-height', getKiriHeight);
}else{
if(getKananHeight > getKontenHeight){
    c.css('min-height', getKananHeight);}
}

untuk 2 kolom kurang lebih seperti ini

// Object Kolom
var c = $('.konten'); // class box .konten
var s = $('.sidebar-kiri'); // class box .sidebar-kiri
// Dapatkan nilai tinggi dengan outerHeight(); / Height();
var getKontenHeight = c.outerHeight();
var getKiriHeight = s.outerHeight();
// Cek jika konten lebih tinggi dari sidebar
if ( getKontenHeight > getKiriHeight ) {
    s.css('min-height', getKontenHeight);
}
// cek  jika sidebar lebih tinggi dari konten
if ( getKiriHeight > getKontenHeight) {
    c.css('min-height', getKiriHeight);
}

Lihat Demo

Sesuatu yang tidak di inginkan terjadi. inilah kekurangan menggunakan jquary. kasus tersebut terjadi pada perangkat mobile/tablet/phone ketika memutar layar dari Potrait ke landscape ataupun sebaliknya. namun hal tersebut akan normal jika browser di refresh. mungkin ada beberapa faktor yang kurang pada script atau memang script tersebut akan berjalan dalam kondisi awal atau pada saat kita membuka pertama kali.

Cara Penerapan Layout kolom Header,Konten,Sidebar,Footer responsive menggunakan Pure CSS Flexbox lihat demonya.

Full Example

Membuat footer tetap dibawah jika isi Konten pendek atau kosong

2017-06-02T16:42:00.000-07:00

Pada beberapa kasus layout halaman dimana posisi footer akan mengikuti tinggi layout bagian atas . jika konten terisi penuh dengan tinggi layar hal seperti itu tidak akan kita sadari. Namun pada beberapa media mobile akan terlihat perbedaanya. bagi pemula yang baru saja belajar tata letak web rasanya hal ini akan terabaikan. untung saja css memiliki tata letak dengan Flexbox,meski agak sulit untuk memahaminya tapi kalau kita tahu masing-masing fungsi element pada flex akan lebih mudah mereapkannya. saat ini flexbox hampir semua browser terbaru mendukung(support). (abaikan jika masih menggunakan browser lama ) browser support flexbox - www.w3.org/TR/css-flexbox-1/

Penggunaan float masih sering di gunakan. dengan CSS Flexbox float bisa saja di abaikan karena flex bisa memposisikan item,mengatur lebar/panjang item dengan ketentuan bahwa item tersebut dalam wadah yang sama.
Kali ini saya hanya akan memberikan tutorial cara membuat footer tetap di bawah (abaikan penggunaan absolute/fixed posisi) karena itu berbeda penggunaan.

Sebelum memulai pernahkan kalian mengalami seperti ini ? inilah yang akan di bahas bagaimana menyelesaikannya.

Anggap saja kalian memiliki HTML seperti ini.

<div class="wrapper"> <!-- bungkus semua item dengan flex-->
<header class="header-wrapper">
  <h1>Header</h1>
</header>
<div class="main-wrapper"> <!-- bungkus area flex-grow -->
<div class="main"> <!-- flex baru jika mempunyai sidebar-->
  <article>
    Artikel
  </article>
  <aside>
    sidebar
  </aside>
</div><!-- end main-->
</div> <!-- end main-wrapper-->

<footer class="footer-wrapper">

</footer>
</div><!-- end wrapper-->

CSS flex sebagai wadah semua item seperti ini.

.wrapper{
    background:#ddd;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 auto;
    min-height: 100vh; /* menyesuaikan dengan tinggi layar*/
    height:100%;
}
.main-wrapper{
  width:100%;
  overflow:hidden;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}

CSS area flexbox baru untuk class .main

.main {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:flex;
}
article{
  -webkit-flex-grow: 1;
  flex-grow: 1;
  width:70%;
  background:#9b9b9b;
}
aside{
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width:30%;
  background:#1b96bc;
}

CSS di atas saya gunakan agar Sidebar sama tinggi dengan area content atau sebaliknya, ketahui lebih tentang flex-direction,flex-shrink,flex-grow - (flex Guide).
maka hasil dari CSS akan seperti gambar di bawah. namun masih ada area kosong. itu terjadi ketika pembungkus pada class .main-wrapper dan .main tidak mempunyai ketinggian (height) yang sama atau sama sekali tidak mempunyai ketinggian atau height:auto;

untuk mengatasinya masukan masing-masing height dengan nilai 100%.

.main-wrapper{
  height: 100%;
}
.main {
  height: 100%;
}

maka hasilnya seluruh area pada content selain header/footer akan memyesuaikan tinggi dengan layar yang terlihat jika content tersebut benar-benar kosong(blank).

Seluruh CSS Flexbox seperti berikut :

.wrapper {
    box-sizing:border-box;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
    margin:0 auto;
    min-height:100vh;
    background:#ddd;
    position:relative;
    overflow:hidden;
    height:100%;
}
.main-wrapper {
    width:100%;
    height:100%;
    overflow:hidden;
    flex-grow:1;
}
.main {
    height:100%;
    margin:0 auto;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
}
article {
    -webkit-flex-grow:1;
    flex-grow:1;
    width:70%;
    background:#9b9b9b;
}
aside {
    -webkit-flex-shrink:0;
    flex-shrink:0;
    width:30%;
    background:#1b96bc;
}
.header-wrapper {
    background:#363c44;
    width:100%;
}
.footer-wrapper {
    background:#363c44;
    margin-top:auto;
}

Bonus !!! ^_^
Pengaturan Layout responsive pada lebar tertentu. saya berikan contoh pada layar berukuran 768px.
atur CSS pada tag .main dengan menambahkan flex-direction jika layar menyentuh lebar @media (max-width: 768px) screen ubah .main menjadi column vertical.

/* responsive */
@media (max-width:768px) {
    .main {
        height:100%;
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -webkit-flex-direction:column;
        -ms-flex-direction:column;
        flex-direction:column;
    }
    article,aside {
        width:100%;
    }
}

Contoh lengkap langsung lihat demo dan source code

View Demo
or
Download

Menggunakan SVG untuk penggabungan icon pada icomoon

2017-05-29T13:29:00.000-07:00

SVG (Scalable Vector Graphics) adalah format gambar yang berbasis XML (eXtensible Markup Language) sebagai dasar untuk membentuk gambar vektor. - id.wikipedia.org/wiki/Scalable_Vector_Graphics.
jelas di sini svg menggunakan format vector (berbasis xml) dimana penggunaan vector sangat baik untuk pengolahan gambar yang detail sekalipun gambar tersebut di perbesar/diperkecil hasil kualitas akan sama, berbeda dengan jpeg/png/gif dimana resolusi gambar jika di perbesar akan blur kecuali di perkecil.

Saya ambil contoh xml svg dan penerapan pada HTML menggunakan icomoon.io

Code SVG pada icomoon.io nampak seperti ini

HTML (SVG <use>)
Gunakan code ini untuk menampilkan icon dan xlink:href="#icon-github" harus spesifik dengan ID symbol

<svg class="icon icon-github">
    <use xlink:href="#icon-github"></use>
</svg>

Symbol Definition(s)

<symbol id="icon-github" viewBox="0 0 32 32">
   <title>github</title>
       <path d="M16 0.395c-8.836 0-16 7.163-16 16 0 7.069 4.585 13.067 10.942 15.182 0.8 0.148 1.094-0.347 1.094-0.77 0-0.381-0.015-1.642-0.022-2.979-4.452 0.968-5.391-1.888-5.391-1.888-0.728-1.849-1.776-2.341-1.776-2.341-1.452-0.993 0.11-0.973 0.11-0.973 1.606 0.113 2.452 1.649 2.452 1.649 1.427 2.446 3.743 1.739 4.656 1.33 0.143-1.034 0.558-1.74 1.016-2.14-3.554-0.404-7.29-1.777-7.29-7.907 0-1.747 0.625-3.174 1.649-4.295-0.166-0.403-0.714-2.030 0.155-4.234 0 0 1.344-0.43 4.401 1.64 1.276-0.355 2.645-0.532 4.005-0.539 1.359 0.006 2.729 0.184 4.008 0.539 3.054-2.070 4.395-1.64 4.395-1.64 0.871 2.204 0.323 3.831 0.157 4.234 1.026 1.12 1.647 2.548 1.647 4.295 0 6.145-3.743 7.498-7.306 7.895 0.574 0.497 1.085 1.47 1.085 2.963 0 2.141-0.019 3.864-0.019 4.391 0 0.426 0.288 0.925 1.099 0.768 6.354-2.118 10.933-8.113 10.933-15.18 0-8.837-7.164-16-16-16z">
       </path>
</symbol>

viewBox="0 0 32 32" menentukan ukuran pada icon

bagaimana penerapan pada HTML? contohnya akan nampak seperti ini:

<!DOCTYPE html>
<html lang="en">

<head>
  .................
</head>
<body>
<div class="social">
    <svg class="icon icon-github">
        <use xlink:href="#icon-github"></use> <!-- callback svg icon with <use xlink:href="#icon-github"></use> -->
    </svg>
</div>

<!-- simpan svg symbol di atas </body> -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="hidden">
<symbol id="icon-github" viewBox="0 0 32 32">
   <title>github</title>
       <path d="M16 0.395c-8.836 0-16 7.163-16 16 0 7.069 4.585 13.067 10.942 15.182 0.8 0.148 1.094-0.347 1.094-0.77 0-0.381-0.015-1.642-0.022-2.979-4.452 0.968-5.391-1.888-5.391-1.888-0.728-1.849-1.776-2.341-1.776-2.341-1.452-0.993 0.11-0.973 0.11-0.973 1.606 0.113 2.452 1.649 2.452 1.649 1.427 2.446 3.743 1.739 4.656 1.33 0.143-1.034 0.558-1.74 1.016-2.14-3.554-0.404-7.29-1.777-7.29-7.907 0-1.747 0.625-3.174 1.649-4.295-0.166-0.403-0.714-2.030 0.155-4.234 0 0 1.344-0.43 4.401 1.64 1.276-0.355 2.645-0.532 4.005-0.539 1.359 0.006 2.729 0.184 4.008 0.539 3.054-2.070 4.395-1.64 4.395-1.64 0.871 2.204 0.323 3.831 0.157 4.234 1.026 1.12 1.647 2.548 1.647 4.295 0 6.145-3.743 7.498-7.306 7.895 0.574 0.497 1.085 1.47 1.085 2.963 0 2.141-0.019 3.864-0.019 4.391 0 0.426 0.288 0.925 1.099 0.768 6.354-2.118 10.933-8.113 10.933-15.18 0-8.837-7.164-16-16-16z">
       </path>
</symbol>
</svg>
</body>
</html>

Hasilnya

Example

untuk menggabungkan (kombinasi) banyak file svg cukup memasukan code symbol pada area svg

<svg>

    <symbol id="icon-1">
        <path></path>
    </symbol>

    <symbol id="icon-2">
        <path></path>
    </symbol>
    ........ dan seterusnya ..............
    
</svg>

Hasilnya

Example

saya tidak menyarankan membuat logo header dengan cara penggunaan svg di atas sekalipun itu bisa. untuk menggunakan svg sendiri menjadi logo header saya bahas pada artikel Logo Header Menggunakan SVG

tautan luar : artikel mengenai Icon SVG sprites - Icon System with SVG Sprites & Documentasi icomon.io - icomoon.io/#docs/

Download Kerangka Template Blogger AMP Valid dan Responsive

2017-05-27T14:41:00.000-07:00

Kerangka (Framework) Template Valid AMP untuk Blogger dan Responsive.

Kesempatan kali ini Eden Creative akan membagikan Project Dasar Template AMP untuk blogger. meskipun ini masih dalam tahap pembuatan atau masih Kerangka (framework) tapi template dasar AMP ini sudah Valid dan CSS yang di terapkan sudah responsive/flexibel. Pada kesempatan lain kerangka ini akan terus di kembangkan sampai layak untuk di komersialkan. Silahkan download (Gratis) jika berniat mengembangkannya sendiri. untuk keterangan cara pemasangan widget dan cara pemakainnya ikuti terus perkembangan artikel selanjutnya.

Download versi Lengkap yang sama dengan sample demo

View Demo
or
Download

Isi pada kerangka template kurang lebih seperti berikut :
HTML Bagian Head - untuk meta tag silahkan ganti dengan meta tag andalan kalian.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML amp='amp' lang='id'> <!-- amp='amp' menandakan bahwa template akan mengunakan struktur AMP -->
&lt;head&gt; <!-- atau <head> -->
<meta charset='utf-8'/>
<meta content='width=device-width,minimum-scale=1' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<meta expr:content='data:blog.metaDescription' name='description'/>
&lt;!-- /*<b:skin><![CDATA[*//*
-----------------------------------------------
AMP Blogger Template [Info]
Name           : Eden AMP Blogger
Theme License  : Free
----------------------------------------------- */
]]></b:skin>

Bagian Tag conditional pada style amp-custom (Optional).

<style amp-custom='amp-custom'>

<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>
/* Style selain item dan statis */

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
/* Style hanya item  */

</b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
/* Style hanya statis */

</b:if>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
/* Style hanya Error */

</b:if>
</style><!-- end amp-custom -->
<!-- Wajib ADA-->
<style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Component Script wajib AMP

<script async='async' src='https://cdn.ampproject.org/v0.js'></script>

untuk component script lainnya bisa di lihat di sini ampbyexample.com/#components

Sekarang pada bagian Body.
</head> (opsional) - atau </head>
<body>

<amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'>
{
  &quot;vars&quot;: {
    &quot;account&quot;: &quot;UA-XXXXXX-X&quot;
  },
  &quot;triggers&quot;: {
    &quot;trackPageview&quot;: {
      &quot;on&quot;: &quot;visible&quot;,
      &quot;request&quot;: &quot;pageview&quot;
    }
  }
}
</script>
</amp-analytics>

<div class='wrapper container-fluid' id='wrapper'>
  <div class='row container'>
    <header class='header-wrapper container' id='header-wrapper'>
       <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
          <b:widget id='Header1' locked='true' title='Eden AMP Blogger Template (Header)' type='Header'/>
       </b:section>
    </header>

   <!-- penempatan menu disini atau bisa di dalam header -->

<div class='clear'/>
<div class='container' id='outer-wrapper'>
    <div class='row' id='content-wrapper'>
      <div class='main-wrapper' id='main-wrapper' itemprop='mainContentOfPage'>
        <b:section class='main' id='main' showaddelement='no'/>
      </div><!-- main-wrapper -->

    <aside class='sidebar-wrapper ' id='sidebar-wrapper'>
      <b:section class='sidebar' id='sidebar' preferred='yes'/>
    </aside>

    </div><!-- end content wrapper --><div class='clear'/>
</div><!-- end outer wrapper --><div class='clear'/>

  <footer class='footer-wrapper container' id='footer-wrapper'>
     <div class='footer' id='footer'>
       <b:section class='footer' id='footer' preferred='yes'/>
     </div>
  </footer>

</div></div><!-- end row and wrapper -->

</body>
</HTML>

Kerangka di atas sudah jadi untuk memenuhi template AMP blogger

catatan:

ketika template di SAVE dan saat di Check Validator AMP kemungkinan tidak akan langsung valid.
di karenakan blogger secara otomatis menempatan strukturnya secara default.
maka kita harus mengedit secara manual.
dimana pada template blogger ada element div yang di dalamnya terdapat style secara langsung yang di mana pada struktur AMP itu tidak di bolehkan.

contoh : <div style='clear:both'/> seharusnya penempatannya seperti ini <div class='clear'/> atau element lain yang sejenis.

Keterangan CSS saya ambil dari CSS library bootstrap. namun saya tidak ambil semuanya karena yang di perlukan hanya layout Responsive saja dan selebihnya saya kembangkan sendiri.
berikut contoh sebagian style CSS yang ada pada contoh.

.container-fluid {
  padding-right:15px;
  padding-left:15px;
  margin-right:auto;
  margin-left:auto;
}
.row {
  margin-right:-15px;
  margin-left:-15px;
}
.container {
  padding-right:15px;
  padding-left:15px;
  margin-right:auto;
  margin-left:auto;
}
@media (min-width:768px) {
  .container {
    width:750px;
  }
}
@media (min-width:992px) {
  .container {
    width:970px;
  }
}
@media (min-width:1200px) {
  .container {
    width:1170px;
  }
}
.col-2,.col-4,.col-6,.col-8 {
  position:relative;
  min-height:1px;
  padding-right:15px;
  padding-left:15px;
}
@media (min-width:1200px) {
  .col-2,.col-4,.col-6,.col-8 {
    float:left;
  }
}
@media (min-width:992px) {
  .col-2,.col-4,.col-6,.col-8 {
    float:left;
  }
}
@media (min-width:768px) {
  .col-2,.col-4,.col-6,.col-8 {
    float:left;
  }
  .col-2 {
    width:25%;
  }
  .col-4 {
    width:33.33333333%;
  }
  .col-6 {
    width:66.66666667%;
  }
  .col-8 {
    width:75%;
  }
}

Untuk XML Template AMP Blogger keseluruhannya silahkan kalian download pada link di atas. coba terapkan pada template blogger anda, jika ada pertanyaan seputar kerangka template AMP blogger silahkan diskusikan melalui komentar. untuk tingkat lanjut saya akan buat artikel terpisah.

artikel serupa : Template AMP blogger terbaik

Style CSS Garis Pemisah Dengan Gradient Color

2017-05-22T06:44:00.000-07:00

Teknik CSS Gradasi Warna

Cara membuat garis pemisah horizontal atau yang biasa memakai code <hr/> pada artikel. pada dasarnya kode <hr/> ini sudah memiliki tampilan sendiri tanpa harus mengeditnya tapi hanya berupa garis hitam horizontal/lurus. pada CSS di bawah style dengan CSS gradient agar lebih menarik.

Gunakan code <hr/> untuk membuat garis pemisah.

hr {
  border: 0;
  height: 1px;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 0) 100%);
  /*  Old CSS gradients */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=1);
}

Simple Blockquote Dengan Animasi CSS

2017-05-22T04:54:00.000-07:00

Cara membuat blockquote yang simple serta menarik untuk mempercantik tulisan artikel yang menandai bahwa itu penting. Blockquote ini tidak menggunakan gambar hanya dengan css saja dan sedikit element pseudo :before / :after sebagai media animasinya.

VIEW DEMO

<blockquote>

ISI TULISAN APA SAJA DI SINI

</blockquote>

blockquote{
  background-color:#fff;
  color:#444;
  font-size:1.2em;
  font-family:Georgia, Serif;
  text-align:center;
  line-height:1.6;
  position: relative;
  width: 75%;
  margin: 30px auto;
  border-top:4px dotted grey;
  border-bottom:4px dotted grey;
  padding:20px;
  padding-top:30px;
}
blockquote:before{
  font: bold 1.9em Georgia, serif;
  /* ganti jika menggunakan icon font */
  content: "\0201C";
  color: grey;
  /* Lingkaran*/
  width: 30px;
  height: 30px;
  line-height: 45px;
  border-radius: 30px;
  margin-top: -20px;
  margin-left: -20px;
  background: #fff;
  border:2px solid grey;
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  text-align: center;
  transition:all .4s;
}
blockquote:hover:before{
  background: grey;
  color:#fff;
}

Koleksi Template AMP Blogger Terbaik dan Gratis

2017-05-19T05:53:00.000-07:00

AMP (Accelerated Mobile Pages)

Tidak di ragukan lagi bahwa dengan template yang mengusung jenis HTML AMP ini hususnya pengguna Blogger sangat berpengaruh terutama untuk kecepatan loading halaman blog. Meskipun sampai saat ini template dengan HTML AMP ini masih dalam pembahasan, karna masih dalam perkembangan dan masih sedikit penggunanya trutama dalam custom artikel yang sedikit ribet dan beberapa alasan masih meragukan nya apalagi kalau sudah berhubungan dengan SEO (Search Engine Optimize) tapi saya gak akan bahas detail SEO di sini. Dalam artikel berbeda saya akan bahas kelebihan dan kekurangannya menggunakan AMP dan apa hubungannya dengan SEO.

Kali ini saya akan bagikan beberapa koleksi dari beberapa sumber pembuat template AMP, tidak ada salahnya kalian mencobanya untuk mersakan perbedaan custom template blogger biasa dengan custom template AMP.

1.AMP Blanterdeamp - by Mas Rio

Amp blogger cukup baik menurut saya meskipun secara pembuatannya template ini sudah di rilis pada tahun 2016, namun sampai saat ini masih banyak yang menggunakannya. di karenakan tampilan yang minimalis dan blog lebih cepat. template ini di bagikan secara gratis meskipun ada yang versi premiumnnya template ini tidak kalah jauh. hanya saja berbeda dengan service dan updatenya. untuk info lebih lengkapnya kunjungi idblanter.

View Demo
or
Download

2.AMP HTML - by Kang Ismet

template dari kangismet ini tampilannya lebih flexible dan modern minimalis ada beberapa kelebihan fitur lainnya seperti custom pada sidebar yang pasti sudah ready AMP.

View Demo
or
Info Download

3.Vletters AMP BLOGGER - Publish Bung Frangki

Vletters AMP BLOGGER ini di publikasin oleh bung frangki.
template AMP ini memiliki banyak fitur-fitur menarik terutama custom home page dan yang pasti responsive. info lengkapnya

View Demo
or
Info Download

4.Kompi Design Blogger AMP - by KOMPI AJAIB

template dari Kompi Ajaib ini di bagikan secara gratis/free namun untuk service update berikutnya akan berbayar alias Premium namun kalian jangan hawatir karna dokumentasi template ini sudah cukup lengkap. dan kalian bisa mengikuti tutorial optimasi menggunakan template AMP agar valid - info lenkap.

View Demo
or
Info Download

5.Gooplus Free AMP Blogger - by www.goomsite.net

Template ini merupakan update dari template AMP lainnya yaitu MDCAMP. untuk tutorial dan fitur lengkapnya kunjungi link download

View Demo
or
Info Download

Jika ada link yang mati infokan dalam kolom komentar. terimakasih

Template AMP blogger di atas masih sebagian dari banyaknya template blogger AMP terbaik menurut saya. artikel ini akan terus di update jika ada template yang benar cocok dan layak untuk di coba untuk mengoptimalkan kecepatan blog anda.

Compress gambar untuk mempercepat loading web atau blog

2017-05-11T11:28:00.000-07:00

Salah satu tips untuk mempercepat muat halaman web/blog salah satunya adalah mengurangi loading Gambar atau memuat tampilnya sebuah gambar.
Di antara para blogger mungkin dengan menyisipkan sebuah gambar pada artikel akan membuat lebih menarik terutama artikel yang membutuhkan gambar itu menjadi kewajiban. tapi apa dengan menyisipkan gambar para pengunjung akan nyaman. apalagi ketika loading membuka gambar itu terasa lama, otomatis pengunjung akan kabur dan cari info di blog lain. (Pengalaman pribadi ^_^)
Untuk memperkecil ukuran gambar tersebut tanpa mengurangi dimensi/resolution gambar silahkan kalian kunjungi beberapa web berikut untuk compress images (bisa mengatur kualitas sesuai yang di butuhkan):

Jenis gambar (JPG,PNG,GIF) > Di sini

Rekomendasi opsi lain :

Jenis gambar PNG > Di sini
Jenis gambar JPG > Di sini
Jenis gambar GIF > Di sini

Penggunaan tool di atas cukup mudah tinggal drag and drop.
Semua tool sudah di uji untuk keperluan pada blog EdenCreative. Pengaruhnya untuk speed blog cukup baik, pengujian Speed Blog saya test pada PageSpeed Google Chrome

- Saya sarankan untuk setiap membuat gambar usahakan menggunakan dengan warna solid.(Opsional)
- Pengguna blogspot sekarang Sudah banyak template blogger AMP gratis.
(Untuk belajar mengoptimalkan Theme AMP saya akan buat artikel terpisah)