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