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

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

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://lh4.googleusercontent.com/-R2ZgitgwE_4/UoSzzv7pWLI/AAAAAAAABnY/BOqk3x4hpks/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://lh3.googleusercontent.com/-NMuqSpxkt3E/UoSz59sv2qI/AAAAAAAABng/ZHvc4x7fHXM/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="http://3.bp.blogspot.com/-NIiNPD-EDM4/UoS0DSwYevI/AAAAAAAABno/yxFXK837b-4/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://lh6.googleusercontent.com/-d2gUwraeKsw/UoS0Rf9o_UI/AAAAAAAABn0/nUP3wuiY6J0/h120/btrix_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/USERNAME3" target='blank'><img src="https://lh3.googleusercontent.com/-vKNjbYyERyA/UoS0ambAHXI/AAAAAAAABn4/Xmb3-yQjwvU/h120/facebook.png" title="Add to Facebook" /></a></li>
<li><a href="G+ URL" target='blank'><img src="https://lh3.googleusercontent.com/-BBFlDMS1RCY/UoS0h5rTzJI/AAAAAAAABoA/a7e4fv5Jepo/h120/google%2B.png" title="Google plus" /></a></li>
<li><a href="http://twitter.com/USERNAME2" target='blank'><img src="https://lh6.googleusercontent.com/-9Je_pYE7Plg/UoS0pkZz1nI/AAAAAAAABoI/7Uighq892xw/h120/twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds.feedburner.com/USERNAME1" target='blank'><img src="https://lh6.googleusercontent.com/-1qL41vxLzpQ/UoS0wz520tI/AAAAAAAABoQ/79D4sLqh5UA/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:- الرجاء من الأخوة الكرام : زوار المدونة عدم النسخ دون ذكر المصدر

0 Comments:

رسالة تنبيه

يسعدنا تفاعلكم بالتعليق لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق :

أن لا تضع أي روابط خارجية

أي سؤال خارج محتوى التدوينة يرجى استخدام صفحة الدعم الفني

صفحة الدعم الفني

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

لإضافة كود حوله أولا بمحول الأكواد

انقرهنا لتحويل الكود

إرسال تعليق

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

آخر الأخبار

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