test: avril 2012

السلام عليكم ورحمة الله وبركاته .

كثيرا من أصحاب المدونات قاموا بلا شك بعمل صفحه للمدونة علي موقع التواصل الاجتماعي فيس بوك
والأغلبية العظمي منهم قام بتطبيق اداة عرض متابعين المدونة بتقنية ألجي كوبري الشهيرة

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

وبهذا سوف أشارككم هده الخاصية الجميلة التي تجمع بين الفايس بوك وغوغل بلس

لمن يرغب في وضعها في مدونته فقط:

1. قم بتسجيل الدخول إلي لوحة تحكم مدونتك

2. وأنشئ أداه جديدة من نوع جافا سكربت

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

لتخصيص الأداة بما يتناسب مع مدونتك قم بالبحث داخل الكود عن userface واستبدلها باسم صفحتك على الفيس بوك.
ثم قم بالبحث عن https://plus.google.com/n-code واستبدله برابط صفحة مدونتك علي غوغل بلس.
إن أردت تصميم صوره للأداة يمكنك تصميمها ووضعها مكان ألصوره الموجودة داخل الكود. قم بحفظ الأداة ولا تضع لها اسما ثم قم بحفظ الإعدادات .. واستمتع بالفرق . وللعلم تلك ألطريقه تساعد بشكل كبير في تحميل أسرع للصفحة فأداة جوجل بلس بشكلها التقليدي تأخذ وقتا في الظهور مما يجعل مكانها الفارغ لحين ظهورها ذو شكل غير مستحب وأداة اليوم تغنيك عن كل هذا . بالتوفيق للجميع . ولا تنسوا متابعة صفحة مدونة تقارب علي فيس بوك وجوجل بلس .
ملحوظة: هذا الجزء خاص فقط لمن لم يقم بوضع أداة الفيس بوك من قبل . وهو ضروري كي تعمل الأداة بشكل سليم
قم بتسجيل الدخول إلى لوحة تحكم بلوجر ثم تحرير HTML ثم ابحث عن </head> وضع قبلها الكود التالي :

ولمن لم يضع أداه جوجل بلس من قبل عليه البحث عن نفس الكود ووضع قبله الكود الموجود بالأسفل

مع تغيير الرابط https://plus.google.com/n-code برابط صفحة مدونتك على جوجل بلس.
أما من قام بوضع الأداتين من قبل فعليه الاكتفاء فقط بكود أداة الجافا السكربت الموجود في أول الشرح والذي يتم وضعه من عناصر تصميم الصفحة .. انتهى ..

السلام عليكم ورحمة الله وبركاته ,

في هذا الدرس اليوم مع الإصدار الثاني من اٍضافة

مواضيع ذات صله مع مواقع النشر والقائمة البريدية

وبشكل جديد ومختلف تماما عن السابق ولكن يؤدي نفس الوظائف دون تغيير .

ولمشاهدة مثال على الإضافة في إصدارها الثاني فيمكنك مشاهدة الصورة التالية لترى الإضافة كما تظهر أسفل الموضوعات.

إن أعجبتك الإضافة وتود تطبيقها على مدونتك .

اتبع المراحل التالية:

1. قم بتسجيل الدخول إلى لوحة تحكم بلوجر

2. ثم اذهب إلى تصميم

3. ثم إلى تحرير HTML وضع علامة على خانة توسيع القالب

4. ثم ابحث عن ]]></b:skin>

5. وضع قبلها مباشرة الكود التالي

#related{background:#444;  border:1px solid #191919; border-bottom:1px solid #666; border-left:1px  solid #666;text-shadow:0 1px 0 #000;margin:0 0 5px;padding:10px} ul#related-posts{font:bold 11px  Arial;list-style:none;text-transform:none;margin:10px 0;padding:0} #related .related-posts{font-weight:400;width:50%;float:left} #related .related-posts p{margin:0} ul#related-posts  li{float:right;height:auto;list-style-type:none;margin:0 5px;padding:2px  1px} *html ul.rp#related-posts li{margin:0 13px} ul#related-posts li a{-moz-box-shadow:0 1px 2px  rgba(0,0,0,0.15);border:2px solid  #333;display:block;height:72px;position:relative;width:72px;color:#eaeaea;text-decoration:none;text-shadow:0  1px 0 #000} ul#related-posts li  .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px  6px 0 0} ul#related-posts li a:hover  .overlay{background:#000;display:block!important;opacity:0.6} ul#related-posts li img{bottom:0;padding:0!important} ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)} #related .subscribe{width:43%;float:right;color:#bdbdbd;} #related .subscribe p.intro{font-weight:400} #related .subscribe  p.feed{margin-bottom:10px;font-weight:700;padding-right:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUn1v0bVF4yp8S5IFrB2KCaOFDfQ8LhXHMdFoBdtr-6va-3SWzAWURdK9pj1dfFN3bCx1bY9Fc1s-4EpZjJ9yvPK_q-6sk95JTQhkmBdanHDbXftfXf3c5__62qqN_czrVBvGBBzpgFm4/)  0 50% no-repeat;vertical-align:middle} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix{display:inline-block} #inner{padding-top:40px;} #fixed  {position:fixed;top:0;right:0;width:100%;height:40px;z-index:999;} #fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}

