hunter

اخر الاخبار

Post Top Ad

Your Ad Spot

الأحد، 18 سبتمبر 2011

سلايد شو يعمل بطريقه اوتوماتيكيه لمواضيع مدونة بلوجر سهل التطبيق

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

خطوه رقم 1: قم بالذهاب الى لوحة تحكم مدونتك ثم الي تصميم ثم الي تحرير HTML

ثم اضغط على خانة توسيع قوالب المستخدم وابحث عن الكود التالي

</head>

  وضع الكود الموجود بالاسفل قبلة مباشرة


&lt;script&gt;

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

imgr = new Array();

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

showRandomImg = true;

aBold = true;

summaryPost = 140;

numposts1 = 5;

label1 = &quot;tqarob&quot;;

function removeHtmlTag(strx,chop){var s=strx.split(&quot;&lt;&quot;);for(var i=0;i&lt;s.length;i++){if(s[i].indexOf(&quot;&gt;&quot;)!=-1){s[i]=s[i].substring(s[i].indexOf(&quot;&gt;&quot;)+1,s[i].length)}}s=s.join(&quot;&quot;);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&lt;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&lt;entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k&lt;entry.link.length;k++){if(entry.link[k].rel=='replies'&amp;&amp;entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(&quot;&quot;)[0];break}}



if (&quot;content&quot; in entry) {

var postcontent = entry.content.$t;}

else

if (&quot;summary&quot; in entry) {

var postcontent = entry.summary.$t;}

else var postcontent = &quot;&quot;;

postdate = entry.published.$t;

if(j&gt;imgr.length-1) j=0;

img[i] = imgr[j];

s = postcontent ; a = s.indexOf(&quot;&lt;img&quot;); b = s.indexOf(&quot;src=\&quot;&quot;,a); c = s.indexOf(&quot;\&quot;&quot;,b+5); d = s.substr(b+5,c-b-5);

if((a!=-1)&amp;&amp;(b!=-1)&amp;&amp;(c!=-1)&amp;&amp;(d!=&quot;&quot;)) img[i] = d;

var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=[&quot;Jan&quot;,&quot;Feb&quot;,&quot;Mar&quot;,&quot;Apr&quot;,&quot;May&quot;,&quot;Jun&quot;,&quot;Jul&quot;,&quot;Aug&quot;,&quot;Sep&quot;,&quot;Oct&quot;,&quot;Nov&quot;,&quot;Dec&quot;];var day=postdate.split(&quot;-&quot;)[2].substring(0,2);var m=postdate.split(&quot;-&quot;)[1];var y=postdate.split(&quot;-&quot;)[0];for(var u2=0;u2&lt;month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;

}}

var daystr = day+ ' ' + m + ' ' + y ;

var trtd = '&lt;div class=&quot;contentdiv&quot;&gt;&lt;div class=&quot;sliderPostPhoto&quot;&gt;&lt;a href=&quot;'+posturl+'&quot;&gt;&lt;img width=&quot;590&quot; height=&quot;240&quot; class=&quot;alignnone&quot; src=&quot;'+img[i]+'&quot;/&gt;&lt;/a&gt;&lt;div class=&quot;sliderPostInfo&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;featuredPost&quot;&gt;&lt;h2&gt;&lt;a href=&quot;'+posturl+'&quot;&gt;'+posttitle+'&lt;/a&gt;&lt;/h2&gt;&lt;span&gt;'+daystr+'&lt;/span&gt;&lt;p&gt;'+removeHtmlTag(postcontent,summaryPost)+'...&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;';

document.write(trtd);

j++;

}}

&lt;/script&gt;



تستطيع تعديل الكود الذي بالاعلى كما تريد كما يلي

summaryPost = 140; ->هذا الرقم خاص بعدد حروف الموضوع المعروضه في السلايد
numposts1 = 5;-> هذا الرقم خاص بعدد المواضيع المعروضه في السلايد و


الكود التالي خاص بعرض وارتفاع الصوره وانصح بعدم اللعب فيه
width=&quot;590&quot; height=&quot;240&quot;

2,خطوه رقم 2
ابحث عن هذا الكود

</body>

  وضع الكود الي بالاسفل قبله مباشرة

&amp;lt;script src='http://dl.dropbox.com/u/12924430/contentslider.js'&amp;gt;&amp;lt;/script&amp;gt;

&amp;lt;script&amp;gt;

featuredcontentslider.init({

id: &amp;quot;slider1&amp;quot;, //id of main slider DIV

contentsource: [&amp;quot;inline&amp;quot;, &amp;quot;&amp;quot;], //Valid values: [&amp;quot;inline&amp;quot;, &amp;quot;&amp;quot;] or [&amp;quot;ajax&amp;quot;, &amp;quot;path_to_file&amp;quot;]

toc: &amp;quot;#increment&amp;quot;, //Valid values: &amp;quot;#increment&amp;quot;, &amp;quot;markup&amp;quot;, [&amp;quot;label1&amp;quot;, &amp;quot;label2&amp;quot;, etc]

nextprev: [&amp;quot;Previous&amp;quot;, &amp;quot;Next&amp;quot;], //labels for &amp;quot;prev&amp;quot; and &amp;quot;next&amp;quot; links. Set to &amp;quot;&amp;quot; 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)

}

})

&amp;lt;/script&amp;gt;

 خطوه رقم 3
ابحث عن هذا الكود

<div id='main-wrapper'>

  وضع الكود الموجود بالاسفل بعده مباشرة.

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

خطوه رقم 4 ابحث عن الكود التالي

]]></b:skin>

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


#featured{margin-bottom:35px}

.sliderwrapper{position: relative;overflow: hidden;border: 10px solid #dedde5;border-bottom-width: 6px;height: 250px}

.sliderwrapper .contentdiv{background:#68667B;visibility: hidden;position: absolute;left: 0;top: 0;padding: 5px;height: 100%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;}

.pagination{text-align: right;background-color:#dedde5;padding: 2px 10px 10px}

.pagination a{font-size:11px;color:#dedde5;padding: 0 5px;background:#68667B}

.pagination a:hover, .pagination a.selected{color:#68667B;background-color:#fff}

.featuredPost{width:95%;padding:5px 10px 10px;background:#68667b;background:rgba(104, 102, 123, 0.9);color:#dedde5;position:absolute;bottom:0}

.featuredPost a{color:#fff}

.featuredPost a:hover{color:#dedde5}

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

.featuredPost span{font-size:10px}

.featuredPost p{font-size:11px}




خطوه رقم 5
قم بتغيير تلك الكلمه  tqarob في الكود باسم التسميه او القسم الذي تريد عرض موضوعاته في السلايد شو
ثم قم بحفظ قالب مدونتك ومبروك عليك الاضافه
تم الموضوع بحمد الله تعالي

ليست هناك تعليقات:

إرسال تعليق

Post Top Ad

الصفحات