إضافة صندوق الكاتب عبر جوجل بلس

إضافة صندوق الكاتب عبر جوجل بلس

يوجد الآن مشاهدة التعليقات : 23

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

أتقدم لكم بإضافة غنية عن التعريف وهي صندوق تعريف الكاتب بأزرار المتابعة على الشبكات الاجتماعية، باستعمالك لهذا الصندوق ستتمكن بسهولة إضافة نبذة عن الكاتب وكذلك الصورة التعريفية مع الإسم يرافقه رابط صفحتك على جوجل بلس ولا ننسى أزرار التواصل التي تجمع بين أهمها من فيسبوك وصولا إلى يوتيوب.
إقرأ أيضًا : إضافة تعريف الكاتب | الشكل الثاني
يمكن اعتبار تعريف الكاتب هذا احترافي ببساطته وقد منحته وقته في التصميم بإضافة التولتيب والأزرار بالتأثيرات الجميلة، هذه الإضافة قد تجعل موقعك أكثر جاذبية ولها إفادة طبعا في تعريفك بأبهى حلة 🍰

يتم استخدام هذا التعريف بالكاتب عن طريق جوجل بلس بحيث يأتي لك تلقائيا بالصورة المستعملة والنبذة مع الإسم، وهي تدعم كاتب ثاني سوى كان مدير بالمدونة أو كتاب (مؤلفين). بعدما تعرفت على ما تتضمنه الإضافة يمكنك الشروع بمعاينتها إن لم تكن الصورة كافية لك 😀
طريقة التركيب
1. ابحث بإستعمال CTRL+F عن ]]></b:skin> أو ضعه بين <style> </style> فوق </head>
2. ضع الكود التالي فوقه
/* CSS Author Bio Box by Ar1web.com */
.authorboxwrap{Font-family: Open Sans;background:#fff;margin:10px auto 20px;padding:10px;clear: both;border:1px solid #E2E1E1;}
.avatar-container {float:right;margin-left:20px;}
.avatar-container img{width: 110px; border-radius: 2px!important;margin: -3px;}
.author_description_container p{margin: 0; color: #7c7c7c; font: normal 12px/18px Tahoma, Geneva, sans-serif; text-align: justify;line-height: 1.9em;}
.ar1web-tooltip {position:relative;display:inline-block;}
.ar1web-tooltip:before, .ar1web-tooltip:after {position:absolute;opacity:0;z-index:1000000;-webkit-transition:0.3s ease;-moz-transition:0.3s ease;pointer-events:none;}
.ar1web-tooltip:hover:before, .ar1web-tooltip:hover:after {opacity:1;}	
.ar1web-tooltip:after {content: attr(data-ar1web-tooltip);background: #b9f;color: #fff;padding: 5px 8px;font-size: 11px;white-space: nowrap;
-webkit-backface-visibility: hidden;}
.ar1web-tooltip-top:before {bottom:129%;left:10%;margin:0 0 -18px 0;border-top-color:rgba(0,0,0,0.7);border-top-color:hsla(0,0%,20%,0.9);}
.ar1web-tooltip-top:after {bottom:125%;left:10%;margin:0 0 -6px -10px;}
.ar1web-tooltip-top:hover:before {margin-bottom:-10px;}
.ar1web-tooltip-top:hover:after {margin-bottom:2px;}
.author-bar { width:490px; height: 32px; float:right; background: #b9f; margin-bottom: 5px; } .author-data { padding-right: 10px; text-align:center; color: #fff; float: right; line-height: 32px; } .author-data a { color: #fff;text-decoration: none; } .author-data a:hover { color:#eee;  } .author-social { height:32px; float: left; background: #EEF3F6; }
ul.spicesocialwidget li {float:left;list-style: none outside none;border:none;}
ul.spicesocialwidget li a{background-color:transparent;background-image:url('http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/s1600/spice-social-gadget-sprite.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
.ie7 ul.spicesocialwidget li a, .ie8 ul.spicesocialwidget li a{background-image:url('http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/s1600/spice-social-gadget-sprite.png' )}
ul.spicesocialwidget li.facebook a{ background-position:0 0}
ul.spicesocialwidget li.googleplus a{ background-position:-96px 0}
ul.spicesocialwidget li.rss a{ background-position:-192px 0}
ul.spicesocialwidget li.skype a{ background-position:-224px 0}
ul.spicesocialwidget li.twitter a{ background-position:-256px 0}
ul.spicesocialwidget li.youtube a{ background-position:-320px 0}
ul.spicesocialwidget li.facebook a:hover, #sidebar ul.spicesocialwidget li.facebook a:hover{ background-position:0 -32px}
ul.spicesocialwidget li.googleplus a:hover, #sidebar ul.spicesocialwidget li.googleplus a:hover{ background-position:-96px -32px}
ul.spicesocialwidget li.rss a:hover, #sidebar ul.spicesocialwidget li.rss a:hover{ background-position:-192px -32px}
ul.spicesocialwidget li.skype a:hover, #sidebar ul.spicesocialwidget li.skype a:hover{ background-position:-224px -32px}
ul.spicesocialwidget li.twitter a:hover, #sidebar ul.spicesocialwidget li.twitter a:hover{ background-position:-256px -32px}
ul.spicesocialwidget li.youtube a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{ background-position:-320px -32px}
3. ابحث عن <data:post.body/> ضع قبله الكود الأتي
* ملاحظة ستجد الكود متكرر مرتين أو أكثر الأخير هو المقصود -- بإمكانك الإستغناء عن البحث عنه إذا كان لديك أزرار المشاركة إلى غير ذلك وتعرف مكان الأكواد بالبحث عن الإسم فقط
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/>
</a>
</div>
<div class='author_description_container'>
<div class="author-bar">
				
				<div class="author-data">عن الكاتب :
                  <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='الكاتب'> <span itemprop='name'><data:post.author/></span> </a>	</div>
			
			<div class="author-social">
              	<ul class="spicesocialwidget">
<li class='facebook ar1web-tooltip ar1web-tooltip-top' data-ar1web-tooltip='صفحتنا'>
<a rel="nofollow" href="http://www.facebook.com/" target="_blank">
</a></li>
<li class='googleplus ar1web-tooltip ar1web-tooltip-top' data-ar1web-tooltip='تابعني على جوجل بلس'>
<a rel="nofollow" href="https://plus.google.com/" target="_blank">
</a></li>
<li class='twitter ar1web-tooltip ar1web-tooltip-top' data-ar1web-tooltip='تابعني على تويتر'>
<a rel="nofollow" href="http://twitter.com/" target="_blank">
</a></li>
<li class='rss ar1web-tooltip ar1web-tooltip-top' data-ar1web-tooltip='اشترك في النشرة البريدية'>
<a rel="nofollow" href="http://feedburner.com/" target="_blank">
</a></li>
<li class='skype ar1web-tooltip ar1web-tooltip-top' data-ar1web-tooltip='تواصل معي'>
<a rel="nofollow" href="http://www.skype.com/" target="_blank">
</a></li>
<li class='youtube ar1web-tooltip ar1web-tooltip-top' data-ar1web-tooltip='قناتي'>
<a rel="nofollow" href="http://www.youtube.com/" target="_blank">
</a></li>
</ul>
								
								
											
              </div>
				
			</div>
<p>
<data:post.authorAboutMe/>       
</p>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>
4. قم بحفظ النموذج

إضافة التعريف وإظهاره
1. الآن نمر للمرلحة ما قبل الأخيرة وهي إضافة النبذة عبر جوجل بلس وإضهاره بالمدونة داخل المواضيع لفعل ذلك إتجه لرابط صفحتك : https://plus.google.com/u/0/+iHussam/about بعدها حرر Story واملئ صندوق Introduction بنبذة قصيرة عنك وقم بالحفظ



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



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

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 23 تعليقًا:

  1. رائع ^________^

    ردحذف
  2. اخي لدي مشكل في مدونتي، عندما اضيف اداة HTML/JavaScript بعد مرور مدة قصيرة لااجدها ممكن حل أخي

    ردحذف
  3. أخي حسام , ممكن طريقة أضافة اداة html ثابتة من القالب حتي تظهر في التخطيط كي أقوم بالتعديل عليها مثل اعلان فوق واسفل المدونة... وهكذا بدون ما اضيف الشفرة من القالب , اضيفها الي الاداة مثل widget :)

    ردحذف
    الردود
    1. إن شاء الله سأضع الشرح

      حذف
  4. اضافة جميلة جدا وفكره جديده سحب ملف الشخصي من بلس مبهر الاخ حسام

    ردحذف
    الردود
    1. نورتنا بمرورك اخي عمر

      حذف
  5. اخي اين اجد تحرير stoty هل تم حذفها ام ماذا

    ردحذف
    الردود
    1. عليك فقط أن تغير إسمي iHussam إلى إسم المستخدم الخاص بك :
      https://plus.google.com/u/0/+iHussam/about

      حذف
  6. لو سمحت انا مش عارف اركب الصندوق :(

    ردحذف
  7. ممكن كيفية تغير حجم الاضافة للتناسب مع مدونتي

    ردحذف
    الردود
    1. ابحث عن هذا : .author-bar ستجد بسطره width:490px; غير 490 لـ 600

      حذف
  8. شكرا جزاك الله خير

    ردحذف
  9. اخي تم تطبيق الشرح ولكن صندوق الكاتب يظهر بطريقة ليست جميله

    ردحذف
    الردود
    1. اترك رابط للمعاينة لو سمحت

      حذف
    2. اليك اخي موضوع تجريبي للمعاينه

      حذف
  10. حضرتك الكود الثالث مو لاقي الكلمة عندي

    ردحذف
    الردود
    1. حسنا فلتبحث عن هذا <div class='post-footer'>

      حذف
  11. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. امسح هذا الكود الموجود بالستايل :
      .author-social { margin-top: -8px; margin-left: -7px; }

      حذف
    2. لم اجدها يا اخي :'(

      حذف
  12. لن تساعدني ؟

    ردحذف
    الردود
    1. ابحث فقط عن .author-social حتى تجد بجانبها margin-top: -8px; margin-left: -7px;
      واحذف كامل الكود

      حذف
  13. لا يضهر التعريف

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم