السلام عليكم ورحمة الله وبركاته، اهلا بكم متابعي مدونة التقني | Eltqni، شرح اليوم عن طريقة تفعيل خاصية قالب APM للصفحات المسرعة لمدونات بلوجر، قالب احترافي مخصص لاصحاب الهواتف الذكية، يقوم بعرض صفحات مدونتك علي غير السرعة العادية للقالب بدون اي اخطاء، وهذه الطريقة تعتبر طريقة بديلة لقوالب بلوجر apm المستخدمة والتي غالبا تكون مليئة بالأخطاء ولا تقوم بالعمل بالشكل المطلوب.
ماهي خاصية AMP؟ الصفحات المسرعة للجوال
نبذه مختصرة علي خاصية APM وكيف تعمل الخاصية علي مدونات بلوجر وكيف تقوم بتحويل مدونتك لتتوافق مع الصفحات المسرعة للجوال، لسرعة تحميل صفحات مدونتك علي الأجهزة الذكية، وقالب اليوم يوفر الخاصية لمدونات بلوجر علي عكس مواقع الووردبريس فا هناك اضافات تقوم بعمل هذه الاضافة بشكل تلقائي بدون اي خبرة او مجهود، اما بالنسبة لمدونات بلوجر فاتحتاج الي القليل من الخبرة للتعامل مع الاضافات.
طريقة تركيب قالب بلوجر AMP لمدونات بلوجر
قم بالبحث عن <head> او <head> وقم باضافة هذا الكود اسفلها مباشرة
ثم ابحث عن </html> فيأخر القالب واضف اعلاها الكود التالي :
ثم اذهب الي اول القالب الخاص بك واحذف هذا الجزء المتواجد داخل <html
ثم اضف هذا الكود بعد <html الموجودة في أول القالب الخاص بك
ولتشغيل قالب APM داخل مدونتك فقط قم بالذهاب الي المظهر وقم بالتعديل كالأتي :
اول الموقع <!-- ADS top POST -->
اعلي المحتوي <!-- ADS first POST -->
اسفل المحتوي <!-- ADS End POST -->
ولتغيير اللوجو الخاص بالقالب قم بالبحث عن هذا الرابط واستبداله بما يناسبك :
كان هذا شرح اليوم اذا واجهتك اي مشكلة داخل القالب، او اردت الاستفسار عن شيئ لاتتردد في كتابة تعليق، دمتم في أمان الله.
<b:if cond='data:view.isPost'><link expr:href='data:blog.canonicalUrl + "?m=1"' rel='amphtml'/></b:if>
ثم ابحث عن </html> فيأخر القالب واضف اعلاها الكود التالي :
</b:if>
ثم اذهب الي اول القالب الخاص بك واحذف هذا الجزء المتواجد داخل <html
xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'
ثم اضف هذا الكود بعد <html الموجودة في أول القالب الخاص بك
<b:attr cond='data:view.isMobile and data:view.isPost' name='amp' value='amp'/>
<b:if cond='data:view.isMobile and data:view.isPost'>
<head>
<meta charset='utf-8'/>
<script async='' src='https://cdn.ampproject.org/v0.js'/>
<title><data:view.title.escaped/></title>
<link expr:href='data:blog.canonicalUrl' rel='canonical'/>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<link href='https://plus.google.com/+add' rel='publisher'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.pageName ? data:blog.pageName : data:blog.title' property='og:title'/>
<meta expr:content='data:view.description.escaped' property='og:description'/>
<b:if cond='data:view.featuredImage.isResizable'><meta expr:content='resizeImage(data:view.featuredImage.escaped, 1200, "1200:630")' property='og:image'/></b:if>
<meta content='article' property='og:type'/>
<meta content='https://www.facebook.com/add' property='article:author'/>
<meta content='https://www.facebook.com/add' property='article:publisher'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='ar_AR' property='og:locale'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@add' name='twitter:site'/>
<meta expr:content='data:blog.pageName ? data:blog.pageName : data:blog.title' name='twitter:title'/>
<meta expr:content='data:view.description.escaped' name='twitter:description'/>
<meta content='@add' name='twitter:creator'/>
<meta expr:content='data:view.featuredImage' name='twitter:image'/>
<meta expr:content='data:blog.canonicalHomepageUrl' name='twitter:domain'/>
<style amp-boilerplate=''>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate=''>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom='amp-custom'>
/* -----------------------------------
Blogger Template Style
Template Name : AMP-kol7sry
Update : 25-9-2017
version : 1.0 Demo
Author : mohamedalgandy
Url : https://www.facebook.com/mohamedalgandy
-------------------------------------- */
@font-face{font-family:'bein'; src:local('BEIN'),local('bein'),url('https://www.fontstatic.com/fonts/bein-normal/bein-normal.woff') format('woff');}
body{background:#f1f1f1;font-family:'bein', Roboto, sans-serif;line-height:1.75em}
a:hover{color:#c51f26}
#header,.ampad{text-align:center}
.ampad,.post-amp{background:#fff;border-radius:2px}
.ampad{max-width:800px;margin:0 auto;padding:15px;box-shadow:0 2px 3px rgba(0,0,0,.05);overflow:hidden}
#header{background:#fff}
.desktop-link a:hover{color:#dcdcdc}
a{color:#312c7e;text-decoration:none}
img{max-width:100%}
.amp-wp-title{line-height:1.4;letter-spacing:1px;margin-top:-15px;margin-bottom:15px;color:#1e4482;font-weight:400;font-size:1.8em;background:#f1f1f1;padding:5px;border-radius:0px 0px 10px 10px;border-bottom:2px solid #d9d9da;box-shadow:0 2px 3px rgba(0,0,0,.05)}
.container{font-size:13px;box-shadow:1px -3px 3px rgba(0,0,0,.05);overflow:hidden;background:linear-gradient(to bottom,#FFF,transparent 30px,transparent);width:100%;position:relative;bottom:0;background-color:#e5e5e5}
.amp-content{font-size:15px;line-height:1.9rem;text-align:justify;font-weight:600;color:#666;font-family:Times}
.post-amp{color:#353535;font-weight:400;max-width:800px;overflow-wrap:break-word;word-wrap:break-word;margin:12px auto;padding:15px;box-shadow:0 2px 3px rgba(0,0,0,.05);overflow:hidden}
.article-featured-image{max-width:100%;margin:0 0 1em}
.amp-tags{padding:20px}
.amp-tags a{display:inline-block;color:#6f6f6f;font-size:14px;padding:4px 14px;background-color:#f0f0f0;border-radius:30px}
.amp-tags a:hover{background-color:#d8232a;color:#fff}
.article-author,.article-timeago{font-size:13px;font-family:"Segoe UI";margin-left:20px}
.post-meta{display:flex}
#main-amp{margin:10px}
.desktop-link{text-align:center}
.desktop-link a{transition:background-color 0.2s ease;font-family: 'bein', Roboto, sans-serif;background-color:#d8232a;box-shadow:inset 0 3px 5px rgba(0,0,0,.125);color:#fff;display:inline-block;vertical-align:middle;touch-action:manipulation;cursor:pointer;border:1px solid transparent;padding:4px 20px;font-size:18px;line-height:1.42857;border-radius:4px}
#footer{margin:10px}
.poweredby{float:left;margin-top:3px;color:#636363;font-size:smaller;padding:0px 10px;border-radius:6px;background:#f1f1f1;box-shadow:1px 1px 2px rgba(0,0,0,0.2) inset}
.upbt {float:right;font-weight:bold;font-size:1.8em;border-radius:100%;height:35px;width:35px;cursor:pointer;border:0;margin-bottom:5px;background:#f1f1f1;box-shadow:1px 1px 2px rgba(0,0,0,0.2) inset}
#blog-pager{font-weight:700;max-width:800px;margin:12px auto;padding:15px;background:#fff;border-radius:2px;box-shadow:0 2px 3px rgba(0,0,0,.05);overflow:hidden}
#blog-pager-older-link{float:left;text-align:left}
#blog-pager-newer-link,#blog-pager-older-link{padding:0 10px 0 30px;color:#141924;background:0 0;position:relative;margin:0}
#blog-pager-newer-link{height:auto;padding:0 30px 0 0;float:right;text-align:right;margin-right:-1px}svg.panahkanan,svg.panahkiri{position:absolute;top:50%;margin-top:-17px;color:#777;width:34px;height:34px}svg.panahkanan{right:0}
</style>
<script async='async' custom-element='amp-timeago' src='https://cdn.ampproject.org/v0/amp-timeago-0.1.js'/>
<script async='async' custom-element='amp-analytics' src='https://cdn.ampproject.org/v0/amp-analytics-0.1.js'/>
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
</head><!--<head/>-->
<body>
<!-- header -->
<header class='container'><div id='headerwrap'><div id='header'><a expr:href='data:blog.canonicalHomepageUrl'><amp-img class='amp-logo' expr:alt='data:blog.title' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix8EIyVjESA15PppWYpPcsww1LtqwmtnmIIU4ZghJ8aBcSW3jX9YLVIv555bVOD68db51aN-ECqhYRAmhxtdrgjWS2F4SrmCY2wJeh-_j-ntjq1VOfFCNLmhe1KNLFRuXlL-xNOP6fjvo/s1600/AMP_Logo.png' width='270'/></a></div></div></header>
<!-- header -->
<!-- article -->
<b:section class='main' id='main-amp' showaddelement='no'>
<b:widget id='Blog-0' locked='true' title='رسائل المدونة الإلكترونية' type='Blog' version='1'>
<b:widget-settings><b:widget-setting name='showDateHeader'>true</b:widget-setting><b:widget-setting name='style.textcolor'>#000000</b:widget-setting><b:widget-setting name='showShareButtons'>false</b:widget-setting><b:widget-setting name='showCommentLink'>true</b:widget-setting><b:widget-setting name='style.urlcolor'>#008000</b:widget-setting><b:widget-setting name='showAuthor'>true</b:widget-setting><b:widget-setting name='style.linkcolor'>#0000ff</b:widget-setting><b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting><b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting><b:widget-setting name='showAuthorProfile'>false</b:widget-setting><b:widget-setting name='style.layout'>1x1</b:widget-setting><b:widget-setting name='showLabels'>true</b:widget-setting><b:widget-setting name='showLocation'>true</b:widget-setting><b:widget-setting name='showTimestamp'>true</b:widget-setting><b:widget-setting name='postsPerAd'>1</b:widget-setting><b:widget-setting name='showBacklinks'>false</b:widget-setting><b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting><b:widget-setting name='showInlineAds'>false</b:widget-setting><b:widget-setting name='showReactions'>false</b:widget-setting></b:widget-settings>
<b:includable id='main' var='top'>
<!-- ADS top POST -->
<div class='ampad'>
<amp-ad data-ad-client='ca-pub-XXXXX' data-ad-slot='XXXX' height='100' type='adsense' width='auto'/>
</div>
<!-- ADS top POST -->
<b:loop values='data:posts' var='post'><article class='post-amp'><b:include data='post' name='post'/></article></b:loop>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"'><svg class='panahkanan' viewBox='0 0 24 24'>
<path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/>
</svg> التالي</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"'>السابق <svg class='panahkiri' viewBox='0 0 24 24'>
<path d='M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z' fill='#000000'/>
</svg></a>
</span>
</b:if>
</div>
</b:includable><b:includable id='backlinkDeleteIcon' var='backlink'/><b:includable id='backlinks' var='post'/><b:includable id='comment-form' var='post'/><b:includable id='commentDeleteIcon' var='comment'/><b:includable id='comment_count_picker' var='post'/><b:includable id='comment_picker' var='post'/><b:includable id='comments' var='post'/><b:includable id='feedLinks'/><b:includable id='feedLinksBody' var='links'/><b:includable id='iframe_comments' var='post'/><b:includable id='mobile-index-post' var='post'/><b:includable id='mobile-main' var='top'/><b:includable id='mobile-nextprev'/><b:includable id='mobile-post' var='post'/><b:includable id='nextprev'/>
<b:includable id='post' var='post'>
<script type='application/ld+json'>
{
"@context": "http://schema.org",
"@type": "BlogPosting",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "<data:post.url.canonical.https/>"},
"headline": "<data:post.title/>",
"datePublished": "<data:post.timestampISO8601/>",
"dateModified": "<data:post.lastUpdatedISO8601/>",
"description": "<data:post.snippet/>",
"image": {
"@type": "ImageObject",
"url": "<b:if cond='data:post.firstImageUrl'><data:post.firstImageUrl/><b:else/>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHIUXJHjaT8EOQCk8GLXrtEB0T7GNSKMACAobO730qyVC6IK6xWgntKM0sdYvi3mLv2XpORvfLUpl0R6OnMzXA5AZ4Oxx3ob484iliE6E3WYSvMdv3wLDSKODjPjDcf62lYd4yGaa14_uf/s1600/AMP.jpg</b:if>",
"height": 800,
"width": 800},
"author": {
"@type": "Person",
"name": "<data:post.author/>"},
"publisher": {
"@type": "Organization",
"name": "<data:blog.title/>",
"logo": {
"@type": "ImageObject",
"url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY6LhYQrXeXAnLHo719AJfgub3BxpBLYN7as93_D7pwcwILVIUiH_-dLpRX81YZl1LVrn-HwW1aUBVShcYVl7AkSMoNxi9j7FNHw4lhmN11neSb1kNWH6WOUsP1Rmhk2wso1E78rqRq_k/s1600/LOG-AMP.png",
"width": 600,
"height": 60}}
}
</script>
<h1 class='amp-wp-title'><data:post.title/></h1><div class='post-meta'><div class='article-author'>كتب : <data:post.author/></div><div class='article-timeago'>اخر تحديث : <amp-timeago class='published updated' expr:datetime='data:post.lastUpdatedISO8601' height='19' layout='fixed' locale='ar' width='75'><data:post.lastUpdatedISO8601/></amp-timeago></div></div>
<div class='article-featured-image'>
<b:if cond='data:post.firstImageUrl'>
<amp-img class='post-image' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' height='360' layout='responsive' width='800'/>
<b:else/>
<amp-img class='post-image' expr:alt='data:post.title' height='360' layout='responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHIUXJHjaT8EOQCk8GLXrtEB0T7GNSKMACAobO730qyVC6IK6xWgntKM0sdYvi3mLv2XpORvfLUpl0R6OnMzXA5AZ4Oxx3ob484iliE6E3WYSvMdv3wLDSKODjPjDcf62lYd4yGaa14_uf/s1600/AMP.jpg' width='800'/>
</b:if>
</div>
<!-- ADS first POST -->
<div class='ampad'>
<amp-ad data-ad-client='ca-pub-XXXXX' data-ad-slot='XXXX' height='250' type='adsense' width='auto'/>
</div>
<!-- ADS first POST -->
<div class='amp-content'><b:eval expr='data:post.body snippet { linebreaks: true, ellipsis: true }'/><div class='desktop-link'><a expr:href='data:blog.canonicalUrl + "?m=0"'>عرض المزيد</a></div></div>
<!-- ADS End POST -->
<div class='ampad'>
<amp-ad data-ad-client='ca-pub-XXXXX' data-ad-slot='XXXX' height='250' type='adsense' width='auto'/>
</div>
<!-- ADS End POST -->
<div class='amp-tags'>
<b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if></b:loop></div>
</b:includable>
<b:includable id='postQuickEdit' var='post'/><b:includable id='shareButtons' var='post'/><b:includable id='status-message'/><b:includable id='threaded-comment-form' var='post'/><b:includable id='threaded_comment_js' var='post'/><b:includable id='threaded_comments' var='post'/>
</b:widget>
</b:section>
<!-- article -->
<!-- footer -->
<footer class='container'><div id='footer'><button class='upbt' on='tap:header.scrollTo'>⇪</button><div class='poweredby'>Designed by | mohamed elgendy</div></div></footer>
<amp-analytics id='analytics1' type='googleanalytics'><script type='application/json'>
{
"vars": {
"account": "<data:blog.analyticsAccountNumber/>"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}</script></amp-analytics>
<!-- footer -->
<!-- </body> --></body>
<b:else/>
ولتشغيل قالب APM داخل مدونتك فقط قم بالذهاب الي المظهر وقم بالتعديل كالأتي :
لاضافة الاعلانات داخل قالب APM قم باضافة شفرة الاكود هنا :
اعلي المحتوي <!-- ADS first POST -->
اسفل المحتوي <!-- ADS End POST -->
ولتغيير اللوجو الخاص بالقالب قم بالبحث عن هذا الرابط واستبداله بما يناسبك :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix8EIyVjESA15PppWYpPcsww1LtqwmtnmIIU4ZghJ8aBcSW3jX9YLVIv555bVOD68db51aN-ECqhYRAmhxtdrgjWS2F4SrmCY2wJeh-_j-ntjq1VOfFCNLmhe1KNLFRuXlL-xNOP6fjvo/s1600/AMP_Logo.png
كان هذا شرح اليوم اذا واجهتك اي مشكلة داخل القالب، او اردت الاستفسار عن شيئ لاتتردد في كتابة تعليق، دمتم في أمان الله.