الأحد، 9 أكتوبر، 2016

تحميل قالب Pro-mix مع شرح التركيب

تحميل قالب Pro-mix مع شرح طريقة التركيب و التعديل
قالب برو ميكس 2017,  ثم تصحيح أخطاء القالب
أجمل قالب تقني 


معلومات عن القالب

✔ قالب متجاوب مع جميع الأجهزة
✔ سيو جاهز
✔ قالب به سلايد شو
✔ قائمة جانبية إظافية
✔ أزرار المتابعة بعدة أشكال
✔ القالب خفيف و سريع في التصفح
✔ أزرار المشاركة أسفل كل تدوينة
و العديد

مشاهدة و تحميل القالب


شرح تركيب و تعديل القالب

لإظافة السلايد شو
من تخطيط إفتح صندوق إسمه slider-wrapper بالضغط على تحرير
ثم ضع به إسم قسم معين 
مثال
و لتغيير الرابط. من داخل القالب إبحث عن هذه الكلمة شاهد المزيد
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section id='slider-wrapper' max-widget='1' showaddelement='no'>
  <b:widget id='HTML131' locked='false' title='قوالب بلوجر' type='HTML' version='1' visible='true'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
<div id='tag-title'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
    <a class='morree' href='#'> شاهد المزيد</a>
و غير ما هذه العلامة # برابط القسم



لتعديل على صندوق المشاركات
من تخطيط إفتح صندوق إسمه recent-sec2 بالضغط على تحرير
ثم ضع به هذا الكود
[إظافات بلوجر][videos]
مع تغيير ما باللون الأخضر بإسم قسم معين
و لتغيير العنوان و الرابط . من داخل القالب إبحث عن هذه الكلمة أفضل القوالب
<div id='tag-title'>
<h2 class='title'>أفضل القوالب</h2>
<a class='morree' href='#'>شاهد المزيد</a>
</div>
غير ما باللون الاحمر بإسم القسم 
و غير ما هذه العلامة # برابط القسم



لتعديل على صندوق المتابعة الموجود في الأسفل
من داخل القالب إبحث عن هذه الكلمة awesom-icon
<div id='social-footer'>
<ul>
<li><a href='https://twitter.com/' target='_blank'>
<div class='right' id='tw_followers'>
<span class='name'>تابعناعلى</span>
<div class='awesom-icon'>
<i class='fa fa-twitter'/>
</div>
<span class='counter'>500 متابع</span>
</div>
</a></li>
<li><a href='https://www.facebook.com/rtemplate' target='_blank'>
<div class='right' id='fb_followers'>
<span class='name'>تابعناعلى</span>
<div class='awesom-icon'>
<i class='fa fa-facebook'/>
</div>
<span class='counter'>5k معجب</span>
</div>
</a></li>
<li><a href='https://plus.google.com/' target='_blank'>
<div class='right' id='gl_followers'>
<span class='name'>تابعناعلى</span>
<div class='awesom-icon'>
<i class='fa fa-google-plus'/>
</div>
<span class='counter'>1.8k متابع</span>
</div>
</a></li>
<li><a href='https://www.youtube.com/' target='_blank'>
<div class='right' id='gl_followers'>
<span class='name'>تابعناعلى</span>
<div class='awesom-icon'>
<i class='fa fa-youtube'/>
</div>
<span class='counter'>18.2k مشترك</span>
</div>
غير ما باللون الأحمر برابط الحساب
غير ما باللون الأخضر بعدد المتابعين



لتعديل على الكاتب أو صاحب الموقع
من داخل القالب إبحث عن هذه الكلمة about-authorth
<div class='about-authorth'>
<a class='waves-effect waves-light' href='https://plus.google.com/' rel='author' title=''> إسمك هنا </a>
  <img itemprop='image' src='https://s26.postimg.org/izki770p5/said.jpg'/>
  <span><a class='url-author waves-effect waves-light' href='/' rel='author' title='blog'><i aria-hidden='true' class='fa fa-link'/></a></span>
<span><a class='fb-author waves-effect waves-light' href='https://www.facebook.com/rtemplate' rel='author' title='facebook'><i aria-hidden='true' class='fa fa-facebook'/></a></span>
<span><a class='tw-author waves-effect waves-light' href='https://www.twitter.com' rel='author' title='twitter'><i aria-hidden='true' class='fa fa-twitter'/></a></span>
<span><a class='yt-author waves-effect waves-light' href='https://www.youtube.com/' rel='author' title='youtube'><i aria-hidden='true' class='fa fa-youtube-play'/></a></span>
</div>
غير ما باللون الأحمر برابط حسابك
غير ما باللون الأزرق بصورتك الشخصية
غير ما باللون الأخضر بإسمك



لتعديل على مواقع ندعمها
من داخل القالب إبحث عن هذه الكلمة تبادل إعلاني
<div class='widget-content'>
<ul id='navlist' style=''>
<table align='center' width='100%'><tbody><tr>
<td align='center' width='25%'>
<a href='#' target='_blank'> إسم الموقع هنا </a></td>
<td align='center' width='25%'>
<a href='#' target='_blank'> إسم الموقع هنا  </a></td>
<td align='center' width='25%'>
<a href='#' target='_blank'>إسم الموقع هنا   </a></td>
<td align='center' width='25%'>
<a href='#' target='_blank'> إسم الموقع هنا </a></td>
</tr></tbody></table></ul>
<ul id='navlist' style=''>
<table align='center' width='100%'><tbody><tr>
<td align='center' width='25%'>
<a href='#' target='_blank'> إسم الموقع هنا </a></td>
<td align='center' width='25%'>
<a href='#' target='_blank'> إسم الموقع هنا </a></td>
<td align='center' width='25%'>
<a href='#' target='_blank'> إسم الموقع هنا </a></td>
<td align='center' width='25%'>
<a href='#' style='background: #D94453;color:#fff' target='_blank'> اعلن هنا </a></td>
</tr></tbody></table></ul>
<ul id='navlist' style=''>
<table align='center' width='100%'><tbody><tr>
<td align='center' width='25%'>
<a href='#' style='background: #D94453;color:#fff' target='_blank'> اعلن هنا </a></td>
<td align='center' width='25%'>
<a href='#' style='background: #D94453;color:#fff' target='_blank'> اعلن هنا </a></td>
<td align='center' width='25%'>
<a href='#' style='background: #D94453;color:#fff' target='_blank'> اعلن هنا </a></td>
<td align='center' width='25%'>
<a href='#' style='background: #D94453;color:#fff' target='_blank'> اعلن هنا </a></td>
</tr></tbody></table></ul>
</div>
غير ما باللون الاحمر بإسم الموقع
غير هذه العلامة # بالرابط
الكود باللون الأزرق هو للأماكن الفارغة



لتعديل على القائمة الجانبية
من داخل القالب إبحث عن هذه الجملة navtop-menu-table-list1
<ul id='navtop-menu-table-list1'>
<li><a href='#'>تسمية</a></li>
<li><a href='#'>تسمية</a></li>
<li><a href='#'>تسمية</a></li>
<li><a href='#'>تسمية</a></li>
<li><a href='#'>تسمية</a></li>
<li><a href='#'>تسمية</a></li>
<li><a href='#'>تسمية</a></li>
<li><a href='#'>تسمية</a></li>
<li><a href='#'>تسمية</a></li>
</ul>


<ul id='navtop-menu-table-list2'>
<li><a href='#'>سياسة الخصوصية</a></li>
<li><a href='#'>إلتحق بفريق التدوين</a></li>
<li><a href='#'>اتفاقية الاستخدام</a></li>
<li><a href='#'>إعلن في موقعنا</a></li>
<li><a href='#'>اتصل بنا</a></li>
<li><a href='#'>من نحن ?</a></li>

</ul>
غير ما باللون الاحمر بإسم القسم 
غير ا باللون الأخضر بالرابط
ما باللون الأزرق أنت حر تضع به ما تريد أو تتركه كما هو



إظافات القالب +
كود إظافة صندوق المتابعين
<style>

