Showing posts with label slider. Show all posts
Showing posts with label slider. Show all posts

Sunday, December 18, 2016

Cara Membuat Menu Slider dengan Sidr

Cara Membuat Menu Slider dengan Sidr


Sidr
Bagi anda Website designer ataupun website Developer tentunya butuh sesuatu yang Menarik untuk meraih pengunjung Yang besar.
Tapi terkadang kita terkendala karena masalah Tempat Widget, Menu pada blog atau website biasanya terletak pada bagian atas, namun jika sudah diisi oleh widget lain apa yang harus saya lakukan?
Jawabannya mudah, Gunakan menu Slider. Tapi bagaimana saya mendapatkannya ?

Sidr kini hadir membantu untuk anda yang sedang mencari Menu Slider yang Responsive dan hemat tempat untuk anda, Para website designer.


Source Code

Letakan kode CSS dibawah ini diatas ]]></b:skin atau </style>

.sidr{display:none;position:absolute;position:fixed;top:0;height:100%;z-index:999999;width:260px;overflow-x:none;overflow-y:auto;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:15px;background:#333;color:#fff;-webkit-box-shadow:inset 0 0 5px 5px #222;-moz-box-shadow:inset 0 0 5px 5px #222;box-shadow:inset 0 0 5px 5px #222}.sidr .sidr-inner{padding:0 0 15px}.sidr .sidr-inner>p{margin-left:15px;margin-right:15px}.sidr.right{left:auto;right:-260px}.sidr.left{left:-260px;right:auto}.sidr h1,.sidr h2,.sidr h3,.sidr h4,.sidr h5,.sidr h6{font-size:11px;font-weight:normal;padding:0 15px;margin:0 0 5px;color:#fff;line-height:24px;background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #1a1a1a));background-image:-webkit-linear-gradient(#4d4d4d,#1a1a1a);background-image:-moz-linear-gradient(#4d4d4d,#1a1a1a);background-image:-o-linear-gradient(#4d4d4d,#1a1a1a);background-image:linear-gradient(#4d4d4d,#1a1a1a);-webkit-box-shadow:0 5px 5px 3px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 5px 3px rgba(0,0,0,0.2);box-shadow:0 5px 5px 3px rgba(0,0,0,0.2)}.sidr p{font-size:13px;margin:0 0 12px}.sidr p a{color:rgba(255,255,255,0.9)}.sidr>p{margin-left:15px;margin-right:15px}.sidr ul{display:block;margin:0 0 15px;padding:0;border-top:1px solid #1a1a1a;border-bottom:1px solid #4d4d4d}.sidr ul li{display:block;margin:0;line-height:48px;border-top:1px solid #4d4d4d;border-bottom:1px solid #1a1a1a}.sidr ul li:hover,.sidr ul li.active,.sidr ul li.sidr-class-active{border-top:none;line-height:49px}.sidr ul li:hover>a,.sidr ul li:hover>span,.sidr ul li.active>a,.sidr ul li.active>span,.sidr ul li.sidr-class-active>a,.sidr ul li.sidr-class-active>span{-webkit-box-shadow:inset 0 0 15px 3px #222;-moz-box-shadow:inset 0 0 15px 3px #222;box-shadow:inset 0 0 15px 3px #222}.sidr ul li a,.sidr ul li span{padding:0 15px;display:block;text-decoration:none;color:#fff}.sidr ul li ul{border-bottom:none;margin:0}.sidr ul li ul li{line-height:40px;font-size:13px}.sidr ul li ul li:last-child{border-bottom:none}.sidr ul li ul li:hover,.sidr ul li ul li.active,.sidr ul li ul li.sidr-class-active{border-top:none;line-height:41px}.sidr ul li ul li:hover>a,.sidr ul li ul li:hover>span,.sidr ul li ul li.active>a,.sidr ul li ul li.active>span,.sidr ul li ul li.sidr-class-active>a,.sidr ul li ul li.sidr-class-active>span{-webkit-box-shadow:inset 0 0 15px 3px #222;-moz-box-shadow:inset 0 0 15px 3px #222;box-shadow:inset 0 0 15px 3px #222}.sidr ul li ul li a,.sidr ul li ul li span{color:rgba(255,255,255,0.8);padding-left:30px}.sidr form{margin:0 15px}.sidr label{font-size:13px}.sidr input[type="text"],.sidr input[type="password"],.sidr input[type="date"],.sidr input[type="datetime"],.sidr input[type="email"],.sidr input[type="number"],.sidr input[type="search"],.sidr input[type="tel"],.sidr input[type="time"],.sidr input[type="url"],.sidr textarea,.sidr select{width:100%;font-size:13px;padding:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;border:none;background:rgba(0,0,0,0.1);color:rgba(255,255,255,0.6);display:block;clear:both}.sidr input[type=checkbox]{width:auto;display:inline;clear:none}.sidr input[type=button],.sidr input[type=submit]{color:#333;background:#fff}.sidr input[type=button]:hover,.sidr input[type=submit]:hover{background:rgba(255,255,255,0.9)}

Lalu taruh Kode JS dibawah diatas kode </body>

<script src="http://demo.dfc48.hol.es/js/jquery.sidr.min.js"></script>

Penggunaan

Untuk Simple Menu :


<a id="simple-menu" href="#sidr">Menu</a>
 
<div id="sidr-left1">
<!-- Your content -->
<ul>
<li><a href="#">List 1</a></li>
<li class="active"><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
 
<script>
$(document).ready(function() {
 $(#simple-menu).sidr({
 name: sidr-left1,
 side: left // By default
 });
 });
</script>

Penjelasan Simple Menu :
  1. Menu : adalah tulisan/teks yang akan ditampilkan di halaman muka
  2. List 1, List 2, List 3: adalah menu yang ditentukan ( silahkan edit sesuka hati )
  3. sidr-left1 : adalah kode untuk memanggil JavaScript
Jika ingin membuat 2 atau lebih menu yang sama, Gunakan id yang berbeda ( contoh diatas menggunakan id
sidr-left1 )

Untuk Left/Right Menu :


<a id="left-menu" href="#left-menu">Left Menu</a> 
<a id="right-menu" href="#right-menu">Right Menu</a>
<div id="sidr-left">
<!-- Your content -->
<ul>
<li><a href="#">List 1</a></li>
<li class="active"><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
<div id="sidr-right">
<!-- Your content -->
<ul>
<li><a href="#">List 1</a></li>
<li class="active"><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
 
<script>
$(document).ready(function() {
 $(#left-menu).sidr({
 name: sidr-left,
 side: left // By default
 });
 $(#right-menu).sidr({
 name: sidr-right,
 side: right
 });
 });
</script>

Penjelasan Untuk Left/Right Menu :
  1. Left Menu, Right Menu :  adalah tulisan/teks yang akan ditampilkan di halaman muka
  2. List 1, List 2, List 3: adalah menu yang ditentukan ( silahkan edit sesuka hati )
  3. sidr-left dan sidr-right : adalah kode untuk memanggil JavaScript
Jika ingin membuat 2 atau lebih menu yang sama, Gunakan id yang berbeda ( contoh diatas menggunakan id
sidr-left dan sidr-right )

Go to link Download

Read more »
Posted by at
Labels: , , , , ,

Tuesday, November 1, 2016

Cara Membuat Featured Post Content Slider Image

Cara Membuat Featured Post Content Slider Image


Cara Membuat Featured Post Content Slider Image di Halaman Depan Blog yang SEO & User Friendly. 

SEBELUMNYA CB pernah share tentang Featured Content Slider di Homepage Blog Tidak Bagus buat SEO. Di sana disebutkan, hasil survei soal gambar slider / carousel image di sejumlah blog/website di halaman depan (homepage) ternyata buruk buat SEO dan jelek pula kegunaannya (tidak user friendly), hanya bikin silau mata! Yang ngeklik juga cuma 1%, kecil bingit!

