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

باسم الله الرحمان الرحيم،

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

صورة للقالب :

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

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

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

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

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

• اضافة اقرأ المزيد
• اضافة تعريف الكاتب
• اضافة الذهاب الى الاعلى بطريقة انسيابية
• اضافة صندوق اعجابات فيسيوك العائمة
• نظام تعليقات بلوجر التفاعلية منسقة بـ 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkhXnZAQ0Q89r1jE-LaVjn9xPCWKPyNJ-oe24cCtYx06UmsDFJP7lfvIYLi5OD5-7LzulwtQeP28kpnbYwA6ZgibPqogRh_Sqq8Gd58QJhadh3w8AT6actva8oGxy4kc3ofIO2SkE8szZy/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgVFJ1r5L6IozenneTh2GR2tKCH9UrhQdxSWAVQ_OhZT5h_OhJ7gHHKiWTrT1Y8gCB1xpG8t8khdAggEncQSglhpPoWYeyTFtDi8P51CMJFSZ8SKIkyeZSkGa_VU1zzganHCM-4keLmxk/s1600/banner728.gif'/>

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

ايحث عن هذا الكود وغره بشيفرة اعلان ادسنس :

<img src='https://storage.googleapis.com/support-kms-prod/SNP_586A5ACE683FE8BE05136C11100EE28C4316_3285835_en_v0'/> 

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

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

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

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

التحميل من الموقع الجديد