منتديات الهجان
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

منتديات الهجان


 
الرئيسيةأحدث الصورالتسجيلدخول

 

 سلايد شو متطورة جدا

اذهب الى الأسفل 
كاتب الموضوعرسالة
الهجان
مستر وليد فريد
مستر وليد فريد
الهجان


ادعية لوجة الله : هوا الله
السرطان ذكر
عدد المساهمات : 4697
تاريخ الميلاد : 04/07/1975
تاريخ التسجيل : 21/09/2009
العمر : 48

سلايد شو متطورة جدا Empty
مُساهمةموضوع: سلايد شو متطورة جدا   سلايد شو متطورة جدا Icon_minitimeالأحد فبراير 16 2014, 20:42

Gambar slideshow yang sering kita lihat di bawah header atau sering disebut sebagai image slider banyak sekali menghiasi halaman pada sebuah blog. Sekarang ini banyak sekali template blogger yang bagus dan dihiasi dengan berbagai macam slider yang tujuannya untuk memperindah tampilan. Permasalahan yang timbul sekarang adalah kita terkadang malas atau kurang teliti dalam memasukkan satu persatu keterangan dalam slider tersebut, baik itu URL gambar maupun URL post yang dituju. Seperti pada tutorial saya sebelumnya mengenai cara membuat slider gambar ala Yahoo, disitu anda harus memasukkan URL dan keterangan slider satu persatu.

سلايد شو متطورة جدا Slider+image

Kali ini saya akan memberikan satu solusi berupa tutorial membuat image slider berdasarkan kategori tertentu, dimana Anda tidak perlu lagi memasukkan satu persatu keterangan dalam slider, jadi Anda tinggal mengganti dengan kategori atau label yang ingin ditampilkan dalam slider, gambarnya seperti diatas dan demonya seperti slider yang ada disini. Baik langsung saja pada cara pemasangannya :

Langkah Pertama

  1. Login ke blogger dengan akun anda
  2. Kemudian klik Tata Letak > pilih Edit HTML centang expand widget templates
  3. Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
  4. الكود:
    Letakkan kode berikut di atas kode ]]></b:skin>


    الكود:
    #featured{margin-bottom:8px}

    .sliderwrapper{position: relative;overflow: hidden;height: 240px}

    .sliderwrapper .contentdiv{visibility: hidden;position: absolute;left: 0;top: 0;padding: 0px;height: 100%;}

    .pagination{text-align: left;padding:8px 0px}

    .pagination a{font-size:11px;color:#fff;padding: 3px 6px;background:#1b75d6}

    .pagination a:hover, .pagination a.selected{color:#dedde5;background-color:#535352}

    .featuredPost{width:360px;padding:10px 10px
    0;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0}

    .featuredPost a{color:#fff}

    .featuredPost a:hover{color:#dedde5}

    .featuredPost h2{margin:0;font-size:12px;line-height:1}

    .featuredPost span{font-size:10px}

    .featuredPost p{font-size:11px}


Langkah Kedua

  1. الكود:
    Masih dalam dalam posisi Edit HTML. Sekarang letakkan kode berikut ini di atas kode </head>


    الكود:
    <script>

    //<![CDATA[

    /* Script from:http://simplexdesign.blogspot.com/ */

    imgr = new Array();

    imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";

    showRandomImg = true;

    aBold = true;

    summaryPost = 100;



    numposts1 = 5;

    [b]label1 = "misteri";[/b]



    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
    showrecentposts1(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;



    var month=[1,2,3,4,5,6,7,8,9,10,11,12];var
    month2=["January","February","March","April","May","Juny","July","August","September","October","November","December"];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"><div
    class="sliderPostPhoto"><a href="'+posturl+'"><img
    width="370" height="240" class="alignnone"
    src="'+img[i]+'"/></a><div
    class="sliderPostInfo"></div></div><div
    class="featuredPost"><h2><a
    href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';    
     

    document.write(trtd);     

    j++;

    }}

    //]]>

    </script>

  2. Perhatikan kode yang saya beri huruf tebal label1 = "misteri"; itu adalah label atau kategori yang akan ditampilkan di slider, disini saya memilih label misteri. Anda nanti tinggal mengganti dengan label yang diinginkan. Perhatikan juga kode img width="370" height="240"  itu adalah lebar dan tinggi slider, silahkan sesuaikan dengan  template Anda.
  3. الكود:
    Setelah itu, letakkan kode di bawah ini sebelum kode </body> (letakkan diatasnya saja)


    الكود:
    <script src='http://dl.dropbox.com/u/12924430/contentslider.js'/>

    <script>

    //<![CDATA[

    featuredcontentslider.init({

    id: "slider1", //id of main slider DIV

    contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]

    toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]

    nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.

    enablefade: [true, 0.5], //[true/false, fadedegree]

    autorotate: [true, 6000], //[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>

  4. الكود:
    Langkah terakhir, yaitu untuk memanggil agar slider tersebut tampil di halaman depan anda cari kode <div id='main-wrapper'> jika anda ingin slider tampil di atas main-wrapper seperti pada demo, dan letakkan kode berikut di bawahnya  :


    الكود:
    <b:if cond='data:blog.pageType == "index"'>

    <div id='featured'>

    <div class='sliderwrapper' id='slider1'>

    <script>

    document.write("<script
    src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");

    </script>

    </div>

    <div class='pagination' id='paginate-slider1'>

    </div>

    </div>

    </b:if>

  5. Langkah terakhir Save/simpan template, membuat slider image berdasarkan kategori tertentu sudah selesai.
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://waled6662003.yoo7.com
 
سلايد شو متطورة جدا
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» سلايد شو اليوم السابع سلايد زاتى وافقى حصريا وفقط على منتديات الهجان
»  سلايد شو تلقائي إحترافي لمدونات بلوجر أحدث سلايد شو
» اقوى سلايد شو مع شرح التركيب
» سلايد شو احترافى اسود
» سلايد شو موقع الياهو

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات الهجان :: ركن بلوجر :: قسم سلايد شو بلوجر-
انتقل الى: