قالب برو ماج

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

لتحرير القالب يفضل استخدام احد برامج تحرير النصوص البرمجية كبرنامج Notepad++ , عوضا عن تحرير ملف القالب في محرر بلوجر.

تحرير القائمة العلوية

قم بفتح ملف القالب بمحرر النصوص أو اتجه الى المظهر ثم ابحث باستخدام Ctrl + F عن الكود <div id=’head-mobile’/> وقم بتعديل الكلمات والروابط و # بالروابط الخاصة بك.

تعديل اداوات المواضيع بحسب التسمية العلوية

اتجه الى تخطيط قم بالبحث عن اداة مقالات 1 ستجد ضمنها اداتي HTML/JavaScript قم بتحرير العنوان بما تريد, و ضع في المحتوى هذا الكود [تسمية][recentbylabel] وقم بتغيير تسمية الى تسمية المواضيع التي تريد ظهورها في الاداة.

تعديل اداوات المواضيع بحسب التسمية السفلية

اتجه الى تخطيط قم بالبحث عن اداة مقالات 2 ستجد ضمنها ايضا اداتي HTML/JavaScript قم بتحرير العنوان بما تريد, و ضع في المحتوى هذا الكود [تسمية][recentbylabel2] وقم بتغيير تسمية الى تسمية المواضيع التي تريد ظهورها في الاداة.

تحرير القائمة السفلية

قم بفتح ملف القالب بمحرر النصوص أو اتجه الى المظهر ثم ابحث باستخدام Ctrl + F عن الكود <div class=’maxwrap bawahcr’> وقم بتعديل الكلمات والروابط و # بالروابط الخاصة بك.

تحرير قائمة مواقع التواصل السفلية

قم بفتح ملف القالب بمحرر النصوص أو اتجه الى المظهر ثم ابحث باستخدام Ctrl + F عن الكود <span class=’social-left’> وقم بتعديل # بالروابط الخاصة بك.

تحريرآداة التنبيه(جرس الملاحظات)

قم بفتح ملف القالب بمحرر النصوص أو اتجه الى المظهر ثم ابحث باستخدام Ctrl + F عن الكود <div class=’asalseonotif’> ستجد الكلمات اسفل الكود علها بما يناسبك.

تركيب اداة الاشترااك بالنشرة البريدية

اتجه الى تخطيط قم بإضافة اداة  HTML/JavaScript في السايدبار وضع الكود التالي بداخلها

<div class="rainbow">
<div id="subscribe-css">
<div class="subscriber-wrapper">
<h4>النشرة البريدية</h4>
<p>إذا كنت تحب المقالات في هذه المدونة ، فيرجى الاشتراك مجانًا عبر البريد الإلكتروني.</p>
<div class="subscribe-form">
<form action='https://feedburner.google.com/fb/a/mailverify?uri=itheric' class="subscribe-form" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=itheric', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="seoindzign" />
<input name="loc" type="hidden" value="en_US" />
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="البريد الإلكتروني"/>
<input class="subscribe-css-button" title="" type="submit" value="اشتراك" />
</form>
</div>
</div></div></div>

مع تغيير itheric  بـID الخاص بمدونتك على موقع الخلاصات feedburner

تركيب اداة التدوينات الحديثة(الأحدث)

اتجه الى تخطيط قم بإضافة اداة  HTML/JavaScript في السايدبار وضع الكود التالي بداخلها

