Metode Sederhana Membuat Menu Navigasi yang Responsif

Salah satu bagian yang cukup sulit untuk me-responsif-kan sebuah situs adalah bagian menu navigasi nya, karena tidak sedikit orang yang sedemikian rupa tidak teliti dalam mengerjakan bagian ini untuk di-responsif-kan. Mengapa menu navigasi cukup penting untuk di-responsif-kan? Jawaban nya sederhana.. karena bagian ini sudah menjadi faktor penting bagi aksesibilitas sebuah situs. Menu navigasi yang responsif tentu akan mempercepat sekaligus mempermudah pengunjung anda menelusuri halaman apapun yang dibutuhkan.

Sebenarnya ada banyak cara untuk membuat menu navigasi yang responsif di situs web anda, bahkan beberapa plugin jQuery telah tersedia untuk melakukannya hanya dalam hitungan detik. Kendati demikian.. daripada langsung menerapkan solusi instan, ada baiknya jika pada tutorial kali ini saya memandu anda membangun navigasi tersebut sekaligus memahami struktur pembentuk nya. Kita akan coba membuat sebuah menu navigasi yang responsif tetapi masih dalam konteks yang sederhana, yaitu dengan menggunakan CSS Media Queries dan jQuery. Semoga dapat memberikan alternatif baru bagi anda yang suka menggunakan menu responsif di situs nya.

Sruktur HTML

<nav class="clearfix">
    <ul class="clearfix">
        <li><a href="#one">Intro</a></li>
        <li><a href="#two">Summary</a></li>
        <li><a href="#three">Skills</a></li>
        <li><a href="#four">Experience</a></li>
        <li><a href="#five">Education</a></li>
        <li><a href="#six">Contact</a></li>
    </ul>
    <a href="#" id="pull">Menu</a>
</nav>
<div class="container">
    <div class="panel" id="one"></div>
    <div class="panel" id="two"></div>
    <div class="panel" id="three"></div>
    <div class="panel" id="four"></div>
    <div class="panel" id="five"></div>
    <div class="panel" id="six"></div>
</div>

Struktur HTML di atas digunakan sebagai markup dari navigasi. Seperti yang anda lihat, disana ada menu utama yang berisi beberapa kategori 'level'.

CSS dan Media Queries

<style type='text/css'>
.container {
  //container
}
/* Basic Styles */
nav {
  height: 40px;
  width: 100%;
  background: #262626;
  font-size: 11pt;
  position: fixed;
  top: 0;
}
nav ul {
  padding: 0;
  margin: 0;
  height: 40px;
}
nav li {
  display: inline;
  float: left;
}
nav a {
  color: #fff;
  display: inline-block;
  width: 100px;
  text-align: center;
  text-decoration: none;
  padding: 9px 0;
}
nav a#pull {
  display: none;
}
@media screen and (max-width: 800px) {
  nav {
    width: 100%;
    height: auto;
    border-bottom: 0;
  }
  nav ul {
    display: none;
    height: auto;
  }
  nav li {
    width: 100%;
    float: left;
    position: relative;
    border-bottom: 1px solid #262626;
  }
  nav a {
    text-align: left;
    width: 100%;
    text-indent: 25px;
    background: #2e2e2e;
  }
  nav a:hover {
    background: #444;
  }
  nav a#pull {
    display: block;
    background-color: #262626;
    width: 100%;
    position: relative;
  }
  nav a#pull:after {
    content: "";
    background: url(nav-icon.png) no-repeat;
    width: 30px;
    height: 30px;
    color: #FFF;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 10px;
  }
}
.panel {
  width: 100%;
  height: 450px;
}
#one {
  background: #9FF;
}
#two {
  background: #9F6;
}
#three {
  background: #9F0;
}
#four {
  background: #CF0;
}
#five {
  background: #CF9;
}
#six {
  background: #F93;
}
</style>

Pada bagian ini, kita dapat mengatur penampilan navigasi. Walau hanya sebagai dekorasi, namun dengan penampilan yang baik akan mampu menarik perhatian pengunjung anda nantinya. Tetapi disini saya hanya akan menggunakan tampilan (warna dan bentuk) yang sederhana, yaaa paling tidak apa yang saya maksudkan sudah tersampaikan.

Coba anda perhatikan berkas CSS di atas. Disana mengandung CSS Media Queries yang saya maksud sebelumnya. CSS Media Queries tersebut mendefenisikan bagaimana dan akan seperti apa navigasi mulai berubah pada kondisi tertentu khususnya pada kondisi ukuran layar perangkat seluler.

jQuery

<script type='text/javascript>
$(function() {
    var pull = $('#pull');
    menu = $('nav ul');
    $(pull).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
    });
    $(window).resize(function() {
        var w = $(this).width();
        if (w & gt; 800 & amp; & amp; menu.is(':hidden')) {
            menu.removeAttr('style');
        }
    });
    $('li').on('click', function(e) {
        var w = $(window).width();
        if (w & lt; 800) {
            menu.slideToggle();
        }
    });
    $('.panel').height($(window).height());
});
</script>

Contoh yang saya buatkan ini hanya sebagai alternatif kecil dari ribuan cara untuk membuat menu navigasi yang responsif. Mudah-mudahan dapat anda implementasikan sebagai solusi dalam memenuhi kebutuhan dan struktur navigasi situs web anda.

Pocong Jumping di Android

Untuk kamu yang menyukai permainan dengan Gameplay sederhana, sepertinya kamu harus mencoba permainan yang satu ini. Pocong Jumping game buatan anak negri ini cukup menarik untuk dimainkan disaat waktu luang.Seperti yang sudah kita ketahui, Pocong sendiri memiliki ciri khas melompat-lompat dan mempunyai wajah yang menyeramkan. Tetapi, berbeda dengan pocong yang satu ini. Pocong yang ada di dalam permainan ini mempunyai wajah yang sama sekali tidak menakutkan, bahkan terlihat lucu saat dimainkan.

Seperti game “Jumping” pada umumnya, dalam Pocong Jumping sendiri kita harus memastikan pocong yang sedang kita mainkan memiliki tempat berpijak agar dapat sampai ke tempat tertinggi. Untuk menggerakan pocongnya, kamu hanya perlu menggoyangkan Android kamu kekiri maupun kekanan dan secara otomatis pocong tersebut akan mengikuti arah gerakan kamu.

Walaupun memiliki gameplay yang sederhana, untuk mencapai tempat tertinggi tidaklah mudah. Banyak jebakan yang ada dipermainan ini yang membuatnya menjadi lebih sulit. Salah satu contohnya adalah adanya Bom di salah satu tempat pijakan. Jika pada saat pocong kamu melompat lalu tidak sengaja menyentuh bom tersebut, maka secara langsung pocong yang kamu mainkan akan mati dan permainan pun berakhir.

Menurut Jaka game ini melatih kegesitan kita karena mewajibkan kita untuk memiliki respon yang cepat dan secara tidak langsung melatih kesabaran kita juga, karena tidak adanya “checkpoint” dalam game ini, membuat kita mengulangnya dari awal lagi jika pocongnya terjatuh atau mati.

Tunggu apalagi? Silahkan download dan coba Pocong Jumping sekarang!

Origin Source By JalanTikus

Tags : Android, update, games, free download, kumpulan aplikasi apk, Tablet pc, Smartphone App, Software, UC Broswer update, Tutorial, Tips Trik Gadget, seo friendly, sosial media, chating, Video Call App, Add-on broswer, crack App, Serial Number, google play app, apkbaru, download apk, android apk, apk gratis, apk full version, apk free download, apk pro, android free download site, situs download terbaru

Contoh Pseudo-Elements Animasi dan Transisi

Kita akan berbicara sedikit tentang pseudo-elemen dan melihat empat contoh yang menggunakan beberapa teknik khusus untuk mencapai berbagai efek. Empat contoh berikut diciptakan untuk topik tertentu. Hal ini jelas bahwa ada cara lain untuk mencapai efek visual yang sama, tetapi untuk kepentingan percobaan ini, kita tentu saja akan menggunakan pseudo-elemen jadi di ingat bahwa ini hanya bekerja pada browser yang mendukung animasi dan transisi pseudo-elemen.

Contoh 1

Animasi setetes air yang jatuh ke dalam wadah bulat
Markup HTML

<div class="drop"> </div>

Meskipun hanya memiliki satu unsur tapi bisa memiliki .container lain yang membantu perubahan skala.
CSS

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

.drop {
 background: rgba(255, 255, 245, 1);
 border: 4px solid rgba(255, 245, 235, 1);
 border-radius: 100%;
 box-shadow: inset -0.1em 0 2em 0.5em rgba(255, 255, 255, 0.5), 
             inset -0.1em 0 0.5em 0 rgba(0, 0, 0, 0.8);
 position: relative;
 margin: 0 auto;
 width: 15em; 
 height: 15em;
 overflow: hidden;
}

.drop:before,
.drop:after {
 content:"";
 display:block;
 position:absolute;
}

/* Drop */

.drop:before {
 background: rgba(167, 217, 234, 1);
 border-radius: 100%;
 
 /* Drop start */
 
 box-shadow: 0 0 0 0.1em rgba(167, 217, 234, 0.8), 
             0 0 0 0.15em rgba(167, 217, 234, 0.8), 
             0 0 0 0.2em rgba(167, 227, 234, 0.8), 
             0 0 0 0.25em rgba(167, 227, 234, 0.8), 
             0 0 0 0.3em rgba(167, 227, 234, 0.8), 
             0 0 0 0.35em rgba(167, 227, 234, 0.8), 
             0 0 0 0.4em rgba(167, 227, 234, 0.8), 
             0 0 0 0.45em rgba(167, 227, 234, 0.8), 
             0 0 0 0.5em rgba(167, 227, 234, 0.8);
 top: 0%; left: 50%;
 
 /* The "width" and "height" of the division must be smaller than the "box-shadow" total size. So we can control different variant sizes. */
 
 width: 0.2em; 
 height: 0.2em;
 animation: fall 3.5s cubic-bezier(0.5, 0, 1, 0.5) infinite;
}

/* Surface */

.drop:after {
 background: rgb(52, 152, 219);
 background: linear-gradient(rgba(52, 255, 255, 1) 0%, rgba(52, 152, 219, 1) 10%, rgba(152, 252, 219, 1) 100%);
 border-radius: 100% 0 50% 0;
 left: 0; 
 bottom: 0;
 width: inherit; 
 height: 3em;
 opacity: 0.7;
 animation: surface 3s linear infinite;
}

/* Drop animation */

@keyframes fall  {

 /* Drop form */

 5%, 15%  {
  box-shadow: 0 -1.4em 0 0.1em rgba(167, 217, 234, 1), 
              0 -0.8em 0 0.15em rgba(167, 217, 234, 1), 
              0 -0.3em 0 0.2em rgba(167, 217, 234, 1), 
              0 -0.1em 0 0.25em rgba(167, 217, 234, 1), 
              0 0 0 0.3em rgba(167, 217, 234, 1), 
              0 0.2em 0 0.35em rgba(167, 217, 234, 1), 
              0 0.4em 0 0.4em rgba(167, 217, 234, 1), 
              0 0.6em 0 0.45em rgba(167, 217, 234, 1), 
              0 0.8em 0 0.5em rgba(167, 217, 234, 1);
 }
 
 /* Drop fall */
 
 16%  {
  top: 80%;
 }
 
 /* Contact surface */
 
 18%  {
  top: 80%;
  box-shadow: 1em -8em 0 0.2em rgba(177, 227, 234, 1), 
              -2.2em -3.8em 0 0.1em rgba(177, 227, 234, 1), 
              3em -2.85em 0 0.3em rgba(177, 227, 234, 1), 
              -3.5em -4em 0 0.2em rgba(177, 227, 234, 1), 
              0 0 0 0.3em rgba(177, 227, 234, 1), 
              2em -2em 0 0.2em rgba(177, 227, 234, 1), 
              -0.3em -3em 0 0.2em rgba(177, 227, 234, 1), 
              0.5em -5em 0 0.35em rgba(177, 227, 234, 1), 
              -3em -1em 0 0.3em rgba(177, 227, 234, 1);
 }
 
 /* Dispersion */
 
 30%  {
  top: 90%;
  box-shadow: 1.5em 0 0 0.2em rgba(252, 252, 255, 0.1), 
              -2em 0 0 0.15em rgba(252, 252, 255, 0.1), 
              3em 0 0 0.2em rgba(252, 252, 255, 0.1), 
              -2em 0 0 0.25em rgba(252, 252, 255, 0.1), 
              0 0 0 0.2em rgba(252, 252, 255, 0.1), 
              2.35em 0 0 0.3em rgba(252, 252, 255, 0.1), 
              -0.5em 0 0 0.2em rgba(252, 252, 255, 0.1), 
              1em 0 0 0.3em rgba(252, 252, 255, 0.1), 
              -4em 0 0 0.4em rgba(252, 252, 255, 0.1);
 }
 
 /* Hidden */
 
 40%, 100%  {
  top: 95%;
  background: rgba(255, 255, 255, 1);
  box-shadow: 1.8em 0.5em 0 0.2em rgba(255, 255, 255, 0), 
              -3em 0.5em 0 0.1em rgba(255, 255, 255, 0), 
              4em 0.5em 0 0.1em rgba(255, 255, 255, 0), 
              -3.5em 0.5em 0 0.1em rgba(255, 255, 255, 0), 
              0 0 0 0.3em rgba(255, 255, 215, 0), 
              2.45em 0.5em 0 0.1em rgba(255, 255, 255, 0), 
              -0.8em 0.5em 0 0.2em rgba(255, 255, 255, 0), 
              1.5em 0.5em 0 0.3em rgba(255, 255, 255, 0), 
              -4.5em 0.5em 0 0.2em rgba(255, 255, 255, 0);
 }
}

/* Animation of water surface */

@keyframes surface  {
 50%  {
  border-radius: 0 75% 0 75%;
  opacity: 0.5;
  height: 3.5em;
 }
}

Berikut adalah dua tips untuk mendapatkan animasi lebih naturalistik:

• Menonton dan menganalisa referensi seperti gambar, video, dll
• Percobaan dengan kecepatan yang berbeda untuk transisi properti CSS dan keyframes.

Lebih lanjut tentang menghidupkan karakter langsung saja ke masternya "The Animator Survival Kit" oleh Richard Williams .

Contoh 2

Dalam contoh ini kita akan membuat efek hover dengan menggunakan transisi.
Markup HTML

<div class="circle">
 <h1>Anarchyta</h1>
</div>

Di sini hanya memiliki .container dan judul untuk memisahkan teks dari yang lain.
CSS

.circle {
 background: rgb(255,255,255);
 border-radius: 100%;
 cursor: pointer;
 position: relative;
 margin: 0 auto;
 width: 15em; 
 height: 15em;
 overflow: hidden;
 transform: translateZ(0);
}

.circle h1 {
 color: rgba(189, 185, 199,0);
 font-family: 'Lato', sans-serif;
 font-weight: 900;
 font-size: 1.6em;
 line-height: 8.2em;
 text-align: center;
 text-transform: uppercase;
 -webkit-font-smoothing: antialiased;
 user-select: none;
 transition: color 0.8s ease-in-out;
}

.circle:before,
.circle:after {
 border-radius: 100%;
 content:"";
 position: absolute;
 top: 0; 
 left: 0;
 width: inherit; 
 height: inherit;   
 box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2), 
             inset 0 10.6em 0 rgba(30, 140, 209, 0.2), 
             inset -10.6em 0 0 rgba(30, 140, 209, 0.2), 
             inset 0 -10.6em 0 rgba(30, 140, 209, 0.2);
 transition: box-shadow 0.75s;
}

/* We rotate the :after pseudo-element to get the edge from the corner, we could also just do that with box-shadows. */

.circle:after  {
 transform: rotate(45deg);
}

/* There is no problem using "pseudo-class + pseudo-element" :) */

.circle:hover:before,
.circle:hover:after  {
 box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), 
             inset 0 0.86em 0 rgba(252, 150, 0, 0.5), 
             inset -0.86em 0 0 rgba(0, 255, 0, 0.5), 
             inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);
}

.circle:hover > h1  {
 color: rgba(185, 185, 185,1);
}

Anda harus menggunakan hanya satu warna, untuk menghindari pencampuran warna yang tidak diinginkan dengan (.overlay ketika memicu hover / mengarahkan mouse pada object.

Contoh 3

Loading Animasi, Idenya di sini adalah untuk menggabungkan warna melalui rotasi. Ini sangat sederhana!
Markup HTML
Cukup menggunakan satu elemen tunggal untuk HTML ini.

<div class="loading"></div>

CSS

.loading  {
 background: rgba(0, 50, 250, 0);
 position: relative;
 margin: 5em auto 0 auto;
 width: 3em; 
 height: 3em;
 animation-name:rotate;
}

.loading,
.loading:before,
.loading:after  {
 border-radius: 100%;
 animation-duration: 3s;
 animation-iteration-count: infinite;
 animation-timing-function: ease-in;
}

.loading:before,
.loading:after  {
 content: "";
 position: absolute;
 top: 0; 
 left: 0;
 width: inherit; 
 height: inherit;
}

.loading:before  {
 background: rgba(200, 250, 100, 0);
 animation-name: ring;
}

.loading:after  {
 background: rgba(250, 0, 200, 0);
 animation-name: ring2;
}

@keyframes rotate  {
 0%  {
  transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
  box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), 
     inset 0 0.8em 0 rgba(252, 150, 0, 0.5), 
     inset -0.8em 0 0 rgba(0, 255, 0, 0.5), 
     inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
 }
 
 /* hidden */
 
 85%, 100%  {
 
 /* 360deg * 10 */
 
  transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
  box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), 
     inset 0 0 0 rgba(252, 150, 0, 0), 
     inset 0 0 0 rgba(0, 255, 0, 0), 
     inset 0 0 0 rgba(0, 150, 255, 0);
 }
}

@keyframes ring  {
 0%  {
  transform: scaleX(0.1) scaleY(0.5);
  box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), 
     inset 0 0.8em 0 rgba(252, 150, 0, 0.5), 
     inset -0.8em 0 0 rgba(0, 255, 0, 0.5), 
     inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
 }
 
 /* hidden */
 
 75%, 100%  {
  transform: scaleX(2) scaleY(2.1);
  box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), 
     inset 0 0 0 rgba(252, 150, 0, 0), 
     inset 0 0 0 rgba(0, 255, 0, 0), 
     inset 0 0 0 rgba(0, 150, 255, 0);
 }
}

@keyframes ring2  {
 0%  {
  transform: scaleX(0.5) scaleY(0.1);
  box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), 
     inset 0 0.8em 0 rgba(252, 150, 0, 0.5), 
     inset -0.8em 0 0 rgba(0, 255, 0, 0.5), 
     inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
 }
 
 /* hidden */
 
 65%, 100%  {
  transform: scaleX(2) scaleY(2.1);
  box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), 
     inset 0 0 0 rgba(252, 150, 0, 0), 
     inset 0 0 0 rgba(0, 255, 0, 0), 
     inset 0 0 0 rgba(0, 150, 255, 0);
 }
}

Ini adalah contoh yang bagus untuk bereksperimen dengan timing dan kecepatan untuk mendapatkan animasi yang baik.

Contoh 4

Ini adalah contoh yang paling Edan dari semua: sedikit makhluk terbang bermata satu!
Kita akan menggunakan keduanya, animasi dan transisi.
Markup HTML

Arahkan mouse pada mata pojoro untuk melihat animasi sayap.

<div class="pojoro">●</div>

CSS

.pojoro  {
 background: rgba( 255, 255, 255, 1);
 background: radial-gradient(ellipse at center, rgba(255,255,255,1) 40%,rgba(51,51,51,1) 100%);
 border-radius: 100%;
 
 /* box-shadow: secondary color, body, eyelash */
 
 box-shadow: 0 0 0 0.2em rgb(146,89,149), 
    0 0 0.1em 0.55em rgb(176,89,179), 
    inset 0 0.2em 0 0 rgb(136,79,139);
 
 /* ojo (eye) */
 
 color: rgba( 40, 40, 40, 0.8);
 line-height: 1.1em;
 padding-left: 0.18em;
 -webkit-font-smoothing: antialiased;
 user-select: none;
 
 /* usability, position and transition */
 
 cursor: pointer;
 position: relative;
 margin: 5em auto 0 auto;
 width: 1em; height: 1em;
 transform-origin: center;
 transition: all 0.8s ease-in-out;
 
 /* Separate the animations to have a better control over the eye and the body */
 
 animation: eye 2.2s ease-in-out infinite, body 1.15s 1.8s linear infinite; 
} 

/* Elevate and distort the creature. */

.pojoro:hover  {
 transform: scaleY(0.9) scaleX(0.95) translateY(-3em) translateZ(0);
}

/* wings */

.pojoro:before,
.pojoro:after  {
 background: rgba(0,0,0,0);
 border-radius: 100%;
 content: "";
 
 /* display:none, hide wings */
 
 display: none;
 position: absolute;
 width: 1em; height: 0.1em;
 -webkit-filter: blur(1px);
 transition: all 0.2s;
 animation-duration: 0.2s;
 animation-iteration-count: infinite;
 animation-timing-function: ease-in-out;
}

.pojoro:before  {
 top: 25%; left: 1.45em;
 margin-left: -1em;
 transform-origin: left;
 transform: rotate(-60deg);
 animation-name: wings;
}

.pojoro:after  {
 top: 25%; left: -2.2em;
 margin-left: 1em;
 transform-origin: right;
 transform: rotate(60deg);
 animation-name: wings2;
}

.pojoro:hover:before,
.pojoro:hover:after  {
 background: rgba(100,100,100,0.8);
 
 /* display:block, we allow the wings to appear and the animation starts */
 
 display: block;
 margin-left: 0em;
 width: 2em; height: 0.3em;
}

@keyframes eye  {

 /* Eye movement */
 
 5%, 10%  {
  line-height: 1.2em;
  padding-left: 0em;
 }
 15%, 20%  {
  line-height: 1.15em;
  padding-left: 0.4em;
 }
 
 /* Eyelash movement */
 
 25%  {
  box-shadow: 0 0 0 0.2em rgb(146,89,149), 
     0 0 0.1em 0.55em rgb(166,89,169), 
     inset 0 1em 0 0 rgb(136,79,139);
 }
 23%, 27%  {
  box-shadow: 0 0 0 0.2em rgb(146,89,149), 
     0 0 0.1em 0.55em rgb(166,89,169), 
     inset 0 0.2em 0 0 rgb(136,79,139);
 }
}

@keyframes body  {
 50%  {
  width: 1.4em; height: 1.4em;
 } 
}

@keyframes wings  {
 50%  {
  transform: rotate(65deg);
 }
}

@keyframes wings2  {
 50%  {
  transform: rotate(-65deg);
 }
}

Dan itu adalah contoh terakhir!

Kesimpulannya, adalah hal besar untuk menggabungkan Pseudo-Elements dengan animasi dan transisi memungkinkan untuk menciptakan beberapa efek yang menyenangkan tanpa menggunakan terlalu banyak HTML atau gambar. Sampai kemudian kita bisa bermain dengan Pseudo-Elements dan menemukan teknik yang menarik.

Apa pendapat Anda tentang hal ini?

Subculture Responsive Blogger Template Valid HTML5 dan CSS3

• Demo
• Download

Featured

• Responsive Design -> Check
• Valid HTML 5 Homepage -> Check
• Valid HTML 5 Posting -> Check
• Valid CSS 3 -> Check
• SEO Score 100% -> Check
• Threadead Cooments
• Auto Readmore No JS
• Breadcrums Terindex Google
• Related Post
• Fast Loading
• Recent Comments Notif
• Etc...

Custom

Setelah template Anda upload jangan lupa untuk edit pada bagian Recent Comments dan ganti dengan URL Anda...

var originalTitle = document.title;
var dian_config = {
home_page: "http://afowles.blogspot.com/",
max_result: 18,
t_w: 40,
t_h: 40,
summary: 9999,
new_tab_link: false,
ct_id: "comments-container",
new_dian: " Komentar Baru!",
interval: 30000,
alert: true,
alert: function (a) {
.....................

Untuk membuat Blog tetap Valid HTML 5 dan SEO 100% setelah Anda menambahkan Widget hapus Kode ini pada --> Edit HTML

<b:include name='quickedit'/>

Mungkin cukup itu saja untuk menjaga Blog agar tetap Valid HTML 5 dan SEO 100%.

Selanjutnya seilahkan kalian edit sendiri...

Latest Update : 11:13 PM ~ Friday, 21 March 2014

Random Post Fast Loading

Seperti yang kita ketahui bahwa widget Random post mampu menampilkan artikel blog kita secara acak dan bergantian pada saat widget tersebut kita load (bekerja), dimana Script widget tersebut akan menampilkan beberapa artikel/postingan blog kita sesuai dengan pengaturan yang kita terapkan pada Script widget tersebut dengan cara mengatur nilai yang akan di tampilkan, sebagai contoh maxResults = 7; script tersebut akan menampilkan artikel/postingan acak sebanyak (7) artikel.
Akan tetapi mau tidak mau Saya harus mengatakan bahwa widget random post itu sangat buruk dalam hal performa. Kerja mereka sangat lambat dan membuang-buang tenaga, karena mereka bekerja dengan cara memanggil feed posting berukuran sangat besar! Kemudian mereka hanya akan menampilkannya sebagian saja secara acak:

<script src='/feeds/posts/default?alt=json-in-script&max-results=99999&callback=randomPosts'></script>

Bagi Anda para pemakai mungkin tidak pernah tahu mengenai ini, tetapi sebenarnya setiap pemakai widget random post termasuk juga widget artikel terkait tanpa sadar telah menerima beban begitu besar. Ketika Anda membuka halaman tunggal dimana terdapat widget random post di dalamnya, pada saat yang bersamaan Anda juga sebenarnya sedang membuka semua posting yang telah Anda terbitkan dalam satu waktu. Mengapa? Karena parameter max-results pada feed menunjukkan angka 99999 yang artinya bahwa semua feed posting akan “diusahakan” untuk dipanggil (diusahakan, karena jumlah posting yang kita terbitkan tidak mungkin mencapai angka sebesar itu).

Mengacak Indeks Permulaan

Saya menyadari terdapat sebuah peluang untuk menciptakan widget random post yang lebih ringan dan cepat dimuat. Dibandingkan memuat semua posting dan memilah beberapa posting secara acak untuk ditampilkan, akan lebih baik jika kita mengacak nilai start-index pada feed sehingga posting yang dimuat bisa dimulai dari urutan sembarang:

function randomPosts(json) {
    // Ubah JSON menjadi HTML...
}

var startIndex = Math.round(Math.random() * 9999); // Membuat angka acak
document.write('<scr' + 'ipt src="/feeds/posts/summary?alt=json-in-script&start-index=' + startIndex + '&max-results=7&callback=randomPosts"></scr' + 'ipt>');

Ada satu masalah kecil yang mungkin akan mengganggu. Jika angka acak yang tercipta nilainya lebih besar dari total posting blog Anda saat ini, maka widget random post ini tidak akan bekerja. Oleh karena itu kita harus membatasi angka acak yang tercipta, yaitu tidak boleh kurang dari 1 dan tidak boleh lebih dari “total posting dikurangi jumlah posting yang ingin ditampilkan”.
Untuk mendapatkan jumlah posting secara keseluruhan kita bisa mengambilnya melalui objek json.feed.openSearch$totalResults.$t:

// Konfigurasi
var homePage = 'http://nama_blog.blogspot.com',
    maxResults = 7;

// Fungsi untuk menggenerasikan angka acak dengan batasan minimal dan maksimal
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Mendapatkan indeks pemulai yang aman untuk memanggil feed utama
function createRandomPostsStartIndex(json) {
    // Buat angka acak dengan nilai tidak boleh kurang dari `1` dan tidak boleh lebih dari `total posting - posting yang ingin ditampilkan`
    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
    // Tampilkan pesan log
    console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
}

document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');

Muat ulang widget Anda berkali-kali. Seharusnya Anda akan melihat pesan log indeks pemanggilan posting yang berubah-ubah seperti ini:

Kita akan menggunakan angka acak itu sebagai angka pemulai pada parameter start-index seperti ini:

function createRandomPostsStartIndex(json) {
    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
    document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}

Pada bagian akhir URL feed terdapat parameter callback=randomPosts. randomPosts di sini merupakan fungsi utama yang akan kita buat untuk mengubah JSON Blogger menjadi widget:

function randomPosts(json) {
    var link, ct = document.getElementById('random-post-container'),
        entry = json.feed.entry,
        skeleton = "<ul>";
    for (var i = 0, len = entry.length; i < len; i++) {
        for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
            link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
        }
        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
    }
    ct.innerHTML = skeleton + '</ul>';
}

Sentuhan akhir, acak urutan posting yang ditampilkan menggunakan fungsi pengacak array sehingga daftar posting yang ditampilkan nantinya akan semakin acak urutannya:

// Fungsi untuk mengacak array
function shuffleArray(arr) {
    var i = arr.length, j, temp;
    if (i === 0) return false;
    while (--i) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;
}

// Widget
function randomPosts(json) {
    var link, ct = document.getElementById('random-post-container'),
        entry = shuffleArray(json.feed.entry),
        skeleton = "<ul>";
    for (var i = 0, len = entry.length; i < len; i++) {
        for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
            link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
        }
        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
    }
    ct.innerHTML = skeleton + '</ul>';
}

Hasil Akhir Tanpa Thumbnail Dan Css

<div id='random-post-container'>Memuat...</div>

<script type="text/javascript">
//<![CDATA[
// Feed configuration
var homePage = 'http://nama_blog.blogspot.com',
 maxResults = 7,
 containerId = 'random-post-container';

// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
 return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
function shuffleArray(arr) {
 var i = arr.length, j, temp;
 if (i === 0) return false;
 while (--i) {
  j = Math.floor(Math.random() * (i + 1));
  temp = arr[i];
  arr[i] = arr[j]; 
  arr[j] = temp;
 }
 return arr;
}

// Get a random start index
function createRandomPostsStartIndex(json) {
 var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
 if (window.console && window.console.log) console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults)); 
 document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}

// Widget's main function
function randomPosts(json) {
 var link, ct = document.getElementById(containerId),
  entry = shuffleArray(json.feed.entry),
  skeleton = "<ul>";
 for (var i = 0, len = entry.length; i < len; i++) {
  for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
   link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
  }
  skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
 }
 ct.innerHTML = skeleton + '</ul>';
}

document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
//]]>
</script>

Dengan Thumbnail Dan Deskripsi

<div id='random-post-container'>Memuat...</div>

<script type="text/javascript">
//<![CDATA[
// Feed configuration
var homePage = 'http://nama_blog.blogspot.com',
 maxResults = 7,
 summaryLength = 170,
 noImageUrl = 'http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png',
 containerId = 'random-post-container';

// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
 return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
function shuffleArray(arr) {
 var i = arr.length, j, temp;
 if (i === 0) return false;
 while (--i) {
  j = Math.floor(Math.random() * (i + 1));
  temp = arr[i];
  arr[i] = arr[j]; 
  arr[j] = temp;
 }
 return arr;
}