.zd-social {
min-width: 250px;
margin: 10px 0
}
.zd-social a {
color: #fff;
position: relative;
display: block;
overflow: hidden
}
.zd-social .sq {
width: 50%;
height: 0;
padding-bottom: 50%;
float: left
}
.zd-social .icon {
left: 0%;
top: 0;
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out
}
.zd-social a:hover .icon {
left: -100%
}
.zd-social a:hover .content {
left: 0
}
.zd-social .content {
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
position: absolute;
top: 0;
left: 100%;
word-wrap: break-word;
width: 90%;
height: 100%;
margin: 0 5%;
font: 400 14px 'open sans', sans-serif;
text-align: center
}
.zd-social .display {
margin-top: 40px;
display: block;
direction: ltr;
}
.zd-social .count {
font-weight: bold;
display: block;
margin-top: 5px
}
.zd-social .icon span {
position: Absolute;
left: 50%;
top: 50%;
color: #fff;
text-align: Center;
width: 40px;
height: 40px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
display: block;
margin-top: -20px;
margin-left: -20px;
border: 2px solid #fff;
font: 400 20px 'fontawesome';
line-height: 40px
}
.zd-social .facebook {
background: #3b5998
}
.zd-social .twitter {
background: #00aced
}
.zd-social .google {
background: #dd4b39
}
.zd-social .instagram {
background: #9b6954
}
.zd-social .email {
background: #ffaa09
}
.zd-social .rec {
height: 0;
padding-bottom: 40%
}
</style>

<div class="widget-content">
<div class="zd-social">
  <a class="sq facebook" href="https://www.facebook.com/rtemplate" target="_blank">
    <div class="icon"><span><i class="fa fa-facebook"></i></span></div>
    <div class="content">
    <span class="display">zinani</span>
    <span class="count">18.2k</span>
    </div>
  </a>
  <a class="sq twitter" href="https://twitter.com" target="_blank">
    <div class="icon"><span><i class="fa fa-twitter"></i></span></div>
    <div class="content">
    <span class="display">@zinani</span>
    <span class="count">800</span>
    </div>
  </a>
  <a class="sq google" href="https://plus.google.com" target="_blank">
    <div class="icon"><span><i class="fa fa-google-plus"></i></span></div>
    <div class="content">
    <span class="display">+ zinani</span>
    <span class="count">1.8k</span>
    </div>
  </a>
  <a class="sq instagram" href="https://www.instagram.com" target="_blank">
    <div class="icon"><span><i class="fa fa-instagram"></i></span></div>
    <div class="content">
    <span class="display">@zinani</span>
    <span class="count">53.2k</span>
    </div>
  </a>
  <div style="clear:both">
  <a class="rec email" href="yourEmailHere" target="_blank">
    <div class="icon"><span><i class="fa fa-envelope"></i></span></div>
    <div class="content">
    <span class="display">yourEmail@gmail.com</span>
    </div>
  </a>
</div></div>
</div>
غير ما باللون الأحمر برابط حسابك
غير ما باللون الأزرق بإسم الحساب
غير ما باللون الأخضر بعدد المتابعين
غير ما باللون الأصفر ببريدك الإكتروني



كود إظافة عداد المتابعيد
<style>
.fanscount li a:hover {
    color: #da4d5b;
}
.fanscount li a {
    float: right;
    height: 42px;
    line-height: 35px;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    transition: 0.3s;
}

.fanscount {
    padding: 10px;
}
.fanscount li {
    padding: 0px 20px;
    float: right;
    width: 100%;
    list-style: none;
}

.fanscount li i {
    font-size: 28px;
    line-height: 35px;
    float: right;
    padding: 0px 0px 0px 10px;
}

.fanscount li p {
    color: white;
    float: left;
    line-height: 40px;
    font-size: 14.5px;
}
</style>

