كيفية تصميم قالب بلوجر يدويا - فى هذا الموضوع اود ان اشاركم عن كيفية تصميم قالب بلوجر يدويا وبدون برامج على الرغم من اننى اخذت وقت كثير فى تصميم وتكويد بعض القوالب.
تصميم قالب بلوجر ليس سهل وسريع كما يعتقد البعض، وليس من الصعب تنفيذ الفكرة بالنسبة للذين لديهم خبرة تصميم قوالب بلوجر، ومع ذلك فهذا الموضوع مقدمة او درس تمهيدى فى مقدمة تصميم قالب بلوجر يدويا وضعت لكم بعض الاكواد التقديمية.
عند تكويد قالب بلوجر يجب ان تمتلك فكرة شكله او تقوم اولا بتصميم القالب على برنامج الفوتوشوب، كـ تجربة ساقوم بتصميم قالب مثل قالب بيتا بريس معرب، اخترت هذا القالب لأنه به الاجزاء المهمة التى تحتاجها لتكوين هيكل القالب.
كما هو معروف، ان هيكل القالب يتكون من اكواد HTML العادية، بينما اكواد HTML الأساسية هى لإنشاء الصفحات الاساسية.
يجب ايضا عليك معرفة بعض الاكواد التى تمكنك من تكويد القالب بسهولة، اكواد HTML الأساسية واكواد CSS التى تتواجد فى قالب او موقع على الويب، حسنا قمت بجمع لكم قالب بلوجر ولكن ليس قالب ابيض او فارغ، هو يحتوى على الهيدر والمواضيع والفوتر ولكن يحتاج الى تأثيرات CSS من تكويدك، لتنفيذ فكرة تصميم القالب الذى تريده او حسب ذوقك.
تريد جعل القالب بعرض معين نفترض 640px وبه تأثيرات، اجعل اسمه مثلا #wrapper-rotkx، قم بوضع الكود التالى فوق ]]</b:skin>
ضع الكود التالى تحت <body>
ثم ضع الكود التالى فوق </body>
وفى الاخير انتهى شرح كيفية تصميم قالب بلوجر يدويا اتمنى ان يكون مفيد لكم.
تصميم قالب بلوجر ليس سهل وسريع كما يعتقد البعض، وليس من الصعب تنفيذ الفكرة بالنسبة للذين لديهم خبرة تصميم قوالب بلوجر، ومع ذلك فهذا الموضوع مقدمة او درس تمهيدى فى مقدمة تصميم قالب بلوجر يدويا وضعت لكم بعض الاكواد التقديمية.
عند تكويد قالب بلوجر يجب ان تمتلك فكرة شكله او تقوم اولا بتصميم القالب على برنامج الفوتوشوب، كـ تجربة ساقوم بتصميم قالب مثل قالب بيتا بريس معرب، اخترت هذا القالب لأنه به الاجزاء المهمة التى تحتاجها لتكوين هيكل القالب.
- الهيدر
- المواضيع
- الفوتر
كما هو معروف، ان هيكل القالب يتكون من اكواد 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/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 == "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='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 == "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 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>وفى الاخير انتهى شرح كيفية تصميم قالب بلوجر يدويا اتمنى ان يكون مفيد لكم.
أخي لقد زرت قالب وانا اردها لك لكني اريد مساعدة منك
ReplyDeleteلم افهم الا انك تريد المساعدة، يرجي التوضيح اكثر
Deleteنعم أخي لدي مشكلة في القالب عندما اقوم بالرد على شخص ما لا يفتح لي الصندوق
ReplyDeleteقم بتركيب صندوق تعليقات جديد او قم بتغيير القالب
Deleteأخوي تقدر تعدله لي ما عندي فكرة
ReplyDeleteتوجه الى صفحة الدعم على مدونة روتكس لانك تتحدث خارج سياق الموضوع
Deleteعذرا أخي ممكن الرابط مش شوفتها في مدونتك
ReplyDeleteبالصفحة الرئيسية بالاسفل
Delete