// Get a random start index
function createRandomPostsStartIndex(json) {
 var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
 if (window.console && window.console.log) console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults)); 
 document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}

// Widget's main function
function randomPosts(json) {
 var link, summary, img,
  ct = document.getElementById(containerId),
  entry = shuffleArray(json.feed.entry),
  skeleton = "<ul>";
 for (var i = 0, len = entry.length; i < len; i++) {
  summary = ("summary" in entry[i]) ? (entry[i].summary.$t.replace(/<.*?>/g, "")).substring(0, summaryLength) + '&hellip;' : "";
  img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s72-c") : noImageUrl;
  for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
   link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
  }
  skeleton += '<li>';
  skeleton += '<img src="' + img + '" alt="" width="72" height="72">';
  skeleton += '<a href="' + link + '">' + entry[i].title.$t + '</a><br>';
  skeleton += '<span>' + summary + '</span>';
  skeleton += '<span class="clear"></span></li>';
 }
 ct.innerHTML = skeleton + '</ul>';
}

document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
//]]>
</script>

Hasil Akhir Dengan Sedikit Sentuhan Css Tanpa Thumbnail Dan Deskripsi

<style type='text/css'>
#random-post-container {
    width: auto;
    margin-left: 15px;
}

#random-post-container ul {
    margin: 7px 0 0;
    padding: 0;
}

#random-post-container li {
    list-style: none;
    margin: 0 0 2px;
    background-color: #e5e5e5;
    padding: 0 7px 0 7px;
    line-height: 24px;
    height: 24px;
    overflow: hidden;
    border-bottom: 1px dotted #ccc;
}

#random-post-container a {
    text-decoration: none;
}

#random-post-container a:hover {
    text-decoration: underline;
}

#random-post-container strong {
    font: normal bold 13px/1.4 Arial,Sans-Serif;
}
</style>

<div id='random-post-container'>Memuat...</div>
<script type='text/javascript'>
    //<![CDATA[
    /* Performa Widget Random Post
     * By Anarchyta
     * http://bit.ly/anarchyta
     * http://plus.google.com/118396814444756975267/posts
     */

    var homePage = 'http://nama_blog.blogspot.com',
        maxResults = 7,
        containerId = 'random-post-container';
    // Function to generate random number limited from `min` to `max`
    // Used to create a valid and safe random feed `start-index`

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    // Function to shuffle arrays
    // Used to randomize order of the generated JSON feed

    function shuffleArray(arr) {
        var i = arr.length,
            j, temp;
        if (i === 0) return false;
        while (--i) {
            j = Math.floor(Math.random() * (i + 1));
            temp = arr[i];
            arr[i] = arr[j];
            arr[j] = temp;
        }
        return arr;
    }
    // Get a random start index

    function createRandomPostsStartIndex(json) {
        var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
        // console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
        document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
    }
    // Widget's main function

    function randomPosts(json) {
        var link, ct = document.getElementById(containerId),
            entry = shuffleArray(json.feed.entry),
            skeleton = "<strong>Random Post</strong><ul>";
        for (var i = 0, len = entry.length; i < len; i++) {
            for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
                link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
            }
            skeleton += '<li>&#10070; <a href="' + link + '">' + entry[i].title.$t + '</a></li>';
        }
        ct.innerHTML = skeleton + '</ul>';
    }
    document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt><div id="itempager" style="position:relative;"><a title="Dharla Ferdana" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:10px;right:14px;font:normal bold 8px Arial,Sans-Serif!important;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.1);text-decoration:none;" href="http://www.dhf.web.id" target="_blank">&#9658;DH-F</a></div>');
    //]]>
</script>

Menggunakan Thumbnail Dan Deskripsi

<style type='text/css'>
#random-post-container {
    margin-bottom: 5px;
    background-color: #333;
    border: 4px solid #ddd;
    width: 400px;
    // Style by: www.dhf.web.id/;
}

#random-post-container a {
    text-decoration: none;
    color: #fff;
}

#random-post-container a:hover {
    text-decoration: underline;
}

#random-post-container ul {
    padding: 0 7px;
}

#random-post-container li {
    border-top: 1px solid #444;
    border-bottom: 1px solid #222;
    padding: 5px 7px;
    color: #aaa;
    list-style: none;
    overflow: hidden;
}

#random-post-container img {
    display: block;
    float: left;
    margin: 2px 7px 5px 0;
    padding: 4px 4px;
    background-color: #222;
    border: 1px solid #111;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 0 #444;
    -moz-box-shadow: 0 1px 0 #444;
    box-shadow: 0 1px 0 #444;
}

#random-post-container a {
    font-weight: bold;
    font-size: 110%;
}

#random-post-container .clear {
    display: block;
    clear: both;
}
</style>

<div id='random-post-container'>Memuat...</div>

<script type='text/javascript'>
    //<![CDATA[
    /* Performa Widget Random Post
     * By Anarchyta
     * http://bit.ly/anarchyta
     * http://plus.google.com/118396814444756975267/posts
     */

    // Feed configuration
    var homePage = 'http://nama_blog.blogspot.com',
        maxResults = 5,
        summaryLength = 150,
        noImageUrl = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj2gNwU9yjLzfgb8-acPhmzZ-H5r4dftmFgi0IYS_aeT418axbZInGZAKgtWwlGS4uyl74bntkT922XdZo-fFPiO3QOX8ATH9j0eNmlL2xUj5_XVryCwsi788SNfzv1y_x0eG0YsUKH6Ea/s1600/dHF-logo1.png',
        containerId = 'random-post-container';

    // Function to generate random number limited from `min` to `max`
    // Used to create a valid and safe random feed `start-index`

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    // Function to shuffle arrays
    // Used to randomize order of the generated JSON feed

    function shuffleArray(arr) {
        var i = arr.length,
            j, temp;
        if (i === 0) return false;
        while (--i) {
            j = Math.floor(Math.random() * (i + 1));
            temp = arr[i];
            arr[i] = arr[j];
            arr[j] = temp;
        }
        return arr;
    }

    // Get a random start index

    function createRandomPostsStartIndex(json) {
        var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
        if (window.console && window.console.log) console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
        document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
    }

    // Widget's main function

    function randomPosts(json) {
        var link, summary, img,
            ct = document.getElementById(containerId),
            entry = shuffleArray(json.feed.entry),
            skeleton = "<ul>";
        for (var i = 0, len = entry.length; i < len; i++) {
            summary = ("summary" in entry[i]) ? (entry[i].summary.$t.replace(/<.*?>/g, "")).substring(0, summaryLength) + '&hellip;' : "";
            img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s72-c") : noImageUrl;
            for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
                link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
            }
            skeleton += '<li>';
            skeleton += '<img src="' + img + '" alt="" width="72" height="72">';
            skeleton += '<a href="' + link + '">' + entry[i].title.$t + '</a><br>';
            skeleton += '<span>' + summary + '</span>';
            skeleton += '<span class="clear"></span></li>';
        }
        ct.innerHTML = skeleton + '</ul>';
    }

    document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt><div id="itempager" style="position:relative;"><a title="Dharla Ferdana" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:10px;right:18px;font:normal bold 8px Arial,Sans-Serif!important;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.1);text-decoration:none;" href="http://www.dhf.web.id" target="_blank">&#9658;DH-F</a></div>');
    //]]>
</script>

Cara Membuat Blog Valid CSS3

Beberapa hari ini saya di sibukan dengan pertanyaan membuat blog Valid CSS3 setelah saya memposting template saya Flow Anarchyta yang sudah saya validasi dengan tujuan agar Blog lebih SEO dan artikel lebih mudah di baca oleh mesin pencari (Mitos) dan keuntungan menurut saya adalah membuat blog kita loadingnya menjadi ringan (beberapa second) karena saya juga merasakannya. Terus mengapa loading blog kita menjadi Ringan?
Karena kode CSS kita menjadi lebih berkurang..

Tahap Pertama

