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

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

الجزء الثاني | مجموعة إضافات احترافية لمدونات بلوجر

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

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

أقدم لكم هذه التدوينة التي سنخصصها للإضافات التي تحتاجها المدونة

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

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

في هذه التدوينة سنعرض بعض أكثر الإضافات احترافية لمدونات بلوجر

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

إضافة | أزرار تابعني عبر حساباتي في المواقع الاجتماعية

هذه الأداة قمت ( بإعادة صياغتها ) إذا صح التعبير

وأضفت لها التأثير الجميل الذي يظهر عند التأشير على إحدى الأزرار بها من أداة أخرى

لتكون أكثر احترافية، كما قمت بإعادة تصميم معظم الأزرار لتناسب مدونتي والمواقع التي أشترك بها ^_^
ولإضافة هذه الأداة الاحترافية الجميلة في مدونتك اتبع الخطوات التالية :
@ الخطوة الأولى :

توجه في لوحة تحكم مدونتك إلى :

تصميم > عناصر الصفحة > إضافة أداة > أداة HTML/JavaScript

ثم أضف الكود التالي لها

كود بلغة HTML:

<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/omnidal" rel="nofollow"  onclick="window.open('http://www.facebook.com/omnidal');return false;"  title="تابعيني عبر الفايسبوك (للفتيات فقط)"> <img border="0"  id="Facebook" style="padding-bottom:1px;" alt="تابعني عبر الفايسبوك"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg5WmGPxPOjHhBPXc88hyphenhyphenWBWU7qlcftCXHjL00PYT2EYD8dLvIPG8_4JCfg4QNLlGHk9GAZkCkXmsQ-IPcYV-tZ3LVaRdl3Q1quW5HusVXyxug4wI_N67WT2NMp_lQ_vtw3qzZOiXjTmk/s1600/FB-OMNIDAL.png"  name="Facebook"/> </a> 

   <a style="text-decoration:none;"  href="https://twitter.com/#!/omnidal" rel="nofollow" target="_Blank" rel="nofollow"  onclick=" window.open('https://twitter.com/#!/omnidal'); return false;"  title="تابعني على توتير"> <img border="0" id="Twitter"  style="padding-bottom:1px;" alt="تابعني عبر تويتر"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZFmK1ZeCltKXRNmKs4FDpQGxz4l06nX3bP43fqt8VZgIt6nbxCb7QuHaEp8kPYVur0HbmqobQB20RFfu8ZTOojI6xVyAItvw70DyTEWMZTPWtyH_d5RN_7FnrO-_2xL9Z0kkR-kvp3Oc/s1600/twtr-OMNIDAL.png"  name="Twitter"/> </a>

<a style="text-decoration:none;"  href="http://a-omnidal.blogspot.com/feeds/posts/default" rel="nofollow"  onclick="window.open('http://a-omnidal.blogspot.com/feeds/posts/default');return  false;" title="تابعني عبر خلاصات المدونة"> <img border="0"  id="Facebook" style="padding-bottom:1px;" alt="تابعني عبر فليكر"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4RN0i-XICR1234ZerBlJ_9NFaoDkGNwPBblcSFYoJCOI9cERv_0s5xe2Mmetvee5GxPqOuvWvSbxE2cILciYotGVG9hG5KwZvb_eiswspWsdyonpXssEuUUtrmyQsHy9PZgvq_kc8IFs/s1600/RSS-OMNIDAL.png"  name="RSS"/> </a> 

<a style="text-decoration:none;"  href="http://www.flickr.com/photos/a_omnidal" rel="nofollow"  onclick="window.open('http://www.flickr.com/photos/a_omnidal');return  false;" title="تابعني عبر فليكر"> <img border="0" id="Facebook"  style="padding-bottom:1px;" alt="Bookmark Facebook"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNF-dcOyXtyp9m-ik1hcgMSRZ89FwW8L2FzH6McuBeSV6wDCaIvx5Fh7GwHcZ7yCBmoAu8EGdG-pgUQKKvpqItUOPW1sCYtev-Aah9XShIk8DkwRXGiccV3wjB_CDqUN5w2d1iCp43ziI/s1600/flickr-omnidal.png"  name="flickr"/> </a> 

<a style="text-decoration:none;"  href="https://plus.google.com/109791937662333407989" rel="nofollow"  onclick="window.open('https://plus.google.com/109791937662333407989');return  false;" title="تابعني عبر جوجل +"> <img border="0" id="Facebook"  style="padding-bottom:1px;" alt="تابعني عبر جوجل +"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQIbAmP03KrkbkgaqAQBFAahzkqU0PQ4ykHEcbcGv8WHoEtVYDTraVaka5g76Fn5c8ZDIqMMYeYBZMlVjXfmIEJEYyzLjtloT6stAtBEGpfpHE2Al7vIDGVRkG7kEpnYAxUTSnkf4beNc/s1600/google%252Bomnidal.png"  name="Google +"/> </a> 

<a  href="javascript:window.external.AddFavorite('http://a-omnidal.blogspot.com/',  'مدونة أسماء || أم نضال ||');" title=" أضف المدونة لمفضلتك"><img  border="0"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZY3aMXRRzJqHQ-HZZcr0l4b_6wTb4nXpwTqoIAdGsxP-5Hl46S_chPv82JMHC3ywekajfCJnjACsMvYKZ5ahNptxAIrlQmhKJxmsqeS1oiIfVo3I5O6AsoFd7zhtApQZC2-7tUR7K7q4/s1600/a-omnidal.png"  /></a> 

</div> 
</b:if>
 </div>

@ الخطوة الثانية :

غير روابط المواقع الخاصة بي التي في الكود بالروابط الخاصة بك

وبإمكانك حذف وإزالة أي موقع لست مشترك به بحذف الكود الخاص به

فالأمر سهل على ما أعتقد بعدما جعلت أكواد كل موقع منفصلة عن الآخر
@ الخطوة الثالثة :

توجه الآن إلى :

تصميم > تحرير html > وابحث عن الوسم

كود بلغة HTML:

]]></b:skin>

</b>

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

كود بلغة HTML:

.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);
    }

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

واستمتع بأزرار المواقع الاجتماعية الخاصة بحساباتك تطفو على سطح مدونتك مع تأثير جميل ^_^

_________________

إضافة | البنرات المتحركة لمدونات التبادل الإعلاني

هذه الأداة استقيتها من مدونة زحمة حكي وعدلت عليها لتتناسب مع بنرات المدونات لدي

ولإضافة هذه البنرات المتحركة إلى مدونتك اتبع الخطوات التالية : @ الخطوة الأولى :

توجه في لوحة تحكم مدونتك إلى :

تصميم > عناصر الصفحة > إضافة أداة > أداة HTML/JavaScript

ثم أضف الكود التالي لها

كود بلغة HTML:

 <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center"> <td> <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="right"> <tr><td class="thead" align="center"> <a href="هنا ضع رابط موضوع التبادل الإعلاني بمدونتك"> تبـآدل إعلاني ..~ </a> </td></tr> <tr><td class="alt1" align="right"> <marquee onmouseover=this.stop() onmouseout=this.start() scrollamount=3 scrolldelay=20 direction=right> <table width="100%" cellpadding="0" cellspacing="0" border="0" align="right"><tr>   <td nowrap>   <a rel="nofollow" rel="nofollow" target="_blank" href="هنا رابط المدونة الأولى"> <img src="هنا رابط صورة البنر الخاص بالمدونة الأولى" border="0" alt="" /></a>   <td nowrap>   <a rel="nofollow" rel="nofollow" target="_blank" href="هنا رابط المدونة الثانية"> <img src="هنا رابط صورة البنر الخاص بالمدونة الثانية" border="0" alt="" /></a>  </td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></tr></table></marquee></td></tr></table></td></table> <td background="$stylevar[imgdir_misc]/bakborleft.gif" width="15"> </td>

@ الخطوة الثانية :

غير كما هو مشار إليه في الكود ( روابط المدونات وروابط صور البنرات الخاصة بها )

إذا رغبت في إضافة بنرات أخرى أضف هذا الكود أسفل الكود المشابه له

كود بلغة HTML:

  <td nowrap>   <a rel="nofollow" rel="nofollow" target="_blank" href="هنا رابط المدونة الثالثة"> <img src="هنا رابط صورة البنر الخاص بالمدونة الثالثة" border="0" alt="" /></a>

</b>

_________________

إضافة | المشاركات الشائعة بشكل جميل وتأثير رائع

هذه الإضافة الجميلة دلتني عليها صاحبة مدونة زحمة حكي من تطبيق مدونة تقارب

لإضافة هذه الأداة الجميلة إلى مدونتك اتبع الخطوات التالية : @ الخطوة الأولى :

توجه في لوحة تحكم مدونتك إلى :

تصميم > تحرير html > ابحث عن الوسم التالي
]]></b:skin>

ثم أضف بعده مباشرة ( أسفله - أدناه ) الكود التالي

كود بلغة HTML:

<style type='text/css'> .PopularPosts .item-title{display:none} .PopularPosts .widget-content ul li{background:none repeat scroll 0 0 transparent; float: right; list-style:none outside none; margin:10px 0 0 !important; padding:0 !important} .PopularPosts .item-thumbnail{margin:0 8px !important} .item-thumbnail img{-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease; border:5px solid #89C9E5; height:40px; padding:3px; width:40px} .item-thumbnail img:hover{border:5px solid #67ABC2; -moz-transform:scale(1.3) rotate(-5deg); -webkit-transform:scale(1.3) rotate(-5deg); -o-transform:scale(1.3) rotate(-5deg); -ms-transform:scale(1.3) rotate(-5deg); transform:scale(1.3) rotate(-5deg)} </style>

يمكنك تغيير ألوان الأداة بما يناسب ألوان مدونتك عبر تغيير كود اللونين التاليين

كود بلغة HTML:

border:5px solid #89C9E5;

</b>

( خاص بلون الأداة وهي بالوضع العادي ( بدون التأشير عليها )

كود بلغة HTML:

border:5px solid #67ABC2;

</b>

( خاص بلون الأداة عند التأشير عليها )

ويجب مراعاة أن يكون اللون الثاني أفتح من الأول ( حتى تكون الأداة أكثر تنسيقا )

_________________

إضافة | كن من متابعي المدونة على شكل صورة

تمتلك مدونات بلوجر أداة ( المتابعون ) التي تسهّل على الزوار متابعة إحدى المدونات بعينها

عبرعرض آخر التدوينات في لوحة التحكم

أداتنا اليوم تسمح لأصحاب المدونات التحكم أكثر بشكل هذه الأداة وتخصيصها بجمالية بسيطة ورائعة

بإزالة صور المتابعين أولا وربط الأداة بصورة خاصة ثانيا ( كشعار المدونة مثل التي أضعها في فوتر مدونتي مثلا )

وهناك عدة أشكال وطرق لإضافة هذه الأداة سأتناول الطريقة الأولى نقلا من مدونة تقارب

( الشكل الأول )

لإضافة هذه الأداة إلى مدونتك قم باتباع الخطوات البسيطة التالية :

@ الخطوة الأولى :

توجه في لوحة تحكم مدونتك إلى :

تصميم > عناصر الصفحة > إضافة أداة > أداة HTML/JavaScript ثم أضف الكود التالي لها

كود بلغة HTML:

<a href="http://www.blogger.com/follow-blog.g?blogID=xxxxxxxx" rel="nofollow" target="_blank" title="كن من متابعي المدونة"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhKJ63z7SrsjCaAN2b9JTPya_lPRP0mSC_hBfvbMB-AEKLoY6DGdG1FgjFY3F0AcTZy38P4RuOBc84hyAuqBKMJWgmVQDHTVO0yXgQ2Xp-3UPtaQ_iT2Y49JGlcFUnuyyntEPFO_7jgxbv/s1600/follow-with-google-friend-connect-button.jpg" /></a>

@ الخطوة الثانية :

غيّر xxxxxxxx برقم المعرف ( ID ) الخاص بمدونتك

ولتجده شاهد رابط الصفحة في صفحة عناصر الصفحة ( في شريط المتصفح )

ستشاهد أن الرابط يشبه هذا

http://www.blogger.com/rearrange?blo...81115845043616

الأرقام الأخيرة من الرابط هي المعرف ( الـID ) الخاص بمدونتك

انسخها وألصقها بدل xxxxxxxx في الكود السابق
_________________ الشكل الثاني للإضافة هو التالي ( صورة فقط )

@ الخطوة الأولى :

توجه في لوحة تحكم مدونتك إلى :

تصميم > عناصر الصفحة > إضافة أداة > أداة HTML/JavaScript ثم أضف الكود التالي لها

كود بلغة HTML:

<a href="http://www.blogger.com/follow-blog.g?blogID=xxxxxxxxx" rel="nofollow" target="_blank" title="كن من متابعي مدونتي"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLf8EFbERyYj08Lp8uss4p0uaZSvt2ZCwbwS8rB9I0StzhXLwQgSeDLFp2jjESEmJ2bZbfdQJPwJfJgewhaQzTvBkXimJ7IEm1bEsB5Gy8WVwQ5gWJi8WutAksUEDmq0u7UXPo1YB-wXKj/s1600/google-followers-button.png" /></a>

@ الخطوة الثانية : غيّر xxxxxxxx برقم المعرف ( ID ) الخاص بمدونتك
_________________ الشكل الثالث وهو عبارة عن عبارة نصية مكتوبة كالتالي

كن من متابعي المدونة @ الخطوة الأولى :

توجه في لوحة تحكم مدونتك إلى :

تصميم > عناصر الصفحة > إضافة أداة > أداة HTML/JavaScript ثم أضف الكود التالي لها

كود بلغة HTML:

<a href="http://www.blogger.com/follow-blog.g?blogID=xxxxxxxxx" rel="nofollow" target="_blank" title="من متابعي مدونتي">من متابعي مدونتي</a>

</b> @ الخطوة الثانية : غيّر xxxxxxxx برقم المعرف ( ID ) الخاص بمدونتك

_________________

وكما تناول الأخ أحمد صاحب مدونة تقارب في موضوعه الذي أشرت إليه أعلاه

يمكن إضافة هذه الأداة أسفل التدوينات عبر الطريقة التالية : @ الخطوة الأولى :

توجه في لوحة تحكم مدونتك إلى :

تصميم > تحرير html > وابحث عن الوسم

كود بلغة HTML:

<div class='post-footer-line post-footer-line-1'>

</b>
@ الخطوة الثانية :

أضف بعد الوسم تماما ( أسفله - أدناه ) أحد الأكواد الثلاث السابقة _________________

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

فقط اتبع الخطوات البسيطة التالية :

@ الخطوة الأولى :

توجه في لوحة تحكم مدونتك إلى :

تصميم > عناصر الصفحة > إضافة أداة > صورة > ثم اختر الصورة التي تود عرضها ( أزل علامة صح من خيار "احتوء مناسب" )

@ الخطوة الثانية :

في خانة " وصل " ألصق الرابط التالي

http://www.blogger.com/follow-blog.g?blogID=xxxxxxxxxxx @ الخطوة الثالثة :

غيّر xxxxxxxx برقم المعرف ( ID ) الخاص بمدونتك
_________________

إضافة | قطعة " ابحث في مدونتي " بألوان واحترافية رائعة

هذه الأداة من منتدى بلوجر بالعربي بواسطة الأخ محمد نجد

ولإضافتها في مدونتك اتبع الخطوات التالية : @ الخطوة الأولى :

توجه في لوحة تحكم مدونتك إلى :

تصميم > تحرير html > وابحث عن الوسم

كود بلغة HTML:

]]></b:skin>

</b>

وأضف أحد الأكواد التالية حسب ألوان مدونتك الشكل الأول ( قطعة بحث بلون فاتح )

أضف الكود التالي قبل الوسم السابق تماما ( فوقه - أعلاه )

كود بلغة HTML:

#search { } #search input[type="text"] { background: url(search-white.png) no-repeat 10px 6px #fcfcfc; border: 1px solid #d1d1d1; font: bold 12px Arial,Helvetica,Sans-serif; color: #bebebe; width: 150px; padding: 6px 15px 6px 35px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; } #search input[type="text"]:focus { width: 200px; }

الشكل الثاني ( قطعة بلون غامق عند التمدد تتغير إلى الأبيض )

أضف الكود التالي قبل الوسم السابق تماما ( فوقه - أعلاه )

كود بلغة HTML:

#search { } #search input[type="text"] { background: url(search-white.png) no-repeat 10px 6px #444; border: 0 none; font: bold 12px Arial,Helvetica,Sans-serif; color: #d7d7d7; width:150px; padding: 6px 15px 6px 35px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; } #search input[type="text"]:focus { background: url(search-dark.png) no-repeat 10px 6px #fcfcfc; color: #6a6f75; width: 200px; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); }

الشكل الثالث ( قطعة بلون غامق كليا قبل وبعد التمدد )

أضف الكود التالي قبل الوسم السابق تماما ( فوقه - أعلاه )

كود بلغة HTML:

#search { } #search input[type="text"] { background: url(search-dark.png) no-repeat 10px 6px #444; border: 0 none; font: bold 12px Arial,Helvetica,Sans-serif; color: #777; width: 150px; padding: 6px 15px 6px 35px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; } #search input[type="text"]:focus { width: 200px; }

@ الخطوة الثانية :

توجه في لوحة تحكم مدونتك إلى :

تصميم > عناصر الصفحة > إضافة أداة > أداة HTML/JavaScript ثم أضف الكود التالي لها

كود بلغة HTML:

<form method="get" action="/search" id="search"> <input name="q" type="text" size="40" placeholder="ابحث في هذه المدونة" /> </form>

_________________

إضافة | أحاديث الحبيب عليه الصلاة والسلام متغيرة بتغير الصفحة

هذه الأداة الجميلة من مدونة العازمي ، وتضم الأحاديث المشهورة للحبيب عليه الصلاة والسلام

وتتغير الأحاديث بتحديث أو تغيير الصفحة في المدونة

والأداة خفيفة جدا على المتصفح وثقيلة جدا في ميزانك يوم الحساب بإذن الله

خطوات إضافة هذه الأداة في مدونتك عبر خطوة واحدة بسيطة وهي كالتالي :

توجه في لوحة تحكم مدونتك إلى :

تصميم > عناصر الصفحة > إضافة أداة > أداة HTML/JavaScript ثم أضف الكود التالي لها

كود بلغة HTML:

<script language="JavaScript"> /***************************************** * Visit our site at http://www.star28.com/ for more code ******************************************/  </script>

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

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

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

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

Default