Almeera Titania

.social-buttons {
    position: fixed;
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #d19fe8;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-wtjXMjICdiWXyYDWYP_O3tNxdqFvxmRdZtL-233abpkbBwAxaCxE22VIhQzz5zcbnANdBoi632S_uJpibBPOkiJ904nlQ2Iyb5iUYTfedwBjiYDUxBDsHRQSVK6wg4mbcGBhKChApkk/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #318ce7;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #08e8de;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #c32148;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #195905;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #5218fa;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #800020;
}
.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
$(window).load(function(){
$(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
$(this).stop();
$(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){});

});
$(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
$(this).stop();
$(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
});
});
</script>

Untuk jquery library warna hijau diatas, jika pada template yang kalian gunakan sudah terpasang, harap ditinggalkan saja atau jangan ikut di masukkan.


5. Untuk memanggil widget tersebut, taruh kode HTML dibawah ini sebelum </body> :

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/Almeera-Titania-760638460707919' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/102289673422471971530' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/deemustusher' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>

Copas merupakan singkatan dari copy paste, Walaupun memang tidak ada script anti copas yang benar-benar 100% bisa menghadang para pencuri artikel-artikel blog, tetapi kode anti copy paste berikut mungkin akan meminimalisir atau mempersulit mereka yang ingin mengcopy artikel pada blog kita sendiri. Berikut ini Cara Memasang Disable Text Selection with CSS Code Atau Kode Anti Copas pada blog yaitu:

1. Buka Template kalian, Lalu masuk ke Edit HTML
2. Cari kode ]]></b:skin>
3. Masukkan kode dibawah ini pada posisi di atas ]]></b:skin> :

[code type="CSS"]/*----- Disable Text Selection with CSS Code-------*/ .post blockquote { background: #f5f5f5; border-left: 6px solid #eee; margin: 1.5em 10px; padding: .5em 10px; font-family: courier, serif; line-height: 1.2; word-wrap: break-word; -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; -o-user-select: text !important; } body { -webkit-user-select: none !important; -moz-user-select: -moz-none !important; -ms-user-select: none !important; user-select: none !important; }[/code]

Hasilnya akan menjadi seperti contoh gambar berikut :

Kode Anti Copas lainnya bisa juga memakai cara dibawah ini:

Taruh kode dibawah ini pada posisi di atas ]]></b:skin>

[code type="CSS"].post-outer { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -ms-user-select:none; -moz-user-select:none; } .post blockquote,.post pre,.post code{ -webkit-touch-callout:text; -webkit-user-select:text; -khtml-user-select:text; -ms-user-select:text; -moz-user-select:text; }[/code]

Demikan penjelasan tentang Cara Memasang Disable Text Selection with CSS Code Atau Kode Anti Copas pada blog, semoga bermanfaat untuk kalian. Terima Kasih

Dengan mengganti judul blog dan deskripsi blog dengan gambar atau logo pada header blog kalian, itu pasti akan membuat  seo score menjadi berkurang apabila kalian mengecek seo score pada chkme.com, dengan munculnya pesan pada heading H1:  Zero, that is Really Bad.

Berikut cara memperbaiki atau mengatasi H1:  Zero, that is Really Bad di chkme.com :

1. Login ke blog kalian, masuk ke Template, lalu edit HTML, dan cari kode dibawah ini :

[code type="HTML"]<div id='header-inner'> <a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a>[/code]

2. Tambahkan markup h1 pada tag <h1><a expr:href...</a> </h1> Contohnya seperti ini :

[code type="HTML"]<div id='header-inner'> <h1><a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a></h1>[/code]

     Atau bisa juga menambahkan <h1> dan </h1> pada posisi sebelum <img dan di akhir block'/>
     Contohnya seperti ini :

[code type="HTML"]<div id='header-inner'> <a expr:href='data:blog.homepageUrl' style='display: block'> <h1><img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/></h1> </a>[/code]
3. Simpan Template dan cek kembali seo score blog kalian di ckhme.com. Apabila pemasangan kode benar, maka blog kalian akan mendapatkan seo score yang lebih baik.


Selain cara diatas, dapat juga memakai cara dibawah ini apabila posisi gambar atau logo bergeser ketika di tes responsive:

1. Pada edit HTML, cari kode dibawah ini:

[code type="HTML"]<!--Show the image only--> <div id='header-inner'>[/code]

   Atau sebelum kode:


   Kode yang untuk ditambahkan yaitu:


   Contoh pemasangan kodenya, Kode asli yang belum ditambahkan yaitu:

<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->

   Ketika sudah ditambahkan kode diatas, akan menjadi seperti berikut:

<!--Show the image only-->
<div id='header-inner'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
</b:if>
</b:if>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->

2. Simpan Template dan cek kembali seo score blog kalian di ckhme.com. Apabila pemasangan kode benar, maka blog kalian akan mendapatkan nilai tambah seo score dan posisi gambar atau logo dapat menyesuaikan dengan baik.