بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته .
مساء الخير او صباح الخير على الكل .
[ html+css ] صنع و تركيب واجهة احترافيه لمدونة بلوجر - الجزء الاول
الواجهة شيء جميل في الموقع صراحه وهي ميزه جداَ جميلة وخرافيه تعطي الموقع منظراَ حقاَ مميز , ايضاَ تعطي الزائر انطباع ان هذا الموقع احترافي .طبعاَ الواجهة في مدونة بلوجر بالأساس لم تكن موجوده لا في العالم العربي ولا الغربي , بل كان هناك واجهات ولاكنها ليست كهذه , حيث ان الواجهات الاخرى التي صنعها بعض المحترفين العرب كانت فكرتها ( صفحة html عبارة عن واجهه ) ويتم ربطها بدومين اخر غير دومين المدونة الاساسي وهذه هي المشكلة, وقد وجدت بالفعل ان كثير من المدونين يبحثون عن طريقة تركيب واجهة لمدونة بلوجر.
ولاكن في موضوعنا اليوم , سنتكلم عن واجهه حقيقية مرتبطه بدومين المدونة الاساسي , وفكرتها بسيطه :)
طبعاَ حقوق الفكره لي, اول من اخترعها واول من ركبها على مدونة بلوجر هو انا واتمنى لكم التوفيق في تركيبها .
على العموم نبداء :
- اولا: يجب ان تكون قد جهزت واجهه لمدونتك عبارة عن html + css المهم انها صفحة وعبارة عن واجهه , وبالمناسبة انا قد جهزت لكم واجهه لمن اراد تركيبها فهي له .
- ثانياَ : نأخذ مثال للواجهه التجريبيه التي اعددتها لكم : من هنا
- ثالثاَ : كود الواجهه التجريبيه لمن اراد تجربتها او حتى تركيبها او تعديلها للموضوع القادم :
<!--design By http://blog.7lolblogger.com -->
<body><div class='wajeha-7lolblogger'>
<a href='http://blog.7lolblogger.com' style='display:none'></a>
<div class='wajeha-all'>
<!-- الصورة الاساسيه -->
<div class='wajeha-7lolblogger-img'><a href='http://blog.7lolblogger.com'><img src='https://lh3.googleusercontent.com/-GlAF2hyXfIg/U0UqIBMhKlI/AAAAAAAAAQU/NaIjvETEYqw/png+t34ow.png'/></a></div>
<!-- الازرار -->
<div class='wajeha-7lolblogger-h1'><h11><a href='http://blog.7lolblogger.com/search?max-results=12'>ادخل للمشاركات</a></h11></div>
<div class='wajeha-7lolblogger-h1'><h11><a href='http://blog.7lolblogger.com/p/my-works.html'>معرض اعمالي</a></h11></div>
<!-- ايقونات التواصل الاجتماعي -->
<ul class="socialicons">
<li><a title="twitter" href="https://twitter.com/7lolblogger " target="_blank">
<img src="http://i39.servimg.com/u/f39/16/89/40/74/t10.png"/></a></li>
<li><a title="facebook" href='https://www.facebook.com/7loll' target="_blank">
<img src="http://i39.servimg.com/u/f39/16/89/40/74/f10.png"/></a></li>
<li><a title="Google+" href='https://plus.google.com/u/0/+jetarax/posts' target="_blank">
<img src="http://i39.servimg.com/u/f39/16/89/40/74/g10.png"/></a></li>
</ul>
</div>
<style>
/* خصائص الواجهه css*/
@font-face {
font-family: 'goth';
src: url(//:) format('no404'), url('https://jetara.googlecode.com/svn/trunk/DroidKufi-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body {
background: #191919;
margin: 10px;
}
a {
text-decoration: none;
color: #666;
}
.wajeha-7lolblogger-img {
margin: 10px auto;
display: block;
width: 100%;
float: right;
text-align: center;
background: #111;
margin-top: -5px;
height: 230px;
}
.wajeha-all {
background: #eee;
width: 500px;
margin: 0 auto;
height: 100%;
min-height: 500px;
}
.wajeha-7lolblogger-h1 h11 {
text-align: center;
margin: 5px auto;
display: block;
font: 700 20px goth,tahoma;
color: #555;
text-shadow: 1px 1px #fff;
background: #ddd;
padding: 10px;
clear: both;
border: 1px solid #ccc;
box-shadow: 1px 1px #fff;
border-radius: 4px;
width: 260px;
}
.socialicons {
width: 100%;
float: right;
text-align: center;
padding: 0;
margin: 20px auto;
list-style: none;
}
.socialicons li {
margin: 0 auto;
text-align: center;
display: inline-block;
list-style: none;
padding: 0;
}
</style>
</div></body>
<!--design By http://blog.7lolblogger.com -->
التعديلات :
الاصفر : صورة اللوجو الخاص بموقعك .الاحمر : رابط المدونة .
برتقالي : استبدل فيه فقط رابط مدونتي .
الاخضر : استبدله بأحد صفحات مدونتك .
الازرق : رابط التواصل الاجتماعي لموقعك .
تبقى الان الجزء الثاني نستكمله في الموضوع القادم انشاءالله .
المصدر : http://blog.7lolblogger.com/2014/04/Html-css-manufacture-and-installation-of-professional-interface-for-blog-blogger-part-one.html
0 التعليقات:
إضغط هنا، لإضافة تعليق
إرسال تعليق