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

    مرحبا بكم اصدقائي احببت اقدم لكم اليوم واجهة احترافية مميزة بتقنية بسيطة يمكنك استخدامها لمدونات بلوجر 
     تجعل مدونتك جميله ✌ هي عبارة عن واجهة دخول بسيطة تضم لوجو احترافي مع ايقونات المشاركه وزر دخول مع قائمة منسدله لاقسام المدونة
    يمكنك معاينة من هنا
    طريقةتركيب الواجهة  
    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
    يسمح بنقل الموضوع لكن مع ذكر المصدر في نهاية الموضوع المنقول ووضع رابط الموضوع الأصلي
    واجهة احترافية لمدونات بلوجر

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

    7 تعليقات
    كيف تعلق ؟

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

      ردحذف
      الردود
      1. شكرا لتنبيهك اخي تم وضع رابط معاينة جديد

        حذف
    2. ممكن تعملي اعلان في مدونتك

      ردحذف
      الردود
      1. يمكنك طلب تبادل اعلاني من هنا : http://qaisi1web.blogspot.com/p/ads.html

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

      ردحذف
    4. أخي لم تضهر لي body من فضلك أن ترد علي

      ردحذف

    contact-us

    الاسم

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

    رسالة *