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

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

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

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/AVvXsEiEETAfhDqQYaW75ca0uVsP80YzVGZDAeDCo2kmBMKdq2fnbPngoR1HpgZ99c35HBzBuLpeLut8g0r4WuVkjJnrVbzPJvu0G9URo6mlTXlzPhiNvRzuBs1TUWVxefsb4BHp0BlHfvzm6HY/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/AVvXsEj0gWgXSdwjstW831pDBDn9tFIX9IYj2w8IAbDOMMyzhy6x89_3q_nTip_h1DE6HiogRxmvvZ552S-Cl5aBYnlX2mt848LASUqLeB5VJvvMWO_iT3vrvHJs2WuVltNi1qkqE5uqgpr5_IM/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/AVvXsEjTq9Ze1-LHSF0YcczcisqHnSTjtV1iF1wO0DGWUAq_CuZJQ0vsgaNlMH-FTJaNldyzF8ITot_04AYjGdP2TT-OwOuGz1cES5yyvODIhpKQusu6P-gNk2a_g6EcuTP0QIENjaZxVjS80PI/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/AVvXsEhe57OdlyE7UCoc0tauApySjDgf0hcb7Eb5dpSkqHksnU5rjm7ka8UF5gAU_V1o8F4csnN5qGeYRJneB6dlGMZMG6rSZJhZuJiDVS32OZuoCe1ZEXiIIkkXuwTWyQ6hKh0w4RwFXqvADZQ/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/AVvXsEgsWyxi4QfCgQGe5QWGhjkJ7deVEu-jyxhd5oruro8mTG_vIILbtTi01lKSULWRcxfMi6OZLRcwk8DcjoWoYOLErPCJSk2kAl0mNb-x4KfkilikoKVnhC47BNa0qbAVtZbbA3ABeLo0ilc/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/AVvXsEgm9DqTZVWvjvWChVlM68P7z3j-Iw7bk0I9Qq4EodTeCHqi2ngr87oeyysRUQwVQfgy7box9i7Fh0y1KRMXa6VF25gy82rwVO1-RRCWYcY-7H_wugqMrST1EYuwMBp04RiEJqKw35_vAQg/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/AVvXsEhK3bcEVnlPVnr9Hgf6PEbTjrjMO4GI-7f7eAweYSgRSNf8yw1AWbBuMTMbD5b2mZlaHA5xyhGkHmSa2m-4LR48ILcQIFRaYOSqP85ZvScuVY0GyFnq6WDZ98EeODnpQVCo-qAd2Rby9b0/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/AVvXsEhRxklVPitBRmk6qqg6Lyhk5jGJB-k7vd2SbLloVHvO8Teg3V12_ilSS5rEhUdRds_TGCLKelm9ILUUeoPo794lj_jHJt41ZI9frx7zw_fMmwTiLOu0jz12tlNlKlgq0qr4a5zJymuvVvE/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:- الرجاء من الأخوة الكرام : زوار المدونة عدم النسخ دون ذكر المصدر

كتب بواسطة Expert Blogger

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

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