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

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


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

 

 سلايد شو شريط افقى زاتى لبنى

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


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

سلايد شو شريط افقى زاتى لبنى Empty
مُساهمةموضوع: سلايد شو شريط افقى زاتى لبنى   سلايد شو شريط افقى زاتى لبنى Icon_minitimeالأحد فبراير 16 2014, 20:23

Membuat Slider Carousel Otomatis Versi 2
Sebenernya sudah lama sekali saya diminta oleh seorang teman blogger Ronny Dee untuk membuat tutorial slider Carousel seperti pada template Mas Paper 2. Kali ini saya akan membuat tutorialnya tapi hanya memakai slider carousel sederhana yang sudah pernah saya buat pada tutorial sebelumnya, disini saya hanya memodifikasi kode CSS nya saja, sehingga tampilannya mirip dengan slider Carousel yang ada di template Mas Paper 2. Tapi kalau dilihat sepintas, justru slider ini lebih mirip dengan slider Carousel yang ada di bagian atas (bawah navigasi) halaman depan situs detik.com.

سلايد شو شريط افقى زاتى لبنى Slider+carousel

DEMO

Cara membuatnya hampir sama dengan slider Carousel otomatis versi 1, disini saya hanya merubah kode CSS dan menambahkan timestamp diatas judul post. Langsung saja di bawah ini langkah-langkah untuk membuatnya :

  1. Pertama Anda mesti login ke blogger dengan akun Anda
  2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
  3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.

  5. الكود:
    Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :



    الكود:

    #carousel{width:[b][color=blue]980[/color][/b]px;height:[b][color=blue]125[/color][/b]px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px}

    #carousel h5{color:#555;margin:2px}

    #carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}

    #carousel .thumb{float:left;margin-right:5px;}

    #carousel
    #previous_button{position:absolute;width:24px;height:125px;background:url(http://3.bp.blogspot.com/-vxUtQ_S674s/T-8KtEsewAI/AAAAAAAAHGs/cfd8RK0R-vM/s1600/previous.png)
     center;z-index:100;cursor:pointer;}

    #carousel
    #next_button{position:absolute;right:0;width:24px;height:125px;background:url(http://3.bp.blogspot.com/-FaZC4Gr6pS0/T-8KsaJKtHI/AAAAAAAAHGk/GDXOy42rx3Q/s1600/next.png)
     center;z-index:100;cursor:pointer;}

    #carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}

    #carousel ul{width:100000px;position:relative;margin-top:10px}

    #carousel ul
    li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold
     11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px
    20px 6px;padding:6px}

    #carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0}

    #carousel ul li a.slider_title:hover{color:#1b5d97}

    #carousel a img{display:block;background:#fff;margin-top:0}

    Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.

  6. الكود:
    Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :



    الكود:

    <script src='[b][color=red]http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js[/color][/b]' type='text/javascript'/>

    <script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>



    <script type='text/javascript'>

    //<![CDATA[

    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 = 140;

    summaryTitle = 25;

    numposts1 = [b][color=blue]12[/color][/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 showrecentposts(json) {

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

    img = new Array();

    document.write('<ul>');

    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 = ["January","February","March","April","May","June","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 = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="[b][color=blue]100[/color][/b]" height="[b][color=blue]90[/color][/b]"
     class="alignnone"
    src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a
     class="slider_title"
    href="'+posturl+'">'+posttitle+'</a></li>';



    document.write(trtd);

    j++;

    }

    document.write('</ul>');

    }

    //]]>

    </script>

الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://waled6662003.yoo7.com
 
سلايد شو شريط افقى زاتى لبنى
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» سلايد شو للمواقع الاخبارية شريط صور زاتى مطور 2
» سلايد شو زاتى شريط صور للمجلات الاخبارية والمواقع بلوجر
» سلايد شو اليوم السابع سلايد زاتى وافقى حصريا وفقط على منتديات الهجان
» سلايد شو احترافى افقى انيق جدا
» سلايد شو افقى جزاب وسهل التركيب

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