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

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

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/AVvXsEggwCfysc_R37tHY0vw167GiywRTfDijl1O_EBc4fHaO0-8msjaI7Kii2_8MXPw-Iy54KuxxFkjtgJ92Qskpoia5L2M_5_saMDgX27qokx4OXyNHRNtyOSRXMpIsU_j1qlYhuvF5QB9jpg/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/AVvXsEiUNB02_8J9jpV_ouf7w8r8topAN1zpNt_wWmSV8SQD0GqWN5N0-R871BIH5eCGgoUuetKndBNhUG8vE8HGc07mp2-xmyhfdEZiz7KZlD1GIHLWka6DJgzImpbsONI4GIe8mOMdvU5LGd4/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/AVvXsEjIJ1Xfh76T8iatZKQCDd94PBenqchgXJQiqLzsqFxqyZI9sKZK812VeVWTmgqRADv-8jqBAisi5pLwa8Zbbvi999z0pzuu3DZ5fqD-SheDZdYwOi391P5_nGUNU3DakdSOK3-PD9DXnLU/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/AVvXsEhJi3R1pkMV9H9hZLzBxq3SOConC_r7DzgKgzX4KnNmkivpsXEIFOcgjFjhzBLMwqDvu-o4CnxTeY04DStPtEa1bAHu-UpE51Cfd330uzZ3bR6DC_bc29zk0hRIIERbW1b_qx0X1MQaZFw/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/AVvXsEhoMPbLUkhgzHimQXjLG5AWnSRwke2kxt1S3ZsRuQPmwYvhvnBslTbO0lvJs4Scf9MkoNOPAWk6yaO8wtufwuKqKPPSp8n8xLafbhx3dKXfD3Ccat0NbGmT9OEhLUt27R0u_vFj83Qe1cc/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/AVvXsEh1J4deNLS0-jHmwbjjVZro8uuG4HW0CsNqBp3qanw5XHg4a3e80nelFMGBwVgLHbPbQDATxtscL3UBKs_CdSdnC9CGPRRdPROZ5ynOeRRiGLo9eU7yAxlplGtplW2Ts_0QJoglNnwuu04/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/AVvXsEh9iXRzPiBOBG_jms4ArSElZwurfxUncy72mQpxgzIdWGN-NANRcZl5BMdCk8XvOhECmLJqM6oRDyarhMijnpXeUIA-_zlXiV6L6KdEr4nKaOx4blq3cX4lYxz0mziJ7bYYewnH401wxK4/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/AVvXsEhwxLdzY7KlvFJJPxPETjMyQb1RSQuN1a8695kO6Ikf-FjWsVDeqlXa6lqyJ7uY7_j9ieQiVuvVxQJFECc6S0GRq8lIBhZ6C2dicbzE9VklLQRxMoizc-VFQ1ULHIdZvvyrfxss4qjVerw/h120/rss.png" title="Add RSS Feed" /></a></li>
</ul>
</center>
</div>
</div>