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.