الجمعة، 1 يوليو 2016

السلام عليكم و رحمة اللة تعلى و بركاته مرحبا بكم اعزائي زوار مدونة قوالب ، في هده التدوينة الحصرية سأقوم بتقديم قالب أقل مايمكن ان يقال عنه انه رائع بحيت صمم هذا القالب ليكون مختلفا عن باقي القوالب التقليدية حيث نجد في الهيدر سلايدر يقوم بعرض صور انت تختارها إضافة إلى قائمة جانبية تظهر و تختفي بضغطة ناهيك عن كونة متجاوب بشكل رهيب مع جميع الاجهزة كيف ما كان مقاصها بدون إطالة اترككم تحكمون على القالب بأنفسكم

قالب بلوجر متجاوب

مميزات القالب


  1. قالب انيق ومميز واحترافي
  2. يتميز القالب بارشفه قويه
  3. يتميز بخفة في التصفح
  4. ازار المشاركات بشكل حصري
  5. قائمة جانبية تظهر و تختفي بظغطة زر
  6. هيدر على شكل سلايدر لعرض الصور
  7. متوافق مع جميع المتصفحات
  8. متوافق مع جميع الاجهزة
  9. إضافة كاتب الموضوع بشكل الحصري
  10. شكل تعليقات حصري
  11. إضافة المواضيع دات صلة بشكل جذاب
  12. والمزيد من المزايا ادعكم تكتشفونها بانفسكم

المعاينة و التحميل

تخصيص القالب


تخصيص صور الهيدر


قم بالبحث عن الكود التالي: 
jQuery(".main-header")

ستجد هذا الكود


jQuery(".main-header").backstretch([ "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbvhbp4Ru4T3_3FxyMRXaTCs9d1OK7dtnDhyphenhyphenzucoExvrH0EuHphkd0JMiA_VOV7GOtmevdpfsxn4wE3QNlARLoawGaYchqpvn4tcSyBGISdKl_efda5XaAymYvkUa3MJCvMg5UceOjxd4/s1600/slide1.jpg","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Gel-rMnQ08CTG8VtjyRe5ZED3XtVYPN_uHqMHcHXI1S-JQSMY41XVl2tl1yr_0FqZIC2GKBpXkUQDpd_GFB01764Sh_zjBHGCPj3rpas4zLjiKxFYjX0rcTJJoA4C1YvQA2qY_uhENY/s1600/bg-subheader.jpg","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyQrD5c7p2WZQcOkeIOBvNK-dw9PQvB6fp7TiKlMGb3yymn_gyFFhUsa-XUQf6fwhmDVtQBexr764wKs3XF5ePWvC_-WIy7TRt8YLz5nICO9P-mM23sjF6tRTnL9bbRuJ-r8la-4J3GrY/s1600/bg-1.jpg" ,"{ centeredY: false, duration: 7000, fade: 1000 });
قم بتغيير ما باللون الاحمر إلى الروابط الخاصة بالصور التي تريد وضعها مكان السابقة

تخصيص القائمة الجانبية 

قم بالبحث عن الكود التالي  
<ul class='sb-menu'> 

وستجد الكود التالي

<li class='sb-close'><a href='http://qawalib-blog.blogspot.com'>الرئيسية</a></li>
          <li class='sb-close'><a href='http://qawalib-blog.blogspot.com' rel='follow'>تسمية</a></li>
<li class='sb-close'><a href='http://qawalib-blog.blogspot.com'>تسمية</a></li>
<li class='sb-close'><a href='http://qawalib-blog.blogspot.com'>تسمية</a></li>
<li class='sb-close'><a href='http://qawalib-blog.blogspot.com'>تسمية</a></li>
<li><a class='sb-toggle-submenu' href='#'>قائمة مسندلة<span class='sb-caret'/></a>
<ul class='sb-submenu'>
<li class='sb-close'><a href='http://qawalib-blog.blogspot.com'>تسمية</a></li>
<li class='sb-close'><a href='http://qawalib-blog.blogspot.com'>تسمية</a></li>
<li class='sb-close'><a href='http://qawalib-blog.blogspot.com'>تسمية</a></li>
<li class='sb-close'><a href='http://qawalib-blog.blogspot.com'>تسمية</a></li>
</ul>
</li>
<li class='sb-close'><a href='http://qawalib-blog.blogspot.com'>إتصل بنا</a></li>
<li class='sb-close'><a class='github' href='#'>سياسة الخصوصية</a> <a href='http://qawalib-blog.blogspot.com' style='font-size:8px;' title='Translated by CBT soft'/></li>
والآن ماعليك إلا تغيير ما باللون البرتقالي الى التسميات او الصفحات الخاصة بمدونتك و ما باللون الاخضر إلي الروابط الخاصة بها 
يمنع مسح حقوق القالب و كل من نسب الحقوق إلى نفسه يعتبر (سارق)
=================================================
وهنا نكون قد وصلنا إلى نهاية التدوينة اتمنى ان ينال القالب إعجابكم و إلى التدوينة التالية إنشاء الله  

الاثنين، 27 يونيو 2016


في هده التدوينة بإذن الله سأشارككم إضافة غاية في الروعة تجمع بين الاناقة و الاحترافية و التأتيرات الساحرة  بإختصار هي صندوق بازرار التواصل الاجتماعي  توضع في السايدبار (العمود الجانبي للمدونة) تسهل على الزائر عملية التواصل مع الصفحات الخاصة بالمدونة 

صورة الإضافة

طريقة التركيب

قم بالذهاب الى التخطيط قم بإضافة ادات جديدة  Html/Javascript و ضع بها الكود التالي
<style>
.about_blog { padding: 0; overflow: hidden;background: #fff; }
.about-Qawalib-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}
.about-Qawalib-img{position:relative;max-height:140px;overflow:hidden}
.about-Qawalib-img img {max-width:100%;width:100%;transition:all .6s;}
.about-Qawalib-img:hover img{transform:scale(1.2) rotate(-10deg)}
.about-Qawalib-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;right:0;left:0;bottom:0;z-index:2;transition:all .3s}
.about-Qawalib-img:hover:before{background:rgba(0,0,0,0.6);}
.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;right:22.5%;z-index:3}
.about-Qawalib-float{text-align:center;display:table;width:100%;height:100%}
.about-Qawalib-float a{color: #fff; padding: 8px 14px; z-index: 2; display: table-cell; width: 100%; font-size: 100%; text-transform: uppercase; vertical-align: middle; transition: all .3s; border: 2px solid #FFFFFF; font-weight: bold; background: rgba(0,0,0,0.5); text-shadow: 0 2px 0 rgba(0,0,0,0.15); box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 2px 0 -1px rgba(0,0,0,0.13), 0 3px 0 -1px rgba(19, 18, 18, 0.38), 0 3px 13px -1px rgba(0, 0, 0, 0.08); border-radius: 2px;}
.about-Qawalib-float:hover a{background:#fff; color: #444!important;}
.about-Qawalib-float a i{font-weight:normal;margin-left:5px}
.about-Qawalib-wrpicon{display:block;margin:0 auto;position:relative;}
.extender{text-align:center;font-size:16px;    margin: 15px!important;}
.extender .about-Qawalib-icon{display: inline-block!important; border: 0!important; margin: 0!important; padding: 0!important; width: 32%!important;}
.extender .about-Qawalib-icon a{background: #ccc; display: inline-block; font-weight: 400; color: #fff; line-height: 32px; border-radius: 3px; font-size: 12px; width: 100%; border: 1px solid rgba(0,0,0,0.21); border-bottom-color: rgba(0, 0, 0, 0.27); text-shadow: 0 1px 0 rgba(0,0,0,0.15); box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 2px 0 -1px rgba(0, 0, 0, 0), 0 3px 0 -1px rgba(0,0,0,0.08), 0 3px 13px -1px rgba(0, 0, 0, 0.08);}
.extender .about-Qawalib-icon i{font-family:fontawesome;margin:0 3px 0 0}
.about-Qawalib-icon.fbl a{background:#3b5998}
.about-Qawalib-icon.twitt a{background:#19bfe5}
.about-Qawalib-icon.crcl a{background:#d64136}
.about-Qawalib-icon.fbl a:hover,.about-Qawalib-icon.twitt a:hover,.about-Qawalib-icon.crcl a:hover{background:#313B42}
.extender .about-Qawalib-icon:hover a,.extender .about-Qawalib-icon a:hover{color:#fff;}
.about-Qawalib-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.about-Qawalib-info p{margin:5px 0;font: 12px Droid Arabic Naskh;    color: #444;}
.about-Qawalib-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.about-Qawalib-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.about-Qawalib-info h4:before,.about-Qawalib-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0, 0, 0, 0.08)}
.about-Qawalib-info h4:before {margin-right:-50%;text-align:left;}
</style>
<div class="about_blog">
<div class="inner_wrapper">
<div class="about-Qawalib-img">
<img alt="alwan may" class="img-responsive" height="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdxdIOATKQ7NjJr__2qQczuBl8ybu3rzO9fvhXkc8kOrmHA4KU_WT_4ftz08g5QE9A41AbyqLNdcZ1__Irr60OcofEw2WkqlHU2TBfkOLzj_Y_oOri3EgDpgdW3u_XnB5vdMYepepChR8S/s1600/Festival-Of-Colors-People-HD-Wallpaper.jpg" width="300" />
<div class="aboutfloat-img">
<span class="about-Qawalib-float"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-user"></i> انضم لموقعنا</a></span></div>
</div>
</div>
<div class="about-Qawalib-info">
<h4>
تابعنا جديد موقعنا</h4>
تميز بلا حدود</div>
<div class="about-Qawalib-wrpicon">
<ul class="extender">
<li class="about-Qawalib-icon fbl"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-facebook fa-fw"></i> صفحتنا</a></li>
<li class="about-Qawalib-icon twitt"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-twitter fa-fw"></i> تابعنا</a></li>
<li class="about-Qawalib-icon crcl"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-google-plus fa-fw"></i> جوجل</a></li>
</ul>
</div>
</div>

تخصيص الإضافة


  1. لتغيير الصورة الموجودة بالإضافة قم بتغير الرابط باللون الاصفر
  2. قم بتغيير ما باللون الاحمر بالرابط الخاصة بحساباتك في مواقع التواصل الاجتماعي

اتمنى ان تنال الإضافة إعجابكم 


بسم الله والصلاة والسلام على رسول الله ، باعتبار ان هده اول تدوينة و بمناسبة افتتاح مدونة قوالب قررت ان اطرح بين ايديكم احبتي قالب بلوجر جديد قمت بتطويره و تعريبه شخصيا و بإدن الله لن يكون الاخير، القالب مصمم باحدث معايير البرمجة و يتميز بتخطيط بسيط سهل التعامل إضافة إلي كونة متجاوب مع جميع المتصفحات و الاجهزة اللوحية و الهواتف النقالة كما يتميز بالوانه الهادئة التي يطغى عليها اللون الابيض مما يريح الزائر اثنناء قراءة التدوينات لن اطيل عليكم سأترككم تتعرفون على بعض مميزات هدا القالب

مميزات القالب

  1. قالب عصري مصمم باحدث معايير البرمجة
  2. يتميز بصندوق بحث جد متطور
  3. قالب انيق و إحترافي بمعنى الكلمة
  4. متجاوب مع جميع الاجهزة
  5. متوافق مع معضم المتصفحات
  6. يتميز بالوان هادئة و متناسقة
  7. تأتيرات رائعة على الصور
  8. إضافة إقرأ المزيد
  9. قائمة افقية مميزة (تختفي اثناء النزول و تظهر اثناء الصعود)
  10. فوتر بثلات اعمدة
  11. يتميز بقائمة مسندلة إحترافية
  12. يتميز بخفة و إنسيابية في التصفح
  13. يحتوي على خطوط ويب إحترافية و انيقة
  14. و هناك المزيد من المميزات الاحترافية التي سادعكم تكتشفونها بانفسكم

معاينة و تحميل القالب


تحميل

تركيب القالب

تخصيص القائمة الافقية


لتخصيص القائمة الافقية قم بالبحث عن الكود التالي   
<ul class='sub-menu'>
 وستجد اكواد القائمة على هذا الشكل
<ul class='sub-menu'>
<li><a href='#qawalib'>قائمة</a></li>
<li><a href='#qawalib'>قائمة</a></li>
<li><a href='#qawalib'>قائمة</a></li>
<li><a href='#qawalib'>قائمة</a></li>
<li><a href='#qawalib'>قائمة</a></li>
</ul>
</li>
<li class='menu-item'><a href='#qawalib'>قائمة</a></li>
<li class='menu-item-has-children'><a href='#qawalib'>قائمة</a></li>
<li class='menu-item-has-children'><a href='#qawalib'>قائمة</a></li>
</ul>
بعدها قم تغيير "قائمة" الى التسميات  الخاصة بمدونتك و"qawalib# "إلى الروابط الخاصة بالتسميات

تخصيص الشعار


بالنسبة لتركيب الشعار فإنه بغاية البساطة فماعليك إلا الذهاب الى التخطيط و بالتحديد 'header' و قم برفع الشعار الخاص بك.


إلى هنا يكون قد انتهى الشرح اتمنى ان ينال القالب إعجابكم و إلى تدوينة اخرى إنشاء الله