Namun, jika masih merasa butuh menampilkan Featured Post Content Slider Image/Gambar di Home, maka pastikan dua hal ini:
  1. Slider tidak otomatis bergerak (automatic slides)! Matikan fungsi otomatis gerakannya!
  2. Pastikan judul postingnya menggunakan Heading Tag H2 atau H3. Jika menggunakan H1, silakan ganti.
Kedua hal itulah sumber masalah Featured Post Content Slider Image yang menjadikannya tidak seo dan user friendly.

FUNGSI FEATURED POST/IMAGE SLIDER
Featured Post Content Slider Image/Gambar sering digunakan oleh situs web/blog toko online, blog jasa/produk, dan situs berita. Toko Online atau web bisnis biasnaya menampilkan produk/jasa. Situs berita menampilkan Headline News.

Posting berikut ini sekadar "menyimpan" tips desain blog tentang cara Membuat Featured Post Content Slider Image yang di-share Maskolis baik Versi 1 maupun Versi 2. Jika ingin menampilkan satu posting saja di Featured Post di halaman depan tanpa slider, silakan cek  Cara Membuat Featured Post Tanpa Slider ala New Johny Wuss.

CB share di sini dua jenis Featured Post Content Slider Image sebagaimana tampak dalam ilustrasi gambarnya. 

Cara Membuat Featured Post Content Slider Image

VERSI 1 - Thumbnail di Bawah Gambar Utama

Featured Post Content Slider Image

Cara Membuatnya:
1. Template > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin> 

#featuredContent{float:left;width:407px;margin-right:10px;display:inline}
#featured-slider{position:relative;overflow:hidden;width:407px;height:245px}
#featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:407px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFxJfrZ-bABtQlArlIYZfydfJX4MsYizMPsmEt-Zlzq1ghf1ugubst3RHhqzeK61F27db7uh3upOhO4rvQgWrgaIgDMjBqfTkPkkWLZ4rXsrej_OonVV_dLBCCX1-mp2tNH9aQ1IQ4IQGl/s1600/transparant.png)}
#featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
#featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
#paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}
#paginate-featured-slider ul{width:415px;padding-bottom:0;list-style:none}
#paginate-featured-slider ul li{display:inline;width:75px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
#paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
#paginate-featured-slider a img{border-top:4px solid #f0f0f0}
#paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}

.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
word-wrap: break-word; overflow: hidden;} 
.slide {color: #666666;line-height: 1.3em;}
.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.slide li {margin:0;padding-top:0;
padding-right:0;padding-bottom:.25em;
padding-left:0px;text-indent:0px;line-height:1.3em;}

.slide .widget {margin:0px 0px 6px 0px;}

Angka berwarna merah adalah ukuran Panjang dan Lebar Slider. Silahkan sesuaikan dengan "kondisi" template Anda. Demikian pula angka berwarna merah di kode no. 3 di bawah ini.
3. Copas kode berikut ini di atas kode <head> 

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js type=text/javascript/> // Kode ini gak perlu diikutkan jika di template Anda sudah ada, cek ada dengan Ctrl+F lalu ketik jquery dan tekanEnter

<script src=http://yourjavascript.com/222517121138/contentslider.js type=text/javascript/>
<script type=text/javascript>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhNVIRD3E8W8fepYUTZssrecd0O8Hpnrv0WPKczZOQBwIiY83muTVTfxrXHaCpIrMqLjB-PbfVRKvUgcCEKyXqUkuS-5sTJn7mvRZyJ62pkgLLs0_qmRAcSMUFLuqpbP99Ok-prAYguEY/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 100;
summaryTitle = 25;

numposts3 = 5;

function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}

s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts3(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts3; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == alternate) {
                posturl = entry.link[k].href;
                break;
              }
        }
        
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == replies && entry.link[k].type == text/html) {
                pcm = entry.link[k].title.split(" ")[0];
                break;
              }
        }
        
        if ("content" in entry) {
              var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
              var postcontent = entry.summary.$t;}
        else var postcontent = "";
        
        postdate = entry.published.$t;
    
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
    
    s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src="",a); c = s.indexOf(""",b+5); d = s.substr(b+5,c-b-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    //cmtext = (text != no) ? <i><font color="+acolor+">(+pcm+ +text+)</font></i> : ;


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
        if(parseInt(m)==month[u2]) {
            m = month2[u2] ; break;
        }
    }

    var daystr = day+ + m + + y ;

    var trtd = <div class="contentdiv"><a href="+posturl+"><img width="407" height="240" class="alignnone" src="+img[i]+"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="+posturl+">+posttitle+</a></h2><p>+removeHtmlTag(postcontent,summaryPost)+...</p></div></div>;
    document.write(trtd);


    j++;
}

}

function showrecentposts4(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts3; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == alternate) {
                posturl = entry.link[k].href;
                break;
              }
        }
        
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == replies && entry.link[k].type == text/html) {
                pcm = entry.link[k].title.split(" ")[0];
                break;
              }
        }
        
        if ("content" in entry) {
              var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
              var postcontent = entry.summary.$t;}
        else var postcontent = "";
        
        postdate = entry.published.$t;
    
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
    
    s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src="",a); c = s.indexOf(""",b+5); d = s.substr(b+5,c-b-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    //cmtext = (text != no) ? <i><font color="+acolor+">(+pcm+ +text+)</font></i> : ;


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
        if(parseInt(m)==month[u2]) {
            m = month2[u2] ; break;
        }
    }

    var daystr = day+ + m + + y ;

    var trtd = <li><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="+img[i]+"/></a></li>;
    document.write(trtd);

    j++;
}

}

//]]>
</script>

4. Copas kode berikut ini di bawah kode <div id=main-wrapper> atau yang sejenisnya.

<b:if cond=data:blog.url == data:blog.homepageUrl>
      <div id=slide-wrapper>
<b:section class=slide id=slide preferred=yes/>
      </div>
</b:if>

5. Save Template!

6. Klik "Layout" dan akan tampak Widget Baru di atas "Blog Posts" seperti tampak dalam gambar di bawah ini. Jika tidak ada, cobra "Refresh Page" (Tekan F5). 

Featured Post Content Slider Image

6. Klik "Edit" dan Copas kode berikut ini ke dalam "Content".

<div id=featuredContent>
<div class=sliderwrapper id=featured-slider>
<script>
document.write("<script src="/feeds/posts/default/-/Label?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3"></script>");
</script>
</div>
<div id=paginate-featured-slider>
<ul>
<script>
document.write("<script src="/feeds/posts/default/-/Label?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4"></script>");
</script>
</ul>
<div class=clear></div>
</div>
<script type=text/javascript>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>

Catatan:
1. Ganti Label dengan nama label posting yang akan ditampilkan di Featured Post Content Slider Image.
2. Jika ingin menampilkan Posting Terbaru otomatis muncul di sana, maka HAPUS kode /-/Label sehingga menjadi begini: .... feeds/posts/default?max-results ...

7. Save!!! 
Featured Post Content Slider Image mestinya sudah muncul.

Cara Membuat Featured Post Content Slider Image

VERSI 2 - Thumbnail Image di Samping Gambar Utama

Featured Post Content Slider Image


CARA MEMBUAT
Tahapan Membuatnya kurang lebih sama dengan cara di atas, cuma beda kode dikit.

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>

