اخر الاخبار
جارى التحميل...

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

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

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

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

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

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

كما هو معروف، ان هيكل القالب يتكون من اكواد 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://www.rotkx.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>

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

مواضيع ذات صلة

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

تذكر قوله تعالى
(( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ )) ‏

الان يمكنك اضافة اي مقطع فيديو الى التعليقات وايضا اضافة الصور فقط ضع رابط الصور او مقطع الفيديو في التعليقات

آرائكم تسعدنا، لمتابعة التعليق حتى نرد عليك فقط ضع إشارة على إعلامي
الابتساماتالابتسامات