[اضافة باوجر] المتابعة عبر المواقع الإجتماعية

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

انتقل إلى لوحة تحكم مدونتك،
القالب
تحرير html
ابحث عن الوسم ]]></b:skin>
قم بلصق الكود الأتي فوق ]]></b:skin>

/*------------PakMax.net subwidget---------------*/
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
.roundbtn {
margin-right: 20px;
}
#pmmash {
border-style: solid;
border-color:#34495e;
border-width: 5px;
padding:10px;
background:#ecf0f1;
width: 450px;

} #pmmash a {
color: white;
} .roundbtn {
width: 75px;
height: 75px;
border: 5px solid #9a9a9a;
display: inline-block;
background-color: #6c6161;
-moz-border-radius: 75px;
-webkit-border-radius: 75px;
border-radius: 75px;
-moz-transition: all 35ms linear;
-o-transition: all 35ms linear;
-webkit-transition: all 35ms linear;
transition: all 35ms linear;
-ms-transition: all 35ms linear;
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.roundbtn.sea {
border: 5px solid #1abc9c;
background-color: #16a085;
}
.roundbtn.red {
border: 5px solid #e74c3c;
background-color: #c0392b;
}
.roundbtn.blue {
border: 5px solid #51a9ff;
background-color: #0077ea;
}
.roundbtn.dark {
border: 5px solid #34495e;
background-color: #2c3e50;
}
.roundbtn .inner {
position: relative;
width: 75px;
height: 75px;
background-color: #9a9a9a;
margin-top: -8px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-moz-transition: margin 35ms 35ms linear, box-shadow 35ms linear;
-o-transition: margin 35ms 35ms linear, box-shadow 35ms linear;
-webkit-transition: margin 35ms 35ms, box-shadow 35ms linear;
-webkit-transition-delay: linear, 0s;
transition: margin 35ms 35ms linear, box-shadow 35ms linear;
-ms-transition: margin 35ms 35ms linear, box-shadow 35ms linear;
}
.roundbtn.sea .inner {
background-color: #1abc9c;
}
.roundbtn.red .inner {
background-color: #e74c3c;
}
.roundbtn.blue .inner {
background-color: #51a9ff;
}
.roundbtn.dark .inner {
background-color: #34495e;
}
.roundbtn:active .inner {
margin-top: 0;
-moz-box-shadow: #6c6161 0 8px 0 inset;
-webkit-box-shadow: #6c6161 0 8px 0 inset;
box-shadow: #6c6161 0 8px 0 inset;
-moz-transition: margin 35ms linear, box-shadow 17.5ms 17.5ms linear;
-o-transition: margin 35ms linear, box-shadow 17.5ms 17.5ms linear;
-webkit-transition: margin 35ms linear, box-shadow 17.5ms 17.5ms;
-webkit-transition-delay: 0s, linear;
transition: margin 35ms linear, box-shadow 17.5ms 17.5ms linear;
-ms-transition: margin 35ms linear, box-shadow 17.5ms 17.5ms linear;
}
.roundbtn:active.sea .inner {
-moz-box-shadow: #16a085 0 8px 0 inset;
-webkit-box-shadow: #16a085 0 8px 0 inset;
box-shadow: #16a085 0 8px 0 inset;
}
.roundbtn:active.red .inner {
-moz-box-shadow: #c0392b 0 8px 0 inset;
-webkit-box-shadow: #c0392b 0 8px 0 inset;
box-shadow: #c0392b 0 8px 0 inset;
}
.roundbtn:active.blue .inner {
-moz-box-shadow: #0077ea 0 8px 0 inset;
-webkit-box-shadow: #0077ea 0 8px 0 inset;
box-shadow: #0077ea 0 8px 0 inset;
}
.roundbtn:active.dark .inner {
-moz-box-shadow: #2c3e50 0 8px 0 inset;
-webkit-box-shadow: #2c3e50 0 8px 0 inset;
box-shadow: #2c3e50 0 8px 0 inset;
}
.text {
position: absolute;
top: 32px;
left: 0;
right: 0;
text-align: center;
text-transform: uppercase;
font-family: Courier New;
font-size: 13px;
color: white;
font-weight: 300;
letter-spacing: 1px;
text-shadow: rgba(0, 0, 0, 0.5) 0 0 5px;
}
#credits
{
float:right;
font-size:10px;
}#credits a {color:black;}
/* Subscribe Box ---------------------- */
.subscribe{width:100%;height:100px;}

.subscribe h3{color:#fff;margin-bottom:2px;font-weight:600}
.subscribe form{float:center;margin:28px}
.subscribe form .inptfld{font-family:Open Sans;outline:none;border:none;font-size:15px;padding:10px;border-radius:3px;width:250px}
.subscribe form {font-famiy:open sans;outline:none;border:none;padding:10px;border-radius:3px;color:#fff;cursor:pointer;margin-left:10px}
.subscribebtn{font-famiy:open sans;outline:none;border:none;padding:10px;border-radius:3px;color:#fff;cursor:pointer;margin-right:10px; position:relative; left:290px; bottom:40px;font-weight:bold;}
.subscribe form .subscribebtn:hover{background:#2c3e50;-webkit-transition:all .3s ease 0;-moz-transition:all .3s ease 0;-ms-transition:all .3s ease 0;-o-transition:all .3s ease 0;transition:all .3s ease 0}
/*--------------PakMax.net subwidget-------------*/

ثم ابحث عن هذا الوسم <data:post.body/> في قالبك
وقم بإضة الكود الأتي بعد الوسم <data:post.body/>

<div id="pmmash">

<div class="roundbtn dark"><div class="inner"><span class="text"><a href="Your Facebook page URL"><i class="fa fa-facebook fa-2x"/></a></span></div></div>

<div class="roundbtn red"><div class="inner"><span class="text"><a href="Your Google+ page URL"><i class="fa fa-google-plus fa-2x"/></a></span></div></div>

<div class="roundbtn blue"><div class="inner"><span class="text"><a href="Your Twitter URL"><i class="fa fa-twitter fa-2x"/></a></span></div></div>

<div class="roundbtn sea"><div class="inner"><span class="text"><a href="Your LinkedIn URL"><i class="fa fa-linkedin fa-2x"/></a></span></div></div>

<div class="subscribe">

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=prorirak', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

<input class="inptfld" name="email" placeholder=" اكتب اميلك هنا" style="font-family:Open Sans" type="text"/>

<input name="uri" type="hidden" value="prorirak"/>

<input name="loc" type="hidden" value="en_US"/>

<input class="subscribebtn" type="submit" value="اشترك الأن"/>

</form>

</div>

<div id="credits">

Widget By <a href="http://pro-rirak.blogspot.com">pro-rirak</a></div>

</div>

هذا ان كنت تريد إضافة الأداة أسفل المشاركات، يمكنك وضعها حيث تريد فقط ضع أكواد الستيل css فوق الوسم ]]></b:skin> وضع الكود الأخر الخاص بوسم div في السيد بار عن طريق html/javascript أو أي مكان ذاخل القالب

التخصيص
غير Your Facebook page URL برابط حسابك على الفيسبوك
غير Your Google+ page URL برابط حسابك على جوجل بلس
غير Your Twitter URL برابط حسابك على التويثر
غير Your LinkedIn URL برابط حسابك على لينكيدين
غير http://feedburner.google.com/fb/a/mailverify?uri=prorirak برابط البرنير الخاص بك حتى يتوصل المشتركين بأخر منشوراتك حال نشؤها
غير فقط prorirak بالأسم المستعمل من طرفك ب feedburner الأسم الموجود في أخر هذا الرابط http://feedburner.google.com/fb/a/mailverify?uri=prorirak