#featured{width:640px;height:250px;position:relative;margin:0;padding:0}
#featured ul.ui-tabs-nav{position:absolute;top:0;right:0;list-style:none;width:240px;height:250px;margin:0;padding:0}
#featured ul.ui-tabs-nav li{position:relative;line-height:1.3em;padding:0}
#featured ul.ui-tabs-nav li span{font:bold 12px Arial;line-height:1.3em;color:#000;margin:0;padding:0}
#featured .ui-tabs-panel{width:400px;height:250px;background:#ddd;position:relative;overflow:hidden}
#featured .ui-tabs-panel img{width:400px;height:250px}
#featured .ui-tabs-hide{display:none}
#featured li.ui-tabs-nav-item a{display:block;width:215px;height:57px;color:#000;overflow:hidden;background:#ddd;border-left:10px solid #999;line-height:1.4em;outline:none;margin:0 0 2px;padding:2px 10px 2px 5px}
#featured li.ui-tabs-nav-item a:hover{border-left:10px solid #555;background:#ccc}
#featured li.ui-tabs-selected{position:absolute}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{background:#aaa;display:block;border-left:10px solid #444}
#featured ul.ui-tabs-nav li img{width:75px;height:48px;float:left;background:#333;border:none;margin:4px 7px 4px 0;padding:0}
#featured .ui-tabs-panel .info{position:absolute;top:179px;left:0;height:71px;width:400px;background:#000;opacity:0.80;filter:alpha(opacity=80)}
#featured .info a{text-decoration:none;color:#eee}
#featured .info a:hover{color:#FE9A2E;text-decoration:underline}
#featured .info h2{font-size:15px;font-family:Arial, serif;color:#fff;overflow:hidden;margin:0;padding:5px}
#featured .info p{font-family:Arial;font-size:11px;line-height:15px;color:#f0f0f0;margin:0 5px}

.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
word-wrap: break-word; overflow: hidden;}
.slide {color: #666666;line-height: 1.3em;}
.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.slide li {margin:0;padding-top:0;
padding-right:0;padding-bottom:.25em;
padding-left:0px;text-indent:0px;line-height:1.3em;}
.slide .widget {margin:0px 0px 6px 0px;}  

3. Copas kode berikut di atas kode </head>

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js type=text/javascript/> // Kode ini gak perlu diikutkan jika di template Anda sudah ada, cek ada dengan Ctrl+F lalu ketik jquery dan tekanEnter

<script src=http://yourjavascript.com/511211242172/jquery-ui.min.js type=text/javascript/>
<script type=text/javascript>
    $(document).ready(function(){
        $(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 4000, true);
    });
</script>

<script type=text/javascript>
//<![CDATA[
   imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhNVIRD3E8W8fepYUTZssrecd0O8Hpnrv0WPKczZOQBwIiY83muTVTfxrXHaCpIrMqLjB-PbfVRKvUgcCEKyXqUkuS-5sTJn7mvRZyJ62pkgLLs0_qmRAcSMUFLuqpbP99Ok-prAYguEY/s1600/no+image.jpg";

showRandomImg = true;

aBold = true;

summaryPost = 70;
summaryTitle = 20;

numposts1 = 4;

function removeHtmlTag(strx,chop){
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
        if(s[i].indexOf(">")!=-1){
            s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
        }
    }
    s =  s.join("");
    s = s.substring(0,chop-1);
    return s;
}

function showrecentposts4(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 

Go to link Download

Read more »
Posted by at
Labels: , , , , , ,

Monday, October 17, 2016

Cara Membuat Slot Banner Slider Menjadi 2 Bagian

Cara Membuat Slot Banner Slider Menjadi 2 Bagian



Halo Sobat....
Kali ini saya akan post Cara Membuat  Slot Banner Slider Menjadi 2 Bagian. Mungkin kalo sobat ingin liat Demonya sobat bisa liat diatas post ini atau SS diatas!!..  Yuk langsung saja liat caranya..

Pertama yang pastinya sobat masuk Blogger
Kemudian Dashboard ---> Template ---> Edit Html

Kemudian, Sobat Masukkan CSSnya dulu ya...
Cari Kode CSS ]]></b:skin> Agar lebih mudah pencarian sobat gunakan Tombol Ctrl+F

Jika sudah ketemu, Sobat masukkan kode dibawah ini tepat diatas kode ]]></b:skin>

