Menu


Menu Tab

Pages

SEO Basics for Bloggers


Pengertian SEO. Apa itu SEO
Ini singkatan dari Search Engine Optimization dan Anda mungkin pernah mendengar istilah SEO. Mengapa penting?  
Saya akan memberitahu Anda
SEO adalah penting karena, 
dalam istilah sederhana, ini adalah bagaimana orang menemukan situs Anda di mesin pencari. lalu lintas mesin dapat berkontribusi untuk sejumlah besar pengunjung Anda, dan jika dilakukan dengan benar, dapat meningkatkan kehadiran online Anda. Tanpa terlalu teknis, berikut adalah beberapa tips untuk membuat website atau Webblogg mesin pencari  
1. Judul Tulisan  
Setiap kali Anda berpikir tentang apa yang Anda cari di Google jika Anda sedang mencari sebuah artikel tentang topik. Pikirkan tentang bagaimana orang lain mungkin frase istilah pencarian yang sama dan mencoba untuk membuat judul dari itu. Anda tidak perlu melakukan ini untuk setiap posting, hanya yang paling penting bahwa Anda benar-benar ingin orang-orang dapat menemukan melalui pencarian. anda harus dapat memberikan judul posting yang mudah diingat dan sesuai dengan isi postingan
Judul posting Anda memainkan peran yang sangat penting dalam SEO. Tidak hanya muncul di halaman posting yang sebenarnya, tetapi juga dalam judul bar browser. Untuk memaksimalkan dampak judul Anda, yang terbaik judul posting Anda menjadi elemen pertama dari judul yang muncul di address bar browser. Jika Anda perhatikan, Blogger melakukan hal ini sedikit mundur, menempatkan judul blog Anda sebelum judul posting Anda. Misalnya, "Nama blog Anda: Judul posting Anda". Untuk SEO lebih baik, itu harus diformat seperti ini sebagai gantinya: "Judul posting Anda: Nama blog Anda". Untuk mengubah ini di Blogger, Anda harus mengedit HTML. Membuka halaman HTML editor dan menemukan: 
<title> <data: blog.pageTitle /> </ title> 
 dapat anda ganti dengan :
<b: if 'Data: blog.pageType == & quot; item yang & quot;' = cond><title> <data: blog.pageName /> | <data: blog.pageTitle /> </ title><b: else /> <title> <data: blog.pageName /> <data: blog.pageTitle /> </ title></ b: if>
Sekarang judul posting Anda akan muncul sebelum judul blog, 
2. Konten Matters  
Artikel Anda yang sebenarnya Posting harus memiliki beberapa substansi.
Jika Anda dapat memasukkan istilah pencarian populer / frase dalam posting,
3. Berhenti Stuffing dalam KeywordsBanyak orang memiliki ide ini bahwa mesin pencari ketat membaca meta data dan bahwa Anda harus mengisi meta tag Anda dengan sekelompok kata kunci dan deskripsi untuk mendapatkan hasil terbaik.  
Hal ini tidak benar sama sekali. Bahkan, Google tidak menggunakan keyword meta tag lagi untuk menjelajah situs Anda. Isian situs penuh kata kunci acak benar-benar dapat memiliki efek negatif pada peringkat.  "label" atau "tag" yang Anda tempatkan pada posting Anda tidak ada untuk tujuan kata kunci SEO,
4. Gunakan Teks Daripada ImagesMenggunakan teks yang sebenarnya bukan gambar. Jelas Anda tidak dapat memiliki gambaran yang terbuat dari teks, Search engine tidak bisa membaca gambar untuk konten, yang dibutuhkan adalah konten teks Anda! Bahkan lebih baik Membungkus dalam tag heading <h1> Heading Anda </ h1>. Google mencari pos tag ketika merangkak ke situs Anda, sehingga membungkus pos Anda dalam sedikit kode HTML 
6. Gambar pencarian  Bertentangan dengan apa yang saya katakan di atas, Google dapat menemukan gambar Anda, tetapi dengan cara yang berbeda. dalam hasil teks, akan muncul dalam hasil pencarian gambar. Untuk membuat sebagian besar ini, judul gambar dengan benar. Upload foto sebagai IMG_920.jpg, gambar itu untuk mencocokkan topik posting Anda, misalnya, "seo-dasar-untuk-bloggers.jpg"
7. link Past PostsTrik lain adalah dengan link kembali ke beberapa posting masa lalu, dalam posting baru. Penggunaan peta gambar di website atau blog Anda. tidak pnting karena tidak bekerja dengan baik di beberapa browser, dan menghambat navigasi karena link yang sebenarnya tidak melekat pada satu gambar.Sebaliknya, Anda harus memeriksa tutorial di YouTube tentang cara membuat header dengan link gambar.
Edited by. Myscript2010
Sources by. Thewonderforest 

Teks Animasi

Memasang kode Teks animasi
Kode ini menampilkan Teks animasi yang dapat menghiasi blogg. Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini : 
 Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script><script src='http://dimajt.github.io/textition/js/textition.js'></script> <script>
var init = function () {
    $('body').css('opacity', 1);
    $('header').textition({
        map: {
            x: 50,
            y: 20,
            z: 500
        },
        speed: 0.8,
        handler: false,
        autoplay: true,
        interval: 3
    });
    $('nav a:eq(0)').textition({
        map: {
            x: 100,
            y: 0,
            z: 0
        },
        speed: 0.5,
        handler: 'mouseenter mouseleave'
    });
    $('nav a:eq(1)').textition({
        map: {
            x: 0,
            y: 0,
            z: 100
        },
        speed: 0.5,
        perspective: 50,
        handler: 'mouseenter mouseleave'
    });
    $('nav a:eq(2)').textition({
        map: {
            x: 0,
            y: 40,
            z: 0
        },
        speed: 0.5,
        animation: 'ease-out',
        handler: 'mouseenter mouseleave'
    });
};
$(document).ready(init);
//# sourceURL=pen.js
</script>
<header>
<h1> Let's Share </h1>
<h2> Through </h2>
<h2> Social Networking </h2>
</header>
Penjelasan :
Ganti teks yang berwarna orange, tambahkan kode warna teks diatas kode <header>
klik publish selesai <font size="3" color="blue"face="arial">
Sources by. Codepen
Edited by. Myscript2010

Template Kosong

Memasang Template Kosong
Login ke akun blog klik tombol blog baru buat satubuah link baru 
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, 
hapus semua kode template, copy kode dibawah ini, 
edit background warna sesuai keingian kemudian klik simpan selesai
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
================================================
Blogger Template Style
Name       : Blank Template
Tgl Edit   : 17/01/16
Sumber     : Blogger
================================================
img{max-width:100%;vertical-align:middle;border:0;height:auto;}
.quickedit{display:none;}
.clear{clear:both;}
body{background:#dad;margin:0;padding:0;font-family: calibri;color:#fff;}
.quickedit{
display:none;
}
.feed-links{ display:none; }
.status-msg-body {display:none;
}
.status-msg-wrap {display:none;
}
#Attribution1 {
height:0px;
visibility:hidden;
display:none
]]></b:skin>
</head>
<body>
<b:section class='main' id='main2' showaddelement='yes'>
<b:widget id='Blog2' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<center><a href="http://Blank Template ">Myscript2010 </a></center>
</body>
</html>
Sumber by. Blogger
Edited by. Myscript2010

CSS3 Hover Effect Shine

Memasang Gambar dengan effect hover Shine
Menampilkan gambar sekaligus menjadi tombol Link Title  ketika cursor menyentuh gambar tersebut,
berikut cara penerapannya : Login ke akun blog klik entri halaman baru HTML copy kode dibawah ini pastekan kedalam halaman baru HTML dan klik simpan selesai
<style>
.photos {
    width: 945px;
    height: 400px;
    margin: 100px auto;
    position:relative;
}.photos > div {
    background-color: rgba(128, 128, 128, 0.5);
    border: 2px solid #444;
    float: left;
    height: 300px;
    margin: 5px;
    overflow: hidden;
    position: relative;
    width: 300px;
    z-index: 1;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    -webkit-transform:scale(1.0);
    -moz-transform:scale(1.0);
    -ms-transform:scale(1.0);
    -o-transform:scale(1.0);
    transform:scale(1.0);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}.photos > div img{
  width: 100%;
}.photos > div:hover{
    z-index: 10;
    -webkit-transform:scale(2.0);
    -moz-transform:scale(2.0);
    -ms-transform:scale(2.0);
    -o-transform:scale(2.0);
    transform:scale(2.0);
}.photos > div div {
  background: url(http://Link Gambar Background.jpg) repeat scroll 0 0 transparent;
    cursor: pointer;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 15;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}.photos > div:nth-child(1):hover div {
    height: 0%;
}.photos > div:nth-child(2):hover div {
    height: 0%;
    margin-top: 100px;
}
.photos > div:nth-child(3):hover div {
   width: 0%;
}.photos > div:nth-child(4):hover div {
    margin-left: 300px;
    width: 0%;
}.photos > div:nth-child(5):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
}.photos > div:nth-child(6):hover div {
    margin-left: 150px;
    width: 0%;
}.photos > div:nth-child(7):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
}.photos > div:nth-child(8):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
    -webkit-transform: rotateZ(600deg);
    -moz-transform: rotateZ(600deg);
    -ms-transform: rotateZ(600deg);
    -o-transform: rotateZ(600deg);
    transform: rotateZ(600deg);
}.photos > div.pair div {
    width: 50%;
}.photos > div.pair div:nth-child(odd) {
    margin-left: 150px;
}.photos > div.pair:hover div {
    width: 0%;
}.photos > div.pair:hover div:nth-child(odd) {
    margin-left: 300px;
}</style>

 <div class="photos">
<div>
<a href="http://Your Link" target="_blank" title="Myscript2010">
<img src="http://Link Gambar.jpg" /></a>
</a>
<div>
</div>
</div>
<div>
<a href="http://Your Link" target="_blank" title="Myscript2010">
<img src="http://Link Gambar.jpg" /></a>
</a>
<div>
</div>
</div>
<div>
<a href="http://Your Link" target="_blank" title="Myscript2010">
<img src="http://Link Gambar.jpg" /></a>
<div>
</div>
</div>
<div>
<a href="http://Your Link" target="_blank" title="Myscript2010">
<img src="http://Link Gambar.jpg" /></a>
<div>
</div>
</div>
<div>
<a href="http://Your Link" target="_blank" title="Myscript2010">
<img src="http://Link Gambar.jpg" /></a>
<div>
</div>
</div>
<div>
<a href="http://Your Link" target="_blank" title="Myscript2010">
<img src="http://Link Gambar.jpg" /></a>
<div>
</div>
</div>
<div>
<a href="http://Your Link" target="_blank" title="Myscript2010">
<img src="http://Link Gambar.jpg" /></a>
<div>
</div>
</div>
<div>
<a href="http://Your Link" target="_blank" title="Myscript2010">
<img src="http://Link Gambar.jpg" /></a>
<div>
</div>
</div>
<div class="pair">
<a href="http://Your Link" target="_blank" title="Myscript2010">
<img src="http://Link Gambar.jpg" /></a>
<div>
</div>
<div>
</div>
</div>
</div>
Penjelasan :
Ganti Kode yang diberi warna sesuai keinginan,
Edited by. Myscript2010
Sources by. Script Tutorials

CSS3 Image Hover

Memasang Gambar dengan effect hover
Menampilkan gambar yang menutupi Link Title dan terlihat kembali ketika cursor menyentuh gambar tersebut,
berikut cara penerapannya : Login ke akun blog klik entri halaman baru HTML copy kode dibawah ini pastekan kedalam halaman baru HTML dan klik simpan selesai
<style>
.Mys2010 {
    position:relative;
    width:250px;
   height:230px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:rgba(128,128,128,128)
}
.Mys2010 p,.Mys2010 h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:20px;
    position:relative
}
.Mys2010 p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0
}
.Mys2010 h2 {
    font-family:'Lato';
    font-size:20px;
    line-height:24px;
    margin:0;
}
.effect img {
    position:absolute;
    margin:-15px 0;
    right:0;
    top:0;
    cursor:pointer;
    -webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
    -moz-transition:top .4s ease-in-out,right .4s ease-in-out;
    -o-transition:top .4s ease-in-out,right .4s ease-in-out;
    transition:top .4s ease-in-out,right .4s ease-in-out
}
.effect img.top:hover {
    top:-300px;
    right:-300px;
    padding-bottom:200px;
    padding-left:300px
}
</style>
<ul class="Mys2010 effect">
            <p><h2>Your Text</h2></p>
            <p>Your Text</p>

<a href="http://Your Link"title="Your Text"><p>Your Text</a></p>
     <img class="top" src="http://
Link Gambar" alt="Mys2010"/>
</ul>
Penjelasan :
Ganti Text dan link yang diwarnai
All Sources
Edited by. Myscript2010

Memasang Tabel Gambar

Memasang Tabel Gambar
Menampilkan gambar wallpaper maupun animasi pada postingan menggunakan tabel gambar horizontal
dengan cara sebagai berikut :
Login ke akun blog klik entri halaman baru HTML
copy kode dibawah ini
pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style type="text/css">
@import "compass/css3";
body {
    background: #FFF;
    padding-left:0px;}
h1 {
  text-align: center;
  font: bold 80px Sans-Serif;
  padding: 0px 0;
}
.otto {
  background: #dad ;
  color: yellow;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);}
</style>
<h1 class="otto">
DEMO SHOW
</h1>
<font size="5" color=" green "face="Time newroman">MEMASANG TABEL GAMBAR HORIZONTAL PADA POSTINGAN</font>
<table  border="0">
<tr><td>
<img src="http://Link Gambar.jpg" name="e902" border="0" width="230" height="230
onclick="window.open('http://Link Gambar.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
Your Text</center>
</a>
</td><td>
<img src="http://Link Gambar.jpg" name="e902" border="0" width="230" height="230
onclick="window.open('http://Link Gambar.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
Your Text</center>
</a>
</td><td>
<img src="http://Link Gambar.jpg" name="e902" border="0" width="230" height="230
onclick="window.open('http://Link Gambar.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
Your Text</center>
</a>
</td><td>
<img src="http://Link Gambar.jpg" name="e902" border="0" width="230" height="230
onclick="window.open('http://Link Gambar.jpg','popup','width=1500,height=1500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">

<font size="3" color="gray"face="arial"><center>
Your Text</center>
</a>
</td></tr>
</table>
Penjelasan :
Tabel tersebut menggunakan link PopUp, edit kode yang diberi warna, jika ingin menggunakan
link target letakan ditengah kode <center>Link Target</center>
Contoh :
<center><a href="http://Your Link" target="_blank">Your Text</a></center>
All Sources
Edited by. Myscript2010

Multiple Hover Effect

Multiple Hover Effect
Memasang Multiple Hover Effect dan menyisipkan link
pada effect sub hover kode ini menampilkan effek Hover yang berbeda bila disentuh dengan cursor, serta dapat disipkan link untuk menuju kesatu postingan, dibawah ini adalah kode tersebut dan cara penerapannya :
Login ke akun blog klik tombol blog baru buat satubuah
link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus smua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Bila sudah selesai klik entri halaman baru HTML pada link tersebut 
copy kode berikut : pastekan ke area entri halaman baru  dan klik simpan selesai
<style type="text/css">
@import "compass/css3";
body {
    background: #292929;
    padding-left: 30px;
}
.row {
    float: left;
    width: 100%;
}
.row .block {
    float: left;
    width: 25%;
    height: 150px;
}
.hovicon {
    display: inline-block;
    font-size: 45px;
    line-height: 90px;
    cursor: pointer;
    margin: 20px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    text-decoration: none;
    z-index: 1;
    color: #fff;
}
.hovicon.small {
    font-size: 20px;
    line-height:45px;
    width:45px;
    height:45px;
    margin:7px;
}
.hovicon.mini {
    font-size: 15px;
    line-height:32px;
    width:30px;
    height:30px;
    margin:7px;
}
.hovicon.auto-width {
    width: auto;
    height: auto;
    padding: 15px;
}
.hovicon:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content:'';
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.hovicon:before {
    speak: none;
    font-size: 48px;
    line-height: 90px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    display: block;
    -webkit-font-smoothing: antialiased;
}
/* Effect 1 */
 .hovicon.effect-1 {
    background: rgba(255, 255, 255, 0.1);
    -webkit-transition: background 0.2s, color 0.2s;
    -moz-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
}
.hovicon.effect-1:after {
    top: -7px;
    left: -7px;
    padding: 7px;
    box-shadow: 0 0 0 4px #fff;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -webkit-transform: scale(.8);
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    transition: transform 0.2s, opacity 0.2s;
    transform: scale(.8);
    opacity: 0;
}
/* Effect 1a */
 .hovicon.effect-1.sub-a:hover {
    background: rgba(255, 255, 255, 1);
    color: #41ab6b;
}
.hovicon.effect-1.sub-a:hover i {
    color: #41ab6b;
}
.hovicon.effect-1.sub-a:hover:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
/* Effect 1b */
 .hovicon.effect-1.sub-b:hover {
    background: rgba(255, 255, 255, 1);
    color: #41ab6b;
}
.hovicon.effect-1.sub-b:hover i {
    color: #41ab6b;
}
.hovicon.effect-1.sub-b:after {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
.hovicon.effect-1.sub-b:hover:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
/* Effect 2 */
 .hovicon.effect-2 {
    color: #eea303;
    box-shadow: 0 0 0 3px #fff;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
}
.hovicon.effect-2:after {
    top: -2px;
    left: -2px;
    padding: 2px;
    z-index: -1;
    background: #fff;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
}
/* Effect 2a */
 .hovicon.effect-2.sub-a:hover, .hovicon.effect-2.sub-a:hover i {
    color: #eea303;
}
.hovicon.effect-2.sub-a:hover:after {
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    -ms-transform: scale(0.85);
    transform: scale(0.85);
}
/* Effect 2b */
 .hovicon.effect-2.sub-b:hover:after {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    -webkit-transition: -webkit-transform 0.4s, opacity 0.2s;
    -moz-transition: -moz-transform 0.4s, opacity 0.2s;
    transition: transform 0.4s, opacity 0.2s;
}
.hovicon.effect-2.sub-b:hover, .hovicon.effect-2.sub-b:hover i {
    color: #fff;
}
/* Effect 3 */
 .hovicon.effect-3 {
    box-shadow: 0 0 0 4px #fff;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
}
.hovicon.effect-3:after {
    top: -2px;
    left: -2px;
    padding: 2px;
    z-index: -1;
    background: #fff;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
    -moz-transition: -moz-transform 0.2s, opacity 0.3s;
    transition: transform 0.2s, opacity 0.3s;
}
/* Effect 3a */
 .hovicon.effect-3.sub-a, .hovicon.effect-3.sub-a i {
    color: #f06060;
}
.hovicon.effect-3.sub-a:hover, .hovicon.effect-3.sub-a:hover i {
    color: #fff;
}
.hovicon.effect-3.sub-a:hover:after {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0;
}
/* Effect 3b */
 .hovicon.effect-3.sub-b, .hovicon.effect-3.sub-b i {
    color: #fff;
}
.hovicon.effect-3.sub-b:hover, .hovicon.effect-3.sub-b:hover i {
    color: #f06060;
}
.hovicon.effect-3.sub-b:after {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0;
}
.hovicon.effect-3.sub-b:hover:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
/* Effect 4 */
 .hovicon.effect-4 {
    width: 92px;
    height: 92px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 1);
}
.hovicon.effect-4.small {
    width:45px;
    height:45px;
}
.hovicon.effect-4.mini {
    width:30px;
    height:30px;
}
.hovicon.effect-4.sub-a {
    -webkit-transition: box-shadow 0.2s;
    -moz-transition: box-shadow 0.2s;
    transition: box-shadow 0.2s;
}
.hovicon.effect-4:before {
    line-height: 92px;
}
.hovicon.effect-4:after {
    top: -4px;
    left: -4px;
    padding: 0;
    z-index: 10;
    border: 4px dashed #fff;
}
.hovicon.effect-4:hover {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    color: #fff;
}
.hovicon.effect-4:hover i {
    color: #fff;
}
/* Effect 4b */
 .hovicon.effect-4.sub-b:hover {
    -webkit-transition: box-shadow 0.2s;
    -moz-transition: box-shadow 0.2s;
    transition: box-shadow 0.2s;
}
.hovicon.effect-4.sub-b:hover:after {
    -webkit-animation: spinAround 9s linear infinite;
    -moz-animation: spinAround 9s linear infinite;
    animation: spinAround 9s linear infinite;
}
@-webkit-keyframes spinAround {
    from {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes spinAround {
    from {
        -moz-transform: rotate(0deg)
    }
    to {
        -moz-transform: rotate(360deg);
    }
}
@keyframes spinAround {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg);
    }
}
/* Effect 5 */
 .hovicon.effect-5 {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 1);
    overflow: hidden;
    -webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    -moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.hovicon.effect-5:after {
    display: none;
}
.hovicon.effect-5:hover {
    background: rgba(255, 255, 255, 1);
    color: #702fa8;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.3);
}
.hovicon.effect-5:hover i {
    color: #702fa8;
}
.hovicon.effect-5.sub-a:hover:before {
    -webkit-animation: toRightFromLeft 0.3s forwards;
    -moz-animation: toRightFromLeft 0.3s forwards;
    animation: toRightFromLeft 0.3s forwards;
}
@-webkit-keyframes toRightFromLeft {
    49% {
        -webkit-transform: translate(100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}
@-moz-keyframes toRightFromLeft {
    49% {
        -moz-transform: translate(100%);
    }
    50% {
        opacity: 0;
        -moz-transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes toRightFromLeft {
    49% {
        transform: translate(100%);
    }
    50% {
        opacity: 0;
        transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}
.hovicon.effect-5.sub-b:hover:before {
    -webkit-animation: toLeftFromRight 0.3s forwards;
    -moz-animation: toLeftFromRight 0.3s forwards;
    animation: toLeftFromRight 0.3s forwards;
}
@-webkit-keyframes toLeftFromRight {
    49% {
        -webkit-transform: translate(-100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(100%);
    }
    51% {
        opacity: 1;
    }
}
@-moz-keyframes toLeftFromRight {
    49% {
        -moz-transform: translate(-100%);
    }
    50% {
        opacity: 0;
        -moz-transform: translate(100%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes toLeftFromRight {
    49% {
        transform: translate(-100%);
    }
    50% {
        opacity: 0;
        transform: translate(100%);
    }
    51% {
        opacity: 1;
    }
}
.hovicon.effect-5.sub-c:hover:before {
    -webkit-animation: toTopFromBottom 0.3s forwards;
    -moz-animation: toTopFromBottom 0.3s forwards;
    animation: toTopFromBottom 0.3s forwards;
}
@-webkit-keyframes toTopFromBottom {
    49% {
        -webkit-transform: translateY(-100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(100%);
    }
    51% {
        opacity: 1;
    }
}
@-moz-keyframes toTopFromBottom {
    49% {
        -moz-transform: translateY(-100%);
    }
    50% {
        opacity: 0;
        -moz-transform: translateY(100%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes toTopFromBottom {
    49% {
        transform: translateY(-100%);
    }
    50% {
        opacity: 0;
        transform: translateY(100%);
    }
    51% {
        opacity: 1;
    }
}
.hovicon.effect-5.sub-d:hover:before {
    -webkit-animation: toBottomFromTop 0.3s forwards;
    -moz-animation: toBottomFromTop 0.3s forwards;
    animation: toBottomFromTop 0.3s forwards;
}
@-webkit-keyframes toBottomFromTop {
    49% {
        -webkit-transform: translateY(100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
    }
    51% {
        opacity: 1;
    }
}
@-moz-keyframes toBottomFromTop {
    49% {
        -moz-transform: translateY(100%);
    }
    50% {
        opacity: 0;
        -moz-transform: translateY(-100%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes toBottomFromTop {
    49% {
        transform: translateY(100%);
    }
    50% {
        opacity: 0;
        transform: translateY(-100%);
    }
    51% {
        opacity: 1;
    }
}
/* Effect 6 */
 .hovicon.effect-6 {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 1);
    -webkit-transition: background 0.2s, color 0.2s;
    -moz-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
}
.hovicon.effect-6:hover {
    background: rgba(255, 255, 255, 1);
    color: #64bb5d;
}
.hovicon.effect-6:hover i {
    color: #64bb5d;
}
.hovicon.effect-6:hover:before {
    -webkit-animation: spinAround 2s linear infinite;
    -moz-animation: spinAround 2s linear infinite;
    animation: spinAround 2s linear infinite;
}
/* Effect 7 */
 .hovicon.effect-7 {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 1);
    -webkit-transition: background 0.2s, color 0.2s;
    -moz-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
}
.hovicon.effect-7:hover, .hovicon.effect-7:hover i {
    color: #fff;
}
.hovicon.effect-7:after {
    top: -8px;
    left: -8px;
    padding: 8px;
    z-index: -1;
    opacity: 0;
}
/* Effect 7a */
 .hovicon.effect-7.sub-a:after {
    box-shadow: 0 0 0 rgba(255, 255, 255, 1);
    -webkit-transition: opacity 0.2s, box-shadow 0.2s;
    -moz-transition: opacity 0.2s, box-shadow 0.2s;
    transition: opacity 0.2s, box-shadow 0.2s;
}
.hovicon.effect-7.sub-a:hover:after {
    opacity: 1;
    box-shadow: 3px 3px 0 rgba(255, 255, 255, 1);
}
.hovicon.effect-7.sub-a:before {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.7;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
}
.hovicon.effect-7.sub-a:hover:before {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
/* Effect 7b */
 .hovicon.effect-7.sub-b:after {
    box-shadow: 3px 3px rgba(255, 255, 255, 1);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    -moz-transition: opacity 0.2s, -moz-transform 0.2s;
    transition: opacity 0.2s, transform 0.2s;
}
.hovicon.effect-7.sub-b:hover:after {
    opacity: 1;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}
.hovicon.effect-7.sub-b:before {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.7;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
}
.hovicon.effect-7.sub-b:hover:before {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
/* Effect 8 */
 .hovicon.effect-8 {
    background: rgba(255, 255, 255, 0.1);
    -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
    -moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
    transition: transform ease-out 0.1s, background 0.2s;
}
.hovicon.effect-8:after {
    top: 0;
    left: 0;
    padding: 0;
    z-index: -1;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
    opacity: 0;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
}
.hovicon.effect-8:hover {
    background: rgba(255, 255, 255, 0.05);
    -webkit-transform: scale(0.93);
    -moz-transform: scale(0.93);
    -ms-transform: scale(0.93);
    transform: scale(0.93);
    color: #fff;
}
.hovicon.effect-8:hover i {
    color: #fff;
}
.hovicon.effect-8:hover:after {
    -webkit-animation: sonarEffect 1.3s ease-out 75ms;
    -moz-animation: sonarEffect 1.3s ease-out 75ms;
    animation: sonarEffect 1.3s ease-out 75ms;
}
@-webkit-keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
        -webkit-transform: scale(1.5);
        opacity: 0;
    }
}
@-moz-keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
        -moz-transform: scale(1.5);
        opacity: 0;
    }
}
@keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
        transform: scale(1.5);
        opacity: 0;
    }
}
/* Effect 9 */
 .hovicon.effect-9 {
    -webkit-transition: box-shadow 0.2s;
    -moz-transition: box-shadow 0.2s;
    transition: box-shadow 0.2s;
}
.hovicon.effect-9:after {
    top: 0;
    left: 0;
    padding: 0;
    box-shadow: 0 0 0 3px #fff;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
}
/* Effect 9a */
 .hovicon.effect-9.sub-a:hover:after {
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    -ms-transform: scale(0.85);
    transform: scale(0.85);
    opacity: 0.5;
}
.hovicon.effect-9.sub-a:hover {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 1);
    color: #fff;
}
.hovicon.effect-9.sub-a:hover i {
    color: #fff;
}
/* Effect 9b */
 .hovicon.effect-9.sub-b:hover:after {
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    -ms-transform: scale(0.85);
    transform: scale(0.85);
}
.hovicon.effect-9.sub-b:hover {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);
    color: #fff;
}
.hovicon.effect-9.sub-b:hover i {
    color: #fff;
}  
    </style>
<div class="row">
<div class="block">
<i class="hovicon effect-1 sub-a">1</i>
</div>
<div class="block">
<i class="hovicon effect-2 sub-b">2</i>
</div>
<div class="block">
<i class="hovicon effect-3 sub-a">3</i>
</div>
<div class="block">
<i class="hovicon effect-4 sub-b">4</i>
</div>
<div class="row">
<div class="block">
<i class="hovicon effect-5 sub-a">9</i>
</div>
<div class="block">
<i class="hovicon effect-6">IO</i>
</div>
<div class="block">
<i class="hovicon effect-7 sub-a">11</i>
</div>
<div class="block">
<i class="hovicon effect-7 sub-b">I2</i>
</div>
</div>
<div class="row">
<div class="block">
<i class="hovicon effect-8">I3</i>
</div>
<div class="block">
<i class="hovicon effect-9 sub-a">I4</i>
</div>
<div class="block">
<i class="hovicon effect-9 sub-b">I5</i>
</div>
<div class="block">
<i class="hovicon effect-1 sub-a"><b class="icon-camera-retro"></b>
</i>
</div>
</div>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" />
Penjelasan :
Sisipkan link diantara kode <i class="hovicon effect-1 sub-a">1</i>
Contoh: <i class="hovicon effect-1 sub-a"><a href="http://Your Link"> Your Text </a> </i>
Sumber : Codepen
Edited by. Myscript2010

css3 tooltip hover

Memasang kode css3 tooltip hover,
kode ini Fungsinya dapat menampilkan Gambar dengan format JPG, GIF dan PNG.
gambar yang ada pada kode ini  akan menampilkan title ketika disentuh oleh cursor yang menuju kesatu postingan. Dibawah ini adalah kode tersebut berikut cara penerapannya
Login ke akun blog klik entri halaman baru HTML
copy kode berikut ini dan pastekan kedalam halaman baru tersebut klik simpan selesai
<style type="text/css">
.tooltip {
position: relative; opacity: 0; color: #dad;
top: -100px; left: 0px;
width: 180px; padding: 10px;
border-radius: 25px; -webkit-border-radius: 25px;
background-color: rgba(0,0,30,0.5);
-webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);
box-shadow: 0px 0px 15px 2px rgba(255,255,255, .75);
-webkit-transition: .5s; transition: .5s;
-webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
.container .tooltip:after {
position: absolute; top: 100%; left: 45%; height: 0; width: 0;
border: 0px solid transparent; border-top: 0px solid rgba(0, 0, 30, 0.5);
content: "Myscript2010"; white-space: nowrap; color:#DDD;
}
.container:hover .tooltip {
opacity: 1; top: -225px;
-webkit-transform: rotateY(0deg); transform: rotateY(0deg);
}
    </style>
<a href="http://Your Link" title="Mymenu">
<div class="container">
<img src="http://Link Gambar" />
<div class="tooltip">
<center>
<p class="tooltiptxt">

Your Text</p>
</div></div>
Penjelasan :
Ganti Link dan edit kode yang di warnai 
Sumber by. Codepen
Edited by. Myscript2010
Contoh Tampilan Tooltip Hover



Your Text

Card Flip

Memasang kode Card Flip, kode ini Fungsinya dapat menampilkan Gambar dengan format JPG, GIF dan PNG.
gambar yang ada pada kode ini  akan berputar ketika disentuh oleh cursor sekaligus menjadi tombol yang menuju kesatu postingan. Dibawah ini adalah kode tersebut berikut cara penerapannya
Login ke akun blog klik entri halaman baru HTML
copy kode berikut ini dan pastekan kedalam halaman baru tersebut klik simpan selesai
<style type="text/css">
body {
  font: 600 24px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
  margin: 12px 0;
}
.card-container {
  cursor: pointer;
  height: 150px;
  perspective: 600;
  position: relative;
  width: 150px;
}
.card {
  height: 300;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 400;
}
.card:hover {
  transform: rotateY(180deg);
}
.card .side {
  backface-visibility: hidden;
  border-radius: 6px;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.card .back {
  background: #000;
  color: #0087cc;
  line-height: 150px;
  text-align: center;
  transform: rotateY(180deg);
}
</style>
 <div class="card-container">
  <div class="card">
    <div class="side">
<img src="http://Link Gambar.gif" alt="Myscript2010">
</div>
    <div class="side back">
<a href="http://Your Link"><b>Your Text</b></div>
  </div>

</div>
Penjelasan :
Ganti Link dan edit kode yang di warnai 
Sumber by. Codepen
Edited by. Myscript2010

Expanding Codeblock

Expanding Codeblock
Memasang Expanding Codeblock, kode ini Fungsinya dapat menampilkan Teks, hampir sama dengan kode textarea, perbedaanya kode ini menggunakan efek hover, selain itu kode ini dapat dimodif menjadi textarea dengan cara menyisipkan kode textarea dibawah kode <div class="inner"> dan di tutup dengan   kode </div> penerapannya dapat diletakan di area gadged atau di entri halaman baru. dibawah ini adalah kode tersebut.
Login ke akun blog klik entri halaman baru HTML
copy kode berikut ini dan pastekan kedalam halaman baru tersebut klik simpan selesai
<style type="text/css">
.container {
position:relative;
}
.container:after {
text-align: center; position: absolute; background:#999;
top: 17px; right: -28px; width: 120px; height: 1.6em;
font-size: 1.1em; content: "Mys2010";
-webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.outer, .outer:hover {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}
.outer{
color: #000; background: #DDD; overflow: hidden;
}
.outer:hover {
color: #FFF; background: #666; overflow: hidden;
}
.inner {
max-height: 110px; overflow: auto;
-webkit-transition: max-height 1.7s ease; transition: max-height 1.7s ease;
}
.outer:hover > .inner {
max-height: 1200px;
-webkit-transition: max-height 3.5s ease 0.7s; transition: max-height 3.5s ease 0.7s;
}</style>
   
<div class="container outer">
<div class="inner">

 isi Teks disini
</div>
</div>


Contoh
Expanding Codeblock Sebelum dimodif


Contoh Expanding Codeblock Setelah dimodif
Penjelasan :
Edit kode yang di warnai sesuai keinginan
All Sources
Edited by. Myscript2010

Myscript2010

Home Page
 
 

M2010

Copyright © Cibeber Cimahi