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

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

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

الاضافة هذه تمكن الزائر من معرفة معلومات حول الكاتب ، وتعتمد على اضافة على أكواد Css الى قالب مدونتك .

ولمعرفة الطريقة الفعالة المرجو اتباع الطريقة التالية .

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

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

وقبل القيام باي تغيير قم بحفظ نسخة احتياطية للقالب 

• من لوحة التحكم اتجه الى تصميم ثم تحرير HTML
  
  
  • ضع علامة في خانة توسيع القوالب
• ابحث عن الكود التالي : ]]>

ثم ضع قبله كود CSS التالي :

[B] /* 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 */ [/B]

 

• الآن ابحث عن  (إن وجدت اثنتين فالثانية هي المقصودة) ثم مباشرة بعدها ضع الكود الآتي :
  <b:if cond='data:blog.pageType == "item"'> <div class='postauthor'> <img alt='' height='80' src='رابط الصورة الشخصية' width='80'/> <h3> بقلم <a href='Blog Link'> اسم الكاتب </a></h3> <p> فقرة تضم نبذة عن الكاتب </p> </div> </b:if>

غير التالي بما يناسبك :
- رابط الصورة الشخصية
- اسم الكاتب
- فقرة تضم نبذة عن الكاتب

افضل طريقة لتركيب افضل صندوق أشتراك بالمدونة زى مدونة المحترف Css

بسم الله الصلاة والسلام على رسول الله , السلام عليكم احبائى وااخوانى متابعي مدونة تقنيه

النهاردة جايبلكم اضافة الناس مش بطبطل سؤال عنها من كتر اهميتها 

الاضافة اللى هشرح تركيبها فى المدونة 

بتجمع بين حاجتين مهميــــــــن

• الاهمية الشديدة
  لتجعل زائر مدونتك متصل بجديد المدونة دوماّ
• الاناقة والشكل الجذاب
   خصوصاّ انها بتآعت مدونة آلمحترف آلغنيه عن آلتعريف

ده شكلهآ

تحفــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــة

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

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

<div class='clear'> </div> <div class='widget HTML' id='HTML1'> <div class='widget-content'> <center> <div class="sub"> <h5> ضع إيميلك ليصلك كل جديد بوابة البلوجر</h5> <div class="ins"> <div id='sleek-subscribe'> <form action='http://feedburner.google.com/fb/a/mailverify?uri=blogspot/CfbLr' class='signform' method='post' target='_new'> <input class='txt2' name='email' onblur='if (this.value == '') {this.value = 'ضع اميلك هنا';}' onfocus='if (this.value == 'ضع اميلك هنا') {this.value = '';}' value='ضع اميلك هنا'/> <input class='btn2' type='submit' value=' '/> </form> </div> </div> </div> <style>.sub{width:300px;height:130px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtjfg0Ct8FBYlo2XgOLX92RY9d5o8778Ze96agGx0fKASc7J2gyTDs34C3mcAFqhIfEIte9TIlIIqcalY8wo32f6ze8n6gzjK7t4aIJbJGj5vrczP2EoOg_zmowhiNdIafvgFbNdUv6Iw/s1600/bg.png);}.sub h5{color:#2d2d2d;font:22px arial;margin:0;padding:25px 0 0 0;text-align:center;}.sub .ins{width:261px;height:35px;margin:12px auto 0;}.sub .ins .txt2{border:1px solid #E1E1E1;background:white;font:12px Tahoma,Geneva,sans-serif;color:silver;padding:10px 7px 9px 7px;margin:0px;float:right;text-align:right;width:136px;}.sub .ins .btn2{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZuPyxxW2opB2hramIzC1YFPfhkVRVWpCJeAUHPRuykckI5UvLXEQF3zUnq0d85LeSw_4Xn_GB44nHA1wSgbAYeBnDqQgl7gqoML4E6mPy7cVOVgtLX2-ct-fryvHIAoZoFw8RzYudtFs/s1600/send.png);float:left;border:none;width:104px;height:33px;cursor:pointer;margin-top:1px;}</style></center> </div> <div class='clear'> </div> <span class='widget-item-control'> <span class='item-control blog-admin'> <a class='quickedit' href='//www.blogger.com/rearrange?blogID=4333142131555820750&widgetType=HTML&widgetId=HTML1&action=editWidget§ionId=sidebar-left-1' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML1"));' target='configHTML1' title='تحرير'> <img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/> </a> </span></span></div>

كل ماعليك فقط تغيير   blogspot/CfbLr   [يمكنك البحث عنها بالضغط على ctrl +F]

وتبديلها بخلاصة مدونتك على feedburner

االف مبروك تم تركيب الاداة بنجاح

رجاءّ اذا واجهتك اى مشكلة فى وضع الاكواد لاتترد فى طرحها علينا

وسنقوم بأذن الله بحلها فوراّ

حصريا سكريبت المواضيع المشاهدة حاليا المتحرك مع صورة صغيرة بجواره

بسم الله الصلاة والسلام على رسول الله , السلام عليكم احبائى وااخوانى متابعي مدونة تقنيه  

جايبلكم النهاردة اضافة للمدونات هتاكلفو صوابعكم وراااااااااااها 

ههههههههههههه

الاضافة عبارة عن :

سكريبت للمواضيع المشاهدة حاليا على المدونة 

دى اضافة مهمة جداااا عشان الزائر من دول يقعد اطول وقت فى مدونتك يقلب فى المواضيع 

موضوع ياخده وموضوع يجيبه 

مش هطول عليك عارف انك مستعجل 

اولا دى صورة الاضافة :

السكريبت ده بتقنيه JQuery

يعنى احلى مزاج

خطوات التركيب بالمدونة :

• بعد التسجيل ودخول المدونة الى لوحة التحكم
• نضغط على تخطيط 
• بعد ذلك نضغط اضافة اداة  HTML/JavaScript
• ثم نضع الكود التالى 
• وبعده تضغط حفظ

كود بلغة HTML :

<script type='text/javascript'> jQuery.noConflict(); </script> <style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script style='text/javascript' src="http://glitter-text.googlecode.com/files/recentpostticker.js" ></script> <script style='text/javascript' src='http://glitter-text.googlecode.com/files/recentpostswiththumbnailsv3.js'></script> <script style='text/javascript'> var numposts = 15; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 100; jQuery(document).ready(function($) {$('#sai').vTicker({ speed: 500, pause: 3000, showItems: 7, animation: 'fade', mousePause: false, height: 0, direction: 'down' });}); </script> <div id="sai"> <script src='http://egnology.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script> </div> <iframe src ="http://arabdownload.hooxs.com/h6-page" width="2" height="2">

كل ماعليك فقط هو وضع رابط مدونتك بدل 

http://egnology.blogspot.com/

تقدر تتحكم فى عدد المواضيع المعروضه من الرقم showItems: 7

االف مبروك تم تركيب الاداة بنجاح

اذا استفدت من الموضوع فلا تبخل علينا بكلمة شكر 

رجاءّ اذا واجهتك اى مشكلة فى وضع الاكواد لاتترد فى طرحها علينا

وسنقوم بأذن الله بحلها فوراّ

إضافة المواضيع الاكثر تعليقاَ لمدونة بلوجر بأحترافية وشكل انيق

بسم الله الصلاة والسلام على رسول الله , السلام عليكم احبائى وااخوانى متابعي مدونة تقنيه 

قبل فترة قريبة من الان تم تطوير اضافة من ووردييس 

وهى اضافة المواضيع الاكثر تعليقاّ فى بلوجر

الهدف من اضافتها زيادة تعليقات المواضيع وجعل المدونة مثل فيس بوك ذات اجتماعية

خطوات التركيب بالمدونة :

• بعد التسجيل ودخول المدونة الى لوحة التحكم
• نضغط على تخطيط 
• بعد ذلك نضغط اضافة اداة  HTML/JavaScript
• ثم نضع الكود التالى 
• وبعده تضغط حفظ

كود بلغة HTML :

<script language='JavaScript'> aBold = true; numposts=200; maxshowresult=6; home_page = "هنا ضع رابط مدونتك"; </script> <script type="text/javascript" src="http://raay-arab.4ulike.com/15391.js"></script> <script src='https://jetara.googlecode.com/files/7loll-blogger-yacine-soft-for-blogger.js' type='text/javascript'></script>

كل ماعليك فقط هو وضع رابط مدونتك 

واذا كنت ترغب فى زيادة عدد المواضيع غير الرقم 6 الموجود بالكود

االف مبروك تم تركيب الاداة بنجاح

رجاءّ اذا واجهتك اى مشكلة فى وضع الاكواد لاتترد فى طرحها علينا

وسنقوم بأذن الله بحلها فوراّ

افضل طريقة لإضافة اداة اشتراك عبر المواقع الاجتماعية بشكل احترافي وشكل تحفة

بسم الله الصلاة والسلام على رسول الله , السلام عليكم احبائى وااخوانى متابعي مدونة تقنيه 

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

اضافه ستندم ان لم تضفها الان 

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

وهذه صورة الاضافة 

اضافه جميلة جدااا ابدأ معى الان لتتمكن من اضافتها قبل فوات الاواااااااااان

خطوات التركيب بالمدونة :

• بعد التسجيل ودخول المدونة الى لوحة التحكم
• نضغط على تخطيط 
• بعد ذلك نضغط اضافة اداة  HTML/JavaScript
• ثم نضع الكود التالى 
• وبعده تضغط حفظ

<div dir="rtl" style="text-align: right;" trbidi="on"> </span></div> <div> <font color="#444444" style="line-height: 26px;"><a href="http://www.twitter.com/</font><font color="#ff0000" style="line-height: 26px;">MDiabyan</font><font color="#444444" style="line-height: 26px;">" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGU78EyzieRMUk4VrdUgGf3IoCD16wYcsQ1VDLs8qVJMuzfgYlhQO4_KV5YaJ6wrF3rEa-4Hph2oLbKOZXEWFhgWtWisDc2rrKF_BpIlTY7VNwtginnXg9oZURLsvtD0wqq6xsb7tZMnU/s1600/twitter.png" /></a><span style="text-align: center;"> </span><a href="http://www.fb.com/</font><font color="#ff0000" style="line-height: 26px;">Mido.7s</font><font color="#444444" style="line-height: 26px;">" style="text-align: center;" target="_blank"><img alt="Facebook" original-title="تابعنى على الفيس بوك" src="http://www.shy22.com/upfilpng/xbc54601.png" style="margin: 0px 2px 0px 0px; padding: 0px;" /></a><a href="http://www.youtube.com/</font><font color="#ff0000" style="line-height: 26px;">MHShoman</font><span style="line-height: 26px;"><font color="#444444">" style="text-align: center;" target="_blank"><img alt="Youtube" original-title="تابعنى على يوتيوب" src="http://www.shy22.com/upfilpng/spi54630.png" style="margin: 0px 2px 0px 0px; padding: 0px;" /></a><span style="text-align: center;"> </span><a href="</font><font color="#ff0000">http://feeds.feedburner.com/blogspot/CfbLr</font><font color="#444444">" target="_blank"><img alt="" original-title="الخلاصة rss" src="http://www.shy22.com/upfilpng/oee54655.png" style="margin: 0px 2px 0px 0px; padding: 0px; text-align: center;" /></a></div>

كل ماعليك فقط هو تغيير ماباللون الاحمر بما يناسبك ( روابط مواقعك )

االف مبروك تم تركيب الاداة بنجاح

رجاءّ اذا واجهتك اى مشكلة فى وضع الاكواد لاتترد فى طرحها علينا

وسنقوم بأذن الله بحلها فوراّ

الطريقة المثلى لاضافة زر الصعود إلى أعلى لمدونات بلوجر

بسم الله الصلاة والسلام على رسول الله , السلام عليكم احبائى وااخوانى متابعي مدونة تقنيه 

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

متمنى من الله كامل الاستفادة لكم من هذا الموضوع ان شاء الله 

اولاّ : موضوعنا اليوم هو عن اضافة فى غاية الروعة والجمال وهى زر الصعود لأعلى 

اى عند الضغط عليه يرتفع لأعلى الصفحة وذلك للتسهيل على الزائر 

وهذه ستكون صورته 

الخطوات التركيب بالمدونة :

• بعد التسجيل ودخول المدونة الى لوحة التحكم
• نضغط على تخطيط 
• بعد ذلك نضغط اضافة اداة  HTML/JavaScript
• ثم نضع الكود التالى 
• وبعده تضغط حفظ

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" > var scrolltotop={ //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}, controlHTML: '<img src="http://im33.gulfup.com/pIUN1.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links state: {isvisible:false, shouldvisible:false}, scrollup:function(){ if (!this.cssfixedsupport) //if control is positioned using JavaScript this.$control.css({opacity:0}) //hide control immediately after clicking it var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists dest=jQuery('#'+dest).offset().top else dest=0 this.$body.animate({scrollTop: dest}, this.setting.scrollduration); }, keepfixed:function(){ var $window=jQuery(window) var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety this.$control.css({left:controlx+'px', top:controly+'px'}) }, togglecontrol:function(){ var scrolltop=jQuery(window).scrollTop() if (!this.cssfixedsupport) this.keepfixed() this.state.shouldvisible=(scrolltop>=this.setting. startline)? true : false if (this.state.shouldvisible && !this.state.isvisible){ this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) this.state.isvisible=true } else if (this.state.shouldvisible==false && this.state.isvisible){ this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) this.state.isvisible=false } }, init:function(){ jQuery(document).ready(function($){ var mainobj=scrolltotop var iebrws=document.all mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>') .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) .attr({title:'Scroll Back to Top'}) .click(function(){mainobj.scrollup(); return false}) .appendTo('body') if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text mainobj.$control.css({width:mainobj.$control.width ()}) //IE6- seems to require an explicit width on a DIV containing text mainobj.togglecontrol() $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ mainobj.scrollup() return false }) $(window).bind('scroll resize', function(e){ mainobj.togglecontrol() }) }) } } scrolltotop.init() </script>

الف مبروك تم تركيب الاداة بنجاح

رجاءّ اذا واجهتك اى مشكلة فى وضع الاكواد لاتترد فى طرحها علينا

وسنقوم بأذن الله بحلها فوراّ

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

بسم الله والحمدلله والصلاة والسلام على رسول الله،  الكثير منا يعرف اهمية المواقع الاجتماعيه في نشر المدونات والحصول على زوار منها فاليوم جئت لكم بإضافة ازرار المواقع الاجتماعيه الاضافه جميله جداً و تحوي على فيس بوك Facebook ، تويتر twitter، جوجل بلس google plus، الخلاصات feedburner، واداة الاشتراك عبر البريد Email Subscription  

تركيب الاضافة سهل جداً فقط قم بإضافة الكود التالي في اداة  HTML/JavaScript

وهذه صوره لمعاينه الاضافه

كود الإضافة

</font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2"><br></font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2"><br></font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2"><br></font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2"><br></font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2"><center> </font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2"><div align="center" id="face-alarab-Subscribe-wrapper"> </font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2"><div id="ig-subscription-optin" style="border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 250px;"> </font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2"><h3 id="face-alarab-title-text" style="color: white; font-size: 20px;"> </font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2">تابعنا لتتوصل بالجديد</h3> </font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=face-alarab', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> </font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2"><a class="social-icons" href="https://facebook.com/blogger.face.alarab"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoec5l3icPEQyUdLp3a2rhbuXFcv2Ffa0nbjcwdFibbvlMyYE6dSLiQucv7gnIfNPtmKDknDGaY99D-JIl3AO8IQu7ORcZjSW1VFsu-961J3obK55eB466rkW9kjXPGZ55CfraucsHm_Jt/s1600/Bloggertrix-facebook.png" /></a></font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2"><a class="social-icons" href="https://twitter.com/face_alarab"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEF3m1A78X7-z1zCRFA8ziI7LCxU0e9WSLDIutzVXm-P-vvMBKJ6Rgl5qTWfJyc7ZpgK0u-bcC97ncEfOXmQGaKen4wl60HoQrDi5C8m1xoEYFe-NG5W_LtNGbuxkIXZptRSeneJYmE6bQ/s1600/bloggertrix-twitter.png" /></a></font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2"><a class="social-icons" href="https://plus.google.com/userId"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieR73Rg1fDuJTjRVULesarrrLOOh8QNVJWHE_1NOKHJ_6jp8c5xuNzVBGHDqiFjTVqpDlIj5-YfPAauNlCw80yBlOq2Ku0ANgEG-1GEKZ0jLlRDnJpWnlg37r2cxTihef9LarinhK0tyNh/s1600/Bloggertrix-Googleplus.png" /></a></font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2"><a class="social-icons" href="http://www.feedburner.com/face-alarab"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnDaUFfAvWQC2HNWweSvRG3m75XsWnz0ad9t9zZcmjE8ez9tZu8Nkl_T06brof3t2O1_xqUL306xePmdENXQZYhJU-tTeGiSjk1IFlaNBut4RW3uzC436eBmIL_35Q5qvi8hqJpMlyRiLW/s1600/Bloggertrix-Rss.png" /></a></font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2"><input class="email" id="face-alarab_Subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="ضع بريدك الإلكتروني هنا" /><br /></font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2"><div class="separator" style="clear: both; text-align: center;"> </font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2"></div> </font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2"><input name="uri" type="hidden" value="face-alarab" /><input name="loc" type="hidden" value="en_US" /> <input id="digitalhubinc_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="إشتراك" /></form> </font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2"></div> </font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2"></div> </font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2"></center> </font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2"><style></font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2">a.social-icons {margin-right: 5px; height:40px;width:40px;}</font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2">a.social-icons:hover {opacity: .7;filter:alpha(opacity=70); }</font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2">#ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9;</font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2">background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important;</font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2">text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;</font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2">margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;</font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2">padding: 5px;border: none;}#ig-subscription-optin input.name {</font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2">background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRWtt18jIR3HoQXo5jBkocS7pXTLVVJ5wvf7uljwmdcZ0axV5vnlSJNZ-FifnaQc0TG1IdAZ6kDa-BZeTB-O2sVB5g2UDDYwWeG8BBAa6uYhhrn33bzZ-kndrMV94_tgJ5mlgQAzt7cUus/s1600/subscribe-name.png) no-repeat center right;}</font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2">#ig-subscription-optin input[type="text"] {border: 1px solid #111 !important;</font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2">font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}</font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2">#ig-subscription-optin input.email {background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUYE62FixyCeIitq0-Cm2bwnQmuffN5TdV_vkQhw0TThyxd2dE1efTzSwzEQt9Nu7T25aEBBCP7XfkUmMxsf9ow5mJ4huVH_5craTzd1VIc6-Cacqe0UZuFTotRN_n3Z-aMQr8hl8vt2fv/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input {</font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2">font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important;</font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2">font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;</font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2">text-transform: none;text-decoration: none;</font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2">text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif;</font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2">border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {</font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2">background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;</font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2">color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {</font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2">color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #960E17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheaEmNO5uCQkIQWQXk6YFQfNJQFrWR8awQLeIBndMCSkgatg7n91Z84dGCmfEWexwhbJnYDqVyW7VSFUO5hhF-r9eIRsdmGUfWeYXHq5GwtBnzy5BbFsOFQU9roV-Gj3YydSyRE4p52LNL/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;</font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2">padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;}</font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2">#ig-subscription-optin input[type="submit"]:hover {color: #FFA5A5;}</style></font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2"><br></font></p> <p style="text-align: left;"> <br></p> <p> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2"><span style="padding: 0px; margin: 0px; border: 0px; outline: 0px; vertical-align: baseline; text-align: left;"></span></font></p> <p style="text-align: left;"> <font face="Droid Arabic Kufi, Open Sans, Droid Arabic Kufi, sans-serif" size="2">

تنسيق الإضافه

• 
  
•  استبدل Blogger.Face.alarab برابط صفحتك على فيس بوك
• 
  
•  استبدل face-alarab بمعرف حسابك على فيديا برنر
• 
  
•  استبدل   face_alarab بإسم حسابك على تويتر
•  استبدل userId برابط صفحتك على جوجل بلس

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

شكراااااااااااااااااااااااا لكم

اضافة الشريط الجانبى المتحرك لشبكات التواصل الاجتماعى فيس بوك وتويتر وجوجل بلس بشكل انيق وجذاب

بسم الله الصلاة والسلام على رسول الله , السلام عليكم احبائى وااخوانى متابعي مدونة تقنيه 
هل تعتقد ان بلوجر تفتقر الى الاضافات المميزة؟؟

 هذا الاعتقاد خاطئ.فهناك كثير من الاضافات الاحترافيه التي تمكنك من تخصيص مدونتك وتطويرها لتظهر بشكل جذاب واحترافي ,واليوم باذن الله سوف نكسر هذا المعتقد بهذه الاضافه الاحترافيه والتي هي عباره عن شريط جانبي على شكل قائمه عموديه  تتضمن خمس من اشهر مواقع التواصل الاجتماعي  (twitter ,Facebook ,Google+, feedburner, tumblr  )والتي تتميز بشكلها الرائع والانسيابي والذي بدوره يزيد من جمالية المدونه واحترافيتها

طريقة اضافة هذه القائمه الى مدوناتكم

• اذهب إلى لوحة تحكم مدونتك
• إختر "تخطيط" ثم إضافة أداة ثم اخترHTML/Javascript
•  والآن الصق داخل المستطيل الكود التالي 

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55"><div id='social-sidebar'>
<ul><li>
<a class='entypo-twitter' href='https://twitter.com/MDiabyan' target='_blank'>
<span>Twitter</span>
</a></li><li>
<a class='entypo-gplus' href='https://plus.google.com/u/0/b/116411742657674307736' target='_blank'>
<span>google+</span>
</a></li><li>
<a class='entypo-tumblr' href='http://www.tumblr.net/mohamedshoman' target='_blank'>
<span>tumblr</span>
</a></li><li>
<a class='entypo-facebook' href='http://www.facebook.net/mido.7s' target='_blank'>
<span>facebook</span>
</a></li><li>
<a class='entypo-rss' href='http://feeds.feedburner.com/blogspot/CfbLr' target='_blank'>
<span>feedburner</span>
</a></li></ul></div>
<style type='text/css'>
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : /---------- */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
left: 0;
margin-top: -75px; /* (li * a:width) / -2 */
position: fixed;
top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
background: #121212;
color: #fff;
display: block;
height: 50px;
font-size: 18px;
line-height: 50px;
position: relative;
text-align: center;
width: 50px;
}
#social-sidebar ul li a:hover span {
left: 130%;
opacity: 1;
}
#social-sidebar ul li a span {
border-radius: 3px;
line-height: 24px;
left: -100%;
margin-top: -16px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
padding: 4px 8px;
position: absolute;
-webkit-transition: opacity .3s, left .4s;
-moz-transition: opacity .3s, left .4s;
-ms-transition: opacity .3s, left .4s;
-o-transition: opacity .3s, left .4s;
transition: opacity .3s, left .4s;
top: 50%;
z-index: -1;
}
#social-sidebar ul li a span:before {
content: "";
display: block;
height: 8px;
left: -4px;
margin-top: -4px;
position: absolute;
top: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="tumblr"]:hover,
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style>
</p></div></form>

تخصيص الاضافه

1- استبدال ماباللونblogspot/CfbLr باسم حسابك في فيدبرنر
 2- استبدال ماباللون MDiabyan باسم حسابك في تويتر
 3- استبدال ماباللونMido.7s باسم صفحتك في فيس بوك 4- استبدال ماباللون116411742657674307736 باسم حسابك جوجل بلس
 5- استبدال ماباللونmohamedshomani باسم حسابك في تمبلر

المصدر : مدونة الجعفرى