واجهة احترافية لمدونات بلوجر
تجعل مدونتك جميله ✌ هي عبارة عن واجهة دخول بسيطة تضم لوجو احترافي مع ايقونات المشاركه وزر دخول مع قائمة منسدله لاقسام المدونة
يمكنك معاينة من هنا
<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> اأسيا، المملكة الاردنية الهاشمية</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'>
</b:if>
إذا واجهت مشكلة في المظهر ضع تعليق وسوف اقوم بمساعدتك
مرحبا بكم اصدقائي احببت اقدم لكم اليوم واجهة احترافية مميزة بتقنية بسيطة يمكنك استخدامها لمدونات بلوجر تجعل مدونتك جمي...
الكاتب :
أخي, أرجو المعذرة, رابط المعاينة معطوب
ردحذفشكرا لتنبيهك اخي تم وضع رابط معاينة جديد
حذفشكرا على المضوع الرائع
ردحذفمدونة تقني الانترنت
ممكن تعملي اعلان في مدونتك
ردحذفيمكنك طلب تبادل اعلاني من هنا : http://qaisi1web.blogspot.com/p/ads.html
حذفلو سمحت رد علي الفيس
ردحذفأخي لم تضهر لي body من فضلك أن ترد علي
ردحذف