YONDARKNESS

Home » HTML

Showing posts with label HTML. Show all posts

Cara Membuat Slider Gambar Ringan Responsive Di Blog

Kali ini saya akan berbagi kepada kalian sebuah tutorial blogger sederhana tentang bagaimana cara membuat slider gambar sederhana, ringan, dan responsive di blogger. Slider gambar ini sangat berguna. Pengunjung dapat melihat artikel menarik yang kita tampilkan di sana. Langsung saja, berikut ini adalah sedikit previewnya :

Demo

Bagaimana? Kalian tertarik? Langsung saja. Berikut ini adalah cara membuatnya :

Pertama masuk ke dasboard blog kalian.
Masuk ke Tata Letak.
Pastikan ada Tambahkan Gadget di atas widget Blog Posts kalian.
Jika belum ada, masuk ke Template.
Pilih Edit HTML.
Cari kode <b:section class='main' id='main' showaddelement='no'>.
Ganti no dengan yes.
Jika sudah, sekarang akan ada Tambahkan Gadget di atas widget Blog Posts kalian.
Klik Tambahkan Gadget.
Pilih HTML/JavaScript.
Masukkan kode di bawah ini :

<style type="text/css">
.slider-box { background:none repeat scroll 0 0 #eff0ef; margin:0 auto; margin-bottom:-100px; width:100%; overflow:hidden; }
#slider-wrapper { margin:0 auto; padding:10px; }
#jslider-container { border:2px solid #FFFFFF; max-width:100%; position:relative; text-align:left; z-index:90; }
@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro&subset=latin,latin-ext");
* html #jslider-container{ width: 100% }
.slider-box {
background: none repeat scroll 0 0 #eff0ef;
margin: 0 auto;
}
#slider-wrapper {
margin: 0 auto;
padding: 10px;
}
#jslider-container {
border: 2px solid #34495e;
max-width: 100%;
position: relative;
text-align: left;
z-index: 90;
}
#jslider-container .jslider_images ul{
position:relative;
width: 10000%;
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}
#jslider-container .jslider_images ul li{
width:1%;
line-height:0; /*opera*/
float:left;
font-size:0;
padding:0 0 0 0 !important;
margin:0 0 0 0 !important;
}
#jslider-container .jslider_images{
position: relative;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
}
#jslider-container .jslider_images a{
width:100%;
display:block;
color:transparent;
}
#jslider-container img{
max-width: none !important;
}
#jslider-container .jslider_images img{
width:100%;
border:none 0;
max-width: none;
padding:0;
}
#jslider-container a{
text-decoration: none;
outline: none;
border: none;
}
#jslider-container .ws_bullets {
font-size: 0px;
float: left;
position:absolute;
z-index:70;
}
#jslider-container .ws_bullets div{
position:relative;
float:left;
}
#jslider-container a.wsl{
display:none;
}
#jslider-container .ws_bullets {
padding: 10px;
}
#jslider-container .ws_bullets a {
margin-left:4px;
width:9px;
height:9px;
background: url(./bullet.png) left 50% no-repeat;
float: left;
text-indent: -4000px;
position:relative;
color:transparent;
}
#jslider-container .ws_bullets a.ws_selbull, #jslider-container .ws_bullets a:hover{
background-position: right 50%;
}
#jslider-container a.ws_next, #jslider-container a.ws_prev {
position:absolute;
display:none;
top:50%;
margin-top:-28px;
z-index:60;
height: 48px;
width: 48px;
background-image: url(../images/arrows.png);
}
#jslider-container a.ws_next{
background-position: 100% 0;
right:5px;
}
#jslider-container a.ws_prev {
left:5px;
background-position: 0 0;
}
#jslider-container a.ws_next:hover{
background-position: 100% 100%;
}
#jslider-container a.ws_prev:hover {
background-position: 0 100%;
}
* html #jslider-container a.ws_next,* html #jslider-container a.ws_prev{display:block}
#jslider-container:hover a.ws_next, #jslider-container:hover a.ws_prev {display:block}
/* bottom center */
#jslider-container .ws_bullets {
top:0;
right: 0;
}
/* separate */
#jslider-container .ws-title{
position: absolute;
display:block;
bottom:20px;
left:25px;
margin-right:25px;
z-index: 50;
color: #6E7476; font-family: 'Source Sans Pro',Arial,sans-serif;
font-size: 22px;
line-height: 24pxpx;
}
#jslider-container .ws-title div,#jslider-container .ws-title span{
display:inline-block;
margin-top:10px;
padding: 7px;
background:#FFFFFF;
font-weight: normal; border-radius:0;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
#jslider-container .ws-title div{
display:block;
margin-top:10px;
background:#6cbe42; color: #FFFFFF;
}
#jslider-container .jslider_thumbs {
font-size: 0px;
position:absolute;
overflow:auto;
z-index:70;
}
#jslider-container .jslider_thumbs a {
position:relative;
text-indent: -4000px;
color:transparent;
opacity:0.85;
}
#jslider-container .jslider_thumbs a:hover{
opacity:1;
}
#jslider-container .jslider_thumbs a:hover img{
visibility:visible;
}
#jslider-container .jslider_thumbs {
right: -106px;
top: 0;
width:101px;
height:100%;
}
#jslider-container .jslider_thumbs div{
position:relative;
width:100%;
}
#jslider-container .jslider_thumbs .ws_selthumb img{
border-color:#6cbe42;
}
#jslider-container .jslider_thumbs a img{
margin:3px;
text-indent:0;
border: 5px solid #FFFFFF;
max-width:none;
}
#jslider-container .jslider_images ul{
animation: wsBasic 24s infinite;
-moz-animation: wsBasic 24s infinite;
-webkit-animation: wsBasic 24s infinite;
}
@keyframes wsBasic{0%{left:-0%} 12.5%{left:-100%} 25%{left:-100%} 37.5%{left:-200%} 50%{left:-200%} 62.5%{left:-300%} 75%{left:-300%} 87.5%{left:0%}}
@-moz-keyframes wsBasic{0%{left:-0%} 12.5%{left:-100%} 25%{left:-100%} 37.5%{left:-200%} 50%{left:-200%} 62.5%{left:-300%} 75%{left:-300%} 87.5%{left:0%}}
@-webkit-keyframes wsBasic{0%{left:-0%} 12.5%{left:-100%} 25%{left:-100%} 37.5%{left:-200%} 50%{left:-200%} 62.5%{left:-300%} 75%{left:-300%} 87.5%{left:0%}}
#jslider-container .ws_bullets a img{
text-indent:0;
display:block;
top:16px;
left:-43px;
visibility:hidden;
position:absolute;
border: 5px solid #FFFFFF;
max-width:none;
}
#jslider-container .ws_bullets a:hover img{
visibility:visible;
}
#jslider-container .ws_bulframe div div{
height:48px;
overflow:visible;
position:relative;
}
#jslider-container .ws_bulframe div {
left:0;
overflow:hidden;
position:relative;
width:85px;
background-color:#DEDEDE;
}
#jslider-container .ws_bullets .ws_bulframe{
display:none;
top:15px;
overflow:visible;
position:absolute;
cursor:pointer;
border: 5px solid #FFFFFF;
}
#jslider-container .ws_bulframe span{
display:block;
position:absolute;
top:-11px;
margin-left:-7px;
left:43px;
background: url(triangle.png);
width:13px;
height:7px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>
<div class="slider-box"><div id="slider-wrapper"><div id="jslider-container"><div class="jslider_images"><ul><li><a href="http://zenydroid.blogspot.com/search/label/Wallpaper"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir8MyRH0cF5JWm22x_d9GxfIWMybkT63ttDJESrqdoY_j24E66r-OcrMdduQba12wDklhV3cTKelMEy2cmFACQ5yfI2qxlIIR0s5TnjPOqvWwUSngAE4WWdijWiXf125lt4YgDVd4MCJU/s1600/sample3.png" title="Download Kumpulan Wallpaper Keren"/></a></li><li><a href="http://zenydroid.blogspot.com/2015/05/mezamashi-manager-apk-untuk-android.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhikQc2fveRB9XKm4evGLO934M-idsgpaoi_BhTnJQZCnABadw6vykpyEpMnVipEBLl20o3Fag81t2EtmxvB30HDlwCHwzaDNKIoIjc0Z394DA2WMfcCvnpAoxfJtF8Ud9mRmFgLDjv_3Y/s1600/sample31.png" title="Download Mezamashi Manager Apk"/></a></li>
<li><a href="http://zenydroid.blogspot.com/2015/05/sao-launcher-sword-art-online-v304-pro.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq0qG6UtlxPBlwxexlmp1MT33gBXOt65d3NW7t0fgs_iuQtFFmmfiG5KdIYZqMrKx6ocafX6hFcMkdn3v5GB57BmQkysgrvl_8eHXnbHsmh06crwTRQYfin6CBTdwtErcwfxpfobEfE88/s1600/sample3111.png" title="Download SAO Launcer Untuk Android"/></a></li><li><a href="http://zenydroid.blogspot.com/search/label/Lock%20Screen"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOYPMM4Ktb_pacWq-CB1mlvdSwntChgguIUmxEfb5X40vMK04qa8jD90pwRlpPGmhMUQVuBYdoFQUQiRcyEy8paiPfqdkApRl4MVujBESXmUl8_pOyq8RWAsOqGbuSKFANYbHC_wAclF0/s1600/sample311.png" title="Download Kumpulan Lock Screen Anime"/></a></li></ul></div></div></div></div>

Terakhir tinggal disimpan.

Keterangan :

Ganti kode yang berwarna ORANGE dengan link url postingan atau halaman kalian.

Ganti kode yang berwarna BIRU dengan link url gambar yang ingin ditampilkan.

Ganti kode yang berwarna UNGU dengan judul.

Jika kalian ingin Slider hanya tampil di halaman utama saja, kalian bisa mengikuti langkah berikut :

Masih di dasboard, pilih Template.
Masuk ke Edit HTML.
Cari kode yang mirip seperti kode di bawah ini :

<b:widget id='HTML5' locked='false' title='' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Keterangan :

Kode yang berwarna CYAN adalah ID widget yang tadi kalian buat untuk slider.

Letakkan kode <b:if cond='data:blog.url == data:blog.homepageUrl'> di bawah <b:includable id='main'> dan </b:if> di atas kode </b:includable> seperti berikut :

<b:widget id='HTML5' locked='false' title='' type='HTML'> <b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'>  <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/></b:if>
</b:includable> </b:widget>

Terakhir tinggal disimpan.

Bagaimana? Agak ribet ya? Sekian artikel saya kali ini. Semoga bermanfaat bagi kita semua. Jangan lupa untuk meninggalkan komentar dan klik tombol like di bawah ini.

Cara Membuat Tombol Surprise Me (Random Post) Di Blog

Kali ini saya akan berbagi kepada kalian sebuah tutrial tentang bagaimana caranya membuat tombol atau link random post atau yang lebih dikenal dengan surprise me. Ketika kalian menekan tonbol tersebut, secara otomatis akan diarahkan ke sebuah postingan secara acak. Jika kalian belum mengerti, kalian bisa melihat contohnya di link di bawah ini :

Demo

Bagaimana? Kalian tertarik? Langsung saja. Berikut ini adalah cara membuatnya :

Pertama, masuk ke dasboard blog kalian.
Masuk ke Template.
Pilih Edit HTML.
Masukkan kode JavaScript di bawah ini tepat di atas kode </body> :

<script type='text/javascript'>

//<![CDATA[

function showLucky(root){

var feed = root.feed;

var entries = feed.entry || [];

var entry = feed.entry[0];

for (var j = 0; j < entry.link.length; ++j) {

if (entry.link[j].rel == "alternate") {

window.location = entry.link[j].href;

}

}

}

function fetchLuck(luck){

script = document.createElement('script');

script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky';

script.type = 'text/javascript';

document.getElementsByTagName('head')[0].appendChild(script);

}

function readLucky(root){

var feed = root.feed;

var total = parseInt(feed.openSearch$totalResults.$t,10);

var luckyNumber = Math.floor(Math.random()*total);

luckyNumber++;

fetchLuck(luckyNumber);

}

function feelingLucky(){

var script = document.createElement('script');

script.type = 'text/javascript';

script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';

document.getElementsByTagName('head')[0].appendChild(script);

}

//]]>

</script>

Simpan perubahan Templatenya.

Untuk menggunakannya, kalian hanya perlu menambahkan kode di bawah ini di menu blog kalian :

<li class='ranpost'><a onclick='feelingLucky();'><i/>Random Post</a></li>

Saya mendapatkan tutorial ini dari idblanter.com. Sekian artikel saya kali ini. Semoga bermanfaat bagi kita semua. Jangan lupa untuk meninggalkan komentar dan klik tombol like di bawah ini.

Cara Mudah Mengetahui ID Widget Blogger

Kali ini saya akan berbagi kepada kalian sebuah trik mudah tentang bagaimana cara mengetahui ID sebuah widget di Blogger. Setiap widget di Blog kita mempunyai ID berbeda. Sebagai blogger, kalian wajib mengetahuinya. Nah, mungkin saat kita ingin memodifikasi sebuah widget dan kita perlu mengetahui IDnya seperti saat membuat widget menjadi melayang atau fixed saat halaman discroll kebawah. Lalu bagaimana cara melihat IDnya? Berikut ini adalah caranya :

Pertama, masuk ke dasboard blog kalian.
Masuk ke Tata Letak.
Klik Edit pada widget yang ingin kita ketahui IDnya.
Kemudian akan muncul jendela pop up seperti di bawah ini :

Nah, lihat di addres bar dari jendela pop up tersebut. Disana akan ada url seperti ini :

Nah, teks yang saya block di atas adalah ID widget tersebut.
Selesai.

Bagaimana? Sangat mudah bukan? Kalian bisa melihat berbagai cara modifikasi blog di blog saya ini. Sekian artikel pendek saya kali ini. Semoga bermanfaat bagi kita semua. Jangan lupa untuk meninggalkan komentar dan klik tombol like di bawah ini.

Cara Membuat Widget Blog Menjadi Melayang (Fixed) Setelah Halaman Discroll

Kali ini saya akan berbagi kepada kalian sebuah tutorial blogger tentang bagaimana cara membuat widget yang ada di blog kita menjadi melayang atau posisi fixed saat halaman discroll ke bawah kemudian kembali ke tempat semula saat halaman discroll ke atas. Widget ini tidak akan melayang jika halaman belum discroll ke bawah. Untuk lebih jelasnya, kalian bisa melihat contohnya dengan mengklik link demo di bawah ini :

Demo

Bagaimana? Apakah kalian tertarik untuk menggunakannya di blog kalian? Berikut ini adalah cara menggunakannya :

Pertama, masuk ke dasboard blog kalian.
Masuk ke menu Template dan pilih Edit HTML.
Masukkan kode di bawah ini tepat di atas kode </body> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Jika sudah ada kode semacam itu, kalian bisa melompati langkah di atas.
Masukkan kode di bawah ini tepat setelah kode di atas :

<script type='text/javascript'>
$(window).scroll(function(){
if ($(window).scrollTop() >= 560){
$('#PopularPosts1').css({position:'fixed',top:30});
} else {
$('#PopularPosts1').css({position:'relative',top:0});
}
});
</script>

Terakhir tinggal kalian simpan.

Keterangan :

Kode yang berwarna ORANGE adalah jarak widget akan melayang, makdsudnya setelah halaman blog di scroll 560px ke bawah, maka widget baru akan melayang.

Kode yang berwarna BIRU adalah jarak widget akan melayang dari atas layar.

Kode yang berwarna HIJAU adalah kode ID widget. Kalian bisa menggantinya sesuai dengan ID widget yang akan kalian buat melayang. Untuk mengetahui ID widget tersebut, kalian bisa melihatnya di sini.

Bagaimana? Sekian artikel saya kali ini. Semoga bermanfaat bagi kita semua. Jangan lupa untuk meninggalkan komentar dan klik tombol like di bawah ini.

Cara Membuat Animasi Progress Loading Bar Seperti Youtube Di Blog

Kali ini saya akan berbagi kepada kalian sebuah tutorial Blogger tentang bagaimana cara membuat animasi progress loading bar seperti pada situs Youtube di blog. Jika kita jeli, saat membuka situs Youtube, saat proses loading akan ada bar berwarna merah yang menunjukkan proses load. Jika kalian belum mengerti, kalian bisa melihat contohnya dengan mengklik link demo di bawah ini :

Demo

Nah, bagaimana kalau kita juga membuatnya dan memasangnya di blog kita. Tentu akan sangat bagus dan blog kita akan terlihat seperti profesional. Kita juga tidak perlu terlalu takut akan memperberat blog karena loading bar ini sangat ringan. Bagaimana? Apakah kalian tertarik membuatnya? Berikut ini adalah caranya :

Pertama, masuk ke dasboard blog kalian.
Masuk ke bagian Template dan pilih Edit HTML.
Masukkan kode di bawah ini tepat di atas kode </body> :

<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"2px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width=
a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#db3131";this.bars=[];b=this.el=document.createElement("div");c(this.el,
k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}();
var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100);
//]]>
</script>

Jika sudah, tinggal kalian simpan dan lihat hasilnya.

Keterangan :

Kode yang berwana BIRU adalah kode tebal bar. Kalian bisa menyesuaikannya.

Kode yang berwana HIJAU adalah kode warna bar. Kalian bisa menyesuaikannya.

Bagaimana? Berhasil bukan? Sekian artikel dari saya. Semoga bermanfaat bagi kita semua. Jangan lupa tinggalkan komentar dan klik tombol like di bawah ini.

Cara Membuat Efek Berjalan (Marquee) Pada Objek Di Blog

Kali ini saya akan berbagi kepada kalian sebuah tutorial blog. Sebenarnya tutorial ini sudah umum diketahui banyak blogger. Tetapi tidak masalah, saya akan membagikanya. Pertama, kalian haruslah tahu apa sebenarnya yang saya maksud dengan efek berjalan atau marquee itu. Marquee adalah kode HTML agar objek bisa bergerak atau berjalan. Marquee ini banyak diminati dan dipakai oleh para Blogger di dalam blognya karena sifatnya yang dinamis serta menarik untuk di lihat, efek ini juga biasa dipakai untuk menghemat tempat pada halaman blog. Untuk lebih jelasnya, kalian bisa mengklik link demo di bawah ini :

Demo

Bagaimana? Apakah kalian tertarik menggunakannya di blog kalian? Berikut ini adalah cara membuatnya :

Pertama, masuk ke dasboard blog kalian.
Masuk ke bagian Template dan klik Edit HTML.
Letakan kode jQuery Library bawah ini tepat di atas kode </head> (Jika sudah ada kode yang sama atau sejenis, maka langkah dilewati saja).

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"/>

Simpan kode CSS dibawah ini di atas kode </head> atau letakan tepat di atas kode ]]></b:skin> (Jika diatas kode ]]></b:skin> silahkan hilangkan kode <style> dan </style>) :

<style>
.marquee { overflow: hidden; width:95%; /* Atur Lebar Marquee */ border:1px solid #ddd; /* Tambahan Border Atau Garis Tepi */ background:#eee; /* Kode Warna Background */ color:#333; /* Kode Warna Teks */ padding:5px; /* Kode Jarak Paddding */ }
</style>

Letakan kode Plugin Jquery Marquee external dibawah ini tepat di atas kode </head> :

<script src='https://seocipsokbanget.googlecode.com/svn/jquery-marque.js' type='text/javascript'/>

Letakkan kode JavaScript di bawah ini tepat sebelum kode </body> :

<script type='text/javascript'>
//<![CDATA[
// Settingan Default Marquee nya disini bro!
$('.marquee').marquee({
//Atur kecepatan marquee ( Hitungan Milisecond ) :
duration: 9000,
//Atur 'Delay' Waktu Sebelum Marquee dimulai :
delayBeforeStart: 0,
//Atur Arah Marquee 'left' atau 'right' :
direction: 'left',
//Aktifkan Duplikat Marquee 'true' atau 'false'
duplicated: false,
//Atur Jarak Duplikat Marquee ( Hitungan Pixel ) :
gap: 10,
//Hentikan Marquee ketika di sentuh 'true' atau 'false'
pauseOnHover: true
});
//]]>
</script>

Kemudian simpan.

Untuk menggunakannya, kalian bisa memanggilnya. Untuk teks kalian bisa memasukkan kode dibawah ini di post atau tempat lain :

<div class="marquee" data-duration='10000' data-direction="left/right/up/down"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHAeuzoX0EpWRYlyi49zJVdeKzQKuakMq1V5O7jYytd0-eF5ixJGTMkrh4ffHA_pTruXBuQqmoHVtdRYDs2x7r4p3GAD4pxDajRF2Rk7I0vobhZ7gjBvR2PaxXe62Ln4Dhz4eGWt9FMo8/s1600/marquee1.jpg">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></div>

Untuk menggunakannya pada gambar, kalian bisa menggunakankode di bawah ini :

<div class="marquee gambar" data-duplicated="true" data-duration="9000" data-direction="left/right/up/down">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHAeuzoX0EpWRYlyi49zJVdeKzQKuakMq1V5O7jYytd0-eF5ixJGTMkrh4ffHA_pTruXBuQqmoHVtdRYDs2x7r4p3GAD4pxDajRF2Rk7I0vobhZ7gjBvR2PaxXe62Ln4Dhz4eGWt9FMo8/s1600/marquee1.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHAeuzoX0EpWRYlyi49zJVdeKzQKuakMq1V5O7jYytd0-eF5ixJGTMkrh4ffHA_pTruXBuQqmoHVtdRYDs2x7r4p3GAD4pxDajRF2Rk7I0vobhZ7gjBvR2PaxXe62Ln4Dhz4eGWt9FMo8/s1600/marquee1.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy54TMVOBreeqHWE5kyDm4PObGnypR3GJ4EDGekmhytxV4t0xtfugBVrdofGblBxwe6gc-o1ult9F8xlMAA3_IThwQW6VirP0INtEtHK69qrtGQ37vGxetluIu_tbthodU7j95h3T5q8I/s1600/marquee2.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy54TMVOBreeqHWE5kyDm4PObGnypR3GJ4EDGekmhytxV4t0xtfugBVrdofGblBxwe6gc-o1ult9F8xlMAA3_IThwQW6VirP0INtEtHK69qrtGQ37vGxetluIu_tbthodU7j95h3T5q8I/s1600/marquee2.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtxTc_vxIMjUQnTxMHOjqaqrhYh53btzyCnbWbYkDZg4NLn01kFzD0S8UMOotr1rrIJCxNU2dfZ7Sl7jpHQZNh1uWxxyfyj_ptw06xn7tIdaYkB3dUSDvBn4JsExdUlnVZacWLZmuh8Gs/s1600/marquee3.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtxTc_vxIMjUQnTxMHOjqaqrhYh53btzyCnbWbYkDZg4NLn01kFzD0S8UMOotr1rrIJCxNU2dfZ7Sl7jpHQZNh1uWxxyfyj_ptw06xn7tIdaYkB3dUSDvBn4JsExdUlnVZacWLZmuh8Gs/s1600/marquee3.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHRSRuWal6olrMwgjJYL0WbRqmep_x3KW-yP2VmjVO5zmH8YvrAxPxMIRVKhuNDqDKR-OcV7NPJlwTgef7LfB8ZRvEaCMfov27TPBx520iT5SKreiu6dNlSYwUfNtFOBWXf0ovpUA-01w/s1600/marquee4.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHRSRuWal6olrMwgjJYL0WbRqmep_x3KW-yP2VmjVO5zmH8YvrAxPxMIRVKhuNDqDKR-OcV7NPJlwTgef7LfB8ZRvEaCMfov27TPBx520iT5SKreiu6dNlSYwUfNtFOBWXf0ovpUA-01w/s1600/marquee4.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLKzOEZigWqGK9zFFEX-Z_0J6Qj78cXTUyVpG3Fnl_Zy2Gh_MBS15COuDP2ZnWfq-EnlxyKC-MPYiVv0uK91Z5jEptqg3Ggfmt3kAqa4WNGsg9jLCyFBBXFOc4EgUZ95v5JHiM7qrnbsM/s1600/marquee5.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLKzOEZigWqGK9zFFEX-Z_0J6Qj78cXTUyVpG3Fnl_Zy2Gh_MBS15COuDP2ZnWfq-EnlxyKC-MPYiVv0uK91Z5jEptqg3Ggfmt3kAqa4WNGsg9jLCyFBBXFOc4EgUZ95v5JHiM7qrnbsM/s1600/marquee5.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUNtMfE7FxIRhhmSlsh50cRB8BTzZAKpg7fEGmO7zxbXZb6wXceHWHCXYGAViT5U9WU295jkxas295-tDBuEYjY6EpQEehE-jjWF1Q1ZV2yiUa_keMff8mvbxsyKo7u-KdVLiKso_yMtw/s1600/marquee6.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUNtMfE7FxIRhhmSlsh50cRB8BTzZAKpg7fEGmO7zxbXZb6wXceHWHCXYGAViT5U9WU295jkxas295-tDBuEYjY6EpQEehE-jjWF1Q1ZV2yiUa_keMff8mvbxsyKo7u-KdVLiKso_yMtw/s1600/marquee6.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2xRElPtSIuEPSCVzwAY33S2qoB80NXrfNMLcx3Lq3_6638r4rlaAAmRmq-9c8BNVMtZmoKU7rzKfWYevzffW9nY3iE2ZGwMQ3PxZ_p7zIwIVSZPKGK9ZbMLLv-RfGllXTNwmoAQATFsU/s1600/marquee7.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2xRElPtSIuEPSCVzwAY33S2qoB80NXrfNMLcx3Lq3_6638r4rlaAAmRmq-9c8BNVMtZmoKU7rzKfWYevzffW9nY3iE2ZGwMQ3PxZ_p7zIwIVSZPKGK9ZbMLLv-RfGllXTNwmoAQATFsU/s1600/marquee7.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihn2i8jXxt73RPsAFb1YAo5kPQs6G0d0MAVqlO20vwzlgJwTsVCksA8FjKkwQc5CP_b_dtELfzagbfuFFFKIKsIGxq3w3rgQ4MjVZoltONb0z_Qlvpn6rLqQyK2WpGUXVa0zG-gp73bSc/s1600/marquee8.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihn2i8jXxt73RPsAFb1YAo5kPQs6G0d0MAVqlO20vwzlgJwTsVCksA8FjKkwQc5CP_b_dtELfzagbfuFFFKIKsIGxq3w3rgQ4MjVZoltONb0z_Qlvpn6rLqQyK2WpGUXVa0zG-gp73bSc/s1600/marquee8.jpg" /></a></div>

Keterangan :

Duplikat marquee menggunakan atribut data-duplicated="true/false".

Menentukan kecepatan marquee menggunakan atribut data-duration="value" ( Hitungan Milisecond ).

Menentukan arah Marquee menggunakan atribut data-direction="left/right/up/down" ( Ke kiri , kanan, atas, bawah ).

Kode berwarna CYAN adalah kode link tujuan ketika objek diklik. Kalian bisa ,menyesuaikannya sendiri.

Kode berwarna KUNING adalah kode link gambar. Kalian bisa ,menyesuaikannya sendiri.

Bagaimana? Mudah bukan? Sekian artikel saya kali ini. Semoga bermanfaatbagi kita semua. Jangan lupa meninggalkan komentar dan like di bawah ini.

Cara Membuat Permalink Keren Di Bawah Postingan Blog

Setelah lama saya tidak update, kali ini saya akan berbagi kepada kalian sebuah tutorial blogger tentang bagaimana cara membuat permalink keren di bawah postingan blog. Permalink ini akan sangat bermanfaat bagi blog dan visitor kita. Sebenarnya saya mendapatkan tutorial ini dari blog teman saya Ne-Gen. Kemudian saya sempurnakan lagi. Pertama, kalian harus tahu terlebih dahulu apa yang saya maksud dengan permalink itu. Jika kalian belum tahu, kalian bisa melihat demonya di link di bawah ini :

Demo

Bagaimana? Pada halaman tersebut di akhir postingan terdapat permalinknya bukan? Apakah kalian tertarik membuatnya? Oke, langsung saja. Berikut ini adalah cara membuatnya :

Seperti biasa, pertama buka dasboard blog kalian.
Masuk ke Tata Letak dan edit widget postingan untuk mengaktifkan rating bintangnya (Kalian bisa melewati langkah ini).
Jika sudah kalian aktifkan, kemudian masuk ke Template, kemudian pilih Edit HTML.
Cari kode ]]></b:skin>.
Masukkan kode di bawah ini tepat di atas kode ]]></b:skin> :

.yondafuq-Permalink{
display:block;
width:auto;
height:135px;
background:#ffffff;
border:5px solid #1c6beb;
padding:0px;
margin:30px 0px 10px 0px;
color:#000;
}
.yondafuq-Permalink .kontainer{padding:5px;}
.NEGen-Permalink h4{
background:#ffffff;
border:none;
border-bottom:5px solid #1c6beb;
color:#000000;
padding:5px 10px;
margin:0px 0px 0px 0px;
display:block;
}
.yondafuq-Permalink h4 a{color:#1c6beb;}
.yondafuq-Permalink img{
width:86px;
height:86px;
margin:0px 10px 0px 0px;
float:left;
border:1px solid #1c6beb;
padding:2px;
background:#1c6beb;}

Keterangan :
Kode yang berwarna PINK adalah kode lebar. Kalian bisa menggatinya sesuai keinginan.
Kode yang berwarna ORANGE adalah kode tinggi. Kalian bisa menggatinya sesuai keinginan.
Kode yang berwarna KUNING adalah kode background. Kalian bisa menggatinya sesuai keinginan.

Kode yang berwarna HIJAU adalah kode garis border. Kalian bisa menggatinya sesuai keinginan.
Kode yang berwarna UNGU adalah kode jarak margin. Kalian bisa menggatinya sesuai keinginan.

Kode yang berwarna CYAN adalah kode warna text. Kalian bisa menggatinya sesuai keinginan.

Belum selesai sampai disini, sekarang cari kode <data:post.body/>.
Letakkan kode di bawah ini tepat setelah kode <data:post.body/>:

<b:if cond='data:blog.pageType == "item"'>
<div class='yondafuq-Permalink'>
<h4>Penulis: Yonda Tamvan | Tentang Artikel Ini : </h4>
<div class='kontainer'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifh2uWiiM3yM5IvWF6kOpdr0P8nr6S-ntrmad7YKwdc9fa-7bvPX9QIS9XxHZv7ufO0wVjl6WL3I9UMxmtbxdlD217w2jerDimbu9OzEB51y3LysCAbE295StK9CvHuaSDw2A2q4QZnSBb/s220/untitled122.PNG'/>
Viewed Article: <script src='http://amitjain.in/pageviews.php' type='text/javascript'/>.<br/>Posting Name: <strong><a expr:href='data:post.url'><data:post.title/></a></strong>.<br/>Url:<strong><data:post.url/></strong>.<br/><b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='40' g:type='RatingPanel' g:width='200'/>
</b:if>
<div style='clear:both;'/>
</div>
</div>
</b:if>

Kalian ganti kode yang bercetak TEBAL dengan nama atau kata-kata kalian sendiri dan kode bercerak MIRING dengan link gambar kalian.
Terakhir tinggal kalian simpan.

Bagaimana? Berhasil? Sekian artikel saya kali ini. Semoga bermanfaat bagi kita semua, Jangan lupa untuk mampir ke blog ini lagi dan klik tombol like di bawah ini.

Cara Membuat Headline Latest Post Di Blog

Sudah lama saya tidak update lagi, kali ini saya akan berbagi kepada kalian sebuah tutorial blogger tentang bagaimana cara membuat headline latest post (Breaking News) di blog. Kalian pasti sudah tahu apa yang saya maksud dengan headline latest post ini. Jika belum, headline yang saya maksud ini adalah widget yang akan menampilkan postingan terbaru blog kalian. Fungsinya sama seperti recent post, namun headline ini berbentuk horisontal dan biasanya diletakkan di header blog. Jika masih bingung, kalian bisa melihat demonya di link di bawah ini :

Demo

Bagaimana? Kalian tertarik? Tenang saja, cara membuatnya sangat mudah dan headline ini tidak akan terlalu memperlambat blog kalian atau bisa disebut ringan. Oke, langsung saja. Berikut ini adalah cara membuatnya :

Seperti biasa, masuk ke dasboard blog kalian.
Masuk ke pilihan Tata Letak (Layout).
Kemudian klik Tambah Gadget (Add a Gadget). Jika ada banyak, klik salah satu. Yang mana saja tidak masalah. Namun saya sarankan untuk meletakannya di paling atas, supaya lebih cepat diload.
Pilih yang HTML/JavaScript.
Kosongkan saja judulnya dan masukkan kode di bawah ini pada konten :

<style type='text/css' scoped="scoped">
#news { background:#2980b9; border-bottom: 5px solid #2c3e50; border-top: 5px solid #2c3e50; display: block; float: left; height: 20px; line-height: 20px; overflow: hidden; padding: 5px 30px; width: 100%; position: fixed; top: 0px; left: 0px; }
.titlenews { background:#2c3e50; color: #fff; display: block; float: left; font: bold 12px/22px Tahoma; padding: 9px; margin-top: -10px; position: absolute; }
#ltsposts { float: left; margin-left: 120px; }
#ltsposts ul,#ltsposts li{list-style:none;margin:0;padding:0;}
#ltsposts li a { background: none !important; #2c3e50 !important; font: bold 12px/22px Tahoma; text-decoration: none; }
ul.shsocial { background:#2c3e50; float: right; margin: -8px 0; }
ul.shsocial li {float:left;list-style: none outside none;border:none;}
ul.shsocial li a{background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimS83M0pisqFOzTR5ll8CYi0IHk-Eg8vKov9hEDtI7lrv-0YuyfNjOdhWdv2GyHM0zB7shYJBVTqf9LMGq34ybt0RSDaVl0j7TZ2Ioj-chG4yMTRguxXWhF1g2dIHqxfEwNJD5666WuacK/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
ul.shsocial li.fb a{ background-position:0 0}
ul.shsocial li.gp a{ background-position:-96px 0}
ul.shsocial li.rs a{ background-position:-192px 0}
ul.shsocial li.tw a{ background-position:-256px 0}
ul.shsocial li.fb a:hover{ background-position:0 -32px}
ul.shsocial li.gp a:hover{ background-position:-96px -32px}
ul.shsocial li.rs a:hover{ background-position:-192px -32px}
ul.shsocial li.tw a:hover{ background-position:-256px -32px}
</style>
<div id='news'><span class='titlenews'>Latest Post</span>
<div id='ltsposts'>Loading...</div>
<ul class='shsocial'>
<li class='fb'>
<a href='http://www.facebook.com/yondarkness.blog' rel='dofollow' target='_blank' title='facebook'>
</a></li>
<li class='gp'>
<a href='https://plus.google.com/118163047156925704991' rel='dofollow' target='_blank' title='googleplus'>
</a></li>
<li class='tw'>
<a href='http://twitter.com/yondarkness' rel='dofollow' target='_blank' title='twitter'>
</a></li>
<li class='rs'>
<a href='LINK RSS FEED DISINI' rel='dofollow' target='_blank' title='rss'>
</a></li>
</ul>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://www.yondarkness.com', // Replace With your Blog Url
numpostx = 20; // Maximum Post
$.ajax({
url: ''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
type: 'get',
dataType: "jsonp",
success: function(data) {
var posturl, posttitle, skeleton = '',
entry = data.feed.entry;
if (entry !== undefined) {
skeleton = "<ul>";
for (var i = 0; i < entry.length; i++) {
for (var j=0; j < entry[i].link.length; j++)
{
if (entry[i].link[j].rel == "alternate")
{
posturl = entry[i].link[j].href;
break;
}
}
posttitle = entry[i].title.$t;
skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
}
skeleton += '</ul>';
$('#ltsposts').html(skeleton);
function tick(){
$('#ltsposts li:first').slideUp( function () { $(this).appendTo($('#ltsposts ul')).slideDown(); });
}
setInterval(function(){ tick () }, 5000);
} else {
$('#ltsposts').html('<span>No result!</span>');
}
},
error: function() {
$('#ltsposts').html('<strong>Error Loading Feed!</strong>');
}
});
});
//]]>
</script>

Jika sudah, sekarang tinggal tinggal disimpan.

Keterangan :
Kode berwarna PINK adalah kode warna, kalian bisa mengganti dan menyesuaikannya sesuai keinginan kalian.
Ganti kode berwarna BIRU dengan link url Facebook kalian.

Ganti kode berwarna MERAH dengan link url G+ kalian.
Ganti kode berwarna CYAN dengan link url Twitter kalian.
Ganti kode berwarna ORANGE dengan link url Rss blog kalian,
Ganti kode berwarna UNGU dengan link url blog kalian.

Bagaimana? Bisa bukan? Jika ada kesalahan atau error, mungkin karena ada langkah atau kode ukuran yang kurang pas dikarenakan template blog yang berbeda beda. Jika itu terjadi, silakan kalian tanyakan di komentar, jika saya sempat akan saya bantu sebisanya. Sekian artikel kali ini. Semoga bermanfaat. Jangan lupa untuk mampir kembali ke blog sederhana saya ini, tinggalkan komentar, dan klik tombol like di bawah ini.

Download Template Blogger Flat Green Shiba Miyuki Mahouka

Setelah lama saya tidak berbagi template, kali ini saya akan berbagi kepada kalian sebuah template blogger anime Mahouka Koukou no Rettousei dengan gaya flat secara free alias gratis. Dengan warna hijau laut dengan sedikit kolaborasi dengan warna flat lainnya, template ini menjadi sangat simple dan cocok untuk kalian para blogger pecinta anime. Dan dengan tambahan wajah imut Miyuki template ini semakin perfect untuk kalian. Template ini bukan 100% buatan saya. Namun, saya hanya me-redesign template dari Blog Zulfikar. Berikut ini adalah beberapa gambaran tentang template ini :

Template 2 kolom.
Desain flat style minimalist.
Warna didominasi putih dan hijau laut.
Visitor friendly.
SEO friendly.
Fast load.
Auto read more.
Menu navigasi keren.
Social button keren.
Share button keren.
Related post keren.
Anime bergeser di header.
Slider keren.
Dan masih banyak lagi.

Screenshot

Download Template Blogger Flat Green Shiba Miyuki Mahouka

Untuk tampilan tata letak, saya jamin rapi seperti tampilan luarnya

Demo Download
( Nama File : File Template 006 )

Cara Memodifikasi Navigasi :

Untuk mengganti link menu navigasi, kalian bisa mengedit kode di bawah ini :

Menu Navigasi Atas :

<ul class='nav-menu'>
<li><a href='http://www.yondarkness.com/' rel='dofollow'>About</a></li>
<li><a href='http://www.yondarkness.com/' rel='dofollow'>Contact Us</a></li>
<li><a href='http://www.yondarkness.com/' rel='dofollow'>Privacy Policy</a></li>
<li><a href='http://www.yondarkness.com/' rel='dofollow'>Disclaimer</a></li>
</ul>

Menu Navigasi Bawah :

<ul>
<li><a expr:href='data:blog.homepageUrl'><span class='icon-home'/></a></li>
<li><a href='http://freenum.blogspot.com/' rel='dofollow' title='Software'>Software</a></li>
<li><a href='http://www.yondarkness.com/' rel='dofollow' title='Tutorial'>Tutorial <span class='icon-angle-down'/></a>
<ul class='dropdown'>
<li><a href='http://www.yondarkness.com/' rel='dofollow' title='Blog'>Blog</a></li>
<li><a href='http://www.yondarkness.com/' rel='dofollow' title='Photoshop'>Photoshop</a></li>
</ul>
</li>
<li><a href='http://www.yondarkness.com/' rel='dofollow' title='Anime Complete'>Anime Complete <span class='icon-angle-down'/></a>
<ul class='dropdown'>
<li><a href='http://www.yondarkness.com/' rel='dofollow' title='Captain Earth'>Captain Earth</a></li>
<li><a href='http://www.yondarkness.com/' rel='dofollow' title='Mahouka Koukou no Rettousei'>Mahouka Koukou no Rettousei</a></li>
<li><a href='http://www.yondarkness.com/' rel='dofollow' title='Nisekoi'>Nisekoi</a></li>
<li><a href='http://www.yondarkness.com/' rel='dofollow' title='Seikoku no Dragonar'>Seikoku no Dragonar</a></li>
</ul>
</li>
<li><a href='http://www.yondarkness.com/' rel='dofollow' title='Staff'>Staff</a></li>
</ul>

Cara Memodifikasi Social Button :

Untuk mengganti link social button, kalian bisa mengedit kode di bawah ini :

<ul class='nav-social'>
<li><a class='fcb' href='https://facebook.com/pages/Yondarkness/372878842803751?ref=hl' rel='nofollow'><i class='fa fa-facebook-square fa-2x'/></a>
</li>
<li><a class='gpl' href='https://plus.google.com/118163047156925704991' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'/></a>
</li>
<li><a class='twt' href='https://www.twitter.com/yondarkness/' rel='nofollow'><i class='fa fa-twitter-square fa-2x'/></a>
</li>
<li><a class='ytb' href='http://www.youtube.com/channel/UCHYYxQN554QPr1Ek_oklrVg' rel='nofollow'><i class='fa fa-youtube fa-2x'/></a>
</li>
</ul>

Cara Memodifikasi Slider Gambar :

Untuk mengganti gambar, title, dan deskripsi slider gambar, kalian bisa mengedit kode di bawah ini :

<ul>
<li><a href='http://www.yondarkness.com/' rel='dofollow' title='View my second image link'><img alt='description' src='http://www.presepe.jp/wp-content/uploads/2014/04/P0098653_2.jpg'/></a>
<h3>Title Blog</h3>
<p>Description Blog</p>
</li>
<li><a href='http://www.yondarkness.com/' rel='dofollow' title='View my second image link'><img alt='description' src='http://img2.blog.zdn.vn/52410700.jpg'/></a>
<h3>Title Blog</h3>
<p>Description Blog</p>
</li>
<li><a href='http://www.yondarkness.com/' rel='dofollow' title='View my second image link'><img alt='description' src='http://ftp.gameshot.net/article/2013_04/gsGA516acf1e683fcp1n5.jpg'/></a>
<h3>Title Blog</h3>
<p>Description Blog</p>
</li>
<li><a href='http://www.yondarkness.com/' rel='dofollow' title='View my second image link'><img alt='description' src='http://3.bp.blogspot.com/-c2XNHHqwNkM/U0PrnP7WKEI/AAAAAAAACJY/TzpKtIuSreA/s1600/Image_004.jpghttp://img2.blog.zdn.vn/52269273.jpg'/></a>
<h3>Title Blog</h3>
<p>Description Blog</p>
</li>
</ul>

Nah, itu dia templatenya. Jika ada error di template ini, tolong dilaporkan. Supaya saya bisa membetulkannya. Kalian boleh menggunakan template ini asalkan tidak menghapus link kreditnya. Hargai karya orang lain. Sekian artikel saya kali ini. Semoga bermanfaat bagi kita semua. Jangan lupa untuk meninggalkan komentar, join this site, dan klik tombol like di bawah ini.

Cara Membuat Anime Bergerak Dan Berubah Di Header Blog Dengan Css

Oke, kali ini saya akn berbagi kepada kalian sebuah tutorial blog tentang bagaimana caranya membuat anime bergerak atau bergeser dan juga berubah di header blog saat di hover atau di arahi mouse menggunakan css. Mungkin kalian sudah pernah melihatnya di template blog saya yang sebelumnya, Blue Madness. Nah sekarang saya akan membagikan cara membuatnya. Jika kalian masih belum tahu, kalian bisa melihat contohnya di link di bawah ini :

Demo

Bagaimana? Kalian tertarik? Jika kalian ingin membuatnya, kalian bisa ikuti langkah di bawah ini. Namun, saya sarankan untuk terlebih dahulu belajar mengenai dasar css dan html. Berikut ini adalah caranya :

Pertama, buka dulu dasboard blog kalian.
Masuk ke menu Template.
Pilih Edit HTML.
Cari kode ]]></b:skin>.
Masukkan kode di bawah ini tepat di atas kode ]]></b:skin>.

div.Yondax {

background: url("http://i1273.photobucket.com/albums/y407/maskedx/smss_zps333f1dc9.png") no-repeat ;

-webkit-transition: all 560ms ease-out;

-moz-transition: all 560ms ease-out;

-ms-transition: all 560ms ease-out;

-o-transition: all 560ms ease-out;

transition: all 560ms ease-out;

margin:0px 0px 0px 300px;

position:absolute;

height: 200px;

width: 277px;

}

#header-wrapper:hover .Yondax {

margin:0px 0px 0px 490px;

opacity:0;

}

div.Yondax1 {

background: url("http://i1273.photobucket.com/albums/y407/maskedx/sms_zpsa1544df1.png") no-repeat;

-webkit-transition: all 560ms ease-out;

-moz-transition: all 560ms ease-out;

-ms-transition: all 560ms ease-out;

-o-transition: all 560ms ease-out;

transition: all 560ms ease-out;

margin:0px 0px 0px 405px;

position:absolute;

height: 200px;

width: 277px;

opacity:0;

}

#header-wrapper:hover .Yondax1 {

margin:0px 0px 0px 490px;

opacity:1;

}

Keterangan :

Kode yang ITALIC adalah kode saat gambar di arahi mouse.

Kode yang berwarna KUNING adalah url gambar sebelum diarahi mouse. Kalian bisa menggantinya dengan url gambar yang kalian inginkan.

Kode yang berwarna ORANGE adalah kode lamanya transisi dalam micro second. Kalian bisa mengaturnya sesuai keinginan.

Kode yang berwarna UNGU adalah kode margin (Letak posisi) gambar. Kalian bisa mengaturnya sendiri.

Kode yang berwarna HIJAU adalah kode jenis posisi gambar. Kalian bisa menggantinya, namun saya sarankan untuk membuarkannya absolute.

Kode yang berwarna CYAN adalah kode ukuran tinggi gambar. Kalian sesuaikan dengan tinggi gambar yang kalian gunakan.

Kode yang berwarna BIRU adalah kode ukuran lebar gambar. Kalian sesuaikan dengan lebar gambar yang kalian gunakan.

Kode yang berwarna PINK adalah kode margin (Letak posisi) gambar saat di arahi mouse. Atur supaya berbeda dengan kode margin yang berwarna UNGU supaya ketika di arahi mouse gambar akan bergerak.

Kode yang BOLD adalah url gambar saat diarahi mouse. Jika kalian buat berbeda dengan url gambar yang berwarna KUNING maka gambar akan berubah saat di arahi mouse. Jika kalian samakan maka gambar hanya akan bergerak atau bergeser.

Saya sarankan untuk menyamakan kode yang mempunyai warna sama.

Masih di Edit HTML, cari kode <header id="header-wrapper">. Jika tidak ada, carilah kode yang mirip.
Masukkan kode di bawah ini tepat di bawah kode <header id="header-wrapper"> :

<div class='Yondax'/>

<div class='Yondax1'/>

Sebelum kalian simpan, kalian preview terlebih dahulu dan lihat apakah sudah pas atau belum. Jika belum, kalian bisa mengatur kodenya lagi.
Jika sudah, sekarang tinggal kalian simpan.

Bagaimana? Sudah jadi bukan? Memang membingungkan, karena setiap template blog mempunyai ukuran dan kode yang berbeda beda. Oleh karena itu saya sarankan untuk terlebih dahulu mempelajari tentang dasar css dan html. sekian artikel saya kali ini. Semoga bermanfaat bagi kita semua. Jangan lupa untuk selalu mampir ke blog sederhana saya ini. Dan jangan lupa untuk selalu meninggalkan komentar dan klik tombol like di bawah ini.

Cara Membuat Tombol Follow Twitter Di Blog

Lama saya tidak update, kali ini saya akan berbagi kepada kalian sebuah tutorial tentang bagaimana caranya membuat atau lebih tepatnya memasang tombol/button follow akun twitter di blog dengan mudah. Dalam blogging, kita juga perlu memanfaatkan sosial media seperti twitter untuk menunjang blog kita. Untuk itu, kita perlu mempunyai follower twitter yang banyak. Nah, akan sangat sulit mendapat follower jika kita hanya memberikan link menuju twitter blog kita karena visitor mungkin malas atau tidak punya waktu untuk membuka twitter. Nah, hal itu bisa diatasi dengan membuat tombol follow twitter ini. Tinggal klik, langsung follow selesai. Untuk contoh tombolnya, kalian mungkin akan melihatnya di blog saya ini. Bagaimana? Apa kalian tertarik untuk memasangnya? Jika iya, kalian bisa mengikuti caranya di bawah ini :

Pertama, tentu saja kita harus mempunyai akun twitter. Jika belum, kalian bisa daftar terlebih dahulu.
Jika kalian sudah punya, langkah selanjutnya, klik link ini.
Pertama-tama kalian akan diarahkan ke adf.ly. Tunggu sekita 5 detik. Kemudian akan muncul Skip Ad di pojok kanan atas.
Kemudian kalian akan diarahkan ke tempat pembuatan tombol follow ini.
Pada Choose a button, pilih yang Follow.
Di bawahnya terdapat Button option. Isi user dengan username twitter kalian. Contoh : @Yondarkness, @FreeNum, dan sebagainya.
Untuk setting lainnya, kalian bisa sesuaikan sesuai selera kalian.
Jika sudah, kalian bisa melihat hasilnya di preview di samping bagian kanan.
Nah, di bawah preview ini terdapat sebuah kode seperti ini :

<a href="https://twitter.com/Yondarkness" class="twitter-follow-button" data-show-count="false">Follow @Yondarkness</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Kode inilah nanti yang akan kita butuhkan. Jika sudah puas dengan settingannya, copy kode tersebut.
Sekarang kita tinggal memasangnya.

Kalian bisa memasangnya di postingan, header, sidebar, footer, dimana saja bisa. Namun, saya hanya akan memberi caranya lewat tambah gadget blogger. Bagaimana caranya? Berikut ini adalah caranya :

Seperti biasa, masuk ke dasboard blog kalian.
Masuk ke pilihan Tata Letak (Layout).
Kemudian klik Tambah Gadget (Add a Gadget). Jika ada banyak, klik salah satu. Yang mana saja tidak masalah.
Pilih yang HTML/JavaScript.
Masukkan judul dan masukkan kode yang tadi kalian dapat pada konten.
Jika, sudah tinggal kita simpan.

Hasilnya nanti akan terlihat seperti ini :

Follow @Yondarkness

Bagaimana? Sukses bukan? Sekian artikel saya kali ini. Semoga bermanfaat bagi kita semua. Jangan lupa untuk terus mampir ke blog sederhana saya ini, tinggalkan komentar, dan klik tombol like di bawah ini. Follow twitternya juga tidak apa. Hehehe..

