الدرس 62: اضافة ازرار المتابعة والمشاركة على الصفحات الاجتماعية مع صندوق الاشتراك ومواضيع ذات صلة فى بلوجر

طريقة اضافة ازرار المتابعة والمشاركة على الصفحات الاجتماعية الفيسبوك و التويتر و جوجل بلس مع صندوق الاشتراك فى القائمة البريدية فى مدونة بلوجر و كيفية اضافة مواضيع ذات صلة اسفل مواضيع blogger

السلام اخوتي الكرام فى حلقة جديدة على دورة انشاء مدونة بلوجر عربية فى هذا الدرس ان شاء الله سوف نتعلم كيفية اضافة بعض الاضافات المهمة على مدونة بلوجر و هي :

1- اضافة ازرار المتابعة على الصفحات الاجتماعية للفيسبوك و التويتر و جوجل بلس مع صندوق الاشتراك فى القائمة البريدية فى القائمة الجانبية لمدونة بلوجر

2 - اضافة ازرار المشاركة على الصفحات الاجتماعية للفيسبوك و التويتر و جوجل بلس اسفل مواضيع بلوجر و هو شئ مهم حتى يتم نشر مواضيع و الحصول على زوار من تصفحات التواصل الاجتماعي

3 - اضافة مواضيع ذات صلة اسفل مواضيع بلوجر التى تظهر جميع مواضيعك السابقة لنفسم قسم المواضيع التى تضيفها و هذا مفيد جدا حتى يتمكن زوار مدونتك من زيارة مواضيعك السابقة

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

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

1- طريقة اضافة  ازرار المشاركة على الصفحات الاجتماعية للفيسبوك و التويتر و جوجل بلس اسفل مواضيع بلوجر

الاكواد

1- كود CSS نضيفها فوق الوسم : </b:skin> .sharkha{color:#434A54;font:14px DroidKufi-Bold;float:right;line-height:24px;padding:1px 18px;background:#9FEACE;margin-left:30px;border-radius:12px} 2- كود SCRIPT نضيفه فوق الوسم : </head> <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/> 3- كود HTML نضيفه اسفل وسم : <data:post.body/> تابع الفيديو حتى تعرف ايهما الكود المحدد <b:if cond='data:blog.pageType == "item"'><h3 class='sharkha'>شارك الموضوع ! </h3><span class='st_facebook_hcount' displayText='Facebook' style='float:center;'/><span class='st_twitter_hcount' displayText='Tweet' style='float:center;'/><span class='st_fblike_hcount' displayText='Facebook Like' style='float:center;'/><span class='st_plusone_hcount' displayText='Google +1' style='float:center;'/><br/></b:if>

2- طريقة اضافة مواضيع ذات صلة اسفل مواضيع بلوجر

الاكواد
1- كود CSS نضيفها فوق الوسم : /*-----code css related-posts by www.arabes1.com ------*/ #related-posts h4{color:#FFFFFF;font-size:14px;line-height:16px;font-family:DroidKufi-Bold;margin:0 0 10px 0;padding:10px;border-bottom:1px solid #DFDFDF;background:#3F51B5;border-radius:5px 5px 0 0} 2- كود SCRIPT نضيفه اسفل الوسم : </head> <script type='text/javascript'> //<![CDATA[ var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break; } } } } function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; } } relatedTitles = tmp2; relatedUrls = tmp; } function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; } function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0; } i++; } document.write('</ul>'); } //]]> </script> 3- كود HTML نضيفه اسفل وسم : <data:post.body/> تابع الفيديو حتى تعرف ايهما الكود المحدد <div id='related-posts'><h4>مواضيع ذات صلة قد تهمك : <div style='display:none;'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>, </b:if><b:if cond='data:blog.pageType == "item"'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=15"' type='text/javascript'/></b:if></b:loop></div></h4><script type='text/javascript'>removeRelatedDuplicates();printRelatedLabels();</script></div>

3 - طريقة اضافة ازرار المتابعة على الصفحات الاجتماعية للفيسبوك و التويتر و جوجل بلس مع صندوق الاشتراك فى القائمة البريدية

- نذهب الى التخطيط و نقوم بانشاء اضافة HTML/JAVASCRIPT ثم نضيف الكود التالي :

<style>#sidebar-subscribe-box{width:99%;border:1px solid #aaa;border-radius:3px;padding:3px 0} .sidebar-subscribe-box-wrapper{background:#FFFFFF ;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase} .sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto} .sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSwS_yd7_An-UDbkM1dqJ3VDzaylmgWRC3ZWyk9cSgD5ZvrLJFoklZUVnIXu-S8b6F4GPf8si5N0fns2k0WObuAC1aG9Z5oOWjJ66IPaLuiNIh2wne9QoEwZ9o-HM8aQtZi9IfCN3wx-g/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%} .sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%} .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff} .sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px} #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font- size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%} a.social-icons{margin-right: 5px;height:45px;width:45px;} a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);} </style><div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><br/><a class="social-icons" href="https://facebook.com/infoarabe"><img src="http://i1319.photobucket.com/albums/t668/Rozzby24/Mariberbagi244-Facebook_zps68f4035b.png" /></a><a class="social-icons" href="https://twitter.com/didorahim"><img src="http://i1319.photobucket.com/albums/t668/Rozzby24/Mariberbagi244-Twitter_zps433926c5.png" /></a><a class="social-icons" href="https://plus.google.com/u/0/+Arabes1Blogspot"><img src="http://i1319.photobucket.com/albums/t668/Rozzby24/Mariberbagi244-Googleplus_zps8404ed17.png" /></a><a class="social-icons" href="http://feeds.feedburner.com/rahimmeciful"><img src="http://i1319.photobucket.com/albums/t668/Rozzby24/Mariberbagi244-RSS_zpsc0214ee8.png" /></a><p>اشترك فى القائمة البريدية و توصل بجديد المواضيع</p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=rahimmerciful" class="sidebar-subscribe-box-form" method="post" onsubmit=& quot;window.open('http://feedburner.google.com/fb/a/mailverify?uri=rahimmerciful', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="rahimmerciful" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="أدخل عنوان بريدك الالكتروني هنا"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="اشترك الان" /></form></div></div></div>

لاتنسى تغيير :

 infoarabe  بمعرف صفحتك على الفيسبوك

didorahim يمعرف صفحتك على التويتر

rahimmerciful بمعرف الخاص بك على موقع feedburner

- ارجوا ان اكون قد افدتكم و الى حلقة اخرى ان شاء الله