6. ثم البحث عن الكود التالي <data:post.body/> قد تجده مكرر أكثر من مرة والغالب آن رقم 2 منه يكون المسؤل عن ظهور الإضافات في أخر الموضوع إذا تم وضعها بعده وقد يختلف الأمر في بعض القوالب الأخرى لذا عليك اخذ نسخه احتياطيه من القالب قبل التطبيق والتجربة... على كل حال بعد البحث عن الكود السابق ضع بعده مباشرة الكود التالي :

<b:if cond='data:post.isFirstPost'>  <div id='fb-root'/> <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 = "http://connect.facebook.net/ar_AR/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>  <script type='text/javascript'> (function() { var po = document.createElement('script'); po.type = 'text/javascript';  po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0];  s.parentNode.insertBefore(po, s); })(); </script>  <script>!function(d,s,id){var  js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </b:if>   <div class='horizontal-social-buttons' style='padding:10px 0  10px;'>  <div style='float:right;'> <a class='twitter-share-button' data-count='horizontal'  data-lang='en' data-related='' data-via=''  expr:data-text='data:post.title' expr:data-url='data:post.url'  href='https://twitter.com/share'>Tweet</a> </div>  <div style='float:right;'> <g:plusone annotation='bubble' expr:href='data:post.url'  size='medium'/> </div>  <div style='float:right;'> <fb:like colorscheme='light' expr:href='data:post.url' font=''  layout='button_count' send='true' show_faces='false'/> </div> </div> <div style='clear: both;'/>  <b:if cond='data:blog.pageType == "item"'> <div class='clearfix' id='related'> <div class='related-posts'> <p>تدوينات مختاره من نفس القسم</p> <script type='text/javascript'> var  defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilr_D9Us3x8A6ccFSEH-09gM8d7GkAAZP3Iw9EmjYFHBC0ZKbk7RWPze_tmlZL2lfoBqfJ1bKrIyIfZn_Hin7jZVESup2hk7Jt9tqQfBmzZbkYqg_Q6WrkeqRHwmvvrNqwz8FbDDnbbtc/s1600/no+image.jpg"; var  maxresults=6; </script> <script src='http://johnytemplate.googlecode.com/files/related.js'  type='text/javascript'/> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name +  "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"'  type='text/javascript'/> </b:loop>  <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script>                 </div>  <div class='subscribe'> <p class='intro'>ان اعجبتك تلك التدوينه وتود المزيد <a  href='http://feeds.feedburner.com/JohnyTemplate' target='_blank'  title='feedburner'> <b>اضغط هنا</b></a>, او يمكنك الاشتراك في القائمه  البريديه لمدونتي للحصول على كل مايطرح فيها فور النشر..</p> <p class='feed'><a  href='http://your-site.com/feeds/posts/default'>Subscribe via RSS  Feed</a></p> <form action='http://feedburner.google.com/fb/a/mailverify'  method='post'  onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=user-blog',  'popupwindow', 'scrollbars=yes,width=550,height=520');return true'  target='popupwindow'> <input name='uri' type='hidden' value='user-blog'/> <input name='loc' type='hidden' value='en_US'/> <input id='botsub' name='email' onblur='if (this.value == "")  {this.value = "Enter your email";}' onfocus='if (this.value == "Enter  your email") {this.value = "";}' type='text' value='Enter your  email....'/> <input id='botsubbutton' type='submit' value='اشترك'/><br/> <small>تأكد ان بيانات بريدك بأمان معنا.</small><br/> <a href='http://feeds.feedburner.com/blogspot/htbgh'><img  alt='' height='26'  src='http://feeds.feedburner.com/~fc/blogspot/htbgh?bg=f19c22&fg=444444&anim=1'  style='border:0' width='88'/></a> </form> </div> </div> </b:if>

7. قم بالبحث داخل الكود السابق عن user-blog واستبدلها بحسابك على موقع فيدبرنر ستجدها مكرره أكثر من مره

8. وكذلك قم باستبدال كلمة your-site برابط مدونتك ثم قم بحفظ القالب . بالتوفيق للجميع .

هذا كل شيء بالنسبة للتطبيق الأول

________________________________________________________

ولمشاهدة المثال الثاني على الإضافة في إصدارها الثاني فيمكنك مشاهدة الصورة التالية لترى الإضافة كما تظهر أسفل الموضوعات.

إن أعجبتك الإضافة وتود تطبيقها على مدونتك .

اتبع المراحل التالية:

1. سجيل دخول إلي لوحة تحكم مدونتك

2. ثم الذهاب مباشرة إلي تحرير HTML ووضع علامة على خانة توسيع القالب

3. ثم البحث عن الكود التالي <data:post.body/> قد تجده مكرر أكثر من مره والغالب أن رقم 2 منه يكون هو المقصود, بعد البحث عن الكود السابق ضع بعده مباشرة الكود التالي :

<b:if cond='data:post.isFirstPost'>  <div id='fb-root'/> <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 = "http://connect.facebook.net/ar_AR/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>  <script type='text/javascript'> (function() { var po = document.createElement('script'); po.type = 'text/javascript';  po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0];  s.parentNode.insertBefore(po, s); })(); </script>  <script>!function(d,s,id){var  js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </b:if>   <div class='horizontal-social-buttons' style='padding:10px 0  10px;'>  <div style='float:right;'> <a class='twitter-share-button' data-count='horizontal'  data-lang='en' data-related='' data-via=''  expr:data-text='data:post.title' expr:data-url='data:post.url'  href='https://twitter.com/share'>Tweet</a> </div>  <div style='float:right;'> <g:plusone annotation='bubble' expr:href='data:post.url'  size='medium'/> </div>  <div style='float:right;'> <fb:like colorscheme='light' expr:href='data:post.url' font=''  layout='button_count' send='true' show_faces='false'/> </div> </div> <div style='clear: both;'/>  <b:if cond='data:blog.pageType == "item"'> <div class='clearfix' id='related'> <div class='related-posts'> <p>تدوينات مختاره من نفس القسم:</p> <ol> <b:loop values='data:post.labels' var='label'> <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=2"'  type='text/javascript'/>                               </b:if></b:loop> <script type='text/javascript'> removeRelatedDuplicates();  printRelatedLabels();  </script> </ol>                    </div>  <div class='subscribe'> <p class='intro'>ان اعجبتك تلك التدوينه وتود المزيد <a  href='http://feeds.feedburner.com/user-blog' target='_blank'  title='feedburner'> <b>اضغط هنا</b></a>, او يمكنك الاشتراك في القائمه  البريديه لمدونتي للحصول على كل مايطرح فيها فور النشر.</p> <p class='feed'><a  href='http://your-site.com/feeds/posts/default'>Subscribe via RSS  Feed</a></p> <form action='http://feedburner.google.com/fb/a/mailverify'  method='post'  onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=user-blog',  'popupwindow', 'scrollbars=yes,width=550,height=520');return true'  target='popupwindow'> <input name='uri' type='hidden' value='user-blog'/> <input name='loc' type='hidden' value='en_US'/> <input id='botsub' name='email' onblur='if (this.value == "")  {this.value = "Enter your email";}' onfocus='if (this.value == "Enter  your email") {this.value = "";}' type='text' value='اكتب بريدك  الالكتروني هنا....'/> <input id='botsubbutton' type='submit' value='إشترك'/><br/> <small>تأكد ان بيانات بريدك بأمان معنا.</small> </form> </div> </div> </b:if>

بعد وضع الكود ابحث فيه عن كلمة user-blog ستجدها مكرره ثلاث مرات استبدل الثلاثة باسم حسابك على موقع فيد برنر .

ثم ابحث مجددا عن http://your-site.com/feeds/posts/default واستبدله برابط لخاصات مدونتك .

4. بعد ذلك قم بالبحث داخل قالب مدونتك عن ]]></b:skin> وضع قبلها مباشرة الكود الموجود في الأسفل :

#related{background:#e4e4e4;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-webkit-box-shadow:inset  #222 0 2px 8px;-moz-box-shadow:inset #222 0 2px  7px;width:auto;text-shadow:1px 0 0 #fff;margin:0 0 5px;padding:10px} #related .related-posts{font-weight:200;width:53%;float:left} #related .related-posts p{margin:0} #related .related-posts h3,#related .related-posts h2,#related  .related-posts h1{font-size:12pt;margin:0} #related .related-posts ol{font-weight:200;margin:2px -20px 0 0} #related  .subscribe{background:url(http://3.bp.blogspot.com/-Su4dLp9tZWI/TvnUmvgAqfI/AAAAAAAAA2U/7f4tn4C_8uM/s1600/icontexto-inside-rss.png)  no-repeat bottom left;width:43%;float:right;color:#000} #related .subscribe p.intro{font-weight:200} #related .subscribe  p.feed{margin-bottom:10px;font-weight:200;padding-right:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUn1v0bVF4yp8S5IFrB2KCaOFDfQ8LhXHMdFoBdtr-6va-3SWzAWURdK9pj1dfFN3bCx1bY9Fc1s-4EpZjJ9yvPK_q-6sk95JTQhkmBdanHDbXftfXf3c5__62qqN_czrVBvGBBzpgFm4/)  0 50% no-repeat;vertical-align:middle} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix{display:inline-block}

5. وأخيرا قم بالبحث عن </head> وضع قبله مباشره ما بالأسفل

6. قم ألان بحفظ قالب مدونتك. للاستفسارات وطلبات تركيب الإضافة يرجا ترك تعليق من خلال بلوجر أو فيس بوك.

test

طريقة الجمع بين متابعين مدونتك على الفيس بوك وجوجل بلس في أداة واحدة

إضافة مواضيع ذات صلة مع مواقع النشر والقائمة البريدية في إصدارها الثاني

التسميات

تابعنا على فيسبوك