أضافة قائمة احترفية لعرض الموضيع حسب التسمية





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


* ناتى الأن لتركيب الاضافة*

 أولاً قوم بأخذ نسخة أحتياطية من قالب مدونتك تجانب لاى مشاكل

* نقوم بالبحث عن هذا الكواد   ]]></b:skin>  وضع فوقه الكود التالى .



/*wdbloog*/ #wdbloog h2.title {border: 2px solid #ccc;position: absolute;top: 3px;right: 50%;margin-right: -85px;font-size: 1.1rem;font-weight: 700;text-transform: uppercase;background: #fff;padding: 7px 45px;display: none;} #wdbloog .widget-content {padding: 0px 0;} li.wdbloog-item {float: right;width: 23.411017%;margin-left: 15px;background: #565656;color: #FFF;margin-bottom: 15px;height: 250px;} li.wdbloog-item:last-child {margin-left: 0;} li.wdbloog-item:hover {transform: scale(1.1);box-shadow: 0 0 10px #000;} a.wdbloog-image {display: block;width: 100%;padding: 31% 0;} a.wdbloog-title {padding: 8px 12px;display: block;font-family: 'Droid Arabic Kufi' , serif; 'Roboto Slab', sans-serif;line-height: 1.6;font-weight: 700;text-decoration: none;} p.wdbloog-summary {padding: 5px 12px;font-size: .875rem;line-height: 1.6;color: #bbb;margin-bottom: 20px;display: none;} .wdbloog-info {position: relative;right: 50%;top: 14px;margin-right: -102px;font-size: 0.8rem;} .wdbloog-info span.publish-date {padding: 6px 20px;background-color: #E4860D;font-size: 15px;} .wdbloog-info a.comments {background-color: #04A06B;padding: 6px 30px;color: #FFFFFF;font-size: 15px;} h2.heading {font-size: 17px;margin-top: 5px;margin-bottom: 5px;color: #fff;text-align: center;font-family: 'Tahoma', arial !important;} i.fa.fa-comment.icon {margin-left: 5px;font-size: 15px;} i.fa.fa-clock-o.icon {margin-left: 5px;} /*wdbloog*/



* الأن نقوم بالبحث عن الكود  </body>  ثم ضع فوقه الكود التالى



<script> //<![CDATA[ /* wdbloog Widget --------------------------------------*/ var mustReadSection = $('#wdbloog .widget-content'); var mustReadContent = mustReadSection.text().trim(); if((mustReadContent.toLowerCase() !== 'no') && (mustReadContent !== '"no"')) { $.ajax({ url: "/feeds/posts/default/-/"+ mustReadContent +"?alt=json-in-script&max-results=4", type: "get", dataType: "jsonp", success: function (e) { var img = new Array(); var trtd = ''; var numOfEntries = e.feed.entry.length; for (var i = 0; i < numOfEntries; i++) { var entry = e.feed.entry[i]; var posttitle = entry.title.$t; var posturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; } } if ("content" in entry) { var postcontent = entry.content.$t; } 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 tmb = img[i].replace('s1600/','w500-h500-c/'); var post_comments; var comment_url; for (var k = 0; k < entry.link.length; k++) { if ((entry.link[k].rel === 'replies') && (entry.link[k].type === 'text/html')) { post_comments = entry.link[k].title; comment_url = entry.link[k].href; break; } } post_comments = parseInt(post_comments, 10); var postdate = entry.published.$t; var day = postdate.split("-")[2].substring(0,2); var m = postdate.split("-")[1]; var y = postdate.split("-")[0]; var daystr = day+ '.' + m + '.' + y; var summary = postcontent.replace(/<.+?>/g, '').substring(0, 90) + "..."; var trtd = trtd + '<li class="wdbloog-item"><a href="'+ posturl +'" class="wdbloog-image" style="background: url('+ tmb +') no-repeat center; background-size: cover;"></a><a href="'+ posturl +'" class="wdbloog-title"><h2 class="heading">'+ posttitle +'</h2></a><p class="wdbloog-summary">'+ summary +'</p><div class="wdbloog-info"><span class="publish-date"><i class="fa fa-clock-o icon"></i>'+ daystr +'</span><a class="comments" href="'+comment_url +'"><i class="fa fa-comment icon"></i>'+ post_comments +'</a></div></li>'; } mustReadSection.html("<ul class='wdbloog-posts clearfix'>" + trtd + "</ul>"); } }); } else { $(".wdbloog-wrapper").remove(); $(".slider-wrapper").css({ "background": "#fff", "border-bottom": "2px solid #ccc" }); } //]]> </script>


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



<div class='wdbloog-wrapper'> <b:section class='container' id='wdbloog' maxwidgets='1' showaddelement='yes'> <b:widget id='HTML453' locked='false' title='' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:if> </b:includable> </b:widget> </b:section> </div>



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








أضافة قائمة احترفية لعرض الموضيع حسب التسمية أضافة قائمة احترفية لعرض الموضيع حسب التسمية بواسطة al walid net on 3:46:00 ص القسم: 5

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

يتم التشغيل بواسطة Blogger.