Archive for Mei 2017

Menggunakan SVG untuk penggabungan icon pada icomoon

Gambar
Published on Mei 29, 2017 By
0 komentar
cara membuat SVG dari icomon.io
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
Menggunakan SVG dari icomon.io
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/

0 komentar:

Download Kerangka Template Blogger AMP Valid dan Responsive

AMP
Published on Mei 27, 2017 By
0 komentar
framework Template valid AMP dan Responsive
Kerangka (Framework) Template Valid AMP untuk Blogger dan Responsive.

Kesempatan kali ini Shannenpio 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.

Kerangka Template Blogger AMP Valid dan Responsive
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.
&lt;/head&gt;&lt;!--<head/>--&gt; (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 -->
&lt;!--<body/>--&gt;&lt;/body&gt;
</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

0 komentar:

Style CSS Garis Pemisah Dengan Gradient Color

CSS
Published on Mei 22, 2017 By
0 komentar
Style CSS Garis Pemisah Gradasi Warna

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.

Style CSS Garis Pemisah Gradient Color

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);
}

0 komentar:

Simple Blockquote Dengan Animasi CSS

CSS
Published on Mei 22, 2017 By
0 komentar
Simple Blockquote
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.

Simple Blockquote Dengan Animasi CSS

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;
}

0 komentar:

Koleksi Template AMP Blogger Terbaik dan Gratis

AMP
Published on Mei 19, 2017 By
1 komentar
Shannenpio Creative Free Template AMP Blogger
Shannenpio Creative Free Template AMP Blogger

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.Shannenpio Vk2 Free Template Amp HTML Landing Page - by Shannen Pio

Update! Shannenpio Vk2 Free Template Amp HTML Landing Page

Template Amp HTML Landing Page 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 shannenpio.
View Demo
or
Download
2.AMP HTML - by Kang Ismet

kangismet Free Template AMP Blogger

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 Free Template AMP Blogger
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

Kompi Ajaib Free Template AMP Blogger
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

Gooplus Free Template AMP Blogger
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
framework Template valid AMP dan Responsive
Buat yang ingin membuat template AMP sendiri dan membutuhkan kerangkanya silahkan kalian download pada artikel kerangka template blogger VALID AMP
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.

1 komentar:

Compress gambar untuk mempercepat loading web atau blog

Gambar
Published on Mei 11, 2017 By
0 komentar
perkecil size gambar
compress images png jpg gif

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)



0 komentar:

Langganan: Postingan (Atom)