قالب برو ماج - قالب احترافي

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

معاينة و تحميل شــراء

لتحرير القالب يفضل استخدام احد برامج تحرير النصوص البرمجية كبرنامج 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzaaT62F-xkBNfWRbCa8lm6zMH6RKweMmXQ4OkwO4AZzpgKIGBE2LU7Y_ZkfsYGOXbNmXpiZVMcQgm70dKEbIg_IGE4aJOTr-rxPY-Q_tDpcmam3UbGce1J_WFMg8uFO11VE59m9r-9Jc/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibnyhZs0CeAaqx1ldtqpB6krbrhxSGccuIJuDglznG4L6WK_5_Raph8RdIfQ3pDXZy9_5IWy7BCW4PceUroWh5l7NLPeyE1khkcwLffpYlkegjTOI_9JV326nmg8ZClDDwWU0B4L2A1h69/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>

معاينة و تحميل شــراء