• Backup terlebih dahulu template blog Anda.
• Hapus CSS reset bawaan Blogger dengan cara :
• Cari kode <b:skin><![CDATA[ kemudian Anda CUT semua CSS di bawahnya sampai kode ]]></b:skin> dan Anda Paste ke Notepad.. sehinggan kode menjadi

<b:skin><![CDATA[ ]]></b:skin>

Ganti kode tersebut dengan kode berikut ini :

&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>

• selanjutnya tepat dibawah nya pasang kode ini :

<style type='text/css'>
..... Masukan Kode CSS yang tadi Anda Cut di Notepad ....
</style>

• Lakukan preview terlebih dahulu jika ternyata tidak ada Error

Pada tahap pertama ini sudah banyak kode Error yang teratasi yaitu pada CSS Reset Stylesheet Blogger.

Tahap Kedua

Hapus beberapa property pada CSS yang diterapkan pada berbagai browser karena dengan adanya CSS3 ini kode tersebut sudah tidak di perlukan lagi. Sebagai contoh

-moz-border-radius:5px; 
-khtml-border-radius:5px; 
-o-border-radius:5px; 
-webkit-border-radius:5px; 
-ms-border-radius:5px;
border-radius:5px;

Karena adanya CSS3 ini maka hapus semua kode CSS yang berawalan dengan kode di bawah ini

-moz-border-radius:5px; 
-khtml- 
-o-
-webkit- 
-ms-

Hapus juga kode dengan awalan

DXImageTransform

Tahap Ketiga

Perhatikan beberapa perintah Validator seperti ini

Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space.

itu artinya apabila ada huruf yang mempunyai spaci tambahkann tanda kutip (' ').
Sebagai contoh

font-family: 'Oswald', Tahoma, Arial, sans-serif 

Sebagai Backup apabila font pertama tidak tereksekusi yaitu Oswald yang di ganti menjadi Tahoma..

Tahap Terakhir

Setelah semua di praktekan ke Blog Anda jangan lupa untuk mengecek apakah Blog Anda sudah Valid CSS3 atau belum di http://jigsaw.w3.org/css-validator/ untuk beberapa kasus sebenarnya masih banyak perintah lain, silahkan Anda tanyakan apabila belum paham 100%, untuk para master Blogspot yang udah 100% paham silahkan kasih masukan jika dalam postingan saya masih ada yang kurang atau salah eja...
Terima kasih...

Fianetcakep Responsive Blogger Template

• Demo
• Download

Featured

1. Responsive
2. Super SEO
3. Valid HTML5
4. Valid CSS3
5. Breadcrumb SEO
6. Auto Readmore
7. Related Post
8. Modifikasi Error 404
9. Dll.

Configuration

• Template ini sudah dimodifikasi agar lebih bersahabat dengan google maka jika ingin menambahkan widget silahkan cari code <h2 class='title'><data:title/></h2> dan ganti h2 menjadi h3.
• Pada PopularPost silahkan hilangkan tanda centang pada bagian thumbnail gambar dan cuplikan.
• SUBSCRIBE bagian sidebar silahkan masukkan code berikut :

<div id='subscribe-box'>
       <div class='title'>
        Subscribe Here
       </div>
          <p>Sign up here with your email address to receive updates from this blog in your inbox.</p>
      <div class='emailfield'>
       <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Tutorialnes&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
        <input type='text' name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}' onfocus='if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}' value='Your Name'/>
        <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input name='uri' type='hidden' value='Tutorialnes'/>
<input name='loc' type='hidden' value='en_US'/>
         <input class='submitbutton' type='submit' value='Subscribe Now!'/>
       </form>
      </div>
</div>

Note : Ganti Tutorialnes dengan FeedsBurner Anda

• Logo Blog Pada bagian header silahkan cari https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYXLZRkZGfVDasB7t8P7RV-mfReL1ycM5rQJYcqQzITK7PB4qBP9KfqVp1f9G0QdXvdidqey0VxycvUQSuf9aOWNTHGOMBK_RZxUds-cMo7tLTSlgE7ytV3M5gcB96vvrx1cxDAFcvKGs/s1600/nesi.png silahkan cari semua dan ganti dengan logo Blog Anda.
• About pada bagian footer silahkan masukkan code berikut :

<div class='autor-fianmt'>
<img alt='Fian MT' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRNt1ZjhondmHGPTtojLY3W3XI8Uk84pR2jvVtp5fRVrPYcMC-6ipxT5JP4Vd37CRJNRdfu_D9jFiH6YWR7v8MXboJOVs-tYR-hxANEz9LyGnQblfNmonDXzVN-6rWuhTJTsCuKCBhOko/s1600/favicon.png' title="Fian MT" class='image-fianmt' />
<a class='fianfb' href='https://www.facebook.com/pages/fianetmucom/481170121923434?ref=hl' title="Facebook" rel='nofollow' target="_blank">f</a>
<a class='fiangplus' href='https://plus.google.com/+FianMT' title="Gplus" rel='nofollow' target="_blank">G</a>
<a class='fiantwee' href='https://twitter.com/fianetmu' title="Twitter" rel='nofollow' target="_blank">t</a> 
<div class='fiandescript'>
Blog Fianetmu.com berisi Tentang Tutorial Blogging, Template, Tips-Trik, serta Artikel Sosial Pilihan Lainnya. Anda Dapat Melihat Profil Kami Lewat Facebook, Twitter, Dan G+.
</div>

Anda seorang Blogger? Dewasa atau Anak Anak?
Hargai author template dengan tidak menghapus Link Kredit !!!
Thank's to Fian MT

Cara Membuat Efek Loading Dengan Animasi Keyframes

Sebenarnya sudah banyak para Blogger yang menggunakan Animasi Loading Blog akan tetapi banyak yang berbeda. Rata-rata para Blogger menerapkannya dengan JavaScript, Dan saya akan membuatnya berbeda yaitu menggunakan CSS murni tanpa JavaScript sedikitpun. Langsung saja gak usah panjang lebar..

Animation Bounce and Rotate

1. Login ke BLogger.com
2. Edit HTML
3. Cari kode ]]></b:skin> lalu letakan kode di bawah ini tepat di atasnya

@keyframes BounceRate{
0%{transform:translate(0px,0px) scale(0.50);opacity:1}
20%{transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{transform:translate(0px,-200px) scale(0.50);opacity:1;transform:rotate(-360deg);}
100%{transform:translate(0px,0px) scale(1);opacity:1;}
}

4. Sisipkan kode animation:BounceRate 3s; ke bagian yang ingin anda beri efek, misalkan pada #post-wrapper

#post-wrapper { animation : BounceRate 3s; }

5. Save Template

Animation Earthquake Effect

1. Login ke BLogger.com
2. Edit HTML
3. Cari kode ]]></b:skin> lalu letakan kode di bawah ini tepat di atasnya

@keyframes Earthquake{
0%{opacity:1;transform:rotate(0deg);}
5%{opacity:1;transform:rotate(5deg);}
10%{opacity:1;transform:rotate(-5deg);}
15%{opacity:1;transform:rotate(5deg);}
20%{opacity:1;transform:rotate(-5deg);}
25%{opacity:1;transform:rotate(5deg);}
30%{opacity:1;transform:rotate(-5deg);}
35%{opacity:1;transform:rotate(-5deg);}
40%{opacity:1;transform:rotate(5deg);}
45%{opacity:1;transform:rotate(-5deg);}
50%{opacity:1;transform:rotate(5deg);}
55%{opacity:1;transform:rotate(-5deg);}
60%{opacity:1;transform:rotate(5deg);}
65%{opacity:1;transform:rotate(-5deg);}
70%{opacity:1;transform:rotate(5deg);}
80%{opacity:1;transform:rotate(-5deg);}
85%{opacity:1;transform:rotate(5deg);}
90%{opacity:1;transform:rotate(-5deg);}
95%{opacity:1;transform:rotate(5deg);}
35%{opacity:1;transform:rotate(0deg);}
}

4. Sisipkan kode animation:Earthquake 3s; ke bagian yang ingin anda beri efek, misalkan pada #post-wrapper

