مستجدات متبثة

اضافة تعريف كاتب التدوينة لكل كاتب على البلوجر


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

معاينة الاضافة : 


بامكانك أيضا معاينتها موجودة بأسفل هذه التدوينة .

كيفية عمل الاضافة :


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

<b:if cond='data:post.author == &quot;أحمد&quot;'>
أظهرني فقط في تدوينات الكاتب أحمد
</b:if>

في الشرط السابق سوف يظهر النص في التدوينات التى كتبت بواسطة المؤلف أحمد فقط دون غيرة، كما يمكنك استخدام else كما تعلمنا سابقاً هكذا:

<b:if cond='data:post.author == &quot;أحمد&quot;'>
أظهرني فقط في تدوينات الكاتب أحمد
<b:else/>
خلاف ذلك، أظهرني لجميع التدوينات الأخرى
</b:if>

 طريقة تركيب الاضافة :

1- تركيب تصميم CSS الاضافة لقالبك:

 الأمر سهل جدا فقط تابع الدوينة مرحلة بمرحلة ستفهم الاضافة جيدا ، وستكون محترفا في التحكم بها ، كما أن ما ستتعرف عليه اليوم يمكن استثماره في اضافات أخرى تبرمجها بيدك .

أدخل للبلوجر www.blogger.com
  اختر المدونة التي تريد التعديل عليها .
اختر من القائمة الجانبية تعديل HTML كما في الصورة أدناه
  ستظهر لك صفحة أخرى اضغط في الصورة أدناه

بعدها ستظهر لك صفحة تحمل كود HTML ، اضغط على CTRL+F لتوليد اضافة البحث يمكن استعمالها للبحث عن الأكواد أنظر الصورة أدناه .

ابحث عن الكود التالي في خانة البحث : ]]></b:skin>
وأضف فوقه الكود التالي :
.articleAuthor {
padding:20px;
background:#fafafa;
border-top: 1px solid #d2d2d2;
overflow:hidden;
}
.borderTitle {
display:block;
margin-bottom:15px;
overflow:hidden;
font-size: 16px;
font-weight:bold;
color:#555;
}
.borderTitle span {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
font-size: 16px;
font-weight:bold;
color:#555;
}
.authorLeft {
float:left;
margin-right:10px;
overflow:hidden;
}
.authorLeft .authorAvatar {
margin-bottom:10px;
overflow:hidden;
}
.authorLeft .authorAvatar img {
background: #fff;
padding: 5px;
border: 1px solid #e5e5e5;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
}
.authorSocial {
overflow:hidden;
float:right;
padding-top:10px;
}
.authorContent {
overflow:hidden;
}
.authorDetails {
overflow:hidden;
margin-bottom:5px;
}
.authorDetails h2 {
float:left;
font-size: 16px;
font-weight:bold;
color:#555;
}           
.authorDetails span {
display:block;
padding-top:3px;
float:right;
}
.articleAuthor .authorContent p {
line-height:20px;
text-shadow:1px 1px 0px #fff;
margin-bottom: 10px;
}
.authorLeft .authorProfile {
overflow:hidden;
}
.authorLeft .authorProfile a {
display:block;
float:left;
color: #666;
margin: 0px 1px;
width: auto;
height: auto;
background: #ececec;
padding:5px 10px;
outline: none;
border: 1px solid #d8d8d8;
border-bottom: 1px solid #ccc;
border-radius: 0px;
cursor: pointer;
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.027), inset 0px 1px 0px rgba(255, 255, 255, 0.69), inset 0px -1px 0px rgba(0, 0, 0, 0.0187), inset 0px 16px 15px rgba(255, 255, 255, 0.57);
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.027), inset 0px 1px 0px rgba(255, 255, 255, 0.69), inset 0px -1px 0px rgba(0, 0, 0, 0.0187), inset 0px 16px 15px rgba(255, 255, 255, 0.57);
-o-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.027), inset 0px 1px 0px rgba(255, 255, 255, 0.69), inset 0px -1px 0px rgba(0, 0, 0, 0.0187), inset 0px 16px 15px rgba(255, 255, 255, 0.57);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.027), inset 0px 1px 0px rgba(255, 255, 255, 0.69), inset 0px -1px 0px rgba(0, 0, 0, 0.0187), inset 0px 16px 15px rgba(255, 255, 255, 0.57);
}

#footerCopyrights .footerSocial {
float: right;
padding-top: 10px;
}
.footerSocial .social {
margin: 0px;
padding: 0px;
}
.footerSocial .social li {
float: left;
margin-left: 4px;
height: 24px;
width: 24px;
}
.footerSocial .social li a {
display: block;
height: 24px;
width: 24px;
opacity:0.5;
filter: alpha(opacity=0.5); /* For IE7 */
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.footerSocial .social li a:hover {
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.9);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.9);
}
.footerSocial .social li a:hover {
opacity:1;
filter: alpha(opacity=1); /* For IE7 */
filter: alpha(opacity=40);
-webkit-transition: background 0.2s ease-in-out;
-moz-transition: background 0.2s ease-in-out;
-o-transition: background 0.2s ease-in-out;
-ms-transition: background 0.2s ease-in-out;
transition: background 0.2s ease-in-out;
}
.footerSocial .social li .twitter {
background: url(http://4.bp.blogspot.com/-v2iUcDWMDn0/Uj876P5RgoI/AAAAAAAABYk/L_JJKR_G3cg/s1600/Twitter.png);
}
.footerSocial .social li .twitter:hover {
background: #06c4f2 url(http://4.bp.blogspot.com/-v2iUcDWMDn0/Uj876P5RgoI/AAAAAAAABYk/L_JJKR_G3cg/s1600/Twitter.png);
}
.footerSocial .social li .facebook {
background: url(http://2.bp.blogspot.com/-CB_LjUtIPAU/Uj85cH-ITCI/AAAAAAAABX0/cjUuWpWXnoE/s1600/Facebook.png);
}
.footerSocial .social li .facebook:hover {
background: #5b78af url(http://2.bp.blogspot.com/-CB_LjUtIPAU/Uj85cH-ITCI/AAAAAAAABX0/cjUuWpWXnoE/s1600/Facebook.png);
}
.footerSocial .social li .rss {
background: url(http://2.bp.blogspot.com/-ZHL8EpahQC8/Uj86LjvuV9I/AAAAAAAABYE/n-ZOT4A3lEQ/s1600/RSS.png);
}
.footerSocial .social li .rss:hover {
background: #fc8e28 url(http://2.bp.blogspot.com/-ZHL8EpahQC8/Uj86LjvuV9I/AAAAAAAABYE/n-ZOT4A3lEQ/s1600/RSS.png);
}
.footerSocial .social li .vimeo {
background: url(http://3.bp.blogspot.com/-hSJfp-Zyy2A/Uj8-nKDaEtI/AAAAAAAABZY/yXU2o8nzEsM/s1600/vimeo_2.png);
}
.footerSocial .social li .vimeo:hover {
background: #49bbe1 url(http://3.bp.blogspot.com/-hSJfp-Zyy2A/Uj8-nKDaEtI/AAAAAAAABZY/yXU2o8nzEsM/s1600/vimeo_2.png);
}
.footerSocial .social li .tumblr {
background: url(http://1.bp.blogspot.com/-hjrN9VPmCSQ/Uj87nUlDAbI/AAAAAAAABYc/vm1P5Z7LNoQ/s1600/Tumbler.png);
}
.footerSocial .social li .tumblr:hover {
background: #2f669e url(http://1.bp.blogspot.com/-hjrN9VPmCSQ/Uj87nUlDAbI/AAAAAAAABYc/vm1P5Z7LNoQ/s1600/Tumbler.png);
}
.footerSocial .social li .stublupon {
background: url(http://2.bp.blogspot.com/-CZ0lqZWwIMs/Uj87SXJoDqI/AAAAAAAABYU/hpSHGxRC4EM/s1600/StubleUpon.png);
}
.footerSocial .social li .stublupon:hover {
background: #eb4924 url(http://2.bp.blogspot.com/-CZ0lqZWwIMs/Uj87SXJoDqI/AAAAAAAABYU/hpSHGxRC4EM/s1600/StubleUpon.png);
}
.footerSocial .social li .youtube {
background: url(http://1.bp.blogspot.com/-vut8nPtCx3I/Uj89SH9gu0I/AAAAAAAABY4/0xZNJ3RZxtc/s1600/YouTube.png);
}
.footerSocial .social li .youtube:hover {
background: #e43033 url(http://1.bp.blogspot.com/-vut8nPtCx3I/Uj89SH9gu0I/AAAAAAAABY4/0xZNJ3RZxtc/s1600/YouTube.png);
}
.footerSocial .social li .skype {
background: url(http://4.bp.blogspot.com/-H5Fnz-anDHQ/Uj865YOIchI/AAAAAAAABYM/zu54W8d4q04/s1600/Skype.png);
}
.footerSocial .social li .skype:hover {
background: #1bb7e1 url(http://4.bp.blogspot.com/-H5Fnz-anDHQ/Uj865YOIchI/AAAAAAAABYM/zu54W8d4q04/s1600/Skype.png);
}
.footerSocial .social li .dribbble {
background: url(http://2.bp.blogspot.com/-YkbVfID3psE/Uj85CtDfW7I/AAAAAAAABXs/EAGPOfCaH2o/s1600/dribbble_2.png);
}
.footerSocial .social li .dribbble:hover {
background: #d33076 url(http://2.bp.blogspot.com/-YkbVfID3psE/Uj85CtDfW7I/AAAAAAAABXs/EAGPOfCaH2o/s1600/dribbble_2.png);
}
.footerSocial .social li .wordpress {
background: url(http://4.bp.blogspot.com/-2duqEe6gzvo/Uj89A8bfxcI/AAAAAAAABYw/prxwR22IDEY/s1600/Wordpress.png);
}
.footerSocial .social li .wordpress:hover {
background: #656565 url(http://4.bp.blogspot.com/-2duqEe6gzvo/Uj89A8bfxcI/AAAAAAAABYw/prxwR22IDEY/s1600/Wordpress.png);
}

2- تركيب محرك الاضافة HTML :

يعني أن الكود التالي الذي سنتطرق اليه فيما بعد هو الكود المسؤول عن اظهر الاضافة بشكلها و تصميمها .

نبحث عن الكود التالي :

<div class='post-footer'>


في حالة لم تجده ابحث عن الكود التاالي :
<b:loop values='data:post.labels' var='label'>


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

ان وجدت الكود <div class='post-footer'>  ضع تحته الكود التالي مع تغيير ما بالألوان المخالفة للون الأسود .

<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:post.author == &quot;Tajari Lhoos&quot;'>                            <div class='articleAuthor'>
                              <h2 class='borderTitle'>
                                <span>
                                 عن  المحرر :                                </span>
                              </h2>
                              <div class='authorLeft'>
                                <div class='authorAvatar'>
                                  <img alt='الصورة الشخصية للكاتب' class='avatar avatar-92 photo' height='92' src='http://2.bp.blogspot.com/-KBib1M8tvBE/VVTIGv7e_7I/AAAAAAAABfo/rAF556uULno/s200/1460051_551354661609012_1537655512_n.jpg' width='92'/>
                                </div>
                                <!--End AuthorAvatar-->
                                <div class='authorProfile'>
                                  <a class='iframe' href='http://lhoosnet.blogspot.com' rel='author' title='الموقع الرسمي لمؤلف التدوينة'>
                                    الموقع الرسمي
                                  </a>
                                </div>
                                <!--End Profile-->
                              </div>
                              <!--End Author Left-->
                              <div class='authorContent'>
                                <div class='authorDetails'>
                                  <h2>
                                  Tajari Lhoos
                                  </h2>
                                </div>
                                <!--End AuthorDetails-->
                                <p>
                                  طالب ومدون مغربي &#1548; أحاول مشاركة الآخرين معارفي حول الانترنت والحاسوب بشكل عــام مع مستخدم الانترنت &#1548; عن طريق هذه المدونة
                                </p>
                                <div class='authorSocial'>
                                  


<div class='footerSocial'>
              <ul class='social'>
                <li>
                  <a class='twitter' href='https://www.twitter.com/Tajari_Lhoos' title='تابعني على تويتر'/>
                </li>
                <li>
                  <a class='facebook' href='https://www.facebook.com/lhoosnet' title='تابعني على فيسبوك'/>
                </li>
                <li>
                  <a class='rss' href='http://feeds.feedburner.com/blogspot/WDwql' title='تابع خلاصات المدونة RSS'/>
                </li>
                <li>
                  <a class='vimeo' href='#' title='ليس لدي بعد حساب'/>
                </li>
                <li>
                  <a class='youtube' href='http://www.youtube.com/lhoosnet?feature=sub_widget_1' title='تابعني على اليوتوب'/>
                </li>
                <li>
                  <a class='tumblr' href='#' title='ليس لدي بعد حساب'/>
                </li>
                <li>
                  <a class='stublupon' href='#' title='ليس لدي بعد حساب'/>
                </li>
                <li>
                  <a class='skype' href='#' title='ليس لدي بعد حساب'/>
                </li>
                <li>
                  <a class='dribbble' href='#' title='ليس لدي بعد حساب'/>
                </li>
                <li>
                  <a class='wordpress' href='#' title='ليس لدي بعد حساب'/>
                </li>
              </ul>
            </div>



                                </div>
                              </div>

</div>
                              <!--By www.lhoosnet.blogspot.com End AuthorContent-->
                            
</b:if>
                          </b:if>


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


قم بتغيير ما باللون الأصفر برابط صورة الكاتب ، والكود التاني برابط موقعه الرسمي
وقم بتغيير ما باللون الأزرق بروابط الصفحة الشخصية للكاتب على المواقع الاجتماعية .

3- لتركيب هذه الاضافة لكاتب ثاني :

ابحث عن الكود
<div class='post-footer'>

ضع أسفله الكود التالي وغير ما بالألوان .
<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:post.author == &quot;اسم الكاتب الثاني&quot;'>                            <div class='articleAuthor'>
                              <h2 class='borderTitle'>
                                <span>
                                 عن  المحرر :                                </span>
                              </h2>
                              <div class='authorLeft'>
                                <div class='authorAvatar'>
                                  <img alt='الصورة الشخصية للكاتب' class='avatar avatar-92 photo' height='92' src='http://2.bp.blogspot.com/-KBib1M8tvBE/VVTIGv7e_7I/AAAAAAAABfo/rAF556uULno/s200/1460051_551354661609012_1537655512_n.jpg' width='92'/>
                                </div>
                                <!--End AuthorAvatar-->
                                <div class='authorProfile'>
                                  <a class='iframe' href='http://lhoosnet.blogspot.com' rel='author' title='الموقع الرسمي لمؤلف التدوينة'>
                                    الموقع الرسمي
                                  </a>
                                </div>
                                <!--End Profile-->
                              </div>
                              <!--End Author Left-->
                              <div class='authorContent'>
                                <div class='authorDetails'>
                                  <h2>
                                  اسم الكاتب الثاني
                                  </h2>
                                </div>
                                <!--End AuthorDetails-->
                                <p>
                                  طالب ومدون مغربي &#1548; أحاول مشاركة الآخرين معارفي حول الانترنت والحاسوب بشكل عــام مع مستخدم الانترنت &#1548; عن طريق هذه المدونة
                                </p>
                                <div class='authorSocial'>
                                  

<div class='footerSocial'>
              <ul class='social'>
                <li>
                  <a class='twitter' href='https://www.twitter.com/Tajari_Lhoos' title='تابعني على تويتر'/>
                </li>
                <li>
                  <a class='facebook' href='https://www.facebook.com/lhoosnet' title='تابعني على فيسبوك'/>
                </li>
                <li>
                  <a class='rss' href='http://feeds.feedburner.com/blogspot/WDwql' title='تابع خلاصات المدونة RSS'/>
                </li>
                <li>
                  <a class='vimeo' href='#' title='ليس لدي بعد حساب'/>
                </li>
                <li>
                  <a class='youtube' href='http://www.youtube.com/lhoosnet?feature=sub_widget_1' title='تابعني على اليوتوب'/>
                </li>
                <li>
                  <a class='tumblr' href='#' title='ليس لدي بعد حساب'/>
                </li>
                <li>
                  <a class='stublupon' href='#' title='ليس لدي بعد حساب'/>
                </li>
                <li>
                  <a class='skype' href='#' title='ليس لدي بعد حساب'/>
                </li>
                <li>
                  <a class='dribbble' href='#' title='ليس لدي بعد حساب'/>
                </li>
                <li>
                  <a class='wordpress' href='#' title='ليس لدي بعد حساب'/>
                </li>
              </ul>
            </div>



                                </div>
                              </div>

</div>
                              <!--By www.lhoosnet.blogspot.com End AuthorContent-->
                            
</b:if>
                          </b:if>


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


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

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

هناك 7 تعليقات:

  1. غير معرف19/5/15 12:33

    ndwi m3ak bdarija hsen bach ntfahmo. chof ana dkholt l set dyal huhu o l9it had char7 o chof ta3li9 dyalk o dkhol l set dyalk1. het ana baghi tari9a hadi li char7 nta tari9a zd9et khdama mais dikor khayb ama tari9a li char7 huhu dyal wahd khdama o tari9a tanya ga3 ma khdama mais dikor zwin kayban khsara tari9a tanya ga3 ma khdama. daba ila knti 9ader tbdel dikor dirha zwina wlah red 3liya bach ma kan ana f ntidark

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

      حذف
    2. غير معرف20/5/15 20:03

      chokran bzaf wlah safi sayba ol9it dakchi li kont baghi baraka laho fik nta rajol tayb

      حذف
    3. هانية خويا ، المهم أي مشكل آخر حول الاضافة انا رهن الاشارة . شكرا على مرورك الطيب .

      حذف
  2. زائر 00728/5/15 02:27

    شكرا لكــ أخي الطريقة شغالة 100/100 بس المظهر ليس جذاب على اي حال شكرا

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

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

    ردحذف