كيفية تصميم قالب بلوجر يدويا

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

كيفية تصميم قالب بلوجر يدويا

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

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

  • الهيدر
  • المواضيع
  • الفوتر

كما هو معروف، ان هيكل القالب يتكون من اكواد HTML العادية، بينما اكواد HTML الأساسية هى لإنشاء الصفحات الاساسية.

يجب ايضا عليك معرفة بعض الاكواد التى تمكنك من تكويد القالب بسهولة، اكواد HTML الأساسية واكواد CSS التى تتواجد فى قالب او موقع على الويب، حسنا قمت بجمع لكم قالب بلوجر ولكن ليس قالب ابيض او فارغ، هو يحتوى على الهيدر والمواضيع والفوتر ولكن يحتاج الى تأثيرات CSS من تكويدك، لتنفيذ فكرة تصميم القالب الذى تريده او حسب ذوقك.

القالب بدون Css كالمرأة بدون مكياج

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML expr:class='data:blog.languageDirection + &quot; no-js rwd &quot; + data:blog.pageType' expr:dir='data:blog.languageDirection'>
<head>
<meta charset='utf-8'/>
<!--[if lt IE 9]> <script src="http://html5shiv.g<ooglecode.com/svn/trunk/html5.js"> </script> <![endif]-->
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link href='https://plus.google.com/102442301709620757978/posts' rel='publisher'/>
<link href='https://plus.google.com/102442301709620757978/about' rel='author'/>
<link href='https://plus.google.com/102442301709620757978' rel='me'/>
<meta content='pzMFv6FZc9fet-71sUjPE9fUBmfZjSw6sgU7nTNJbOY' name='google-site-verification'/>
<!-- ميتا تاج سيو -->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<meta expr:content='data:blog.pageTitle' name='keywords'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
</b:if>    
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' name='keywords'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<meta content='Egypt' name='geo.placename'/>
<meta content='Mahmoud Elgohary' name='Author'/>
<meta content='general' name='rating'/>
<meta content='eg' name='geo.country'/>
<!-- نهاية ميتا تاج سيو -->
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->
<!-- ميتا تاج سيو -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<title>الارشيف لـ <data:blog.pageName/></title>
<meta content='noindex,nofollow,noarchive' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>الصفحة غير موجودة - <data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
</b:if>
</b:if>
<!-- إعدادات التواصل الاجتماعى -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>
</b:if></b:if>
<meta content='430352253733985' property='fb:app_id'/>
<meta content='100000013167350' property='fb:admins'/>
<meta content='ar_EG' property='og:locale'/>
<meta content='eg_EG' property='og:locale:alternate'/>
<meta content='ar_AR' property='og:locale:alternate'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta content='بيتا بريس قالب بلوجر متجاوب' property='og:description'/>
</b:if>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='@Ma7moud2lgohary' name='twitter:site'/>
<meta content='@Ma7moud2lgohary' name='twitter:creator'/>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
</b:if>
 <!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<script type='text/javascript'>(function(h){h.className=h.className.replace(/(^| )no-js( |$)/,&quot;$1js$2&quot;)})(document.documentElement);</script>
<b:skin><![CDATA[
/*
Created By : Mahmoud Elgohary - Rotkx
Created On : April 2017
URL        : http://rotkx.blogspot.com
*/
/* CSS Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,adnav,adheader{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
.navbar,.post-feeds,.feed-links,#navbar-iframe,.date-header,#layout ul{display:none;}
body{font-size:13px;color:#222;margin:0;padding:0;background:#dee2e4;font-family:'Open Sans',sans-serif;}
a:link,a:visited{color:#333;text-decoration:none}a:hover{color:#3498db;text-decoration:none}
a img{border-width:0}*{box-sizing:border-box}.clear{clear:both}strong,b{font-weight:bold;padding:0;}cite,em,i{font-style:italic;}
#Attribution1,.quickedit,#ContactForm1,#ContactForm1 br {height:0;width:0;visibility:hidden;display:none!important;}
]]></b:skin>
</head>
<body>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='رسائل المدونة الإلكترونية' type='Blog'></b:widget>
</b:section>
</body>
</HTML>

تريد جعل القالب بعرض معين نفترض 640px وبه تأثيرات، اجعل اسمه مثلا #wrapper-rotkx، قم بوضع الكود التالى فوق ]]</b:skin>

#wrapper-rotkx{position:relative;max-width:640px;margin:0 auto;background:#fff;padding:10px;overflow:hidden;box-shadow:0 0 0 20px rgba(0,0,0,0.02);}

ضع الكود التالى تحت <body>

<div id='wrapper-rotkx'>

ثم ضع الكود التالى فوق </body>

</div>

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

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

8 تعليقات

  1. أخي لقد زرت قالب وانا اردها لك لكني اريد مساعدة منك

    ردحذف
    الردود
    1. لم افهم الا انك تريد المساعدة، يرجي التوضيح اكثر

      حذف
  2. نعم أخي لدي مشكلة في القالب عندما اقوم بالرد على شخص ما لا يفتح لي الصندوق

    ردحذف
    الردود
    1. قم بتركيب صندوق تعليقات جديد او قم بتغيير القالب

      حذف
  3. أخوي تقدر تعدله لي ما عندي فكرة

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

      حذف
  4. عذرا أخي ممكن الرابط مش شوفتها في مدونتك

    ردحذف