تطوير ويب » خفايا واسرار » الحل الامثل لوضع معلومات عن الكاتب للمدونات الفرديه والجماعيه
السلام عليكم ورحمة الله وبركاتة كثير من المدونين يرغب في وضع معلومات عنه اسفل كل تدوينه يقوم بكتابتها تشمل اسمه ورابط من اختياره وليكن رابط صفحة الاتصال بنا وكذلك بعض المعلومات الشخصيه عنه او عن المدونه والتي يرغب في مشاركتها مع قراء تدويناته . هناك الكثير من الاضافات التي تؤدي الى هذا الغرض ومنتشره بكثره في المواقع الاجنبيه خصوصا بعد ظهور ما يسمى بالمدونات الجماعيه واتاحة الفرصه لاكثر من كاتب في نشر موضوعاته داخل مدونه واحده مما نتج عنه رغبه ملحه في التمييز بين كل كاتب والآخر وايضا ظهرت اضافات عده تتناول هذا الامر . قد قمت اليوم باختيار اسهلهم وسنبدا الان بعرض ططريقة وضع معلومات عن صاحب المدونه اسفل كل تدوينه . وهناك شكلين لتلك الاضافه سنستعرضهم معا .. الاضافه الاولي تجمع مابين وضع معلومات عن كاتب المدونه وبجانبها ناحية اليسار بعض مواقع النشر الاجتماعيه التي تتيح للقراء مشاركة التدوينه على الفيس بوك وتويتر وغيره من المواقع الاجتماعيه وتلك الاضافه مخصصه فقط للمدونات الفرديه اي التي يكتب فيها كاتب واحد فقط وها هى صوره لتلك الاضافه
الاضافه سهلة التطبيق كل ماعليك هو الذهاب الي لوحة تحكم مدونة بلوجر ثم الي تصميم ثم تحرير HTML ثم قم بالضغط علي علامة توسيع عناصر الصفحه وابحث عن الكود التالي :
<div class='post-footer-line post-footer-line-1'>
او قم بالبحث عن هذا الكود
<data:post.body/>
وضع بعدة مباشرة الكود الموجود بالاسفل
<div class='bio-socials noprint' style='height: 260px;padding-top:50px;'>
<!--author bio-->
<style>
.author-bio{
border-right:3px #5D7D91 solid;
margin-right:10px;
marin-bottom:40px;
text-align:justify;
padding:10px;
width:300px;
float:right;
}
.author-photo{
float:right;
text-align:center;
width:74px;
padding:2px 2px 2px 2px!important;
margin:0 10px 10px 10px;
}
</style>
<div class='author-bio' style='height: 180px'><div class='author-photo' style='height: 180px'>
<img alt='كاتب الموضوع' height='70' src='http://lh6.googleusercontent.com/-feF1Sq3hroQ/AAAAAAAAAAI/AAAAAAAABgg/uq8yz1a4Btc/s50-c/photo.jpg' width='70'/>
</div><h3>بقلم تقارب</h3>مُدوٍن عِربي , مهتم بمتابعة كل جديد خاص بمنصة بلوجر .</div>
<!--end author bio-->
<style>
.socialbox{
border-right:3px #5D7D91 solid;
margin-left:10px;
width:190px;
float:left;
padding:10px 0 10px 0!important;
}
.sociallist{
margin:10px 0 10px 0;
width:190px;
list-style:none!important;
}
.twitter, .facebook, .delicious, .rss, .print{
padding:5px 40px 5px 0!important;
background-repeat:no-repeat;
background-position:160px 6px!important;
}
.twitter{
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgddjLfh8G-INzK7dw3mHeZ55EXs-NOX-jIS6z9YUQ9ObE2ujlpRMCh0P6e7WoaXRP3AVGOUFgHhwJixznl5RRQh_Dkbur5MuINXcH3gIwGWVhtNGUhkOH4cvBAFp2bltOfhv7kx57XtzE/');
}
.facebook{
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLXEpPR3p9GeFwXZgxKEBdiiOM0q364k44EMyTyjxFSMrSnSkUbEmJCpfIknkS3k32aOyNVri-umhHh5PVSylgtJTJqqYyKV6_Y9FvjcRSgGAfu3x1lPQ_iC-d8B_UchoA5rOFaAB_eF8/')
}
.delicious{
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxcdHVhBU8_skbsjNJVjZTfI1akBaQ-GNfPiQ0CYrw4neqmYKo0NplhJfq20bQKiioY_Veiez2BdnHW4j8xYgDj1XjA2nqsT5tLZMP0cQld_iaO20S17lx8hVS1yKqHu_d4NAuFp6B40A/');
}
.print{
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVscZyoayGfbNPGx15K5GJadTso9N4GrmVBjMqObN63KWCHgHQZvFpsrJvFaPoR1x_D6LnVky8rGfuwTZ4h-BAaK1on5B6sn63azYf7o42hrSQ9Harkeu3aG_7QFjEAEfPkWiXKA7c9lE/');
}
.rss{
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMC3mwAw1I1gKh-hOc2jq49RenZJimi4rDmaFT4GCGf0oqrTjbe-dlVaY0SoDFyuVLXyJ_cDrCysfCeSsjjPcy0Z9pMQy_o1mJpHZJO-NtKu5IubndyCpxMiFR7XDg5xHKhnPsIqNUxUY/');
}
</style>
<div class='socialbox' style='height: 180px'><h3 style='margin-right:10px;'>شارك أصدقاءك</h3>
<ul class='sociallist'>
<li class='twitter'><a expr:href='"http://twitter.com/share?text=" +data:post.title+ "&url=" + data:post.url + "&via=doaibblog&related=اسم مدونتك"' target='_blank'>عبر تويتر</a></li>
<li class='facebook'><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank'>عبر فيسبوك</a></li>
<li class='delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>أضفه إلى مفضلتك</a></li>
<li class='print'><a href='javascript:window.print()'>اطبع الصفحة</a></li>
<li class='rss'><a href='رابط خلاصات مدونتك' target='_blank'>تابع الخلاصات</a></li>
</ul>
<div class='fblike' style='float:left;' width='100'><b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' float='left' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:40px;'/>
</b:if></div>
</div>
</div>
قبل حفظ القالب ابحث داخل الكود عن رابط الصوره تلك
http://lh6.googleusercontent.com/-feF1Sq3hroQ/AAAAAAAAAAI/AAAAAAAABgg/uq8yz1a4Btc/s50-c/photo.jpg
وقم باستبدال رابط الصوره برابط صوره تختارها انت ... ثم قم بحفظ القالب .
والان مع الاضافه الثانيه وهي خاصه بالمدونات الفرديه ايضا ذات الكاتب الواحد .
والان مع الاضافه الثانيه وهي خاصه بالمدونات الفرديه ايضا ذات الكاتب الواحد .
لتطبيقها سجل دخول الي لوحة تحكم مدونة بلوجر ثم الي تصميم ثم تحرير HTML ثم قم بالضغط علي علامة توسيع عناصر الصفحه وابحث عن الكود التالي :
<data:post.body/> او
<div class='post-footer-line post-footer-line-1'>
وضع بعده مباشرة الكود الموجود بالاسفل
<b:if cond='data:blog.pageType == "item"'>
<div class='postauthor'>
<img alt='' height='75' src='رابط صورتك الشخصيه' width='75'/>
<h3>بقلم <a href='رابط اتصل بنا'> اسمك </a></h3>
<p> اكتب هنا معلومات مختصره عنك </p>
</div>
</b:if>
</b:if>
قم بعد ذلك بالبحث مجددا عن]]></b:skin>
وضع قبلها مباشرة الكود الموجود بالاسفل
/* Author Bio */
.postauthor {
background: #F5F5F5;
border-top: 1px solid #e1e1e0;
border-bottom: 1px solid #e1e1e0;
overflow: hidden;
padding: 0.7em;
}
.postauthor img {
border: 5px solid #e2dede;
float: right;
margin-left: 1em;
}
.postauthor h3 {
color: #666;
font-size: 1.2em;
margin-bottom: 5px;
margin-top: 0;
}
.postauthor p {
color: #515151;
font-size: 12px;
margin-bottom: 10px;
margin-top: 0;
}
/* Author Bio End */
ثم قم بحفظ قالب مدونتك ..
واخيرا مع طريقة وضع تعريف مختصر لكل كاتب على حدا في المدونات الجماعيه
التي يكتب فيها اكثر من شخص ..ستقوم بتنفيذ الخطوه الاخيره فقط الخاصه بكود ال css الذي يوضع
قبل
]]></b:skin
ثم تقوم بتسجيل دخول الي لوحة تحكم مدونة بلوجر ثم الي تصميم ثم تحرير HTML
ثم قم بالضغط علي علامة توسيع عناصر الصفحه وابحث عن الكود التالي :
<data:post.body/> او
<div class='post-footer-line post-footer-line-1'>
وضع بعده مباشرة الكود الموجود بالاسفل
<b:if cond='data:blog.pageType == "item"'> <!--معلومات الكاتب الاول --> <b:if cond='data:post.author == "الاسم"'> <div class='postauthor'> <img alt='' height='75' src='رابط الصورة الشخصية' width='75'/> <h3>بقلم <a href='ضع هنا رابط من اختيارك'> ضع هنا اسمك اوكنيتك </a></h3> <p> معلومات مختصره عنك </p> </div> </b:if> <!--معلومات الكاتب الثاني --> <b:if cond='data:post.author == "الاسم"'> <div class='postauthor'> <img alt='' height='75' src='رابط صوره شخصيه' width='75'/> <h3>بقلم <a href='Blog Link'> اسمك او كنيتك </a></h3> <p> معلومات مختصره عنك </p> </div> </b:if> </b:if>
ملحوظة : لكي تعمل اضافة تمييز كتاب المدونات الجماعيه بشكل سليم يجب عليك تغيير كلمة الاسم
داخل الكود باسمك الشخصي في البروفايل الخاص بك سواء كان بروفايلك الافتراضي لازال يعمل من خلال بلوجر
او اسمك الشخصي في بروفايلك علي جوجل بلس في حالة قمت بعملية تحويل بروفايلك من بلوجر الي جوجل بلس
مع مراعاة الدقه في التسلسل الهجائي للاسم والتغير ما بين الحروف الاتينيه مثال b و B ...
قم بعدها بحفظ القالب واعتذر عن الشرح باستفاضه تامه فهذا الشرح موجه للمبتدئين بصفه خاصه ولمن يرغب في تلك الاضافه.
.. تحديث للموضوع ..
بعض اصحاب المدونات الجماعيه يرغب في وضع اعلانات جوجل ادسنس تحت معلومات كاتب كل تدوينه ويكون الاعلان خاص بالكاتب وليس بصاحب المدونه كنوع من التشجيع له على الكتابه عنده ويمكن بتلك الطريقه ان يتم تقاسم الارباح فيما بينهمالاضافه بالطبع تفيد الطرفين . صاحب المدونه والمؤلف الذي يقوم بكتابة تدوينات معه .
<data:post.body/>
وضع بعده مباشرة الكود الموجود في الاسفل
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.author == "admin"'>
كود جوجل ادسنس الخاص بك (first author)
</b:if>
<b:if cond='data:post.author == "الكاتب الاول"'>
كود ادسنس (second author)
</b:if>
<b:if cond='data:post.author == "الكاتب الثاني"'>
كود ادسنس (third author)
</b:if>
</b:if>
الان قم بتغيير كلمة admin داخل الكود باسم حسابك الذي يتم عرضه عند كتابتك لتعليق
وقم بتغيير اسم الكاتب الاول باسمه في ملف تعريفة وكذلك قم باستبدال كلمة كود ادسنس بالكود الخاص به
كرر
نفس الطريقه مع الكاتب الثاني او امسح قطعة الكود الخاصه به ان كانت
مدونتك تتوفر علي كاتب واحد فقط غيرك او كررها حسب عدد الكتاب في مدونتك
ممن يرغبون وترغب في وضع اعلانات جوجل ادسنس الخاصه بهم داخل تدويناتهم.
تم بحمد الله وتوفيقه....
أصدقاء(تطوير ويب)
1تعليقات Blogger
1 عدد التعليقات على موضوع الحل الامثل لوضع معلومات عن الكاتب للمدونات الفرديه والجماعيه
شكرا علي هذه الاضافة الجميلة جدا جدا وانت متالق دائما اخي احمد تقبل مودتي اخوك مصطفي
وهذه مدونتي الجديدة ارجو التقييم
بلوجر فيس|blogger face
إرسال تعليق
التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .