5/16/2018

settings_overscan print announcement
أهلا أصدقائي ..معا سنقوم بتركيب خريطة الموقع أو صفحة الأرشيف لمدونة البلوجر جديدة من حيث طريقة التركيب والمظهر ذو تصميم [ البطاقة ] ماتيريال ديزاين الخاص بشركة google .. والأهم أن الأداة تم تنسيقها بحيث أصبحت خالية من التكرار والجدولة أضف أنها متوافقة مع عرض الجوال ..فقط نتمنى أن تنال إعجابكم.





قبل أن نشرع في الموضوع قم بماعينة طريقة عرض وعمل الإضافة



طريقة تركيب الأداة

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى قالب >> ثم إضغط على تحرير  Edit HTML  
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب


لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية

  • قم بالبحث عن هذا الوسم ]]></b:skin> فوقه أي قبله قم بوضع كود.css

  • 
    /*=====================================
     * style sitemap v1 / by ba88
    /*====================================*/
    .loader-call {text-align:center;}
    #sitemap{position:relative;overflow:hidden;display:block;background:#f1f1f1;padding:10px;margin:20px 2px;}
    #sitemap table.index{position:relative;overflow:hidden;display:block;width:100%;}
    table.index td{font-size:14px;padding:10px 5px;border:0!important;overflow:hidden;word-break:normal;}
    #sitemap table.index thead input,#sitemap table.index thead select{display:block;width:100%;height:50px;padding:5px;font-size:14px;font-family:inherit;border:0;font-weight:700;color:#757575;background:#ffffff;}
    #sitemap table.index thead,#sitemap table.index tfoot{display:inline-block;width:100%;}
    #sitemap table.index thead tr{float:right;width:100%;position:relative;display:block;}
    #sitemap table.index thead td{float:right;width:33.3333%;width:calc(100% / 3);position:relative;display:inline-block;}
    #sitemap table.index tbody,#sitemap table.index tr,#sitemap table.index td{display:inline-block;width:100%;}
    #sitemap table.index tfoot td{width:100%;}
    #feed-container .carousel-index{display:inline-block;width:50%;width:calc(100% / 2);padding:5px;margin:0;float:right;}
    #feed-container .inner{display:block;float:right;width:100%;height:100px;margin-bottom:10px;overflow:hidden;margin:5px;padding:0;background:#FFFFFF;}
    #result-desc{padding:0 10px;margin:5px 0;font-size:12px;font-weight:700;text-align:center;}
    #result-desc span{text-align:right;width:100%;display:block;padding:2px 10px;color:#4385f5;background:rgba(0,0,0,0.03);}
    #result-desc b{color:#757575;}
    .static_page .clear-post-body ul#feed-container li{margin:0!important;padding:0!important;text-indent:0;margin-right:0!important;font-weight:900;}
    .static_page .clear-post-body ul#feed-container li:before{content:"";}
    #feed-container .inner a.toc-img{position:relative;background:#000;overflow:hidden;width:300px!important;float:right;margin:0 0 0 15px;height:200px!important;transition:all 0.7s ease 0s;}
    #feed-container .imginner{overflow:hidden;width:150px;height:100px;float:right;margin-left:10px;}
    #feed-container .imginner img{width:150px;height:100px;}
    #feed-container .inner a.toc-title{color:#4385f5;font-weight:900;font-size:12px;display:block;text-align:right;line-height:normal;background:none;padding:0;margin:0;}
    #feed-container .news-text{color:#aaa;text-align:right;font-size:13px;line-height:normal;}
    #feed-nav{text-align:center;font-size:14px;color:#4385f5;font-weight:700;}
    #feed-nav a{position:relative;background:#4385f5;color:#ffffff;padding:10px 15px;text-align:center;display:block;margin:0 auto;width:180px;overflow:hidden;z-index:1;}
    /*==before==*/
    .loader-call:before{content:'\f110';color:#4385f5;font-family:FontAwesome;width:40px;height:40px;font-size:40px;text-align:center;line-height:40px;display:inline-block;position:relative;margin:10px auto;-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear;}
    div#sitemap a:before,div#sitemap ol li a:before{display:none!important;}
    /*==anim==*/
    #feed-container .inner,#feed-nav a,#sitemap table.index thead input,#sitemap table.index thead select{box-shadow:0 2px 7px 0 rgba(0,0,0,0.16);-webkit-box-shadow:0 2px 7px 0 rgba(0,0,0,0.16);-moz-box-shadow:0 2px 7px 0 rgba(0,0,0,0.16);-ms-box-shadow:0 2px 7px 0 rgba(0,0,0,0.16);-o-box-shadow:0 2px 7px 0 rgba(0,0,0,0.16);}
    #feed-container .inner:hover{box-shadow:5px 5px 20px 0 rgba(0,0,0,0.22);-webkit-box-shadow:5px 5px 20px 0 rgba(0,0,0,0.22);-moz-box-shadow:5px 5px 20px 0 rgba(0,0,0,0.22);-ms-box-shadow:5px 5px 20px 0 rgba(0,0,0,0.22);-o-box-shadow:5px 5px 20px 0 rgba(0,0,0,0.22);}
    #feed-nav a:after,#feed-container .inner{-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-ms-transform:all 0.2s ease;-o-transform:all 0.2s ease;transition:all 0.2s ease;}
    #feed-nav a:after{content:"";width:100%;height:100%;object-fit:contain;background-color:#e9e9e9;position:absolute;top:0;left:0;opacity:1;z-index:-1;}
    #feed-nav a:after{-webkit-transform:scale(0) translateZ(0);-moz-transform:scale(0) translateZ(0);-ms-transform:scale(0) translateZ(0);-o-transform:scale(0) translateZ(0);transform:scale(0) translateZ(0);}
    #feed-nav a:hover:after{-webkit-transform:scale(1) translateZ(0);-moz-transform:scale(1) translateZ(0);-ms-transform:scale(1) translateZ(0);-o-transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);}
    /*==Page Responsive==*/
    @media screen and (max-width:775px){#sitemap table.index thead td,#feed-container .carousel-index{width:100%;display:block;}#feed-container .inner{padding:5px;}#feed-container .news-text{font-size:11px;display:block;float:right;}#sitemap table.index tfoot tr,#sitemap table.index tfoot td{width:100%;display:block;float:right;}}
    /* iphon 4/5 + nok lumia 520 */
    

  • قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود.js

  • 
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <script type='text/javascript'>
            /*<![CDATA[*/
    document.write;
              var e={
                    homePage: window.location.origin
                    , maxResults: 10
                    , numChars: 140
                    , thumbWidth: 150
                    , thumbHeight: 110
                    , navText: "إظهار المزيد"
                    , resetToc: "لايوجد المزيد"
                    , noImage: "//3.bp.blogspot.com/-Jc__Qnmo0Ls/WrE56gnKytI/AAAAAAAACqI/dERZwqQ3vBQgH7WULIuSwOPgi5ZfHVUcACLcBGAs/s1600/alt.png"
                    , loading: "<span>جاري التحميل</span>"
                    , counting: "<div class='loader-call'></div>"
                    , searching: "<span>جاري البحث</span>"
                    , text_label: "الأقسام"
                    , text_Latesttopics: "أخر المواضيع"
                    , Topics_updated: "أحدث المواضيع"
                    , Search_topic: "إبحث عن موضوع"
                    , Search_for: "البحث عن"
                    , T_Results: "النتائج"
                    , T_Total: "المجموع"
                   },
                   _sitemap=document.getElementById("pagesitemap"),loadToc,loadCategories,_toc={
     init:function(){
    t=(window,document),n=function(e){return t.getElementById(e)},i={a:n("feed-order"),b:n("label-sorter").parentNode,c:n("post-searcher"),d:n("feed-q"),e:n("result-desc"),f:n("feed-container"),g:n("feed-nav"),h:t.getElementsByTagName("head")[0],i:0,j:null,k:"published",l:0,m:""},a={a:function(){old=n("temporer-script"),old.parentNode.removeChild(old)},b:function(e){var l=t.createElement("script");l.type="text/javascript",l.id="temporer-script",l.src=e,n("temporer-script")&&a.a(),i.h.appendChild(l);},c:function(t,n,l){i.i++,i.e.innerHTML=e.counting,i.g.innerHTML=e[1==t?"searching":"loading"],0===t?a.b(null!==n?e.homePage+"/feeds/posts/summary/-/"+n+"?alt=json-in-script&start-index="+(i.i*e.maxResults+1)+"&max-results="+e.maxResults+"&orderby="+l+"&callback=loadToc":e.homePage+"/feeds/posts/summary?alt=json-in-script&start-index="+(i.i*e.maxResults+1)+"&max-results="+e.maxResults+"&orderby="+l+"&callback=loadToc"):1==t&&a.b(e.homePage+"/feeds/posts/summary?alt=json-in-script&start-index="+(i.i*e.maxResults+1)+"&max-results="+e.maxResults+"&q="+n+"&orderby="+l+"&callback=loadToc"),i.j=null!==n?n:null,i.l=t,i.a.disabled=!0,i.b.children[0].disabled=!0},d:function(n){var l;if(i.g.innerHTML="",i.e.innerHTML=1==i.l?"<span>"+e.Search_for+"<b>&#8220;"+i.m+"&#8221;</b>"+e.T_Results+"<i> ("+n.feed.openSearch$totalResults.$t+") </i></span>":"<span>"+e.T_Total+"<i>"+n.feed.openSearch$totalResults.$t+"</i></span>","entry"in n.feed){for(var r,s,o,d,c=n.feed.entry,u=0;u<e.maxResults&&u!=c.length;u++){r=c[u].title.$t,o="summary"in c[u]?c[u].summary.$t.replace(/<br ?\/?>/gi," ").replace(/<(.*?)>/g,"").replace(/<iframe/gi,"").substring(0,e.numChars):"",d="media$thumbnail"in c[u]?c[u].media$thumbnail.url.replace(/.*?:\/\//g,"//").replace(/\/s[0-9]+\-c/,"/s"+e.thumbWidth):e.noImage.replace(/\/s[0-9]+\-c/,"/s"+e.thumbWidth);for(var m=0,p=c[u].link.length;m<p;m++)s="alternate"==c[u].link[m].rel?c[u].link[m].href:"#";for(var h=0,b=c[u].link.length;h<b;h++)if("replies"==c[u].link[h].rel&&"text/html"==c[u].link[h].type){c[u].link[h].title;break}if (s)(l=t.createElement("div")).className="carousel-index",l.innerHTML='<div class="inner"><div class="imginner"><a href="'+s+'" target="_blank" title="'+r+'"><img src="'+d+'" alt="'+r+'"></a></div><a class="toc-title" href="'+s+'" target="_blank" title="'+r+'">'+r+'</a><p class="news-text">'+o+' ...</p></div>',i.f.appendChild(l),_sitemap.classList.remove("loader-call");}(l=t.createElement("a")).href="#load-more",l.innerHTML=e.navText,l.onclick=function(){return a.c(i.l,i.j,i.k),!1}}else(l=t.createElement("a")).href="#reset-content",l.innerHTML=e.resetToc,l.onclick=function(){return i.i=-1,i.e.innerHTML=e.counting,i.f.innerHTML="",a.c(0,null,"published"),i.a.innerHTML=i.a.innerHTML,i.b.children[0].innerHTML=i.b.children[0].innerHTML,!1};i.g.appendChild(l),i.a.disabled=!1,i.b.children[0].disabled=!1},e:function(t){for(var n=t.feed.category,l='<select id="label-sorter"><option value="" selected disabled>'+e.text_label+'</option>',r=0,s=n.length;r<s;r++)l+='<option value="'+encodeURIComponent(n[r].term)+'">'+n[r].term.toLowerCase()+"</option>";l+="</select>",i.b.innerHTML=l,i.b.children[0].onchange=function(){i.i=-1,i.f.innerHTML="",i.g.innerHTML=e.loading,a.c(0,this.value,i.k)}}};loadToc=a.d,loadCategories=a.e,a.b(e.homePage+"/feeds/posts/summary?alt=json-in-script&start-index="+(i.i+1)+"&max-results="+e.maxResults+"&orderby=published&callback=loadToc"),a.b(e.homePage+"/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories"),i.a.onchange=function(){i.i=-1,i.f.innerHTML="",i.g.innerHTML=e.counting,i.b.children[0].innerHTML=i.b.children[0].innerHTML,a.c(0,null,this.value),i.k=this.value},i.c.onsubmit=function(){return i.i=-1,i.f.innerHTML="",i.m=i.d.value,a.c(1,i.d.value,i.k),!1}}};if (typeof(_sitemap) != 'undefined' && _sitemap != null){_sitemap.classList.add("loader-call");_sitemap.innerHTML = '<div class="tg-wrap" id="sitemap"><table class="index"> <thead><tr><td><select id="feed-order"><option selected="selected" value="published">'+e.text_Latesttopics+'</option><option value="updated">'+e.Topics_updated+'</option></select></td><td><select id="label-sorter"><option selected="">'+e.text_label+'</option> </select></td><td><form id="post-searcher"><input class="shadow-input" id="feed-q" placeholder="'+e.Search_topic+'" type="text" /></form></td></td></thead> <tbody><tr><td><div id="feed-container"></div></td></tr></tbody> <tfoot><tr><td><div id="feed-nav"></div></td><td><header id="result-desc"></header></td></tr></tfoot></table></div>';_toc.init();}
      /*]]>*/
     </script>
    </b:if> 
    

    شرح الكود
    الكود المحدد بهذا اللون خاص بـ العلامة الشرطية تجعل الأكواد تعمل فقط في الصفحات الثابتة
    الكود المحدد بهذا اللون maxResults خاص بعدد المواضيع المراد عرضها وهي 10.
    الكود المحدد بهذا اللون numChars خاص بعدد أحرف إقتباص التدوينة عدد الأحرف 140.
    الكود المحدد بهذا اللون thumbWidth خاص بطول شريحة الصور 150.
    الكود المحدد بهذا اللون thumbHeight خاص بعرض شريحة الصور 110.
    الكود المحدد بهذا اللون noImage خاص برابط الصورة البديلة لتدوينة لاتحتوي على أي صور //3.bp.blogspot.com/-Jc__Qnmo0Ls/WrE56gnKytI/AAAAAAAACqI/dERZwqQ3vBQgH7WULIuSwOPgi5ZfHVUcACLcBGAs/s1600/alt.png.


    الخطوة المهمة
    الآن ستقوم بإنشاء صفحة جديدة قم بتسميتها بما شئت بعد ذلك قم بالآتي...
  • إنتقل من وضع التأليف إلى تبويب HTML ثم ضع داخل الحقل العلامة التالية
  • 
    <!-- Start -->
    <div id="pagesitemap"></div>
    <!-- End -->
    



add_commentإرسال تعليق

  1. حدث خطأ أثناء تحليل XML، في السطر 1864، العمود 6: Element type "b:if" must be followed by either attribute specifications, ">" or "/>".
    إخفاء الإشعار

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

      حذف
  2. جميل احسنت صديقى :)
    اذا سمحت هل بامكانك ان تعطينى blank template جاهز مع مكتبات ال jQuery و ال fontAwesome و وباقى المكتبات المهمة لاننى كنت امتلك blank template غاية فى الجمال والروعه لكنى فمت بتنزيل نسخة ويندوز جديده وكنت قد تركتها على سطح المكتب ونسيت ذلك وكنت ايضا اصمم قوالب واقوم ببيعها على موقع خمسات ومستقل ارجو منك ان تعطينى توليفة جيده اليوم قبل غداً صدقنى صديقى احتاجه بشده لكى أشرع فى تصميم القوالب من جديد لانه كلما حاولت ان اقوم بالبحث عن المكتبات التى كانت موجوده بقالبى لا يمكننى ان اجدها كما انىى رائيت الملحقات التى تتركها فى نهاية كل درس ولكن صدقنى يعصل تعارض بين الاكواد فارجوك اريد blank template اليوم بشده وانا أسف لأننى أصلت عليك بكلامى T_T

    ردحذف
    الردود
    1. أهلا أخي الكريم .. صدقني الكثير طالبوني بهذه التدوينة وخصوصا القالب الجاهز للتصميم...أنا حاليا أعمل على تهيئة موضوع جديد حول ماتحتوية بنية تصميم القالب كما أني سأرفق مع الدرس قالب نموذج فارغ blank template سيكون بإذن الله يحتوي على الاطر والمكتبات وداعم لمصمم النماذج مع هدية ملحقة به ...لا استطيع إعطاءك قالب blank template الخاص بنا لأنه معقد جدا ويعمل مع الاصدار 2 بدون استدعاء مكتبات css bundle v2 وهذا يعني كتابة الأكواد يدويا لذلك عليك الانتظار الى حين نشر التدوينة القادمة بإذن الله تعالى .

      حذف
    2. حسنأ صديقى انتظرها وبشده شكرا لاهتمامك :guitarist: =(

      حذف
  3. شكرا لك على ما تقدم

    جربت الاضافة و لكن للاسف لم تعمل

    ما هو الخطا

    ردحذف
    الردود
    1. مرحبا اخي العزيز
      أرسلي رابط مدونتك لمعاينة المشكل

      حذف
    2. لقد تم تحديث الإضافة الرجاء إعادة التركيب من جديد لكل الأكواد

      حذف
  4. ^_^ لقد تم تحديث الإضافة الرجاء إعادة التركيب من جديد لكل الأكواد

    ردحذف
    الردود
    1. تم التركيب بنجاح
      فعلا اجمل اضافة اشاهدها للارشيف
      سلمت يداك و بارك الله فيك

      حذف