<div class="fanscount">
<li class=""><a href="https://www.facebook.com/"><i class="fa fa-facebook-square" aria-hidden="true"></i>فيس بوك</a><p>18.2k</p></li>
<li class=""><a href="https://www.youtube.com/"><i class="fa fa-youtube-square" aria-hidden="true"></i>يوتيوب</a><p>5k</p></li>
<li class=""><a href="https://plus.google.com/"><i class="fa fa-google-plus-square" aria-hidden="true"></i>جوجل بلس</a><p>1.8k</p></li>
<li class=""><a href="https://twitter.com/"><i class="fa fa-twitter-square" aria-hidden="true"></i>تويتر</a><p>500</p></li>
</div>
غير ما باللون الأحمر برابط حسابك
غير ما باللون الأخضر بعدد المتابعين



كود إظافة طاقم الموقع
<style>
.teamsecomunity{

}
.teamsecomunity ul {
    padding: 0px;
}
.teamsecomunity ul #teamsecomunity-pos {
    padding: 4px 8px 5px;
    display: block;
    width: 160px;
    text-align: center;
    font-size: 16px;
    line-height: 20px;
    background: #0C0C0C;
    border-radius: 4px 4px 0px 0px;
    margin: 10px 10px 0px 0px;
    font-weight: normal;
    color: #676767;
}
.teamsecomunity ul li {
    padding: 3px;
    list-style: none;
    display: flex;
    background: #131313;
    border-radius: 5px;
    overflow: hidden;
}
.teamsecomunity ul li img {
    width: 90px;
    height: 90px;
    display: block;
    flex-shrink: 0;
    border-radius: 5px;
}
.teamsecomunity ul li .teamsecomunity-name-disc {
    flex-grow: 1;
    padding: 5px 5px 0px 0px;
}
.teamsecomunity ul li .teamsecomunity-name-disc h2 {
    font-size: 18px;
    color: #F1F1F1;
    font-weight: normal;
    border-bottom: 1px solid #232323;
    padding: 0px 0px 6px 0px;
    width: 100%;
    background: none;
    text-align: right;
    border-radius: 0px;
    margin: 0px;
}
.teamsecomunity ul li .teamsecomunity-name-disc p {
    color: #6F6F6F;
    font-size: 11px;
    line-height: 18px;
    padding: 3px 0px 0px 5px;
}
.teamsecomunity-contact {
    width: 30px;
    flex-shrink: 0;
    border-right: 1px solid #232323;
}
.teamsecomunity-contact a {
    display: block;
    width: 100%;
    height: 30px;
    text-align: center;
    line-height: 28px;
    color: #929292;
    transition: 0.2s;
}
.teamsecomunity-contact a:hover {
    color: #fff;
}
#teamsecomunity-email{
    background: #0C0C0C;
    width: 80%;
    padding: 0px 10px;
    font-size: 14px;
    line-height: 22px;
    margin: 0px 10px 0px 0px;
    color: #4E4E4E;
    border-radius: 0px 0px 5px 5px;
    text-align: left;
    direction: ltr;
    font-weight: normal;
}
#teamsecomunity-email i{
    color: #969696;
    line-height: 22px;
    width: 22px;
    text-align: left;
    margin-right: 10px;
    border-right: 1px solid #1D1D1D;
}
</style>
<div class="teamsecomunity">
<ul>
<h2 id="teamsecomunity-pos">مدير الموقع</h2>
<li>
<img src="https://s26.postimg.org/izki770p5/said.jpg" />
<div class="teamsecomunity-name-disc">
<h2>
إسمك هنا</h2>
<p>
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة , هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة , هذا النص هو مثال لنص يمكن أن يستبدل  
</p>
</div>
<div class="teamsecomunity-contact">
<a href="https://www.facebook.com/rtemplate"><i class="fa fa-facebook-square" aria-hidden="true"></i></a>
<a href="https://twitter.com/"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="https://instagram.com/"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</div>
</li>
<h2 id="teamsecomunity-email"><i class="fa fa-at" aria-hidden="true"></i>contact@yourEmail.com</h2>

</ul></div>
غير ما باللون البرتقالي برابط صورتك
غير ما بالون الاخضر بإسمك

غير ما باللون الأزرق بنبذة تعريفية عنك أو عن موقعك
غير ما باللون الأحمر بروابطك في مواقع التواصل
غير ما باللون الأصفر ببريدك الإلكتروني





هناك 5 تعليقات:
إترك تعليق

لدعم هذا المشروع