آخر الأخبار

الجمعة، 27 ديسمبر 2013
الرئيسية > إضافات بلوجر > إضافة مربع الإشتراك و أزرار المواقع الإجتماعية إلى مدونة بلوجر

إضافة مربع الإشتراك و أزرار المواقع الإجتماعية إلى مدونة بلوجر

إضافة مربع الإشتراك و أزرار المواقع الإجتماعية إلى مدونة بلوجر 



طريقة تركيب الإضافة

1- ادخل إلى مدونتك / ثم أختر تحرير قالب 

2- أبحث عن الوسم ]]></b:skin> ثم ضع الكود التالي فوقه 

الكود


.strip{
    margin-top:-12px;
    width:100%;
    margin-bottom:-6px;
}
#socialsub {
    width:300px;
    padding-bottom:10px;
    background:#f9f9f9;
    border:1px solid #eaeaea;
    -webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
  }
  .socialsub-title { 
       font-family: Verdana;
    font-size:25px;
    background:#16a085;
    padding-top:10px;
    padding-bottom:14px;
    color:#fff;
    text-align:center;
    margin-bottom:5px;
  }
  .socialemailsub {
    font-size:14px;
    padding:5px;
    color:#444;
    font-family: Arial;
    font-family:bold;
  }
  .socialemailsubname {
    background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Lrc-C82qPjZsbcRd3WXMUZvgK1J5-FDIqPc2R9J2GFey50lOFcIZIwEL3PN7dmm6LhV_tAXCsrdf6bBKgRoOYlimniHFM9Z6GowjzhsdSYRyum71o8swCGBf0wrN6XarAI5ed1H_CGg/h120/name.png) no-repeat 7px 8px;
    border:2px solid #dbdad9;
    font-family:Arial,sans-serif;
    font-size:13px;
    font-weight:bold;
    color:#dbdad9;
    width:225px;
    height:25px;
    padding:5px 15px 5px 28px;
    margin-left:10px;
    display:inline-block;
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
  moz-box-shadow: 1px 1px 3px 0 #ddd;
-webkit-box-shadow: 1px 1px 3px 0 #ddd;
box-shadow: 1px 1px 3px 0 #ddd;
  }
  .socialemailsubemail {
    background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-MPzMCMA-afWESKTSFIrp7_Q3YA7rwQZ7uXoVpGfhse6hxNPGhvm0MtoGcLkVJLgMyW-FbIyjABXu7gk1WVnb4JDvvZkMaAt1UY8tjklzOt4jj9LqL3hUSSRkt20OA90rD-U-KO3ao7M/h120/email.png) no-repeat 7px 10px;
    border:2px solid #ddd;
    font-family:Arial,sans-serif;
    font-size:13px;
    font-weight:bold;
    color:#ddd;
    width:225px;
    height:25px;
    margin-top:10px;
    padding:5px 15px 5px 28px;
    margin-left:10px;
    display:inline-block;
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
     -moz-box-shadow: 1px 1px 3px 0 #ddd;
-webkit-box-shadow: 1px 1px 3px 0 #ddd;
box-shadow: 1px 1px 3px 0 #ddd;
    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

  }
  .socialemailsubname:hover,.byard-socialemailsubemail:hover {
    border:2px solid #bebebe;
    box-shadow:0.5px 1.5px 2px #ddd;
     moz-box-shadow: 1px 1px 3px 0 #ddd;
-webkit-box-shadow: 1px 1px 3px 0 #ddd;
box-shadow: 1px 1px 3px 0 #ddd;
  }
  .social89button {
      box-shadow:none;
   background:#e74c3c;
    color:#ffffff;
    font-family:arial;
    font-size:20px;
    font-weight:bold;
    padding:10px 0px;
    text-decoration:none;
    margin-top:15px;
    margin-left:6px;
  width:280px;
border-radius: 8px;
  }
  .socialemailsubbutton:hover {
  opacity:0.9;
  }
  .socialemailsubbutton:active {
    position:relative;
    top:1px;
  }
.text5{
    margin-top:8px;
    color:#ddd !important;
    font-size:12px;
    padding-right:2px;
    padding-left:2px;
    font-family:verdana;
}
#flipboard_btrix{ width:300px;}
ul.flipboard_btrix{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard_btrix li{
display: inline-block;
width: 55px;
height: 50px;
margin-right: -px;
background: white;
font: bold 36px Arial;
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.flipboard_btrix li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_btrix li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 5px;
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_btrix li a img{
border-width: 0;
}
ul.flipboard_btrix li:hover a{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
ul.flipboard_btrix li:hover a span{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
form#btrix-searchform {
    display: block;
    padding: 7px 16px;
    margin: 0;
}
form#btrix-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}

3- أختر تخطيط / إضافة أداة HTML/JavaScript / ثم ضع الكود في الصندوق

الكود

<div id='socialsub'>
<div class="strip">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPeyXkCUPAm3H7-y5qUPoCDltbSGgqFOWfCzw2eAJjlOCV-OHUeco3yJYxYLGobCeOMWyM_0C2wJwNOUz963qP4HND0rB9OfrGvOy3TzE6Ej7JkEQvi3okjOzY-RL2C5tL9xnpTNS4cfo/s1600/strip.png" height="5" width="100%"/>
</div>
<div class='socialsub-title'>
اشترك في ثوان
</div>
<div class='socialemailsub'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=USERNAME1' class='subsbox-form' method='post' target='_new'>
<input class='socialemailsubname' name='name' placeholder='Your Name' type='text'/>
<input class='socialemailsubemail' name='email' placeholder='Your Email Address' type='text'/>
<br/> <br/>
<input class='social89button' type='submit' value='إضغط هنا للأشتراك!'/>
</form>
</div>
<br/>
<div id="flipboard_btrix">
<div class="text5">
<font size="2"> <font color="#bdc3c7"> .أو يمكنك الاتصال من خلال المواقع الاجتماعية لدينا </font></font>
</div>
<br />
<center>
<ul class="flipboard_btrix">
<li><a href="http://www.pinteresr.com/USERNAME4" target='blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl6ckKguCYwg5tcycz7r0BDqb6r7d3FCmeeBqDkZjPARk_gSkuIYv5d35W94DsxGV2IIaTuv9cEsukhyphenhyphenRcchF21oO8r4Qat-DfZUgIP8E6AjphRDiZ1g7NJxcoN4wMks2ZCNTmvuvobRI/h120/btrix_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/USERNAME3" target='blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheoCvkvpGlEbHqET9uk2O1se-6QnV-igGABOfPVMFz6BiQhQaGikTgtUKRMMpN93X3y9wixN8a14_QFH8QJSQc3z4ePv4GZTzWzX-D_vodhSc91ucYThnbDOnQ7WAyABTG0vqDn4lxTOI/h120/facebook.png" title="Add to Facebook" /></a></li>
<li><a href="G+ URL" target='blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6wYf9KfBcNafqCp_q_1iOaobHVa6Fe8oDocboTetZid60RNowWV7-JwJ0NoVVhBf6sN4XIJzfEZ6XPWVTzA8HQR114CaYhb2qEflj2oHoIFBhgHZ7vm7hyphenhyphen81_DQ7uJwaj8ocgU2E9mcU/h120/google+.png" title="Google plus" /></a></li>
<li><a href="http://twitter.com/USERNAME2" target='blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPMr6zQ_xjQs6eznkQeS7fvlV7Y6StNwpohXZhbi_ErBqKDG2q8WU4WDZhTNubAKqQF2gFWdxbAOG4XQLBe9ygJn-I_lCLZYmuNDjBMERfn6QblogBBCA5irAg_OE5XstI1sJ5RUnKIU0/h120/twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds.feedburner.com/USERNAME1" target='blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJfCIOWo54Y6SVEDPFR1t9NQj_t6807mF_FczI7z1l7hdiuRHK6El7nhOo98UY0ztCnBy9X8QgKxQDz1aPrjeBIFYDsZvznpEGWVrmuDu8qCFE-g_EZ6jhFWvaU8TeW9fpwaVz0gQJyg/h120/rss.png" title="Add RSS Feed" /></a></li>
</ul>
</center>
</div>
</div>
4- احفظ

5- التعديلات /
1- عدل Feedburner / USERNAME1
2- عدل Twitter/USERNAME2
3-عدل Facebook /USERNAME3
4- عدل Google+/ G+ URL

Note:- الرجاء من الأخوة الكرام : زوار المدونة عدم النسخ دون ذكر المصدر
by في 12/27/2013
no image
موضوع المشاركة: إضافة مربع الإشتراك و أزرار المواقع الإجتماعية إلى مدونة بلوجر 9 من خلال 10 وعلى أساس 10 تصنيف. 9 تعليقات المستخدمين.
  • تعليقات بلوجر
  • تعليقات الفيس بوك

0 Comments:

رسالة تنبيه
    يسعدنا تفاعلكم بالتعليق لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق :
    أن لا تضع أي روابط خارجية
    أي سؤال خارج محتوى التدوينة يرجى استخدام صفحة الدعم الفني
    صفحة الدعم الفني
  • أن يكون التعليق خاص بمحتوى التدوينة إضافة مربع الإشتراك و أزرار المواقع الإجتماعية إلى مدونة بلوجر
    • لإضافة كود حوله أولا بمحول الأكواد
انقرهنا لتحويل الكود

إرسال تعليق

Item Reviewed: إضافة مربع الإشتراك و أزرار المواقع الإجتماعية إلى مدونة بلوجر Description: Rating: 5 Reviewed By: home blogger
الاشتراك في: تعليقات الرسالة (Atom)