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

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

صورة للقالب :

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

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

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

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


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

  • اضافة اقرأ المزيد
  • اضافة تعريف الكاتب
  • اضافة الذهاب الى الاعلى بطريقة انسيابية
  • اضافة صندوق اعجابات فيسيوك العائمة
  • نظام تعليقات بلوجر التفاعلية منسقة بـ 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): نظرا لبعض المشاكل التي اصابت السرفر الذي قمت برفع القالب عليه، ونظرا لطلب بعض الزوار اعادة رفع القالب، تم رفعه على موقع اجنبي لتفاذي المشاكل، مع ابقاء رابط تحميله من الرابط القديم.
التحميل من الموقع الجديد

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

إقرأ المزيد

افظل قالب بلوجر فلات مجانا

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

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


  • قالب فلات
  • ألوان بسيطة ومتناسقة
  • انسيابي وحيوي
  • نظيف وصديق لمحركات البحث
  • به عدة اضافات متطورة


طريقة تشغيل اضافة آخر الأخبار :


  • ابحث عن هذا الكود وغير الرابط الى رابط مدونتك.
url: &quot;http://khabareflat-temp.blogspot.com/&quot;, // Your blog URL


طريقة تشغيل السليدر :


  • ابحث عن هذا الكود وغير (كل) الى تصنيف من مدونتك ليقوم الكود بعرض مواضيعه في السلايدر.
<script src='/feeds/posts/default/-/كل?published&amp;alt=json-in-script&amp;callback=labelthumbs' type='text/javascript'/>

يمكنك اضافة الاضافة الخاصة بالأخبار المسمات بـ كل في القالب عن طريق اضافة الكود التالي في التخطيط :
<div class="content-cat" ><script type="text/javascript">$(document).ready(function(){$(".accordion h3:first").addClass("active");$(".accordion p:not(:first)").hide();$(".accordion h3").click(function(){$(this).next("p").slideToggle("slow").siblings("p:visible").slideUp("slow");$(this).toggleClass("active");$(this).siblings("h3").removeClass("active");});});</script><script language="JavaScript">imgr = new Array();imgr[0] = "http://lh5.ggpht.com/_ZXEvc1YiIko/TLzMljzSYFI/AAAAAAAAA4g/FW2VlpJHWfE/s128/no-image.blogspacetech.jpeg";showRandomImg = true;jimgwidth = 80;jimgheight = 80;jfntsize = 12;jacolor = "#E67C15";jaBold =true;jtext = "التعليقات";jshowComments = true;jshowPostDate = true;jsummaryPost = 120;summaryFontsize = 12;summaryColor = "#888";numposts =5;label = "كل";home_page = "/";</script><script src="https://dz-site.googlecode.com/files/new.recent-posts.js" type="text/javascript"></script><div class="accordion"></div>
</div>

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

القالب مطروح في منتدى ملتقى المدونون العرب

افظل قالب بلوجر فلات مجانا باسم الله الرحمان الرحيم، وبعد يشرفني ان التقي معكم في موضوع جديد، وفيه سوف اقدم لكم قالب فلات رائ...

إقرأ المزيد

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