أهم الاضافات التي تحتاجها المدونة - هامة و رائعة-الجزء الأول

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

أقدم لكم أهم الاضافات التي تحتاجها المدونة - هامة و رائعة-الجزء الأول

الإضافات تم انتقاءها حسب الأهمية، و لاداعي للإكثار من الإضافات لأنها تؤثر سلبًا على المدونة

لذلك سنركز على المهمة فقط و الضرورية .

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

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

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

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

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

للإضافة هذه الأداة اتبع الخطوات التالية:
في لوحة تحكم المدونة توجه الى التخطيط > إضافة أداة > 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 == &quot;item&quot;'> 
<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/AVvXsEiVGSy56FPFh2_y8FpbQz4-0QLlx5M2K0KO93SH4CiTjZti2dg8Vx0ZzorZbGpVmBSqfJqGbZADBjDiv3MEwlx624XDICW2HY5qwZc2dVWsSrLAuBFvCtRANOzJ3uwLgBVofYj_BTwFxECs/s1600/facebook.png"   name="Facebook"/> </a> 

   <a style="text-decoration:none;"  href="https://twitter.com/YourLink" rel="nofollow" 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/AVvXsEiklmo6pWX50KIo3JVgPrRDbfTkcGNwMr0oClShR4fdRYZUVgfABqwrNQTb3YUcpeyBK9yLrWRy_jdVJqFuJMJ6qD9NYlzvQn3Cia1_yeg8FqbyWJjrtWNqan2jQuyqpvVP3-8j_Yvg3wmw/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/AVvXsEi6fk2qekVUW5gN3h5qNSkLgwvpfR_Qqwr19M7mxx1SMNkds9GRPKUb9bRbwSoNQ9xVQpn7mMg3IAiw1cqo9LrGVA4-QT3-atEqMv3J-6m2-Ai_e_ZjjLR4BLiA4r14oIjUSKH328oohiEw/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/AVvXsEhq5EemhrgyreM1eoNw2Obemq9X3WFPwbs_Tu4EbaaCXcFyZeBPCoRwNCV7OlY_P7KXgqXq5CxSV9Pc3817z-z5XSm3y0iSWTAZmXY3Ja_u5aEen0aTYmh2NILIKAMYQJjdx1bQZtrhNbhm/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/AVvXsEg83P3yPmgK3fSZAlsvB2YqXSfMlBy_V4pHJ3rLJeplSfLXfNi7o9XNm1IaeP6PSSaqzu7GedggQKYXVPSYXSsOT_q5HDB3YCL7gKworSKUvo1c1wQcm-jETcEX5XZnE4bLXJR2K_nY5TMf/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://mostajad.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"> </script>

نقوم بتغيير http://mostajad.blogspot.com برابط مدونتك

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

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

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

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

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

-- إضافة أزرار "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"> // </script> <style type="text/css"> .w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEA-9ZuNjs6bSvbvXwrxmJuHgVi-cMh9ySEF9WM4wJvDdsaZrJgffGPfzWHOA6rwUFTw7Rnj6M_sBRSmX56qEyfrIuV4zuNJKkeDhNcZgopqQ1W8KVUwENjmsKCQ03ziX_FllKIKPzVp-N/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 برابط صفحتك على الفيس بوك.

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

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

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

الى هنا نصل الى النهاية

في أمان الله

أهم الاضافات التي تحتاجها المدونة - هامة و رائعة- الجزء الثاني
أهم الاضافات التي تحتاجها المدونة -الجزء الثالث - أدوات و إضافات الفيسبوك فقط

المصدر: منتديات بلوجر العربي blogger

المستجد التربوي

أهم الاضافات التي تحتاجها المدونة - هامة و رائعة-الجزء الأول

Default