/*ARSlider*/
#slider4 {
background:rgba(7,111,192, .7);
border:5px solid #0000ff;;
width: 468px;
height: 60px;
top:0px;
right:-2px;
margin-top:20px;
margin-bottom:20px;
margin-left:50px;
overflow: hidden;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
}
#mask4 {
overflow:hidden;
}
#slider4:hover #pause {
opacity:1;
}
#slider4:hover #progress {
background-color:#DDD;
}
#slider4:hover ul, #slider4:hover #progress, #slider4:hover #overlay {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#pause4 {
width:468px;
height:60px;
position:absolute;
top:0;
opacity:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#progress4 {
width:1px;
height:1px;
background-color:transparent;
-moz-animation:progress 35s infinite;
-webkit-animation:progress 35s infinite;
position:relative;
top:-1px;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#overlay4 {
width:4680px;
height:60px;
position:absolute;
top:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
opacity:0.5;
-moz-animation:overlay-fade 35s infinite;
-webkit-animation:overlay-fade 35s infinite;
}
#slider4 ul {
width:2400px;
list-style:none;
padding:0;
margin:0;
-moz-animation:slide-animation 35s infinite;
-webkit-animation:slide-animation 35s infinite;
position:relative;
left:0px;
overflow:hidden;
}
#slider4 li {
display:inline;
width:468px;
height:60px;
margin:0;
padding:0;
float:left;
position:relative;
}
#slider4 li:last-of-type {
background-color:#362c30;
}
#slider4 li a {
display:block;
text-decoration:none;
}
#slider4 li span {
display:block;
width:560px;
padding:15px 20px;
position:absolute;
bottom:0;
left:0;
background-color:rgba(54,44,48,0.6);
border-top:1px solid #000000;
text-shadow:1px 1px 1px #362c30;
pointer-events:none;
text-align:left;
}
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
#slider4 ul li span h2 {
font-size:24px;
line-height:24px;
color:#fff;
font-weight:normal;
font-family:Communist-Regular;
text-shadow:1px 1px 1px #362c30;
}
/*ARSlider*/
#slider3 {
background:rgba(7,111,192, .7);
border:5px solid #0000ff;;
width: 468px;
height: 60px;
top:0px;
right:-2px;
margin-top:20px;
margin-bottom:20px;
margin-left:50px;
overflow: hidden;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
}
#mask1 {
overflow:hidden;
}
#slider3:hover #pause1 {
opacity:1;
}
#slider3:hover #progress1 {
background-color:#DDD;
}
#slider3:hover ul, #slider:hover #progress1, #slider:hover #overlay1 {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#pause {
width:468px;
height:60px;
position:absolute;
top:0;
opacity:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#progress {
width:1px;
height:1px;
background-color:transparent;
-moz-animation:progress 35s infinite;
-webkit-animation:progress 35s infinite;
position:relative;
top:-1px;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#overlay {
width:4680px;
height:60px;
position:absolute;
top:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
opacity:0.5;
-moz-animation:overlay-fade 35s infinite;
-webkit-animation:overlay-fade 35s infinite;
}
#slider3 ul {
width:2400px;
list-style:none;
padding:0;
margin:0;
-moz-animation:slide-animation 35s infinite;
-webkit-animation:slide-animation 35s infinite;
position:relative;
left:0px;
overflow:hidden;
}
#slider3 li {
display:inline;
width:468px;
height:60px;
margin:0;
padding:0;
float:left;
position:relative;
}
#slider3 li:last-of-type {
background-color:#362c30;
}
#slider3 li a {
display:block;
text-decoration:none;
}
#slider3 li span {
display:block;
width:560px;
padding:15px 20px;
position:absolute;
bottom:0;
left:0;
background-color:rgba(54,44,48,0.6);
border-top:1px solid #000000;
text-shadow:1px 1px 1px #362c30;
pointer-events:none;
text-align:left;
}
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
#slider3 ul li span h2 {
font-size:24px;
line-height:24px;
color:#fff;
font-weight:normal;
font-family:Communist-Regular;
text-shadow:1px 1px 1px #362c30;
}

Keterangan:
Jika Sobat ingin mengganti warna garis Kotak Banner, Sobat bisa ganti tulisan Warna Biru, Dengan kode warna Sobat inginkan.

Setelah itu, Masukkan Kode Htmlnya.
Cari Kode <div id=content-wrapper> atau <div id=content> atau <div id=wrapper> Sebenarnya sih tergantung Template sobat ya, karena setiap template biasanya berbeda.

Setelah menemukan salah satu kode Diatas, Letakkan kode dibawah ini tepat diatas <div id=content-wrapper> atau <div id=content> atau <div id=wrapper>

<div id=slider3>
<div id=mask1>
<ul><li>
<a href=http://anonymous-revenge.blogspot.com/> <img alt=AR src=http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png title=Anonymous Revenge/></a></li>
<li>
<a href=http://anonymous-revenge.blogspot.com/> <img alt=AR src=http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png title=Anonymous Revenge/></a></li>
<li>
<a href=http://anonymous-revenge.blogspot.com/> <img alt=AR src=http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png title=Anonymous Revenge/></a></li>
<li>
<a href=http://anonymous-revenge.blogspot.com/> <img alt=AR src=http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png title=Anonymous Revenge/></a></li>
</ul>
</div>
<div id=progress1/>
<div id=overlay1/>
<div id=pause1/>
</div>
  </div>
<div style=float:right;margin-right:50px;>
<div id=slider4>
<div id=mask4>
<ul><li>
<a href=http://anonymous-revenge.blogspot.com/> <img alt=AR src=http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png title=Anonymous Revenge/></a></li>
<li>
<a href=http://anonymous-revenge.blogspot.com/> <img alt=AR src=http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png title=Anonymous Revenge/></a></li>
<li>
<a href=http://anonymous-revenge.blogspot.com/> <img alt=AR src=http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png title=Anonymous Revenge/></a></li>
<li>
<a href=http://anonymous-revenge.blogspot.com/> <img alt=AR src=http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png title=Anonymous Revenge/></a></li>
</ul>
</div>
<div id=progress4/>
<div id=overlay4/>
<div id=pause4/>
</div>
  </div>

Keterangan:
Tulisan Warna Merah ubah dengan kode Banner Sobat,


Setelah itu, Pratinjau Dahulu Sebelum Disimpan.
Jika Sudah pas, Sobat bisa Simpan.

Dan,, Selesai.

Sekian Artikel Hari ini Yang Dapat Saya Sampaikan Dengan Artikel Berjudul "Cara Membuat Slot Banner Slider Menjadi 2 Bagian" Semoga Artikel Ini Bermanfaat Bagi Sobat Dan Dapat Menambah Ilmu.

Special Thanks:
CSS By: Angwyn [AH-Shared]
Teman" Yang sudah Membaca Artikel Ini

Copas?? Sertakan Link Sumber. Gak ada Link sumber?? Dosa Tanggung Sendiri!!

Sumber : http://anonymous-revenge.blogspot.com

Go to link Download

Read more »
Posted by at
Labels: , , , , , , ,

Friday, October 14, 2016

Cara Membuat Banner 468x60 Slider Di Header

Cara Membuat Banner 468x60 Slider Di Header


 Kali Ini Dark Gmesoft Mau share " Cara Membuat Banner slider 468x60 Di Header"

Tutor Ini Sebenernya Sudah Lama Saya Buat Tapi Saya Mau Share Lagi Karna Blog Saya Yang Lama Telah Di Hapus Google :v Padahal Viewers nya Perhari Udah Banyak
Udahlah Lupakan :v







Contohnya Di Header Blog Saya Yang Lama


Gimana ?? tertarik .. Silahkan Ikuti Langkah Langkahnya

1.Buka Blogger
2.Edit HTML
3.Letakan Kode Ini Di Atas ]]></b:skin> , Agar Lebih mudah Gunakan Ctrl + F
#slider2 {
width: 468px;
height: 60px;
margin-left:125px;
margin-top:230px;box-shadow: 2px 2px 10px #000;