Cara Membuat Social Media Buttons Keren Melayang Di Samping Blog

Seperti biasanya, saya akan berbagi kepada kalian sebuah tutorial blogger. Kali ini adalah tutorial tentang bagaimana caranya membuat tombol sosial atau social button yang melayang di samping blog. Sosial button ini sangatlah penting bagi blog kita, oleh karena itu jika kalian belum punya di blog kalian, saya sarankan untuk mencobanya. Tenang saja, widget ini tidaklah berat alias ringan. Desainnya yang bagus ala Om-dayz.blogspot.com juga akan menunjang tampilan blog kalian. Untuk lebih jelasnya, kalian bisa melihat demonya di link di bawah ini :

Demo

Bagaimana? Bagus bukan? Kalian tertarik? Terus bagaimana cara membuatnya? Sabar. Berikut ini adalah caranya :

Pertama, buka dulu dasboard blog kalian.
Masuk ke menu Template.
Pilih Edit HTML.
Cari kode ]]></b:skin>.
Masukkan kode di bawah ini tepat di atas kode ]]></b:skin>.

.staticbar {position: fixed;right: 0;top: 35%;width: 25px;animation:static-bar .8s;-moz-animation:static-bar .8s; -webkit-animation:static-bar .8s;}
.staticbar:hover {z-index: 1000;}
.rt-social-buttons a, .loginbtn {background: none repeat scroll 0 0 #0e0e0e;background-repeat: no-repeat;display: block;height: 20px;margin-bottom: 3px;padding: 4px 0 4px 4px;right: 0px;width: 140px;position: relative;-moz-border-radius: 3px 0px 0px 3px;-webkit-border-radius: 3px 0px 0px 3px;-khtml-border-radius: 3px 0px 0px 3px;border-radius: 3px 0px 0px 3px;background-position: 4px 4px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;border:1px solid rgb(51, 51, 51)}
.rt-social-buttons span, .loginbtn span {background-repeat: no-repeat;color: #FFFFFF;display: block;font-size: 10px;height: 18px;letter-spacing: -1px;line-height: 1.9em;padding-left: 20px;text-transform: uppercase;text-shadow:0px 1px 1px rgba(0, 0, 0, 0.2);}
.rt-social-buttons a:hover, .loginbtn:hover {background: none repeat scroll 0 0 #4bb847;border:1px solid rgb(70, 0, 0);
right: 119px;}
.rt-social-buttons a#rt-buzz-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYAK7cfJyPaAkOSPvKbssLT8sGWJOtPRCav5dCnVj-0on9-qOYwdXT_9eHblyBdfm7x1QejuGcY_Jvd6xjT7JEwfq9jzA_hFNEoJFN5THrr1OCoj9f2Tov3oHGLIaUQCK2OgCJ3MbDf-w/s1600/socialsprite.png);background-position:-2px -68px;}
.rt-social-buttons a#rt-twitter-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYAK7cfJyPaAkOSPvKbssLT8sGWJOtPRCav5dCnVj-0on9-qOYwdXT_9eHblyBdfm7x1QejuGcY_Jvd6xjT7JEwfq9jzA_hFNEoJFN5THrr1OCoj9f2Tov3oHGLIaUQCK2OgCJ3MbDf-w/s1600/socialsprite.png);background-position:-2px -24px;}
.rt-social-buttons a#rt-facebook-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYAK7cfJyPaAkOSPvKbssLT8sGWJOtPRCav5dCnVj-0on9-qOYwdXT_9eHblyBdfm7x1QejuGcY_Jvd6xjT7JEwfq9jzA_hFNEoJFN5THrr1OCoj9f2Tov3oHGLIaUQCK2OgCJ3MbDf-w/s1600/socialsprite.png);background-position:-2px -46px;}
.rt-social-buttons a#rt-rss-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYAK7cfJyPaAkOSPvKbssLT8sGWJOtPRCav5dCnVj-0on9-qOYwdXT_9eHblyBdfm7x1QejuGcY_Jvd6xjT7JEwfq9jzA_hFNEoJFN5THrr1OCoj9f2Tov3oHGLIaUQCK2OgCJ3MbDf-w/s1600/socialsprite.png);background-position:-2px -89px;}
a.loginbtn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYAK7cfJyPaAkOSPvKbssLT8sGWJOtPRCav5dCnVj-0on9-qOYwdXT_9eHblyBdfm7x1QejuGcY_Jvd6xjT7JEwfq9jzA_hFNEoJFN5THrr1OCoj9f2Tov3oHGLIaUQCK2OgCJ3MbDf-w/s1600/socialsprite.png);background-position:-2px 0px;}
@keyframes static-bar{0% {right:-25px;} 100% {right:0px;}}
@-moz-keyframes static-bar{0% {right:-25px;} 100% {right:0px;}}
@-webkit-keyframes static-bar{0% {right:-25px;} 100% {right:0px;}}

Keterangan :

Kode yang berwarna BIRU adalah kode warna background tombol. Kalian bisa menggantinya sesuai keinginan.

Kode yang berwarna HIJAU adalah kode warna background tombol saat diarahi cursor. Kalian bisa menggantinya sesuai keinginan.

Untuk melihat kode warna, kalian bisa klik disini.

Masih di Edit HTML, cari kode </body>.
Masukkan kode di bawah ini tepat di atas kode </body> :

<div class="staticbar">
<div class="login">
<div id="rt-login-button">
<a class="loginbtn buttontext" href="http://blogger.com" rel="nofollow" target="_blank" title="Login Blogger">
<span class="desc">Blogger Login</span></a>
</div>
<div class="clear"></div>
</div>
<div class="rt-social-buttons">
<a class="lightbox" data-options="{"width":300, "height":430, "iframe": true}" href="https://facebook.com/pages/Yondarkness/372878842803751?ref=hl" id="rt-facebook-btn" rel="nofollow" title="Facebook Yondarkness">
<span> Facebook Fanspage</span></a>
<a class="lightbox" data-options="{"width":420, "height":405, "iframe": true}" href="https://www.twitter.com/yondarkness/" id="rt-twitter-btn" rel="nofollow" title="Twitter Yondarkness">
<span>Follow Me On Twitter</span></a>
<a href="https://plus.google.com/118163047156925704991" id="rt-buzz-btn" rel="nofollow" target="_blank" title="Google Plus Yondarkness">
<span>Circle Me On Google Plus</span></a>
<a href="http://www.yondarkness.com/" id="rt-rss-btn" rel="nofollow" target="_blank" title="RSS Yondarkness">
<span>Subscribe To RSS Feed</span></a>
</div>
</div>

Terakhir, tinggal kalian simpan.

Keterangan :

Kode yang berwarna UNGU adalah url Fanspage Facebook. Kalian ganti dengan url Fanspage Facebook kalian sendiri.

Kode yang berwarna PINK adalah url Twitter. Kalian ganti dengan url Twitter kalian sendiri.

Kode yang berwarna ORANGE adalah url Google Plus. Kalian ganti dengan url Google Plus kalian sendiri.

Kode yang berwarna CYAN adalah url RSS Blog. Kalian ganti dengan url RSS blog kalian sendiri.

Bagaimana? Sudah jadi bukan? Sekian tutorial saya kali ini. Semoga bermanfaat bagi kita semua. Saya berterima kasih juga kepada blog Om-Dayz. Jangan lupa untuk mampir ke blog saya lagi, tinggalkan komentar, dan klik tombol like di bawah ini.