اضافة واجهة احترافية لمدونات بلوجر - عالم المدون

الثلاثاء، 14 يونيو، 2016

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


اسلام عليكم ورحة الله اافة جديدة على المدونة وهى اضافة واجهة احترافية لمدونات بلوجر ويمكنك اضافتها على جميع مدونات بلوجر فى جميع التخصوصات فهى واجهة احترافية جدا ويمكنك معاينة الاواجهة من الرابط التالى .


شرح التركيب

1- قم باخذ نسخة احتياطية من مدونتك لعدم حدوث اى مشكلة .

2- قم بالبحث فى قال مدونتك عن الوسم <body> ثم قم بوضع الكود التالى فوقة - قبلة .

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='outer-wrap animated fadeInUp'>
<ul class='social-icons'>
<li><a href='#'><i class='fa fa-twitter' style='width: 40px;'/></a></li>
<li><a href='#'><i class='fa fa-facebook' style='margin-right: 0px;'/></a></li>
<li><a href='#'><i class='fa fa-google-plus' style='margin-right: 0px;margin-top: 0px;'/></a></li>
</ul>
<div class='title-wdbloog'> <i class='fa fa-google-wallet'/> WDBLOOG </div>
<div class='ender'>
<i class='fa fa-globe'/> مدونة عالم المدون  <i class='fa fa-globe'/></div>
<div class='efgfger'>اهلا بك معنا تفضل بالدخول للمدونة</div>
<div class='social'>
<li class='wdbloop'><i class='fa fa-hand-o-left'/></li>
<li class='wdbloog-tooltip wdbloog-tooltip-top'><a class='fa1' href='http://wdbloog2.blogspot.com/search/?max-results=8' target='_blank'><i class='fa fa-sign-in'/></a></li>
<li class='wdbloog-tooltip wdbloog-tooltip-top2'><a href='#' target='_blank'><i class='fa fa-info'/></a></li>
<li class='wdbloog-tooltip wdbloog-tooltip-top3'><a href='#' target='_blank'><i class='fa fa-camera'/></a></li>
<li class='wdbloog-tooltip wdbloog-tooltip-top4'><a href='#' target='_blank'><i class='fa fa-envelope'/></a></li>
</div>
<div class='name545'>
<p class='name' href='search/?max-results=18'>ادخل للمدونة </p>
<p class='name' href='search/?max-results=18'>عن المدون</p>
<p class='name' href='search/?max-results=18'>معرض اعمالى</p>
<p class='name' href='search/?max-results=18'>اتصل بنا</p>
</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 {background: #232323;border: 30px solid rgba(255,255,255,0.2);padding-top: 202px;  padding-bottom: 202px;} 
.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-wdbloog {text-align: center; color: #fff; font-size: 55px; font-weight: 700;font-family: &#39;Lobster&#39;,ge_ss_threeregular; } 
.title-wdbloog span { color: #E74C3C; } 
.ender {text-align: center; color: #fff; font-size: 70px; margin-top: 45px;font-family: &#39;Lobster&#39;,ge_ss_threeregular;} .social { margin: 30px 0; text-align: center; float: none;margin-top: 45px;} 
.social li {
margin-right: 8px;
  text-align: center;
  border-radius: 50%!important;
  transition: all 0.3s ease-out 0s;
  background: #EC2C3B;
  text-decoration: none;
  font-size: 55px;
  overflow: hidden;
  position: relative;
  display: inline-block;
  width: 65px;
  height: 60px;
  margin: 10px;
  margin-bottom: 0;
  line-height: 100px;
  color: #fff;
  padding-bottom: 31px;
  padding-right: 15px;
  padding-left: 12px;
  padding-top: 0px;
} 
.social li:hover { background-color: #E74C3C; } 
.social li a { color: #fff;} 
.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: &#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;}

.wdbloog-tooltip {position:relative;display:inline-block;}
.wdbloog-tooltip:hover:before, .wdbloog-tooltip:hover:after {opacity:1;}
.wdbloog-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;}
.fa-globe:before {
  content: &quot;\f004&quot;;
  color: #ec2c3b;
}
.efgfger {
  font-size: 35px;
  font-weight: 700;
  color: #fff;
  font-family: &#39;Lobster&#39;,ge_ss_threeregular !important;
  margin-left: 55px;
  text-align: center;
  margin-top: 55px;
  margin-right: 50px;
}
li.wdbloog-tooltip.wdbloog-tooltip-top {
  background: #A0AE27;
}
li.wdbloog-tooltip.wdbloog-tooltip-top2 {
  background: #5F1DFF;
}
li.wdbloog-tooltip.wdbloog-tooltip-top3 {
  background: #34DB77;
}
li.wdbloog-tooltip.wdbloog-tooltip-top4 {
  background: #D24D57;
}
p.name {
  float: right;
  text-align: center;
  margin-right: 37px;
  margin-left: 10px;
  color: #FFFFFF;
  font-family: &#39;Lobster&#39;,ge_ss_threeregular;
  font-size: 16px;
}
.name545 {
  margin-right: 410px;
  margin-top: -15px;
}
.social-icons li {
  display: inline-block;
  background: rgba(35,35,35,0.4);
  height: 40px;
  width: 40px;
  line-height: 40px;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0;
  -webkit-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -ms-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  padding: 0px;
}
ul.social-icons {
  float: left;
  margin-top: -199px;
  margin-left: 15px;
}
i.fa.fa-facebook:hover {
  background:#3b5998;
}
i.fa.fa-google-plus:hover {
  background: #EC2C3B;
}
i.fa.fa-twitter:hover {
  background: #1da1f2;
}

@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;}
}
@media screen and (max-width: 1280px) {
.outer-wrap {padding-top: 202px;padding-bottom: 195px;} 
}
</style>
    </div>
    </b:if>

3- قم بالبحث عن الوسم </body>  ثم قم بوضع الكود التالى فوقة - قبلة .

</b:if>

4- قم بتغيير رابط المدونة برابط مدونتك وكذلك مواقع التواصل وايضا الازرار بجوار رابط المدونة .

5- قم بحفظ القالب ومبروك عليك الاضافة .

وهذا كل شئ فى موضوع اليوم اذا واجهتك اى مشكلة فى تركيب الإضافة او تريد التعديل على اى شئ ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع :)

شارك الموضوع ليستفيد الجميع

مواضيع مهمه ايضا سوف تعجبك

16 تعليق على موضوع : اضافة واجهة احترافية لمدونات بلوجر

اريد الاشتراك في التبادل الاعلاني www.ti9aniya.com

لم يعد يتوفر التبادل الأعلانى
يمكنك طلب خدمة الأعلان على المدونة
https://khamsat.com/user/abdo-abd-alrazzaq

اضافه جميله شكراا لك أخي بتوفق دايما

شكرا لك اخى الكريم على دعمك

اخى الكريم يوجد خطأ فى عدم تكملة الكود الاخير

ما المشكلة أخى التى تواجهك

اخى انا اتحدث عن هذا الكود الذى يجب ان اضعه فهل هو هكذا فقط (المراد فى الصورة
https://f.top4top.net/p_5529juxn1.jpg

نعم أخى كود هو الوسم الصغير هذا فقط
</b:if>

الاضافة نزلت تحت المواضيع

ضع رابط مدونتك للمعاينة

هل أنت ركبت الأضافة أخى

أبحث عن هذا الوسم

.outer-wrap
وعدل الأكواد بعده هكذا

.outer-wrap {
padding-top: 202px;
padding-bottom: 195px;
position: absolute;
z-index: 999999999999;
width: 100%;
}

شكرًا جدًا ليك x-)
للاسف عمرو ناصر نشر قالب بتاعك

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
الأبتساماتأخفاء الأبتسامات

جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر