واجهة مدونة جزائري ويب + تاثيرات



الواجهة شيء جميل في الموقع صراحه وهي ميزه جداَ جميلة وخرافيه تعطي الموقع منظراَ حقاَ مميز , ايضاَ تعطي الزائر انطباع ان هذا الموقع احترافي . طبعاَ الواجهة في مدونة بلوجر بالأساس لم تكن موجوده لا في العالم العربي ولا الغربي , بل كان هناك واجهات ولاكنها ليست كهذه , حيث ان الواجهات الاخرى التي صنعها بعض المحترفين العرب كانت فكرتها ( صفحة html عبارة عن واجهه ) ويتم ربطها بدومين اخر غير دومين المدونة الاساسي وهذه هي المشكلة, وقد وجدت بالفعل ان كثير من المدونين يبحثون عن طريقة تركيب واجهة لمدونة بلوجر.


كيفية تركيب الواجهة :
    1. معاينة الاضافة من هنا
    2. قم باضافة الكود التالي تحت <body>
<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: &apos;ge_ss_tvbold&apos;'> <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://lh3.googleusercontent.com/-pKA8U67t3z4/VjohfbmMKVI/AAAAAAAAEV4/HEGSN6fk5m0/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: &apos;ge_ss_tvbold&apos;'><i class='fa fa-globe'/> الشرق الأوسط&#1548; الجزائر</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: &#39;ge_ss_tvbold&#39;; } .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: &#39;&#39;; 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:&#39;&#39;;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'>
    1. وابحث عن <body/>
    2. واضف فوقها مباشرتا هذه الكلمة <b:if/>
    3. تفضل رابط التاثيرات :
<link href='https://googledrive.com/host/0B2v7cH8soLJrbE44OVJHZ2VjZnM' rel='stylesheet'/>


  1. الردود
    1. تم ارسال كود الواجهة + ربط التحميل و الشرح =g

      حذف
  2. الردود
    1. تم ارسال كود الواجهة + ربط التحميل و الشرح =g

      حذف
  3. الردود
    1. تم ارسال كود الواجهة + ربط التحميل و الشرح =g

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

      حذف
  5. اخي ممكن أن تضفني في التبادل الاعلاني النصي
    اسم المدونة : البداية نت

    رابط المدونة : www.albedayanet.blogspot.com

    إذا وافقت أخبرني هنا : yassine.idrissi.acherki@gmail.com

    ردحذف
  6. الردود
    1. ارسل لي قالب مدونتك
      ساضع الاضافة

      حذف
    2. كلمني هنا

      https://www.facebook.com/Emad.Eyad15

      حذف
    3. اخي ليس عندي فيسبوك، تم حدفه للابد مع الاسف

      حذف
  7. تِــــــNetــــــقْ
    youssefcharify@gmail.com

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

      حذف

إذا أعجبك محتوى موقع جزائري ويب اتمنى البقاء على تواصل دائم ، فقط قم بإدخال بريدك الإلكتروني للإشتراك في بريد المدونة السريع ليصلك جديد المدونة أولاً بأول ، كما يمكنك إرسال رساله بالضغط على الزر المجاور ...