Sedikit Info Seputar Membuat Slider Otomatis Sporty Magazine 2 Template Terbaru 2017 - Hay gaes kali ini team Game Android Apk, kali ini akan membahas artikel dengan judul Membuat Slider Otomatis Sporty Magazine 2 Template, kami selaku Team Game Android Apk telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Game Android Apk. semoga isi postingan tentang Artikel slider, Artikel tutorial blog, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Membuat Slider Otomatis Sporty Magazine 2 Template Terbaru
link: Membuat Slider Otomatis Sporty Magazine 2 Template

Berbagi Membuat Slider Otomatis Sporty Magazine 2 Template Terbaru dan Terlengkap 2017

Tutorial kali ini menjawab pertanyaan dari Mr. Copas pada artikel membuat Image Slider Otomatis, yang menginginkan slider pada template Sporty Magazine 2 made in Borneo Templates yang dipakainya menjadi otomatis. Ketika saya berselancar atau bahasa kerennya surfing di internet, beberapa kali menemukan banyak sekali pengguna template ini baik dari dalam maupun dari luar negeri. Template ini memang fenomenal dan banyak sekali peminatnya, dengan tampilan dasar mirip nbcsports.msnbc.com, template ini menjadi salah satu template blogger dengan pengguna paling banyak.

Pada kesempatan kali ini saya akan mencoba untuk membuat slider bawaan dari template tersebut yang masih mengisikan URL dan keterangan slider satu persatu, menjadi otomatis. Tinggal memasukkan beberapa kode ke kotak HTML/Javascript dengan merubah label tertentu, maka slider pada template ini menjadi otomatis, Sehingga setiap postingan baru dengan label yang diletakkan pada slider, secara otomatis akan muncul.

DEMO

Langsung saja pada langkah pembuatannya :

Masuk ke Blogger dengan akun anda
Di dashboard pilih blog, kemudian pilih template >> Edit HTML. Jangan lupa untuk mencentang kotak Expand Widget Templates.
Setelah itu letakkan kode berikut ini diatas 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}
Catatan :
Bagi pengguna template Sporty Magazine 2 langkah itu tidak perlu dilakukan karena kode ini sudah ada. Untuk pengguna template lain, silahkan ukurannya disesuaikan.
Masih dalam posisi Edit HTML, letakkan kode berikut diatas kode </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/511211242172/jquery-ui.min.js' type='text/javascript'/>

<script type='text/javascript'>
    $(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000, true);
    });
</script>

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

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz2T8k2kUfDLFUgxsAtjKlztloqfl7dEdOKSy2yITh6qGTF6LD1q5GEPIuc3fAEckErusGQyAoTvCnxhPSx49_M8HWewfy9i1h84QBKYUq5vPJJ5vsxTMIBSKVZ6QZcd5v8DC25OlSQTs/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;
    img = new Array();

    for (var i = 0; i < numposts1; 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 = (showPostDate) ? '<i><font color="'+acolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";

    var trtd = '<div class="ui-tabs-panel ui-tabs-hide" id="post-'+i+'"><a href="'+posturl+'"><img width="400" height="246" src="'+img[i]+'"/></a><div class="info"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...<a href="'+posturl+'"></a></p></div></div>';

    document.write(trtd);

    j++;
}

}

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

    for (var i = 0; i < numposts1; 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 = (showPostDate) ? '<i><font color="'+acolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";

    var trtd = '<li id="nav-post-'+i+'" class="ui-tabs-nav-item"><a href="#post-'+i+'"><img width="80" height="50" src="'+img[i]+'"/><span>'+posttitle+'</span></a></li>';

    document.write(trtd);

    j++;
}

}

//]]>
</script>
Catatan :
Untuk pengguna template Sporty Magazine 2, hapus dulu kode script bawaan slider, kemudian baru letakkan kode diatas.
Setelah langkah diatas, save templates terlebih dahulu. Setelah itu menuju ke layout >> add gadget masukkan kode ini pada kotak HTML/Javascript :
<div id='featured'>
<ul class="ui-tabs-nav">
<script>
document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts5\"><\/script>");
</script>
</ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</div>
Keterangan :
Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan.

Untuk pengguna template Sporty Magazine 2, tinggal memasukkan kode diatas pada kolom kosong diatas blog post (kalau tidak salah... hehehe). Dan untuk pengguna lain mesti buat dulu satu kolom diatas blog post. Langsung saja letakkan kode berikut di atas kode ]]></b:skin>

/* Slide Content
----------------------------------------------- */
.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;}

Kemudian untuk memunculkannya pada layout (diatas blog post), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :

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

Selamat mencoba dan semoga bermanfaat.

Itulah sedikit Artikel Membuat Slider Otomatis Sporty Magazine 2 Template terbaru dari kami

Semoga artikel Membuat Slider Otomatis Sporty Magazine 2 Template yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Game Android Apk. jangan lupa baca juga artikel-artikel lain dari kami.

Terima kasih Anda baru saja membaca Membuat Slider Otomatis Sporty Magazine 2 Template

Game Android Apk

Cara Download Membuat Slider Otomatis Sporty Magazine 2 Template Update Terbaru

Berbagi Membuat Slider Otomatis Sporty Magazine 2 Template Terbaru dan Terlengkap 2017

Itulah sedikit Artikel Membuat Slider Otomatis Sporty Magazine 2 Template terbaru dari kami

Share this

Related Articles :

Entri Populer