اضافة صندوق إعجاب الفيس بوك وصندوق الاشتراك بالقائمة البريدية Subscription Pop Up لمدونات بلوجر

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

للمعاينة أنقر هنا

- طريقة التركيب :

1- اختر لوحة التحكم لمدونتك .

2- من لوحة التحكم اختر قالب ثم اضغط على تحرير قالب : HTML

3-ابحث عن الوسم :
</head>

3- ضع الكود التالي فوقه .

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0BxFbqjck0GDdcGVnVVNtbWFVMzg"></script>

4- ابحث عن الوسم :
</body>

5- ضع الكود التالي فوقه .

<!--homeblog7 OTP-->
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
#popupcc{
background:url(&#39;http://cdn.top4top.co/p_559qx46w2y1.png&#39;);position:fixed;z-index: 9999990;width:100%;color:#fff;    height:100%;top:0;font-family: &#39;Open Sans Condensed&#39;, sans-serif;display:none;}
#main-box {
position:fixed;top:50px;left:50%;margin-left: -165px;padding:15px;background: #444;   box-shadow: 0px 0px 3px #000;-moz-box-shadow: 0px 0px 3px #000;-webkit-box-shadow: 0px 0px 3px #000;width:300px;height:auto;z-index:9999999;
}
#main-box h2 {
margin:5px;color:#fafafa;text-align:center;font-weight:normal;text-transform:uppercase;    font-family: &#39;Open Sans Condensed&#39;, sans-serif;
}
#main-box h2 img {
border:0; position:relative;top:3px; right:5px;}
#main-box-in {
padding:10px; border-radius: 5px;-webkit-border-radius: 5px;   box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3) inset, 0px 1px 0px rgba(255, 255, 255, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.5);-webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3) inset, 0px 1px 0px rgba(255, 255, 255, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3) inset, 0px 1px 0px rgba(255, 255, 255, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.5);
}
#buttonfeed {
width:100%; color: #fff;-moz-box-shadow:inset 0px 1px 0px 0px #cf866c;-webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;box-shadow:inset 0px 1px 0px 0px #cf866c;background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d0451b), color-stop(1, #bc3315));    background:-moz-linear-gradient(top, #d0451b 5%, #bc3315 100%);    background:-webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%);    background:-o-linear-gradient(top, #d0451b 5%, #bc3315 100%);    background:-ms-linear-gradient(top, #d0451b 5%, #bc3315 100%);    background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);    background-color:#d0451b;-moz-border-radius:3px;-webkit-border-radius:3px;    border-radius:3px;border:1px solid #942911;cursor:pointer;font-size:15px;    padding:7px 2px;text-decoration:none;margin: 5px 0px; font-family: &#39;Open Sans Condensed&#39;, sans-serif;
}
#buttonfeed:hover {background: #d0451b;}
#boxfeed {outline: none;padding:10px 2%;width:96%;-moz-boder-radius:3px;-webkit-border-radius:3px;border-radius:3px;background: #333;    color: #fafafa;font-size:15px;   border: 1px solid #444;    box-shadow: inset 0 0 3px #000;    -moz-box-shadow: inset 0 0 3px #000;-o-box-shadow: inset 0 0 3px #000;-webkit-box-shadow: inset 0 0 3px #000;    font-family: &#39;Open Sans Condensed&#39;, sans-serif;
}
#main-box a {
margin:5px;color:#fff;text-decoration:none;    text-transform:uppercase;
}
#main-box a img {
position:relative;    right:3px;    top:2px;border:0;
}
#creditcc {
width:200px;padding:5px;margin:auto;text-align:center;
}
</style>
<div id='popupcc'>
<div id='main-box'>
<div id='main-box-in'>
<h2><img src='http://cdn.top4top.co/p_559jmifpi81.png' width='30px'/></h2>
<h2>اشترك معنا على الفيس بوك</h2>
<!--Facebook like box code-->
<div class='fb-page' data-hide-cover='false' data-href='https://www.facebook.com/ChristiaUnion' data-show-facepile='true' data-show-posts='false' data-width='300'><div class='fb-xfbml-parse-ignore'><blockquote cite='https://www.facebook.com/ChristiaUnion'><a href='https://www.facebook.com/ChristiaUnion'>ChristiaUnion</a></blockquote></div></div>
<!--End Facebook-->
<h2><img src='http://cdn.top4top.co/p_559h4y8v3c1.png' width='32px'/></h2>
<h2> اشترك معنا بالنشرة البريدية</h2>
<!--The Subscribtion Box. Make sure you edit it before saving-->
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=homeblog7&quot; , &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='homeblog7'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailinput' id='boxfeed' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;ادخل بريدك الإلكتروني&quot;;}' onfocus='if (this.value == &quot;ادخل بريدك الإلكتروني&quot;) {this.value = &quot;&quot;}' type='text' value='ادخل بريدك الإلكتروني'/>
<input id='buttonfeed' type='submit' value='انقر هنا للإشتراك بالتحديثات'/>
</form>
<div id='creditcc'>
<a href='http://homeblog7.blogspot.com/' target='_blank'><img src='http://cdn.top4top.co/p_559cqowvqa1.png' width='12px'/></a>~ <a href='JavaScript:void(0)' id='closecc'><img src='http://cdn.top4top.co/p_559hdrqv351.png' width='15px'/>أغلق</a>
</div><!--Main in-->
</div><!--main-box-->
</div><!--homeblog7 popup-->
</div>

6-  التعديلات :
1- ابحث عن " ChristiaUnion " وستبدله بصفحتك على الفيس بوك وهو مكرر لأكثر من مرة .

2- ابحث عن " homeblog7 " وستبدله بخاصيتك على feedburner .

7- اذهب إلى تخطيط ثم اختر اضافة أداة : HTML/JavaScript

8- ضع الكود التالي في صندوق الأداة ثم احفظ .

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = '//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.3';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

وأخيراً نترككم برعاية الله وتوفيقه