العديد من الأعضاء طلبوا مني شرح طريقة عمل واجهة للمدونة كالتي أستخدمها
رغم أن الكود الذي أستخدمه حوسة
لكنني قمت بتصميم كود جديد بسيط جدا خصيصا لسؤالك
_____________( كيف أصمم واجهة احترافية لمدونتي )____________
طريقة عمل الواجهة سهلة جدا .. أولا عليك إنشاء مدونة جديدة في بلوجر (حبذا لو كانت بنفس حسابك الذي تستخدمه)
ثم توجه في مدونتك الجديدة إلى:
تصميم > تحرير html > الرجوع إلى النموذج القديم (تجده أسفل الصفحة)
سيطلب منك التأكيد على خيارك قم بالموافقة
سيظهر لك الآن صندوق أكواد شبيه بالصندوق القديم لكنك ستلاحظ غياب بعض العناصر التي تعودنا عليها
مثل (توسيع القالب - تنزيل نسخة احتياطية - عناصر الصفحة ... )
قم بحذف الأكواد التي في الصندوق جميعا .. ثم ألصق به الكود التالي
قم بتغيير رابط صورة الواجهة التالي برابط صورة الواجهة التي تريد ظهورها
وغيّر رابط مدونتي برابط مدونتك التي تريد أن يتوجه لها الزائر من الواجهة
يمكنك تغيير صورة الخلفية 'الباترن' الذي وضعته ليلائم واجهة مدونتي
استبدل رابط صورة الباترن برابط الصورة التي تود إظهارها بالخلفية
أو يمكنك استبدال الصورة بلون موحد وذلك باستبدال الكود السابق بهذا الكود
مع تغيير كود اللون #6699FF بكود اللون الذي يناسبك (يمكنك الاستعانة بهذه الصفحة)
قم بحفظ تغييرات القالب وشاهد واجهة مدونتك الجديدة
رغم أن الكود الذي أستخدمه حوسة
لكنني قمت بتصميم كود جديد بسيط جدا خصيصا لسؤالك
_____________( كيف أصمم واجهة احترافية لمدونتي )____________
طريقة عمل الواجهة سهلة جدا .. أولا عليك إنشاء مدونة جديدة في بلوجر (حبذا لو كانت بنفس حسابك الذي تستخدمه)
ثم توجه في مدونتك الجديدة إلى:
تصميم > تحرير html > الرجوع إلى النموذج القديم (تجده أسفل الصفحة)
سيطلب منك التأكيد على خيارك قم بالموافقة
سيظهر لك الآن صندوق أكواد شبيه بالصندوق القديم لكنك ستلاحظ غياب بعض العناصر التي تعودنا عليها
مثل (توسيع القالب - تنزيل نسخة احتياطية - عناصر الصفحة ... )
قم بحذف الأكواد التي في الصندوق جميعا .. ثم ألصق به الكود التالي
كود بلغة HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="<$BlogLanguageDirection$>">
<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>
<style type="text/css">
/*
-----------------------------------------------
Blogger Template Style
By : Asma Om NidaL | Blogger In Arabic
URL : http://a-omnidal.blogspot.com/
----------------------------------------------- */
#navbar-iframe { display: none !important; }
body {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhStldE2iB8UABkvaSvE-d2D5zc7FoQpsy5JSRGbdEi73WTl7zvMBNd8JmiUZVaKchsW52iy8_efY8wD_eU19iLC-A4BrIl8qOtAWZhgvpUN_iIgyTEbF18emDvkEUwMYmc_oLGKKkmfQE/s1600/bg.jpg);
margin:0;
font: 15px bold Arial;
color:#000000;
}
#outer-wrapper {
margin-top: 0px;
margin-right: 3em;
margin-bottom: 0;
margin-left: 3em;
}
</head>
<body>
<div id='outer-wrapper'>
<div class='main section' id='main'><div class='widget Image' id='Image1'>
<div class='widget-content'>
<a href='http://a-omnidal.blogspot.com'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEAZRXe-6_6SVmymuoIH5QiSdnj-Z79aCo8z6UL7uDDKFR87Vn6QnhNyQQYskKZf5PuH3L4BnRzAPOpJ1RIcjAkP5stFNs8bMjdycl6q1rESIatYln0Ng0uGYWKUuu3MOmsmnUtqhegWA/s1600/welcom.jpg' />
</a>
<br/>
</div>
</body>
</html>
كود بلغة HTML:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEAZRXe-6_6SVmymuoIH5QiSdnj-Z79aCo8z6UL7uDDKFR87Vn6QnhNyQQYskKZf5PuH3L4BnRzAPOpJ1RIcjAkP5stFNs8bMjdycl6q1rESIatYln0Ng0uGYWKUuu3MOmsmnUtqhegWA/s1600/welcom.jpg
كود بلغة HTML:
<a href='http://a-omnidal.blogspot.com'>كود بلغة HTML:
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhStldE2iB8UABkvaSvE-d2D5zc7FoQpsy5JSRGbdEi73WTl7zvMBNd8JmiUZVaKchsW52iy8_efY8wD_eU19iLC-A4BrIl8qOtAWZhgvpUN_iIgyTEbF18emDvkEUwMYmc_oLGKKkmfQE/s1600/bg.jpg);
أو يمكنك استبدال الصورة بلون موحد وذلك باستبدال الكود السابق بهذا الكود
كود بلغة HTML:
background: #6699FF;
قم بحفظ تغييرات القالب وشاهد واجهة مدونتك الجديدة
0 التعليقات:
إرسال تعليق