أهلا أصدقائي ..معا سنقوم بتركيب #خريطة الموقع أو #صفحة الأرشيف لمدونة البلوجر جديدة من حيث طريقة التركيب والمظهر ذو تصميم [ البطاقة ] ماتيريال ديزاين الخاص بشركة google .. والأهم أن الأداة تم تنسيقها بحيث أصبحت خالية من التكرار والجدولة أضف أنها متوافقة مع عرض الجوال ..فقط نتمنى أن تنال إعجابكم.
قبل أن نشرع في الموضوع قم بماعينة طريقة عرض وعمل الإضافة من هنا
- طريقة تركيب الأداة
- قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
- إنتقل للمدونة >> ثم إلى قالب >> ثم إضغط على تحرير Edit HTML
- إضغط في وسط محرر الأكواد ثم F + Ctrl لإضهار مربع البحث
- بإستعمال الزر C +Ctrl للنسخ و V +Ctrl للصق قم بوضع الأكواد في المكان المناسب
- الخطوة الثانية
/*=====================================
* 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 == "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
document.write;
var e={
homePage: window.location.origin
, maxResults: 10
, numChars: 140
, thumbWidth: 150
, thumbHeight: 110
, navText: "إظهار المزيد"
, resetToc: "لايوجد المزيد"
, noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiItPwggTumq6Ve2h0Q_LUGYMDXHwyr2VN3Fb26i_w7qMvghAaArXLJwpiabjo2Ybqb0Nx6nOwBqTAGxvxz73fu-osgtgogFjZVrBy7tJXZ8u6dVOEZHxhmT_qmlc37PnCzilUj7EjTcxi/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>“"+i.m+"”</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>
الآن ستقوم بإنشاء صفحة جديدة قم بتسميتها بما شئت بعد ذلك قم بالآتي...
<!-- Start -->
<div id="pagesitemap"></div>
<!-- End -->المصدر بلوجر كود
add_comment ليست هناك تعليقات:
إرسال تعليق