الاضافات التي تحتاجها المدونة

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

على بركة الله نبدأ:

-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

--  إضافة أزرار المواقع الاجتماعية :

 هذه الأداة تظهر أزرار المواقع الاجتماعية عائمة في صفحة مدونتك بتاثيرات جميلة عند التأشير

للإضافة هذه الأداة اتبع الخطوات التالية:
في لوحة تحكم المدونة توجه الى التخطيط > إضافة أداة > HTML/JavaScript
ثم ضع هدا الكود

<div class="flt-wdt"> <style>#floatingbookmarks { right:25px; top:40px; margin-top:10px; position:fixed; width:40px; } #floatingbookmarks .float {margin:7px} .FBConnectButton_Text { font-size: 8px; padding:2px 4px 3px !important; } </style> <b:if cond='data:blog.pagetype == "item"'> <div id='floatingbookmarks'> <a style="text-decoration:none;" href="http://www.facebook.com/YourLink" rel="nofollow" onclick="window.open('http://www.facebook.com/YourLink');return false;" title="تابعيني عبر الفايسبوك "> <img border="0" id="Facebook" style="padding-bottom:1px;" alt="تابعني عبر الفايسبوك" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj24SZxTKtgTCs1VFXFgdzGDdW3nwSArxcQxI1DStvZ8D-vbfQ5GsuEog_i8RGpssVSM-YVpawv31pU1hO_RwRQp8094i0m0neNVST-9E_TLEZj0Fhvy3YsHWQtM21s8Cm2jhizhHR2A1to/s1600/facebook.png" name="Facebook"/> </a> <a style="text-decoration:none;" href="https://twitter.com/YourLink" rel="nofollow" target="_Blank" rel="nofollow" onclick=" window.open('https://twitter.com/YourLink'); return false;" title="تابعني على توتير"> <img border="0" id="Twitter" style="padding-bottom:1px;" alt="تابعني عبر تويتر" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA976XY9eoXElNgbb46H_1aFFutV5KBbUQ5jtPwJucXnverAEhlluLXWOmm-bktswIpNcc58mkuFBSkIXqQUQb85PpSXgMtv7bVCLGQ46_T_vtfxnTYqSRcKJS6CeSkUYy_nYPoRuOH1p6/s1600/twitter.png" name="Twitter"/> </a> <a style="text-decoration:none;" href="http://YourLink/feeds/posts/default" rel="nofollow" onclick="window.open('http://YourLink/feeds/posts/default');return false;" title="تابعني عبر خلاصات المدونة"> <img border="0" id="Facebook" style="padding-bottom:1px;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOAKyraIVRvHCgBrDbQVXB6RQFrdW5_CuJBUHx2wGnowyFCR-FCsiQ4cqdSHNIiKyaVKisk9q7NxDXNcZ7Ye7h_IV3jPsGH6HqMPOzDhyG6tKM5DfI6nksM0YfLM14i5zUJCZC6oNDhkBe/s1600/rss.png" name="RSS"/> </a> <a style="text-decoration:none;" href="https://plus.google.com/YourLink" rel="nofollow" onclick="window.open('https://plus.google.com/YourLink');return false;" title="تابعني عبر جوجل +"> <img border="0" id="Facebook" style="padding-bottom:1px;" alt="تابعني عبر جوجل +" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Id4BlfBGq3dPo_JmcebI2OQ5y6K1ISGnzcB0Jj16O65A9KXKk6ugoVdn8tKQyQU8ehEpGeUbVYgTEYa9S2wgXQkJLgyngUaAR-qLHp4iV5b4H8Jb4KW4SQ3UaFyR7zgdtP-xwKL7O8JE/s1600/google.png" name="Google +"/> </a> <a href="javascript:window.external.AddFavorite('http://YourLink/', 'اسم المدونة');" title=" أضف المدونة لمفضلتك"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPjnE5BosTkw5xy5xNZQi0P5-77mzsYTJw0VDm6ggUYYCnk9BGmsgMLm9URge9Xl4ZGRp-3jpIgBsSh9LDtVUmjy9i78BJH2N5TThHKJKqTP5sjo07dio9k-eLUk9eufCJ-c_z4pWhOQIe/s1600/favorite.png" /></a> </div> </b:if> </div>

 لا تنسى تغير الروابط التي باللون الأحمر الى الحسابات الخاصة بك

بعد ذلك توجه الى قالب > تحرير HTML و ابحث عن

]]></b:skin>

  ثم أضف فوقه مباشرة الكود التالي

