اول قالب بلوجر من تصميم مدونة "تدوين باحتراف" مجانا

باسم الله الرحمان الرحيم،
اما بعد، مرحبا بكم زوار ومتتبعي "تدوين باحتراف" الكرام، في هذا الموضوع اريد ان اطرح بين ايديكم اول قالب بلوجر من تصميمي اي انني قمت بتصميمه من الصفر الى النهاية واضفت له مجوعة من الاضافات المهمة والضرورية لأي قالب، لن اطيل عليكم سوف اترككم لتتعرفو على القالب.

صورة للقالب :

اول قالب بلوجر من تصميم مدونة  "تدوين باحتراف" مجانا
اول قالب بلوجر من تصميم مدونة  "تدوين باحتراف" مجانا

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

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

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


الاضافات التي يحتويها القالب :

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

طريقة اضافة صندوق اعجابات الفيسبوك العائمة:

قم باضافة الكود التالي في اداة HTML/JAVASCRIPT
<script type="text/javascript"> //<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate ({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");},
500);}); //--> </script>
<style type="text/css">
.w2bslikebox{background: url("http://1.bp.blogspot.com/-UuBsjDC5vSc/TuiSd0g9bHI/AAAAAAAAAyk/MqKt8IpiIVM/s1600/facebook1.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 10px;font: 9px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #FF9D00;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/tadwintop&amp;
width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=12&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a rel="dofollow" style="font-size:12px;color:#ccc;" href="http://tadwinpro.blogspot.com/" target='_blank'>تدوين باحتراف</a></span></div></div>

طريقة اضافة اداة ترقيم الصفحات :

قم باضافة الكود التالي في اداة HTML/JAVASCRIPT
<!-- Stylish colored  Navigation Widget For Blogger By UinEgy @ http://www.uniegy.blogspot.com --><style type="text/css">#blog-pager{padding:5px 0 !important;}.showpageArea {font-weight: bold;margin:5px;}/* www.uniegy.blogspot.com */.showpageArea a {text-decoration:underline;color: #fff;}/* www.uniegy.blogspot.com */.showpageNum  a, .showpage a {color: #fff;text-decoration:none;border:1px  solid  #999;-webkit-border-radius:3px;-moz-border-radius:3px;margin:0   3px;padding:3px 5px; background: #9dd53a; background:   -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a   100%); background: -webkit-gradient(linear, left top, left bottom,   color-stop(0%,#9dd53a), color-stop(50%,#a1d54f),   color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); filter:   progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a',   endColorstr='#7cbc0a',GradientType=0 ); }/* www.uniegy.blogspot.com */.showpageNum  a:hover, .showpage a:hover {border: 1px solid #ccc;  background:  #6db3f2; background: -moz-linear-gradient(top, #6db3f2 0%,  #54a3ee 50%,  #3690f0 51%, #1e69de 100%); background:  -webkit-gradient(linear, left  top, left bottom, color-stop(0%,#6db3f2),  color-stop(50%,#54a3ee),  color-stop(51%,#3690f0),  color-stop(100%,#1e69de)); filter:   progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2',   endColorstr='#1e69de',GradientType=0 ); } /* www.uniegy.blogspot.com */.showpagePoint  {color: #aaaaaa;text-decoration:none;border:1px solid   #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0   3px;padding:3px 5px; background: #e2e2e2; background:   -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe   100%); background: -webkit-gradient(linear, left top, left bottom,   color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb),   color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter:   progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',   endColorstr='#fefefe',GradientType=0 ); }/* www.uniegy.blogspot.com */.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* www.uniegy.blogspot.com */.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* www.uniegy.blogspot.com */</style>
<script type='text/javascript'>var home_page="/";var urlactivepage=location.href;var postperpage=5;var numshowpage=9;var upPageWord ='السابق';var downPageWord ='التالي';</script><script src='http://uinegy.googlecode.com/svn/wiki/uniegy_bloggerpagenavi.js' type='text/javascript'></script><!-- Stylish colored Numbered Page Navigation Widget For Blogger By UinEgy @ http://www.uniegy.blogspot.com -->

التعديل على اكواد الميتا تاج :

ابحث عن الكود التالي وعدل الكلمات العربية بما يناسب مدونتك
<meta content=' وصف المدونة' name='description'/><meta content='كلمات , دلائلية' name='keywords'/><meta content='رابط بانر' name='og:image'/><meta content='global' name='distribution'/><meta content='10 days' name='revisit'/><meta content='10 days' name='revisit-after'/><meta content='document' name='resource-type'/><meta content='all' name='audience'/><meta content='general' name='rating'/><meta content='all' name='robots'/><meta content='index, follow' name='robots'/><meta content='إسمك بالإنجليزية' name='author'/><meta content='لغة الموقع' name='language'/><meta content='بلدك بالإنجليزية' name='country'/>

التعديل على القائمة العلوية :

ابحث عن الكود التالي وغي بما يناسب مدونتك
<div id='topnav'>
<ul>
    <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>
      <form action='/search' id='search' method='get'>
        <input class='search-text' type='text' value='ابحث هنا ...'/>
        <input class='search-submit' type='submit' value='ابحث'/>
      </form>
</ul>
</div>

التعديل على القائمة الثاتية :

ابحث عن الكود التالي وغير بما يناسبك
<div id='nav2'> <ul>      <li><a href='/'><img height='15' id='icon-home' src='https://cdn1.iconfinder.com/data/icons/devine-icons-part-2/128/Home.png' width='15'/> الصفحة الرئيسية</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></div> 

طريقة اضافة اعلانات ادسنس :

في الهيدر :

ابحث عن هذا الكود وغيره بشفرة اعلان ادسنس بعد تحويلها طبع عن طريق هاته الأداة
<img src='http://4.bp.blogspot.com/-vjF3V8HDYQc/Uu4Tc-j3CGI/AAAAAAAAARA/TMVWF_2Iftk/s1600/banner728.gif'/>

اضافة اعلان اسفل عنوان التدوينة :

ايحث عن هذا الكود وغره بشيفرة اعلان ادسنس :
<img src='https://storage.googleapis.com/support-kms-prod/SNP_586A5ACE683FE8BE05136C11100EE28C4316_3285835_en_v0'/> 


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

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


تحديث (2015-01-29): نظرا لبعض المشاكل التي اصابت السرفر الذي قمت برفع القالب عليه، ونظرا لطلب بعض الزوار اعادة رفع القالب، تم رفعه على موقع اجنبي لتفاذي المشاكل، مع ابقاء رابط تحميله من الرابط القديم.

هل أعجبك الموضوع ؟
خدمة تصميم بنرات

هناك 22 تعليقًا:

  1. السلام عليكم ورحمة الله وبركاته
    اخي الكريم هل تقوم بالخدمة تعريب وتطوير القوالب بلوجر مدفوعة

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

      حذف
  2. الردود
    1. لك جزيل الشكر اخي على مرورك وان شاء الله يكون القالب قد اعجبكم

      حذف
  3. مشكوور اخي الكريم على توضيح
    اخي الفاضل انا اريد تصمملي القالب خاص وتركبه في مدونتي
    كم ثمن هده الخدمة وشكراا

    ردحذف
    الردود
    1. أخي يمكنك الاتصال بي من هنا
      http://goo.gl/OuYZGI

      حذف
  4. الصراحة قالب جميل جداً و أنا شخصياً ركبتة على مدونتي لكن عندي مشكلة في ترقيم الصفحات
    ارجو انتدخل المدونتي وترى المشكله
    http://www.sajjadalamdar.ml
    و جزيل الشكر على هذا القالب الرائع

    ردحذف
    الردود
    1. اخي الكريم اشكرك على مرورك الكريم،
      بالنسبة لاضافة اقرا المزيد، لاضافتها فقط قم باضافة اداة HTML/JAVASCRIPT جديدة وقم بلصق الكود الموجود في الموضوع "طريقة اضافة اداة ترقيم الصفحات " وقم بالحفظ

      حذف
    2. لك جزيل الشكر على الرد السريع تم حل المشكلة
      كيف يمكن ان اعرض المواضيع بشكل متحرك مثل الي عندك في المدونه
      مره اخر الشكر الجزيل على الرد

      حذف
    3. مبرووك اخي لحلك المشكل
      لم افهم سؤالك الاخير، ممكن ان توضح اكثر

      حذف
    4. اخي العزيز لو سمحت ممكن انك تعطيني اسم البرنامج الي استخدمته في تصميم القالب
      أذا لم يكن هنالك ازعاج
      أرجوا المساعدة

      حذف
    5. اخي الكريم بالنسبة لتصميم وتطوير القوالب فيتطلب منك ان تكون متقــنــا لكل من لغة HTML و CSS و لا تعتمد على اية برامج .

      حذف
  5. أخي بالنسبة لتغير اعلان أدسنس في الهيدر
    لم أفهم ما قلت حيت أن بحت الكود وقمت بتغيره باعلان أدسنس لكن يقولو لي هناك خطا في الاعلان

    ولم ما قلت تغيره عن طريق هته الادات ماذا تقصد بكلامك وشكرا لك

    ردحذف
    الردود
    1. مشكوور على مرورك الكريم
      قبل تغيير الكود بكود اعلان ادسنس قم بتحويل كود ادسنس عن طريق هاته الأداة ثم غير الكود المدرج في الموضوع بكود اعلانك ادسنس وشكراا
      رابط الأداة : محول اكواد ادسنس

      حذف
  6. جدا رائع يا اخى الله يجازيك خير

    ردحذف
    الردود
    1. سعيد بمرورك اخي واتمنى ان ينال القالب اعجابك :)

      حذف
  7. ممكن اخي نعيد رفعه لان الرابط لا يعمل

    ردحذف
    الردود
    1. شكراا اخي على التنبيه، المشكلة تكمن في مركز الخليج الذي قمت برفعه عليه فهذه الايام اصبح يعاني من مشاكل عديدة.

      على العموم تم رفع القالب مرة اخرى على موقع اجنبي آخر واتمنى ان ينال القالب اعجابك، واي استفسار انا موجود هنا يوميا وفي اي وقت.

      => رابط التحميل : اول قالب بلوجر من تصميم مدونة "تدوين باحتراف" مجانا

      موفق اخي.

      حذف
  8. شكراا اخي الكريم على القالب الرائع وعلى التحديث

    ردحذف
    الردود
    1. بارك الله فيك اخي وشكراا على مرورك

      حذف
  9. شكرا لك على القالب الجميل

    ردحذف
  10. قالب رائع .. كل الشكر عالطرح

    ردحذف

جميع الحقوق محفوضة لمدونة تدوين باحتراف 2014/2013