overflow: hidden;
background-color: #221f21;
border-top: 5px solid #000;
border-right: 25px solid #000;
border-left: 25px solid #000;
border-bottom: 5px solid #000;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
border-radius: px px px px;




}
#slider2 img{opacity:1;
-webkit-filter: saturate(0.0);
-moz-filter: saturate(0.0);
-ms-filter: saturate(0.0);
-o-filter: saturate(0.0);
filter: saturate(0.0);
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;}
#slider2 img:hover{opacity:1.0;
-webkit-filter: saturate(1.0);
-moz-filter: saturate(1.0);
-ms-filter: saturate(1.0);
-o-filter: saturate(1.0);
filter: saturate(1.0);
-webkit-transition:all .1s ease-in-out;
-moz-transition:all .1s ease-in-out;
-ms-transition:all .1s ease-in-out;
-o-transition:all .1s ease-in-out;
transition:all .1s ease-in-out;}
#mask {
overflow:hidden;
}
#slider2:hover {
background-color:#221f21;
border-top: 5px solid #0bbd00;
border-right: 25px solid #0bbd00;
border-left: 25px solid #0bbd00;
border-bottom: 5px solid #0bbd00;
border-radius: px px px px;
}
#slider2:hover #pause {
opacity:1;
}
#slider2:hover #progress {
background-color:rgba(255,255,255,0.0);
}
#slider2:hover ul, #slider:hover #progress, #slider:hover #overlay {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#pause {
width:468px;
height:60px;
position:absolute;
top:0;
opacity:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#progress {
width:1px;
height:1px;
background-color:#000000;
-moz-animation:progress 35s infinite;
-webkit-animation:progress 35s infinite;
position:relative;
top:-1px;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#overlay {
width:4680px;
height:60px;
position:absolute;
top:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
opacity:0.5;
-moz-animation:overlay-fade 35s infinite;
-webkit-animation:overlay-fade 35s infinite;
}
#slider2 ul {
width:2400px;
list-style:none;
padding:0;
margin:0;
-moz-animation:slide-animation 35s infinite;
-webkit-animation:slide-animation 35s infinite;
position:relative;
left:0px;
overflow:hidden;
}
#slider2 li {
display:inline;
width:468px;
height:60px;
margin:0;
padding:0;
float:left;
position:relative;
}
#slider2 li:last-of-type {
background-color:#272727;
}
#slider2 li a {
display:block;
text-decoration:none;
}
#slider2 li span {
display:block;
width:560px;
padding:15px 20px;
position:absolute;
bottom:0;
left:0;
background-color:rgba(54,44,48,0.6);
border-top:1px solid #362c30;
text-shadow:1px 1px 1px #362c30;
pointer-events:none;
text-align:left;
}
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
#slider2 ul li span h2 {
font-size:24px;
line-height:24px;
color:#fff;
font-weight:normal;
font-family:Communist-Regular;
text-shadow:1px 1px 1px #362c30; 
}

4.Dan Letakan Kode Ini Dibawah Kode <div id=header-wrapper>

<a href=http://cevinfirman007.blogspot.com target=_blank><img src=http://i1317.photobucket.com/albums/t622/Latu_Alam_Saputra/BannerTeman468x602_zpsa34a012d.gif/></a>
<a href=http://cevinfirman007.blogspot.com target=_blank><img src=http://i1317.photobucket.com/albums/t622/Latu_Alam_Saputra/BannerTeman468x602_zpsa34a012d.gif/></a>

<li><a href=http://ichalilmu.blogspot.com/><img alt=Orblues banner src=http://i.imgur.com/HtCm0bW.png/></a>
</li>
<a href=http://cevinfirman007.blogspot.com target=_blank><img src=http://i1317.photobucket.com/albums/t622/Latu_Alam_Saputra/BannerTeman468x602_zpsa34a012d.gif/></a>
</li>
</ul>
</div>
<div id=progress>
</div><div id=overlay>
</div><div id=pause>
        </div></div>   

5.Klik Simpan

Go to link Download

Read more »
Posted by at
Labels: , , , , , ,
Subscribe to: Posts (Atom)