واجهة احترافية لمدونات بلوجر

مرحبا بكم اصدقائي احببت اقدم لكم اليوم واجهة احترافية مميزة بتقنية بسيطة يمكنك استخدامها لمدونات بلوجر 
 تجعل مدونتك جميله ✌ هي عبارة عن واجهة دخول بسيطة تضم لوجو احترافي مع ايقونات المشاركه وزر دخول مع قائمة منسدله لاقسام المدونة
يمكنك معاينة من هنا
طريقةتركيب الواجهة  
1 - أبحث عن <body> وقم باضافة الكود التالي أسفلة
 
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

<link href='//cdn.jsdelivr.net/darfonts/0.1/tv-tha-tye-wide/stylesheet.css' rel='stylesheet'/>
<link href='//dl.dropboxusercontent.com/s/td5mqmusx4vwwp6/animate-qaisi1web.css' rel='stylesheet'/>
<!-- Home Page qaisi1web.blogspot.com -->
<div class='outer-wrap animated fadeInUp'>
<div class='logo'>
<a href='http://qaisi1web.blogspot.com/'><img src='http://i.imgur.com/IQbwbTf.png'/></a>
</div>
<div class='title-qaisi1web'>القيسي<span> ويب</span></div>
<div class='ender'><i class='fa fa-globe'></i> اأسيا&#1548; المملكة الاردنية الهاشمية</div>
<div class='social'>
<li class='qaisi1web-tooltip qaisi1web-tooltip-top' data-qaisi1web-tooltip='كن صديقًا لنا'><a href='https://www.blogger.com/follow-blog.g?blogID=6878042300854650421' target='_blank'><i class='fa fa-users'></i></a></li>
<li class='contact-button qaisi1web-tooltip qaisi1web-tooltip-top' data-qaisi1web-tooltip='راسلنا'><a href='#'><i class='fa fa-envelope-square'></i></a></li>
<li class='qaisi1web-tooltip qaisi1web-tooltip-top' data-qaisi1web-tooltip='صفحتنا على الفيسبوك'><a href='https://www.facebook.com/qaisi1web' target='_blank'><i class='fa fa-facebook'></i></a></li>
<li class='qaisi1web-tooltip qaisi1web-tooltip-top' data-qaisi1web-tooltip='تابعنا على تويتر'><a href='https://twitter.com/assadalqaisi77' target='_blank'><i class='fa fa-twitter'></i></a></li>
<li class='qaisi1web-tooltip qaisi1web-tooltip-top' data-qaisi1web-tooltip='تابعنا على جوجل+'><a href='https://plus.google.com/u/0/+%D8%A3%D8%B3%D8%B9%D8%AF%D8%A7%D9%84%D9%82%D9%8A%D8%B3%D9%8A0/posts' target='_blank'><i class='fa fa-google-plus'></i></a></li>
</div>
<div class='actions'>
<li><a href='/search/?max-results=7'><i class='fa fa-newspaper-o'></i> المدونة</a></li>
<select class='genrebox' onchange='document.location.href=this.options[this.selectedIndex].value;'>
<option value=''>الأقسام :</option>
<option value='/search/label/قوالب بلوجر/'>قوالب بلوجر</option>
<option value='/search/label/قوالب ووردبريس/'>قوالب ووردبريس</option>
<option value='/search/label/قوالب PSD/'>قوالب PSD</option>
<option value='/search/label/اضافات بلوجر'>اضافات بلوجر</option>
<option value='/search/label/هاكات التعليقات '>هاكات التعليقات </option>
<option value='/search/label/سلايدر/'>سلايدر</option>
<option value='/search/label/موك آب/'>موك آب</option>
<option value='/search/label/خطوط عربية'>خطوط عربية</option>
<option value='/search/label/خطوط أجنبية'>خطوط أجنبية</option>
<option value='/search/label/PSD'>ملفات مفتوحة</option>
<option value='/search/label/خلفيات'>خلفيات</option>
<option value='/search/label/أزرار المشاركة/'>أزرار المشاركة</option>
</select>
</div>
<style>
body { background: #fff; } .fa { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: 400; line-height: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .outer-wrap { width: 100%; height: 100%; margin: 13% auto 0; border: 0; } .logo { margin: 0 auto; width: 70px; height: 70px; background-color: #F6F9FA; padding: 5px; border: 1px solid #E9F0F3; border-radius: 100%!important; box-sizing: initial!important; } .logo img { width: 70px; height: 70px; border-radius: 100%!important; transition: all .17s ease-out; } .logo img:hover { -webkit-filter: grayscale(100%); } .title-qaisi1web { text-align: center; color: #384047; font-size: 26px; font-weight: 500; margin-top: 10px; font-family: 'ge_ss_tvbold'; } .title-qaisi1web span { color: #E74C3C; } .ender { text-align: center; color: #31465A; font-size: 11px; margin-top: 5px;font-family: Droid Arabic Naskh; } .social { margin: 30px 0; text-align: center; float: none; } .social li { display: inline-block; margin-right: 8px; background-color: #D3D9DD; width: 26px; height: 26px; text-align: center; line-height: 25.5555px; border-radius: 50%!important; transition: all 0.3s ease-out 0s; } .social li:hover { background-color: #E74C3C; } .social li a { color: #fff; padding: 4px; font-size: 13px; } .actions { text-align: center; margin: 10px 0; } .actions li { list-style: none; display: inline-block; padding-left: 5px; padding-right: 5px; } .actions li a { background-color: #E74C3C; color: #FFF; font-size: 13px; padding: 4px 8px; border-radius: 2px!important; text-decoration: none; transition: all 0.3s ease-out 0s; } .actions li a:hover.buka-contact:hover { background-color: #DA4335; } .wrapper{display: none!important;} 
.contact-sec { position: fixed; top: 50%; margin-top: -190px; left: 50%; max-width: 350px; width: 90%; border-radius: 2px!important; margin-left: -175px; background-color: #FFF; height: auto; z-index: 99999; display: none; box-shadow: 2px 3px 3px rgba(0,0,0,0.1); -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); transition: all .5s ease; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease; } .contact-close { position: absolute; top: -12px; right: -12px; background-color: #E74C3C; color: #FFF; height: 25px; width: 25px; text-align: center; border-radius: 2px!important; line-height: 25px; font-size: 10px; transition: all 0.3s ease-out 0s; } a.contact-close { color: #FFF!important; } .contact-close:hover { background-color: #D24334; } .contact-sec .widget { padding: 20px; } .contact-sec .contact-form-cross { display: none; } .contact-sec.contact-show { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } .form { font-family: inherit !important; font-size: 13px!important; text-align: right; } .contact-form-name, .contact-form-email, .contact-form-email-message { max-width: 100%; width: 100%; } span.c_form { color: #e74c3c!important; } .contact-form-widget { height: auto; margin-left: 0; max-width: 100%; padding: 0; padding-top: 0; width: 100%; } .contact-form-name, .contact-form-email, .contact-form-email-message { max-width: 100%!important; width: 100%!important; border: 1px solid #F6F9FA!important; background-color: #F6F9FA!important; } .contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover { border: 1px solid #E9F0F3!important; border-top: 1px solid #E9F0F3!important; box-shadow: none!important; } .contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus { border-color: #E9F0F3 !important; box-shadow: none!important; transition: all .3s ease-out!important; } .contact-form-button-submit.disabled, .contact-form-button-submit.disabled:hover, .contact-form-button-submit.disabled:active { background-color: #3AC162!important; border-color: #3AC162!important; transition: all .3s ease-out!important; } .contact-form-button-submit:focus, .contact-form-button-submit.focus { border-color: #3AC162!important; box-shadow: none!important; transition: all .3s ease-out!important; } .contact-form-button-submit { background-color: #E74C3C; background-image: -webkit-linear-gradient(top, #E74C3C, #E74C3C); border-color: #E74C3C; border-radius: 0!important; width: 100%!important; font-size: 13px!important; font-weight: 400!important; text-transform: capitalize !important; font-family: inherit !important; padding-bottom: 26px !important; transition: all 0.3s ease-out 0s!important; } .contact-form-button-submit:hover { background-color: #D83929; background-image: -webkit-linear-gradient(top, #D83929, #D83929); border-color: #D83929; border-radius: 0!important; cursor: pointer!important; } .contact-form-error-message-with-border { background: rgba(234, 97, 83, 0.1)!important; border: 1px solid #ea6153!important; bottom: 0; box-shadow: none!important; color: #666; font-size: 11px; font-weight: normal; line-height: 19px; margin-left: 0; opacity: 1; position: static; text-align: center; width: 308px!important; } .contact-form-success-message-with-border { background: rgba(234, 97, 83, 0.1)!important; border: 1px solid #ea6153!important; bottom: 0; box-shadow: none!important; color: #222; font-size: 11px; line-height: 19px; margin-left: 0; opacity: 1; position: static; text-align: center; width: 308px!important; } #outer-wrapper.pop_contact { transition: all 0s ease; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; } #outer-wrapper.pop_contact:before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.69); transition: all 0s ease; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; }.title{display: none;}
.qaisi1web-tooltip {position:relative;display:inline-block;}
.qaisi1web-tooltip:before, .qaisi1web-tooltip:after {position:absolute;opacity:0;z-index:1000000;-webkit-transition:0.3s ease;-moz-transition:0.3s ease;pointer-events:none;}
.qaisi1web-tooltip:hover:before, .qaisi1web-tooltip:hover:after {opacity:1;}
.qaisi1web-tooltip:before {content:'';position:absolute;background:transparent;border:6px solid transparent;position:absolute;}  
.qaisi1web-tooltip:after {content: attr(data-qaisi1web-tooltip);background: hsla(0,0%,20%,0.9);color: #fff;padding: 5px 8px;font-size: 11px;white-space: nowrap;
border-radius: 3px;-webkit-backface-visibility: hidden;}
.qaisi1web-tooltip-top:before {bottom:129%;left:10%;margin:0 0 -18px 0;border-top-color:rgba(0,0,0,0.7);border-top-color:hsla(0,0%,20%,0.9);}
.qaisi1web-tooltip-top:after {bottom:125%;left:10%;margin:0 0 -6px -10px;}
.qaisi1web-tooltip-top:hover:before {margin-bottom:-10px;}
.qaisi1web-tooltip-top:hover:after {margin-bottom:2px;}
.genrebox{background: #E74C3C; border: 0; color: #fff; outline: 0; padding: 4px 0; display: inline-block; font-size: 12px; font-weight: 500; border-radius: 2px!important;}
@media screen and (max-width: 500px) {
.outer-wrap {
margin: 35% auto 0px;
}
.contact-sec {
top: 55%;
}
.contact-sec {
max-width: 280px!important;
margin-left: -141px !important;
}
.contact-form-error-message-with-border {
width: 238px!important;
}
.contact-form-success-message-with-border {
width: 238px!important;
}
.social { width: initial!important;}
}
</style>
    </div>
    </b:if>
<b:if cond='data:blog.url != data:blog.homepageUrl'>

2 - أبحث عن </body> وضع فوقه الكود التالي
</b:if>
إذا واجهت مشكلة في المظهر ضع تعليق وسوف اقوم بمساعدتك

مرحبا بكم اصدقائي احببت اقدم لكم اليوم واجهة احترافية مميزة بتقنية بسيطة يمكنك است...

روابط الموضوع للنسخ

رابط
HTML
BBCode
يسمح بنقل الموضوع لكن مع ذكر المصدر في نهاية الموضوع المنقول ووضع رابط الموضوع الأصلي
6 التعليقات
avatar

أخي, أرجو المعذرة, رابط المعاينة معطوب

avatar

شكرا لتنبيهك اخي تم وضع رابط معاينة جديد

avatar

ممكن تعملي اعلان في مدونتك

avatar

لو سمحت رد علي الفيس

avatar

يمكنك طلب تبادل اعلاني من هنا : http://qaisi1web.blogspot.com/p/ads.html

كيف تعلق ؟

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *