[بلوجر] أفضل واجهة احترافية لمدونة البلوجر 2014

السلام عليكم ورحمة الله وبركاته إخواني أهلا من جديد اليوم وبعد الإنتهاء من تكويد الواجهة الإحترافية لمدونة برو أيوب قررت أن أشاركها معها وأضعها مجانا لكل متتبعينا , لا داعي لأصف لكم الواجهة الصورة التالية تلخص كل شئ

يمكنكم الإطلاع عليها مباشرة بالضغط أسفله

مشاهدة الواجهة

طبعا لإضافة الواجهة لمدونتكم عليك أولا أن تبحث عن

</head>

ثم أضف كود الواجهة التالي أسفله

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<body><div class='wajeha-proayoub'>
<div class='h-wajeha'>
<div class='h-img1'>
<img src='http://4.bp.blogspot.com/-ZzofxzeCt_E/U2v39UsoRUI/AAAAAAAAALY/PF7-dcxLMbQ/s1600/top+back.png'/>
<div class='p-alwajeha'>
<div class='titre-alwajeha'>
    <s>أهلا بك على مدونتنا</s>
  </div>
<p>السلام عليكم أخي الزائر , أنت الأن تشاهد الواجهة الرئيسية 
<k>لمدونة برو أيوب</k> هذه الواجهة من تصميم وتكويد مدير المدونة
  <k>أيوب بولعيش</k>
 للتواصل مع أيوب إضغط أسفله
</p>
<a href='https://www.facebook.com/boulaich.ayoub' target='_blank'>BOULAICH AYOUB</a>
</div>
</div>
<div class='gotoblog'>
  <img src='http://1.bp.blogspot.com/-H_-vQ1DLahU/U2v38bWKdVI/AAAAAAAAALQ/wZxpGFhPrj0/s1600/go+to+blog.png'/>
<div class='a-go'>
<a href='http://www.proayoub.com' rel='nofollow' target='_blank'>الدخول للمدونة</a>
</div></div>
</div>
<div class='m-w'>
  <ul>
    <li><a href='http://www.proayoub.com/search/label/seo' rel='nofollow' target='_blank'>سيو</a>
      </li><li><a href='http://www.proayoub.com/search/label/programs' rel='nofollow' target='_blank'>برامج</a>
        </li><li><a href='http://www.proayoub.com/search/label/photoshop' rel='nofollow' target='_blank'>فوتوشوب</a>
          </li><li><a href='http://www.proayoub.com/search/label/blogger' rel='nofollow' target='_blank'>بلوجر</a>
            </li><li><a href='http://www.proayoub.com/search/label/programation' rel='nofollow' target='_blank'>برمجة</a>
              </li><li><a href='http://www.proayoub.com/search/label/internet' rel='nofollow' target='_blank'>إنترنيت</a>
                </li><lli><a href='http://www.proayoub.com/search/label/windows' rel='nofollow' target='_blank'>كومبيوتر</a>
  </lli></ul>
  </div>
<div class='o-o-o'>
<div class='o-1'>
  <img src='http://1.bp.blogspot.com/-sA9C_9bJSPY/U5oVa8yfdKI/AAAAAAAAAQY/im50UwzDCfI/s1600/SEO.png'/>
<div class='o-1-a'>
  
<div class='o-m-1'>
<m>دروس سيو وأرشفة</m>
</div><a href='http://www.proayoub.com/search/label/seo' rel='nofollow' target='_blank'>إضغط هنا</a></div>
</div>
<div class='o-2'>
  <img src='http://1.bp.blogspot.com/-4BfRDwSR7rc/U5oVafFo32I/AAAAAAAAAQI/0GH1OxORBY4/s1600/B.png'/>
<div class='o-2-a'>
  <div class='o-m-2'>
<m>إضافات وقوالب ودروس للبلوجر</m>
</div>
<a href='http://www.proayoub.com/search/label/blogger' rel='nofollow' target='_blank'>إضغط هنا</a>
</div>
</div>
<div class='o-3'>
  <img src='http://4.bp.blogspot.com/-TcWhE9z0stg/U5oVa96H1WI/AAAAAAAAAQM/5uxDbGfRCDk/s1600/PS.png'/>
<div class='o-3-a'>
  <div class='o-m-3'>
<m>ملحقات ودروس فوتوشوب</m>
</div>
<a href='http://www.proayoub.com/search/label/photoshop' rel='nofollow' target='_blank'>إضغط هنا</a>
</div>
</div>
</div>
<div class='social-w'>
  <p>تابعنا على المواقع الإجتماعية !</p>
<a href='https://www.facebook.com/blogproayoub' target='_blank'><div class='fa'/></a>
<a href='https://www.twitter.com/blogproayoub' target='_blank'><div class='tw'/></a>
<a href='https://www.youtube.com/user/blogproayoub' target='_blank'><div class='yo'/></a>
  </div>
<div class='fr-w'>
  <img src='http://2.bp.blogspot.com/-SxGq4IM0zGs/U5o728Mv47I/AAAAAAAAAQw/_wJuUuxwLOw/s1600/c-r.png'/>
<a href='http://www.proayoub.com' target='_blank'><div class='pro'/></a><div class='ftr-d'>
    <l>تصميم وتكويد: <a href='https://www.facebook.com/boulaich.ayoub' target='_blank'>أيوب بولعيش</a></l>
  </div><div class='ftr-p-w'>
<p>جميع الحقوق محفوظة 2014-2015 <a href='www.proayoub.com' rel='nofollow' target='_blank'>لمدونة برو أيوب </a></p>
</div></div>
</div>
<style>
  /* الخط */
  @font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 400;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.woff2) format('woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 700;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff2) format('woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.ttf) format('truetype');
}
   /* خصائص الواجهة (css) */
body {
background:url(http://3.bp.blogspot.com/-e9o0zIYt-vE/U2v3-O3igvI/AAAAAAAAALg/f6ZBlfSVg2A/s1600/back.png);
margin: 10px;
}
  
  .h-wajeha p {
font: 22px droidkufi-bold;
text-align: center;
width: 720px;
margin: 0 auto;
margin-bottom: 19px;
}
.h-wajeha k {
color: #CA6060;
  }
.h-wajeha img{margin:0 auto;}
div.h-img1 {
text-align: center;
}
.p-alwajeha {
text-align: center;
margin-top: -320px;
}
.titre-alwajeha {
margin-bottom: 27px;
}
.titre-alwajeha s {
font: 35px droidkufi-bold;
text-align: center;
width: 720px;
margin: 0 auto;
font-weight: bold;
text-decoration: none;
color: #E27B1B;
}
.p-alwajeha a {
font-size: 23px;
color: #127FB3;
font-weight: bold;
}
.p-alwajeha a:hover{
color:#fff;
  }
.gotoblog {
text-align: center;
margin-top: 40px;
}
.a-go {
margin-top: -74px;
}
.gotoblog a {
text-align: center;
font-size: 27px;
color: #fff;
}
.gotoblog a:hover{
color:#000;
  }
.m-w {
width: 890px;
background: url(http://1.bp.blogspot.com/-Fv_KO8CF108/U5oVb8bRgsI/AAAAAAAAAQc/B4yYeM42xg4/s1600/menu.png);
height: 80px;
margin: 0 auto;
margin-top: 50px;
}
.m-w ul li {
float: right;
margin-top: 21px;
}
.m-w ul li a {
padding: 30px 29px 10px 30px;
font-size: 21px;
color: #fff;
margin-right: -8px;
background: url(http://1.bp.blogspot.com/-xoLrip90-II/U5wFXBxWIpI/AAAAAAAAARg/EpWoA6YsjqQ/s1600/II.png) no-repeat 0px 29px;
}
.m-w ul li a:hover {
color: #000;
}
.m-w ul lli {
float: right;
margin-top: 21px;
}
.m-w ul lli a {
padding: 30px 29px 10px 30px;
font-size: 21px;
color: #fff;
margin-right: -8px;
}
.m-w ul lli a:hover{
color:#000;
  }
.o-o-o {
height: 300px;
width: 990px;
margin: 0 auto;
}
.o-1 {
margin-top: 46px;
}
.o-1-a {
margin-top: -76px;
}
.o-1 a {
margin-right: 103px;
margin-bottom: -14px;
font-size: 20px;
color: #E27B1B;
}
.o-1 a:hover{
color:#000;
  }
.o-m-1 {
margin-top: -137px;
margin-bottom: 33px;
}
.o-1-a m {
margin-right: 67px;
margin-bottom: -20px;
font-size: 17px;
}
.o-2 {
text-align: center;
margin-top: -260px;
}
.o-2-a {
margin-top: -76px;
}
.o-2-a a {
font-size: 20px;
color: #E27B1B;
}
.o-2-a a:hover{
color:#000;
  }
.o-m-2 {
margin-top: -137px;
margin-bottom: 33px;
}
.o-m-2 m {
margin-right: 3px;
margin-bottom: -20px;
font-size: 17px;
}
.o-3 {
float: left;
margin-top: -262px;
}
.o-3-a {
margin-right: 103px;
margin-top: -74px;
}
.o-3-a a {
font-size: 20px;
color: #E27B1B;
}
.o-3-a a:hover{
color:#000;
  }
.o-m-3 {
margin-top: -137px;
margin-bottom: 33px;
}
.o-m-3 m {
margin-right: -62px;
margin-bottom: -20px;
font-size: 17px;
}
.social-w {
background: url(http://2.bp.blogspot.com/-4zoh4hm-qFc/U5o73VcB0WI/AAAAAAAAAQ4/SoXDvlaYpVY/s1600/soc.png);
width: 1000px;
margin: 0 auto;
height: 60px;
}
.social-w p {
padding: 20px;
font-size: 20px;
color: #fff;
}
.fa {
background: url(http://3.bp.blogspot.com/-tnu4R4D9w7I/U5o73KTdgbI/AAAAAAAAAQ0/4x0RF2G17r8/s1600/fa.png);
width: 50px;
height: 50px;
float: left;
margin: -76px 25px 30px 18px;
}
.tw {
background: url(http://3.bp.blogspot.com/-Y7YSz-HYGCY/U5o74UtOIJI/AAAAAAAAARI/pOs9GhOVloI/s1600/tw.png);
width: 50px;
height: 50px;
float: left;
margin: -76px 21px 26px -21px;
}
.yo {
background: url(http://2.bp.blogspot.com/-e9L-TzH_F0M/U5o74XNRoII/AAAAAAAAARM/BksxmwnsTus/s1600/yo.png);
width: 50px;
height: 50px;
float: left;
margin: -76px 21px 26px 33px;
}
.fr-w {
text-align: center;
margin-top: 35px;
}
.fr-w img {
margin: 0 auto;
margin-bottom: -72px;
}
.ftr-p-w {
margin-bottom: -36px;
}
.fr-w p {
color: #fff;
font-size: 13px;
}
.ftr-p-w a {
color: #1EA3D6;
}
.ftr-p-w a:hover {
color: #86B8C5;
}
.fr-w {
text-align: center;
margin-top: 34px;
}
.pro {
background: url(http://4.bp.blogspot.com/-GRD6vGydE5w/U5wFXkgeAqI/AAAAAAAAARw/sMH7ouBfD9s/s1600/pro.png);
width: 100px;
height: 100px;
margin: -104px 440px 3px 12px;
position: absolute;
}
.ftr-d {
margin-bottom: -15px;
}
.ftr-d l {
font-size: 13px;
color: #fff;
}
.ftr-d a {
color: #1EA3D6;
}
.ftr-d a:hover {
color: #86B8C5;
}
  </style>
</body>

<style>header ,.msgall ,.centrat ,.copyright, .sidebar, .f, .footer{display:none}</style>
</b:if> </b:if>
</b:if>

الأن غير الروابط بما يناسبك واحفظ القالب

ملحوظة : الكود التالي ستجدونة في أخر كود الواجهة وهو مسؤول عن إخفاء العناصر (الهيدر , فوتر , سايد بار ...) لذلك إذا كنت تريدون إخفاء عنصر عليكم إضافة تسميته الخاص بـ css في الكود .

<style>header ,.msgall ,.centrat ,.copyright, .sidebar, .f, .footer{display:none}</style>

في النهاية أرجوا منكم أن لا تغيروا حقوق التصميم والتكويد لأنني تعبت كثيرا في تصميمها وتكويدها أما حقوق المدونة فيمكنكم تغييرها وشكرا

شاركوا الواجهة الإحترافية مع أصدقائكم ولا تنسو تعليقاتكم تهمنا

مواضيع مشابهة :

● [بلوجر] أفضل إضافة تحت الهيدر للبلوجر 2014

● [بلوجر] إضافة روعة تحت الهيدر ( اشترك معنا - تابعنا ) 2014

● [قالب] النسخة الثانية من قالب مدونة برو أيوب 2014

(واجهة بلوجر , واجهة احترافية , واجهة 2014 للبلوجر , واجهات البلوجر )

By glok

Similiar tagsblogger internet template