كيفية اضافة واجهة مدونة عرب ويب

7:37 ص

تفاصيل القالب

شارك العمل

قم باضافة الكود التالي تحت <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='//ar1web-com.googlecode.com/svn/trunk/animate.css' rel='stylesheet'/>



<div class='outer-wrap animated fadeInUp' style=' font-family: 'ge_ss_tvbold''>

<center>

<div class='logo'>

<a href='http://web3-night.blogspot.com/'><img src='http://i.imgur.com/IQbwbTf.png'/></a>

</div>

</center>

<div class='title-ar1web'>احترف <span>التدوين</span></div>

<div class='ender' style=' font-family: 'ge_ss_tvbold''><i class='fa fa-globe'/> الشرق الأوسط، العراق</div>

<div class='social'>

<li class='ar1web-tooltip ar1web-tooltip-top' data-ar1web-tooltip='كن صديقًا لنا'><a href='https://www.blogger.com/follow-blog.g?blogID=3942045828751851644' target='_blank'><i class='fa fa-users'/></a></li>

<li class='contact-button ar1web-tooltip ar1web-tooltip-top' data-ar1web-tooltip='راسلنا'><a href='#'><i class='fa fa-envelope-square'/></a></li>

<li class='ar1web-tooltip ar1web-tooltip-top' data-ar1web-tooltip='صفحتنا على الفيسبوك'><a href='https://www.facebook.com/WEB3.Night/?ref=bookmarks' target='_blank'><i class='fa fa-facebook'/></a></li>

<li class='ar1web-tooltip ar1web-tooltip-top' data-ar1web-tooltip='تابعنا على تويتر'><a href='https://www.facebook.com/WEB3.Night/?ref=bookmarks' target='_blank'><i class='fa fa-twitter'/></a></li>

<li class='ar1web-tooltip ar1web-tooltip-top' data-ar1web-tooltip='تابعنا على جوجل+'><a href='https://www.facebook.com/WEB3.Night/?ref=bookmarks' target='_blank'><i class='fa fa-google-plus'/></a></li>

</div>

<div class='actions'>

<li><a href='http://web3-night.blogspot.com/search/?max-results=7'><i class='fa fa-newspaper-o'/> المدونة</a></li>

<select class='genrebox' onchange='document.location.href=this.options[this.selectedIndex].value;' style=' font-family: 'ge_ss_tvbold''>

<option style=' font-family: 'ge_ss_tvbold'' 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-ar1web { text-align: center; color: #384047; font-size: 26px; font-weight: 500; margin-top: 10px; font-family: 'ge_ss_tvbold'; } .title-ar1web 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;}

.ar1web-tooltip {position:relative;display:inline-block;}

.ar1web-tooltip:before, .ar1web-tooltip:after {position:absolute;opacity:0;z-index:1000000;-webkit-transition:0.3s ease;-moz-transition:0.3s ease;pointer-events:none;}

.ar1web-tooltip:hover:before, .ar1web-tooltip:hover:after {opacity:1;}

.ar1web-tooltip:before {content:'';position:absolute;background:transparent;border:6px solid transparent;position:absolute;}

.ar1web-tooltip:after {content: attr(data-ar1web-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;}

.ar1web-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);}

.ar1web-tooltip-top:after {bottom:125%;left:10%;margin:0 0 -6px -10px;}

.ar1web-tooltip-top:hover:before {margin-bottom:-10px;}

.ar1web-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'>