#post-wrapper { animation : Earthquake 3s; }

5. Save Template

Animation Sliding Effect

1. Login ke BLogger.com
2. Edit HTML
3. Cari kode ]]></b:skin> lalu letakan kode di bawah ini tepat di atasnya

@keyframes Sliding{
from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}
}

4. Sisipkan kode animation:Sliding 2s; ke bagian yang ingin anda beri efek, misalkan pada #post-wrapper

#post-wrapper { animation : Sliding 2s; }

5. Save Template

Sekian dari saya, semoga artikel ini bermanfaat buat Anda dan dapat menarik pengunjung blog anda..

Avira 2014 14.0.3.350

Avira 2014 14.0.3.350
Avira AntiVir Personal adalah solusi handal antivirus gratis yang terus-menerus dan cepat memindai komputer Anda dari program jahat seperti virus, trojan, backdoor program, hoax, worms, dialer dll.

Mengawasi setiap tindakan yang dilakukan oleh pengguna atau sistem operasi dan bereaksi segera ketika sebuah program berbahaya terdeteksi.

File Size: 132.22 MB
Publisher: Avira Operations GmbH & Co. KG
OS Support: Windows 2000/XP/2003/Vista/7/8

Fitur Avira AntiVir Personal Free Antivirus

• Mendeteksi dan menghapus lebih dari 200.000 virus
• Virus Guard berfungsi untuk memantau pergerakan file secara otomatis, misalnya download data dari internet
• Scanning dan perbaikan virus makro
• AntiVir perlindungan terhadap virus, worm dan Trojan
• AntiRootkit perlindungan terhadap rootkit tersembunyi
• AntiPhishing perlindungan terhadap phishing
• AntiSpyware perlindungan terhadap spyware dan adware
• NetbookSupport untuk laptop dengan resolusi rendah
• Mudah dioperasikan
• Internet-Update Wizard untuk mudah memperbarui
• Perlindungan terhadap virus boot record sebelumnya tidak dikenal dan virus master boot record.

Membuat Thumbnail Post Berwarna

Disini saya hanya akan memberikan sedikit tutorial tentang membuat thumbnail post berwarna seperti Blog Kang Ismet, tapi saya menggunakan Javascript.. Sebenarnya sudah banyak template yang menggunakan fitur seperti yang akan saya bagikan tapi apa salahnya untuk mencoba, sekalian buat ngisi postingan.

Tutorial singkatnya

Kita membuat CSS pembungkus pada gambar yang kita gunakan yaitu .thumbnail-post img yang di bungkus dengan .thumbnail-post

tion:all 0.15s 0s ease-in-out;
    float:left;
    margin:0;
    padding:0;
    width:230px;
    height:160px;
    display:block;
    overflow:hidden;
    border-radius:4px;
}
.thumbnail-post:before {
    content: '';
    position: absolute;
    top: 75px;
    right: 0;
    border-width: 10px 10px 10px 0;
    border-style: solid solid solid none;
    border-color: transparent #fff transparent;
}
.thumbnail-post img {
    width: 125px;
    height: 125px;
    padding: 0;
    margin: 10px 50px;
    border-radius: 100px;
    border: rgba(255, 255, 255, 0.2) solid 5px;
    border-radius: 100px;
}
.thumbnail-post img:hover {
    border: rgba(255, 255, 255, 0.6) solid 5px;
}

Sederhana tapi sulit jika tidak di pelajari, iya? hehehe

Untuk membuat background pada thumbnail berwarna warna kita tambahkan sedikit sentuhan dengan Javascript.

<script type='text/javascript'>
//<[![CDATA[
function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.round(Math.random() * 14)];
    }
    return color;
}
$(function() {
    $(".thumbnail-post").each(function() {
        $(this).css("background", get_random_color());
    });
});
//]]>
</script>

Pada script di atas seperti ini .thumbnail-post bisa sobat ganti dengan Class atau Id lain untuk membuat background berwarna - warni misalkan .post
Untuk mengeksekusi pada template silahkan Anda baca Auto Readmore

Mungkin hanya ini saja yang bisa saya bagikan, jika kurang jelas bisa tanyakan di kolom komentar di bawah.
Terima Kasih...

Sliding Image Panel With CSS3

Hari ini saya akan membberikan tutorial bagaimana sobat untuk membuat beberapa panel Sliding Image Panels dengan CSS3 saja. Idenya adalah menggunakan gambar latar belakang untuk panel dan mengklik pada label / nomor maka gambar akan bergerak. Saya akan menggunakan Radio Buttons dengan label dan target masing-masing panel dengan mengklik selektor tsb.

• Demo
• Download

Harap dicatat

Hasil dari tutorial ini hanya akan bekerja dalam browser yang mendukung transisi CSS dan animasi.

Langsung saja menuju ke TKP

Markup HTML

HTML ini akan terdiri dari tiga bagian utama: Radio Buttons dan Label, Container dengan panel dan "slice" untuk setiap gambar, dan judul. Container dengan class cr-bgimg bagian akan memiliki divisi untuk masing-masing panel dan di dalam kita akan menempatkan span untuk setiap gambar dengan posisi latar belakang yang tepat. Jadi, panel pertama akan memiliki empat potong, masing-masing memiliki salah satu gambar sebagai latar belakang dengan posisi paling kiri. Panel kedua akan memiliki lagi empat potong tapi posisi background sekarang akan dipindahkan untuk menunjukkan bagian selanjutnya dari masing-masing gambar:

<section class="cr-container">   

 <!-- radio buttons and labels -->
 <input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
 <label for="select-img-1" class="cr-label-img-1">1</label>

 <input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
 <label for="select-img-2" class="cr-label-img-2">2</label>

 <input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
 <label for="select-img-3" class="cr-label-img-3">3</label>

 <input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
 <label for="select-img-4" class="cr-label-img-4">4</label>

 <div class="clr"></div> 

 <!-- panels -->
 <div class="cr-bgimg">
  <div>
   <span>Slice 1 - Image 1</span>
   <span>Slice 1 - Image 2</span>
   <span>Slice 1 - Image 3</span>
   <span>Slice 1 - Image 4</span>
  </div>
  <div>
   <span>Slice 2 - Image 1</span>
   <span>Slice 2 - Image 2</span>
   <span>Slice 2 - Image 3</span>
   <span>Slice 2 - Image 4</span>
  </div>
  <div>
   <span>Slice 3 - Image 1</span>
   <span>Slice 3 - Image 2</span>
   <span>Slice 3 - Image 3</span>
   <span>Slice 3 - Image 4</span>
  </div>
  <div>
   <span>Slice 4 - Image 1</span>
   <span>Slice 4 - Image 2</span>
   <span>Slice 4 - Image 3</span>
   <span>Slice 4 - Image 4</span>
  </div>
 </div>

 <!-- titles -->
 <div class="cr-titles">
  <h3>
   <span>Serendipity</span>
   <span>What you've been dreaming of</span>
  </h3>
  <h3>
   <span>Adventure</span>
   <span>Where the fun begins</span>
  </h3>
  <h3>
   <span>Nature</span>
   <span>Unforgettable eperiences</span>
  </h3>
  <h3>
   <span>Serenity</span>
   <span>When silence touches nature</span>
  </h3>
 </div>

</section>

Elemen h3 untuk judul akan memiliki dua bentang, satu untuk judul utama dan satu untuk sub-judul.

CSS

Pertama menyembunyikan Radio Buttons dengan dengan label. Dalam web browser, klik pada label akan membuat checkbox masing-masing atau Radio Buttons yang dipilih. Memberikan ID untuk input, kita dapat menggunakan for = IDREF atribut label untuk referensi masing-masing input.

Kedua, kita menempatkan semua gambar background dengan benar dan ketiga, saya ingin menunjukkan potongan masing-masing gambar dan judul ketika mengklik pada label.

Jadi, style pertama memberikan batasan putih dengan beberapa box shadow:

.cr-container{
 width: 600px;
 height: 400px;
 position: relative;
 margin: 0 auto;
 border: 20px solid #fff;
 box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

Karena kita ingin menggunakan selektor untuk mendapatkan potongan yang tepat dan judul, kita perlu menempatkan label sebelum container. Mari kita pastikan berada di atas sebagai layer (z-index) dan mendorong posisinya turun dengan menambahkan margin atas 350px;

.cr-container label{
 font-style: italic;
 width: 150px;
 height: 30px;
 cursor: pointer;
 color: #fff;
 line-height: 32px;
 font-size: 24px;
 float:left;
 position: relative;
 margin-top: 350px;
 z-index: 1000;
}

Menambah style pada label dengan menambahkan lingkaran kecil. Kita akan memberikan background dan menempatkannya berpusat di balik teks label:

.cr-container label:before{
 content:'';
 width: 34px;
 height: 34px;
 background: rgba(130,195,217,0.9);
 position: absolute;
 left: 50%;
 margin-left: -17px;
 border-radius: 50%;
 box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
 z-index:-1;
}

Untuk membuat pemisah antara panel kita akan menggunakan sedikit trik. Kita akan membuat pseudo-elemen lain untuk label dan memperluasnya untuk meregangkan atas panel. Menggunakan gradient, kita akan membuat garis "fade out" di bagian atas:

.cr-container label:after{
 width: 1px;
 height: 400px;
 content: '';
 background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
 position: absolute;
 bottom: -20px;
 right: 0px;
}

Panel terakhir tidak harus memiliki baris jadi kita hanya memberikan 0 width:

.cr-container label.cr-label-img-4:after{
 width: 0px;
}

Sekarang, kita dapat menyembunyikan input:

.cr-container input{
 display: none;
}

Setiap kali kita klik pada label, masing-masing input akan diperiksa otomatis. Sekarang kita dapat menargetkan masing-masing label menggunakan selecktor pemilih. Jadi, kita akan mengubah warna "selckor" label:

.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
 color: #68abc2;
}

Kita juga akan merubah warna dan kotak latar belakang (background) bayangan pseudo-elemen circle nya:

.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
 background: #fff;
 box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);
}

Container untuk panel gambar akan menempati semua lebar (width) dan tepat diposisikan. Container ini akan digunakan untuk mengatur gambar background yang sedang dipilih. Kita perlu melakukan ini supaya gambar terlihat secara default. Jadi kita juga akan menambahkan beberapa properti untuk background:

.cr-bgimg{
 width: 600px;
 height: 400px;
 position: absolute;
 left: 0px;
 top: 0px;
 z-index: 1;
 background-repeat: no-repeat;
 background-position: 0 0;
}

Karena kita memiliki empat panel / gambar, satu panel akan memiliki lebar 150 piksel (600 dibagi dengan 4). Panel akan bergeser ke kiri dan kita akan menyembunyikan overflow karena kita tidak ingin melihat irisan keluar ketika kita geser:

.cr-bgimg div{
 width: 150px;
 height: 100%;
 position: relative;
 float: left;
 overflow: hidden;
 background-repeat: no-repeat;
}
.cr-bgimg div span{
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0px;
 left: -150px;
 z-index: 2;
 text-indent: -9000px;
}

Sekarang, mari kita membuat background kontainer gambar dan potongan masing-masing gambar

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
 background-image: url(../images/1.jpg);
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2){
 background-image: url(../images/2.jpg);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3){
 background-image: url(../images/3.jpg);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4){
 background-image: url(../images/4.jpg);
}

Kita juga perlu memposisikan background dengan tepat untuk setiap potongan tergantung pada panel:

.cr-bgimg div:nth-child(1) span{
 background-position: 0px 0px;
}
.cr-bgimg div:nth-child(2) span{
 background-position: -150px 0px;
}
.cr-bgimg div:nth-child(3) span{
 background-position: -300px 0px;
}
.cr-bgimg div:nth-child(4) span{
 background-position: -450px 0px;
}

Ketika kita klik pada label kita cukup geser semua potongan ke kanan:

.cr-container input:checked ~ .cr-bgimg div span{
 animation: slideOut 0.6s ease-in-out;
}
@keyframes slideOut{
 0%{
  left: 0px;
 }
 100%{
  left: 150px;
 }
}

Semua potongan kecuali background masing-masing gambar akan bergeser dari -150px ke 0px

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)
{
 transition: left 0.5s ease-in-out;
 animation: none;
 left: 0px;
 z-index: 10;
}

Terakhir kita beri span unutk elemen h3. H3 akan memiliki transisi opacity setelah kita mengklik masing-masing label / input. Opacity akan meningkat dari 0 ke 1:

.cr-titles h3{
 position: absolute;
 width: 100%;
 text-align: center;
 top: 50%;
 z-index: 10000;
 opacity: 0;
 color: #fff;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
 transition: opacity 0.8s ease-in-out;
}
.cr-titles h3 span:nth-child(1){
 font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
 font-size: 70px;
 display: block;
 letter-spacing: 7px;
}
.cr-titles h3 span:nth-child(2){
 letter-spacing: 0px;
 display: block;
 background: rgba(104,171,194,0.9);
 font-size: 14px;
 padding: 10px;
 font-style: italic;
 font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4){
 opacity: 1;
}

Jika sobat tidak ingin menampilkan label pada perangkat mobile sobat bisa menggunakan Media query, Misalnya,:

@media screen and (max-width: 768px) {
 .cr-container input{
  display: inline;
  width: 24%;
  margin-top: 350px;
  z-index: 1000;
  position: relative;
 }
 .cr-container label{
  display: none;
 }
}

Ini hanya solusi dan mungkin lebih baik untuk melihat demo, apakah label didukung.

Mungkin hanya itu saja yang bisa saya bagikan malam ini setelah bermimpi =D! Ada banyak kemungkinan animasi yang bisa dilakukan di sini. Check out demo untuk melihat lebih banyak.

• Demo
• Download

Sekian tutorial mengenai Sliding Image Panels with CSS3 ini. Saya harap sobat menyukai tutorial ini dan menemukan inspirasi!

Menampilkan Pesan Jika Kode Tertentu dihapus dari HTML

Beberapa hari yang lalu saya mendapat pertanyaan dari teman, Gimana membuat credits link supaya tidak bisa di hapus atau jika di hapus akan menampilkan pesan..

Begini pertanyaannya ..
Ane mau tanya gimana cara Menampilkan Pesan Jika Kode Tertentu dihapus dari HTML gan?
Gini nih gan, ane kan buat template blogger untuk di share secara gratis tapi kebanyakan blogger selalu menghapus link kredit yang ane masukkan dalam template. Nah ane mau tanya, gimana cara menampilkan pesan pada blog jika ada kode / link credit yang dihapus?

Saya jawab dengan pengetahuan saya :
Kayaknya pake jQuery yg ngecek id komponen misal <div id="credits">
Jika div id tersebut di hapus atau yg di dalam div tersebut isinya beda maka akan keluar pesan.

Penggunaannya begini, copy paste semua kode di bawah ini dan taruh di atas </body>

<!DOCTYPE html>
<html>
    <head>
        <title>My Blog</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
        $(function(){
        var elementName='#credit';
        var originalCredit='Template By Dian Anarchyta';
        var warningMessage='Please do not remove or modify original credit of this theme.';
        var warningHtml='<div style="position:fixed;top:0;left:0;z-index:99999;background:rgba(0,0,0,0.6);color:white;height:80%;padding-top:20%;width:100%;text-align:center;line-height:100%;font-size:30px;">'+warningMessage+'</div>';
        if($(elementName).length==0 || $("#credit").html()!=originalCredit)
            $('body').append(warningHtml);
        });
</script>
    </head>
    <body>
        <div id="credit">Template By Dian Anarchyta</div>
    </body>
</html>

Sekian dulu artikel mengenai Menampilkan Pesan Jika Kode Tertentu dihapus dari HTML.
Untuk selanjutnya silahkan Anda pelajari untuk membuat redirect Link yg mengarah ke blog sobat.