irgui

السبت، 28 ديسمبر 2013

إضافة سليدر صحيفة في قوالب بلوجر

في هذا الشرح الجديد سأشرح لكم طريقة إضافة سليدر صحيفة في قوالب بلوجر بطريقة جد سهلة و يضهر فقط في الصفحة الرئيسية

أولا : نأخذ نسخة إحتياطية للقالب في حال حدوث مشاكل

تانيا : نفتح إدارة المدونة في بلوجر

ثالثا : نذهب إلى قالب تم تحرير HTML

رابعا : نبحث عن هذا الكود

1	]]></b:skin>

و نضع فوقه / قبله هذا الكود

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.ei-slider{position:relative;width:100%;max-width:995px;height:498px;margin:0 auto 35px;-moz-box-shadow:0 1px 2px rgba(0,0,0,0.7);-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.7);box-shadow:0 1px 2px rgba(0,0,0,0.7);}
.ei-slider-loading{width:100%;height:100%;position:absolute;top:0;left:0;z-index:990;background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXrdtWCa6EREPb5majsw1arspE35OLK6wgEb3_y2t0T6kQai6f6oSvpd305bWckqCkwADi2UOQ4Y9YXJHo3TjyfpXIi3CsdkHPvMpuabj-7KRbGfTaJ64TYLJenu7mPUSKhBHoGQlvVQ8/s1600/black-loader.gif') no-repeat 50% 48%;color:#fff;text-align:center;line-height:520px;}
.ei-slider-large{height:100%;width:100%;position:relative;overflow:hidden;}
.ei-slider-large li{position:absolute;top:0;left:0;overflow:hidden;height:100%;width:100%;}
.ei-slider-large li img{width:100%;}
.ei-title{position:absolute;right:10%;margin-right:0;margin-left:2%;bottom:25%;color:#fff;opacity:0.8;}
.ei-title h2,.ei-title h3{text-align:right;}
.ei-title h2{color:#b5b5b5;font-size:35px;font-family:BebasNeueRegular,arial,Georgia,serif;background:#000;float:right;padding:5px;margin-bottom:5px;}
.ei-title h3{clear:both;font-size:14px;line-height:20px;width:835px;background:#000;padding:5px;}
.ei-slider-thumbs{height:13px;margin:0 auto;position:relative;max-width:100%!important;}
.ei-title a{color:#FFF;}
.ei-slider-thumbs li{position:relative;float:left;height:100%;}
.ei-slider-thumbs li.ei-slider-element{top:0;left:0;position:absolute;height:100%;z-index:10;text-indent:-9000px;background:#F88C00;}
.ei-slider-thumbs li a{display:block;text-indent:-9000px;background:#666;width:100%;height:100%;cursor:pointer;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0 1px 0 1px rgba(255,255,255,0.5);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0 1px 0 1px rgba(255,255,255,0.5);box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0 1px 0 1px rgba(255,255,255,0.5);-webkit-transition:background 0.2s ease;-moz-transition:background 0.2s ease;-o-transition:background 0.2s ease;-ms-transition:background 0.2s ease;transition:background 0.2s ease;}
.ei-slider-thumbs li a:hover{background-color:#f0f0f0;}
.ei-slider-thumbs li img{position:absolute;bottom:50px;opacity:0;z-index:999;width:100%;max-height:100px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;-ms-transition:all 0.4s ease;transition:all 0.4s ease;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-webkit-box-reflect:below 0px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(255,255,255,0.3)) );}
.content .ei-slider-thumbs li img{max-height:65px;}
.ei-slider-thumbs li:hover img{opacity:1;bottom:13px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}

ثم نبحث عن هذا الكود

</head>

و نضع فوقه هذا الكود

1
2
3
4
5
6
7
8
9
10
11
12
13
14

و نغيير التصنيف الموجود من كل إلى أي تصنيف موجود في مدونتك

و أخيرا نقوم بالبحث عن

1	<b:section class='main' id='main' showaddelement='no'>

و نضع فوقه هذا الكود

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<b:if cond='data:blog.url == data:blog.homepageUrl'>
< div class='ei-slider' id='ei-slider'>
< script src='http://yourjavascript.com/3411331121/slide1.js'/>
< script type='text/javascript'>
var showpostsummary = true;
var numchars = 100;
< /script>
< ul class='ei-slider-large'>
< script type='text/javascript'>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?published&alt=json-in-script&callback=labelthumbs2\"><\/script>");
</script>
< /ul>
< script src='http://yourjavascript.com/1134333271/slide2.js'/>
< script type='text/javascript'>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?published&alt=json-in-script&callback=labelthumbs22\"><\/script>");
</script>
< /div>
< script type='text/javascript'>
jQuery(function() {
jQuery('#ei-slider').eislideshow({
animation : 'center',
autoplay : true,
slideshow_interval : 3000,
speed : 800,
titlesFactor : 0.60,
titlespeed : 1000,
thumbMaxWidth : 100
});
});
</script>
< div style='clear: both;'/>
</b:if>

و تم الإنتهاء من إضافة السليدر

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

إقرأ المزيد...

تركيب سلايدشو بقسم محدد لمدونات بلوجر بدون اى اخطاء

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

صورة لشكل السلايدر

كيفية تركيب سلايد ش

قبل اضافة اى اكواد يجب اخذ نسخة احتياطية قبل وضع اى اكواد ومن هنا درس بسيط يعلمك طريقة اخذ نسخة احتياطية الان ناتى الى الطريقة فى البداية ادخل الى لوحة تحكم مدونتك ومن بعدها اضغط على القالب الأن اضغط على تحرير HTML

قم بالبحث عن هذا الكود :

]]></b:skin>

وضع فوقة مباشرة هذا الكود :

#featured{ margin-bottom:10px; } .sliderwrapper{ position: relative; border-bottom-width: 6px; height: 124px; } .sliderwrapper .contentdiv{ visibility: hidden; position: absolute; height: 100%; filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1; padding:15px 15px 15px 0px; background:#f1f1f1; border-radius: 5px 5px 5px 5px; box-shadow: 0 0 3px #ABABAB; margin-top:10px; } .pagination{ text-align: right; margin-top: 50px; padding:5px; } .pagination a{ font:11px Arial; color:#a3a3a3; padding:4px 8px 4px 8px; } .pagination a.selected{ color:#4f4f4f; } .pagination .prev,.pagination .next { color:#EAEAEA; font-size:0px; background:none; padding:0px; } .featuredPost{ width:410px; padding:0px 10px 10px 10px !important; bottom:0; float:left !important; margin-right: 54px; } .featuredPost a{ color:#515151; font: 18px "Microsoft Sans Serif"; margin:0; padding:0; } .featuredPost h2{margin:0 0 8px 0;} .featuredPost span{font-size:11px; margin:0; color:#797979;} .featuredPost p{font-size:12px; margin:4px 0 0 0; color:#797979;} .sliderPostPhoto a img{float: right !important;} .sliderPostPhoto{float: right !important; width:100px !important;}

ثم ابحث عن هذا الكود :

</head>

ضع فوقة مباشرة هذا الكود :

<script>

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

imgr = new Array();

imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg";

showRandomImg = true;

aBold = true;

summaryPost = 100;

numposts1 =17;

label1 = "دروس بلوجر";

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=["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"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="155" height="121" 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>

ملحوظة :

قم بتغير كلمة دروس بلوجر الى القسم الذى يناسبك المحدد باللون الأصفر

قم بتغير رقم 17المحدد باللون الأخضر الى الرقم الذى تريدة وهو عدد عرض المواضيع

الأن قم بالبحث مرة اخرى عن هذا الكود :

</body>

ضع فوقة مباشرة هذا الكود :

<script src='http://dl.dropbox.com/u/12924430/contentslider.js'></script>

<script>

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>

ابحث عن هذا الكود :

<div id='main-wrapper'>

ضع اسفلة مباشرة هذا الكود :

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<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>

بالأخير قم بحفظ التغيرات وانتهى التركيب وستجد الاضافة تعمل معك بدون اى اخطاء وارجو بأن هذه الاضافة اعجبتكم وانتظرونى بأضافة اخرى جديدة (( لا خير فى كاتم العلم ))

إقرأ المزيد...

الأربعاء، 25 ديسمبر 2013

بسم الله الرحمن الرحيم درس اليوم هو الدرس ا

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

إقرأ المزيد...

السبت، 28 ديسمبر 2013

إضافة سليدر صحيفة في قوالب بلوجر

تركيب سلايدشو بقسم محدد لمدونات بلوجر بدون اى اخطاء

الأربعاء، 25 ديسمبر 2013

بسم الله الرحمن الرحيم درس اليوم هو الدرس ا

المشاركات الشائعة:

تابعنا عبر الفيسبوك: