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

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

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

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

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

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

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

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

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML expr:class='data:blog.languageDirection + " no-js rwd " + 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 + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' 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/your id here/posts' rel='publisher'/>
<link href='https://plus.google.com/your id here/about' rel='author'/><link href='https://plus.google.com/your id here' 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 == "item"'>
<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 == "index"'>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<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 == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<title>الارشيف لـ <data:blog.pageName/></title>
<meta content='noindex,nofollow,noarchive' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<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 == "item"'>
<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='919101505214273' property='fb:app_id'/>
<meta content='919101505214273' 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='محمد الأفندي Mohamed Elafndey قالب بلوجر متجاوب' property='og:description'/>
</b:if>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='@M7mdelafndey' name='twitter:site'/>
<meta content='@M7mdelafndey' 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 == "item"'>
<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( |$)/,"$1js$2")})(document.documentElement);</script>
<b:skin><![CDATA[
/*
Created By : Mahmoud Elafndey - محمد الأفندي
Created On : April 2020
URL        : https://melafndey.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>

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

آخر الأخبار

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







عن الكاتب

التعليقات

آخر الأخبار

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







عن الكاتب

شاهد أيضاً

التعليقات