<style scoped='' type='text/css'>
ul.recent_posts_arlina li{display:inline-block;position:relative;width:100%;margin:0;padding:10px 0;transition:all .3s linear;}
ul.recent_posts_arlina li:last-child {border:0;}
.recent_posts_arlina .wrapinfo{display:inline-block;margin:0 0 0 10px;overflow:hidden;z-index:2;position:relative;width:72px;height:72px;border-radius:5px;float:right;animation:moccaShine 1.25s linear infinite;background:#f5f5f5 linear-gradient(to left,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:400px 50px}
ul.recent_posts_arlina li img.recent_thumb{width:100%;height:auto}
.recent_posts_arlina {float:right;width:100%;margin:10px 0px 5px 10px;padding:0;font-size:.9rem;}
ul.recent_posts_arlina li a{color:#222;font-size:13px;font-weight:600;line-height:normal}
ul.recent_posts_arlina li a:hover{color:#3498db}
.recent_posts_arlina i{font-style:normal;color:#999;font-size:13px}
</style>
<script style='text/javascript' src='https://cdn.jsdelivr.net/gh/MohammadQt/Itheric@master/v2/js/recentpostarlina.js'></script>
<script style='text/javascript'>
var numposts=4,showpostthumbnails=!0,displaymore=!1,displayseparator=!1,showcommentnum=!1,showpostdate=!1,showpostsummary=!1,numchars=62;
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentpostinfoarlina'></script>

تركيب اداة التواصل والمتابعة في السايدبار

اتجه الى تخطيط قم بإضافة اداة  HTML/JavaScript في السايدبار وضع الكود التالي بداخلها

<div class="authorbox">
<img alt="author" src="https://4.bp.blogspot.com/-eh6N95NkCGw/XJPzvzQnjKI/AAAAAAAAD8w/7CD4t5_VodAyHQadjhvo_m_5zya0McWwQCK4BGAYYCw/s320/Itheric-logo.png" width="120" height="120" />
<a class="authorname" href="https://blog.itheric.com/#" rel="author" target="_blank" title="اضغط للعرض">الأثــيـر</a>
<div class="sosmed-author">
<ul>
<li><a href="https://www.facebook.com/#" target="_blank" title="Facebook" rel="nofollow"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://twitter.com/#" target="_blank" title="Twitter" rel="nofollow"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://www.instagram.com/#" target="_blank" title="Instagram" rel="nofollow"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://www.youtube.com/channel/#" target="_blank" title="Youtube" rel="nofollow"><i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a></li>
</ul>
<div class="clear"></div>
<div class="bawahsos">
<a class="butt-author" href="https://www.blogger.com/follow-blog.g?blogID=4717033401200122451" target="_blank" title="تابعنا"><i aria-hidden="true" class="fa fa-user-circle"></i> متابعة</a>
<a class="butt-contact" href="https://itheric-bl.blogspot.com/p/contact-us.html" rel="nofollow" target="_blank" title="تواصل مع المشرف"><i aria-hidden="true" class="fa fa-paper-plane"></i> اتصل بنا</a>
</div>
</div>
</div>

مع تغيير المحدد برابط اللوجو الخاص بك والروابط بخاصتك

اضافة الاعلانات

يمكنك اضافة الاعلانات مباشرة من تخطيط عبر البحث عن الادوات بنر اعلاني ,بنر اعلاني 1, بنر اعلاني 2

الإضافات داخل التدوينات

اضفها من تحرير HTML للمقال
إضافة الجدول

  <table cellpadding="0" cellspacing="0" style="text-align: right;"><tbody>
<tr><th>قالب مساين</th><th>النسخة</th><th>السعر</th></tr>
<tr><td>قالب مساين</td><td>v3.00</td><td>$5.00 <a href="https://blog.itheric.com/" rel="nofollow" target="_blank">شراء</a></td></tr>
<tr><td>قالب مساين</td><td>v4.00</td><td>$5.40 <a href="https://blog.itheric.com/" rel="nofollow" target="_blank">شراء</a></td></tr>
<tr><td>قالب مساين</td><td>v2.00</td><td>$3.10 <a href="https://blog.itheric.com/" rel="nofollow" target="_blank">شراء</a></td></tr>
<tr><td>قالب مساين</td><td>v1.00</td><td>$2.99 <a href="https://blog.itheric.com/" rel="nofollow" target="_blank">شراء</a></td></tr>
<tr><td>قالب مساين</td><td>v2.9</td><td>$3.50 <a href="https://blog.itheric.com/" rel="nofollow" target="_blank">شراء</a></td></tr>
<tr><td>قالب مساين</td><td>v4.1</td><td>$6.99 <a href="https://blog.itheric.com/" rel="nofollow" target="_blank">شراء</a></td></tr>
<tr><td>قالب مساين</td><td>v1.5</td><td>$1.99 <a href="https://blog.itheric.com/" rel="nofollow" target="_blank">شراء</a></td></tr>
<tr><td>قالب مساين</td><td>v2.1</td><td>$4.99 <a href="https://blog.itheric.com/" rel="nofollow" target="_blank">شراء</a></td></tr>
<tr><td>قالب مساين</td><td>v3.15</td><td>$7.99 <a href="https://blog.itheric.com/" rel="nofollow" target="_blank">شراء</a></td></tr>
<tr><td>قالب مساين</td><td>v1.00</td><td>$9.99</td></tr>
<tr><td>قالب مساين</td><td>v0.00</td><td>$0.99</td></tr>
</tbody></table>

اضافة صندوق الأكواد

  <code><pre>
.......ضع الكود هنااا......
</code></pre>

إضافة الأزرار

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="https://www.blogger.com/v" target="_blank">مــعــايــنة</a></li>
<li><a class="download" href="https://blog.itheric.com/" target="_blank">تـــحـــمـــيل</a></li>
</ul>
</div>

إضافة محتوى مخفي

<div id="flippy">
<button>عــرض / إخفاء</button></div>
<div id="flippanel">
ضع هنا اي محتوى تريد
</div>
</div>

إضافة فيديو يوتيوب متجاوب

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="https://www.youtube.com/embed/hoHfVJi9WBU">
</div>
</div>
</div>

استبدل المضلل بلأحمر بمعرف الفيديو الذي تريد اضافته
إضافة نص بعمودين

<div class="bagidua">
النص هنا
</div>

إضافة نص بثلاث أعمدة

<div class="bagitiga">
النص هنا
</div>

إضافة نص بأربعة أعمدة

<div class="bagiempat">
النص هنا
</div>

بالنسبة الى تعريف الكاتب فهو يعمل بشكل تلقائي بحسب معلومات حسابك على بلوجر

اضافة صفحة اتصل بنا

اتجه الى صفحات وقو بإنشاء صفحة جديدة والصق الكود التالي بداخلها

<form name="contact-form">
<div class="formcolumn1">
<input id="ContactForm1_contact-form-name" name="name" placeholder="الاسم" size="30" type="text" value="" /><br /></div>
<div class="formcolumn2">
<input id="ContactForm1_contact-form-email" name="email" placeholder="البريد الالكتروني" size="30" type="text" value="" /><br /></div>
<div class="formcolumn3">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="الرسالة" rows="7"></textarea><br /></div>
<div class="formcolumn4">
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="ارسال" /><br /></div>
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#ContactForm1{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{font-family:'cairo';display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'cairo';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:right;padding:0 20px 0 0;margin:10px 5px 3px 0;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;right:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:right;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 0 0 10px}
.formcolumn2{padding:0 10px 0 0}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>

اضافة صفحة الفهرس

اتجه الى صفحات وقو بإنشاء صفحة جديدة والصق الكود التالي بداخلها

 <div class="tabbed-toc" id="tabbed-toc">
</div>
<script>
var tabbedTOC={blogUrl:"https://pro-mags.blogspot.com/",containerId:"tabbed-toc",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["كانون الثاني", "شباط", "آذار", "نيسان", "أيار", "حزيران", "تموز", "آب", "ايلول", "تشرين الاول", "تشرين الثاني", "كانون الاول"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' &ndash; <em style="color:red;">جديد</em>'};
</script>

<script src="https://cdn.jsdelivr.net/gh/Indzign/InSEO@master/daftarisikeren.js"></script>

<style scoped="" type="text/css">
.tabbed-toc{margin:0 auto;position:relative;background:linear-gradient(45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;animation:Gradient 15s ease infinite}
.tabbed-toc .loading{display:block;padding:2px 12px;color:#fff}
.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li{margin:0;padding:0;list-style:none}
.tabbed-toc .toc-tabs{width:20%;float:right}
.tabbed-toc .toc-tabs li a{display:block;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s}
.tabbed-toc .toc-tabs li a:hover{background-color:rgba(0,0,0,0.05)}
.tabbed-toc .toc-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 0 0 -1px}
.tabbed-toc .toc-content,.tabbed-toc .toc-line{width:80%;float:left;background-color:#fff;box-sizing:border-box}
.tabbed-toc .toc-line{float:none;display:block;position:absolute;top:0;left:0;bottom:0}
.tabbed-toc .panel{position:relative;z-index:5}
.tabbed-toc .panel li a{color:#1277cb;display:block;position:relative;font-weight:500;font-size:14px;padding:6px 12px;overflow:hidden}
.tabbed-toc .panel li time{display:block;font-weight:normal;font-size:11px;color:#666;float:left}
.tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px}
.tabbed-toc .panel li .summary img.thumbnail{float:right;display:block;margin:5px 0 0 8px;width:72px;height:72px;background-color:#fafafa}
.tabbed-toc .panel li{background-color:#f9f9f9;margin:0}
.tabbed-toc .panel li:nth-child(even){background-color:#fff}
.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li.bold a{background-color:rgba(0,0,0,0.03);outline:none}
.tabbed-toc .panel li a em{background:#f39c12;color:#fff!important;font-style:initial;font-size:11px;margin:0 5px 0 0;padding:2px 10px;border-radius:22px}
.tabbed-toc .panel li:before{display:none}
@-webkit-keyframes Gradient{0%{background-position:100% 50%}50%{background-position:0% 50%}100%{background-position:100% 50%}}
@-moz-keyframes Gradient{0%{background-position:100% 50%}50%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes Gradient{0%{background-position:100% 50%}50%{background-position:0% 50%}100%{background-position:100% 50%}}
@media (max-width:768px){.tabbed-toc .toc-tabs,.tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}.tabbed-toc .toc-tabs li{display:inline;float:right}.tabbed-toc .toc-tabs li a.active-tab{background-color:rgba(64,64,64,0.1)}.tabbed-toc .toc-content{border:none}.tabbed-toc .toc-line,.tabbed-toc .panel li time{display:none}}
</style>