الواجهة شيء جميل في الموقع صراحه وهي ميزه جداَ جميلة وخرافيه تعطي الموقع منظراَ حقاَ مميز , ايضاَ تعطي الزائر انطباع ان هذا الموقع احترافي . طبعاَ الواجهة في مدونة بلوجر بالأساس لم تكن موجوده لا في العالم العربي ولا الغربي , بل كان هناك واجهات ولاكنها ليست كهذه , حيث ان الواجهات الاخرى التي صنعها بعض المحترفين العرب كانت فكرتها ( صفحة html عبارة عن واجهه ) ويتم ربطها بدومين اخر غير دومين المدونة الاساسي وهذه هي المشكلة, وقد وجدت بالفعل ان كثير من المدونين يبحثون عن طريقة تركيب واجهة لمدونة بلوجر.
كيفية تركيب الواجهة :
- معاينة الاضافة من هنا
- قم باضافة الكود التالي تحت
<b:if cond='data:blog.url == data:blog.homepageUrl'> <link href='https://googledrive.com/host/0B2v7cH8soLJrbE44OVJHZ2VjZnM' rel='stylesheet'/> <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='//jazairiweb-com.googlecode.com/svn/trunk/animate.css' rel='stylesheet'/> <!-- Home Page for jazairiweb.blogspot.com--> <div class='outer-wrap animated fadeInUp' style=' font-family: 'ge_ss_tvbold''> <center> <div class='grid_3 pos_rel jalal wow bounceInUp animated animated' data-wow-delay='0.12s' style='visibility: visible;-webkit-animation-delay: 0.12s; -moz-animation-delay: 0.12s; animation-delay: 0.12s;'> <div class='logo'> <a href='http://jazairiweb.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-WoUrmakAHAn1fyG3S-M3YWGVg2-XsVKpBRFgfJOF19-4Hhan3CLE17lGkSbhLsA0knZ6FNcyLK_GhuGhnyWlMC3F0Skvgo1_NMfZjPGQ3KZ5-ZDb315mQ6cyn6ZZlG60FAnDj2z6Oho/w331-h149-no/111.png'/></a> </div></div></center> <div class='grid_3 pos_rel jalal wow bounceInRight animated animated' data-wow-delay='0.12s' style='visibility: visible;-webkit-animation-delay: 0.12s; -moz-animation-delay: 0.12s; animation-delay: 0.12s;'> <div class='title-jazairiweb'>جزائري <span> ويب</span></div></div> <div class='grid_3 pos_rel jalal wow bounceInLeft animated animated' data-wow-delay='0.12s' style='visibility: visible;-webkit-animation-delay: 0.12s; -moz-animation-delay: 0.12s; animation-delay: 0.12s;'> <div class='ender' style=' font-family: 'ge_ss_tvbold''><i class='fa fa-globe'/> الشرق الأوسط، الجزائر</div> </div> <div class='grid_3 pos_rel jalal wow bounceIn animated animated' data-wow-delay='0.12s' style='visibility: visible;-webkit-animation-delay: 0.12s; -moz-animation-delay: 0.12s; animation-delay: 0.12s;'> <div class='social'> <li class='jazairiweb-tooltip jazairiweb-tooltip-top' data-jazairiweb-tooltip='كن صديقًا لنا'><a href='https://www.blogger.com/follow-blog.g?blogID=483830736382407225' target='_blank'><i class='fa fa-users'/></a></li> <li class='contact-button jazairiweb-tooltip jazairiweb-tooltip-top' data-jazairiweb-tooltip='راسلنا'><a href='#'><i class='fa fa-envelope-square'/></a></li> <li class='jazairiweb-tooltip jazairiweb-tooltip-top' data-jazairiweb-tooltip='صفحتنا على الفيسبوك'><a href='https://www.facebook.com/#/?ref=bookmarks' target='_blank'><i class='fa fa-facebook'/></a></li> <li class='jazairiweb-tooltip jazairiweb-tooltip-top' data-jazairiweb-tooltip='تابعنا على تويتر'><a href='https://www.facebook.com/#/?ref=bookmarks' target='_blank'><i class='fa fa-twitter'/></a></li> <li class='jazairiweb-tooltip jazairiweb-tooltip-top' data-jazairiweb-tooltip='تابعنا على جوجل+'><a href='https://www.facebook.com/#/?ref=bookmarks' target='_blank'><i class='fa fa-google-plus'/></a></li> </div></div> <div class='grid_3 pos_rel jalal wow bounceInDown animated animated' data-wow-delay='0.12s' style='visibility: visible;-webkit-animation-delay: 0.12s; -moz-animation-delay: 0.12s; animation-delay: 0.12s;'> <div class='actions'> <li><a href='http://jazairiweb.blogspot.com/search/?max-results=7'><i class='fa fa-home'/> المدونة</a></li> </div></div> <style> body {background: #fff url(https://lh3.googleusercontent.com/-JNApoAHLbBM/Vjyv4p7Kk6I/AAAAAAAAEXM/E9iBbxA05Vw/s8-no/repeat-all.png);} .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: 331px; height: 179px; padding: 5px; box-sizing: initial!important; } .logo img { width: 331px; height: 149px;transition: all .17s ease-out; } .logo img:hover { -webkit-filter: grayscale(100%); } .title-jazairiweb { text-align: center; color: #384047; font-size: 26px; font-weight: 500; margin-top: 10px; font-family: 'ge_ss_tvbold'; } .title-jazairiweb 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: rgba(35, 52, 66, 0.75); width: 26px; height: 26px; text-align: center; line-height: 25.5555px; border-radius: 5%!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: 5px 9px; 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;} .jazairiweb-tooltip {position:relative;display:inline-block;} .jazairiweb-tooltip:before, .jazairiweb-tooltip:after {position:absolute;opacity:0;z-index:1000000;-webkit-transition:0.3s ease;-moz-transition:0.3s ease;pointer-events:none;} .jazairiweb-tooltip:hover:before, .jazairiweb-tooltip:hover:after {opacity:1;} .jazairiweb-tooltip:before {content:'';position:absolute;background:transparent;border:6px solid transparent;position:absolute;} .jazairiweb-tooltip:after {content: attr(data-jazairiweb-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;} .jazairiweb-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);} .jazairiweb-tooltip-top:after {bottom:125%;left:10%;margin:0 0 -6px -10px;} .jazairiweb-tooltip-top:hover:before {margin-bottom:-10px;} .jazairiweb-tooltip-top:hover:after {margin-bottom:2px;} @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'>
- وابحث عن
- واضف فوقها مباشرتا هذه الكلمة
- تفضل رابط التاثيرات :
<link href='https://googledrive.com/host/0B2v7cH8soLJrbE44OVJHZ2VjZnM' rel='stylesheet'/>
إرسال تعليق
جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).