Membuat Image Slider Berdasarkan Kategori Tertentu لمدونه تطبيق

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
 

الخطوة الاولى
1. تسجيل الدخول إلى Blogger باستخدام حسابك
2. ثم انقر على تخطيط> تحرير HTML حدد الاختيار توسيع قوالب عناصر واجهة المستخدم
3. لا تنسى أن النسخ الاحتياطي القالب الخاص بك عن طريق النقر تنزيل قالب كامل.
4.Letakkan التالية رمز أعلاه رمز

المصدر
]]></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

الخطوة الثانية
1.Masih في موقف تحرير HTML. الآن ضع التعليمات البرمجية التالية في التعليمات البرمجية أعلاه
</head>
========================
< script>
//<![CDATA[
/* Script from:http://simplexdesign.blogspot.com/ */
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpU04VXEyUn5uKMwas0d9_K_-NbTkLRKQhgyImwVz5IBCUH25Y1802W5D7Lno5VIRryVHiKIbKeoXc87ChhTJCTSfl8dhktd2QDxYibmqmAYOIIc-a8YokEaQ34dSMP_l-kv72fnN5A4E/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;

numposts1 = 5;
label1 = "misteri";

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

كود 2.Perhatikan أن أعطي label1 جريئة = "الغموض". فمن تسمية أو فئة ليتم عرضها في شريط التمرير، وهنا اخترت سر التسمية. سوف تقوم باستبدال فقط مع التسمية المطلوبة. لاحظ أيضا رمز IMG العرض = "370" ذروة = "240" هذا هو العرض والارتفاع من شريط التمرير، يرجى ضبط القالب.
3. بعد ذلك، ضع التعليمات البرمجية التالية قبل رمز
=================
< /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

4.Langkah الماضي، وهي الدعوة بحيث المنزلق يظهر على الصفحة الأولى كنت تبحث عن رمز
=================

< 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 == &quot;index&quot;'>
< div id='featured'>
< div class='sliderwrapper' id='slider1'>
< script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
< /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.

Yang perlu diperhatikan disini adalah kode label1 = "misteri" pada langkah kedua point pertama, misteri adalah label yang ditampilkan dalam slider. Anda bisa menggantinya dengan label atau kategori yang diinginkan. Bagi pengguna template Johny Simple Magazine atau Creating Website Modifikasi, bisa langsung dipraktekkan. Sekian tutorial kali ini jika masih ada yang kurang jelas bisa ditanyakan lewat kotak komentar yang ada di bawah. Selamat mencoba dan semoga bermanfaat
الماضي 5.Langkah حفظ / تخزين القالب، وخلق صورة للانزلاق حسب الفئة المحددة كاملة.

الجدير بالذكر هنا هو label1 كود = "الغموض" في الخطوة الثانية من المرحلة الأولى، والغموض هو التسمية التي يتم عرضها في شريط التمرير. يمكنك استبدال ذلك مع التسمية أو الفئة التي تريد. قالب بسيط جوني للمستخدمين إنشاء موقع مجلة أو التعديلات، يمكن أن تمارس. لذلك هذا البرنامج التعليمي إذا لا يزال هناك عدم وضوح يمكن طلب عن طريق صندوق التعليق أدناه. حظا سعيدا ومفيدا نأمل