.flt-wdt{ position:fixed; right:10px; top:40%; } .flt-wdt img{ float:right; clear:right; margin:5px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .flt-wdt img:hover{ -moz-transform: scale(1.2) rotate(6deg); -webkit-transform: scale(1.2) rotate(6deg); -o-transform: scale(1.2) rotate(6deg); -ms-transform: scale(1.2) rotate(6deg); transform: scale(1.2) rotate(6deg); }  

قم بحفظ التغييرات على قالبك

واستمتع بأزرار المواقع الإجتماعية على مدونتك

-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

--  إضافة صفحة الإتصال {إتصل بنا، راسلني} :

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

واجهة الموقع الرئيسية سهلة جدا ساقوم بشرحها
أولا الاعدادات وهي لاضافة خانة في النموذج أو ازالتها

ثانيا تعديل النمودج بما يلائم مدونتك

ثالثا اضافة الإيميل الذي ستتوصل به بالرسائل

في الأسفل توجد معاينة مباشرة للنموذج

أخيرا نضغط على الزر المبين في الصورة للمواصلة

بعدها سيظهر لنا كود النموذج جاهز نقوم بنسخه

الآن انتهينا من الموقع، نتوجه الى لوحة تحكم المدونة
ثم نضغط على الصفحات > صفحة جديدة > صفحة فارغة

بعدها نقوم باختيار تحرير HTML ونمسح الكود الموجود، ثم نقوم بلصق كود النمودج و نضغط على نشر

ومبروك عليك نموجذج الاتصال.

-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

--  إضافة فهرس المدونة :

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

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

<div dir="rtl" style="text-align: right;"> </div> <script src="https://sites.google.com/site/3rbbbbby/httpssitesgooglecomsite3rbbbbby/sitmapabuiyad.js"> </script> <script src="http://Efada.Net/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"> </script>  

ثم نقوم بتغيير التاريخ الى آخر قديم حتى لا تظهر المشاركة مع التدوينات

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

نقوم بكتابة عنوان للصفحة مثلا فهرس، فهرس المدونة..
ثم نلصق رابط المشاركة ونضغط حفط

تم اضافة صفحة الفهرس بنجاح.

-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

--  إضافة أزرار "Like" و "Send" من الفيسبوك  :

اضافة أزرار الاعجاب من الفايسبوك

قالب > تحرير HTML > توسيع القالب > البحث عن الكود التالي

<data:post.body/>

ستجد أن الكود مكرر المقصود هو الثاني

اذا رغبت أن تظهر الأزرار في بداية التدوينة فأضف الكود التالي قبل الوسم السابق، أما

اذا أردتها في آخر التدوينة فأضفه بعده

<b:if cond='data:blog.pageType == "item"'> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:like colorscheme='light' action='like' layout='standard' expr:href='data:post.url' font='' send='true' show_faces='false' width='450'/></b:if> 

لتخصيص الأزرار نقوم بعمل الآتي:
-light هو لون الزر الفاتح يمكنك استبداله بآخر داخر بتغييره الى dark
-standard هو شكل زر Like يمكنك تغييره بآخر من الأشكال التالية

standard

button_count

box_count


يمكنك استبدال اسم الشكل بالذي تريده

-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

--  إضافة صندوق المعجبين بتقنية جكويري  :

نذهب الى قالب > تحرير HTML > توسيع القالب > البحث عن الوسم التالي

             </head>  

ثم قبله مباشرة أضف الكود التالي:

             <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 

 ثانيا: توجه الى تخطيط > إضافة أداة > HTML/JavaScript

             <script type="text/javascript"> //<!-- $(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); //--> </script> <style type="text/css"> .w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixe3BKajj8cxxxcuhk-9ypf08yxQvqtsp9HXHvXKLcibj7tqqsVuRbf-AOeekGSDejGtdh9cVLrn5fzhVKGJ8xH9DLAK2qjEXCsJCTbX1Li7eb-X7_UQZTp4FoZk8YNwFOyZ4lgaGs1J-S/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .w2bslikebox div{border:none;position:relative;display:block;} .w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .w2bslikebox span a{color: #808080;text-decoration:none;} .w2bslikebox span a:hover{text-decoration:underline;} </style><div class="w2bslikebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=*Your_Page_URL&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div> </div>  

استبدل Your_Page_URL برابط صفحتك على الفيس بوك.

-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

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

-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

الى هنا نصل الى نهاية التدوينة

نلتقى في تدوينة قادمة بحول الله

Partager

Tweet

هل أعجبك الموضوع ؟