اضافة صندوق منبثق للمعجبين facebook

السلام عليكم   
في هدا الموضوع البسيط والسريع سنتعرف على كيفية اضافة صندوق  المعجبين في الفايس بوك بشكل “منبثق” لمدونات بلوقر ,من مميزات هدا الصندوق انه سيقوم بزيادة عدد معجبيك في الفايسبوك بشكل سريع ,كدلك يتميز بعداد حيث يقوم بإغلاق نفسه اتوماتكيا دون ازعاج الزائر ,كما يمكن للزائر اغلاق الصندوق بضغطة زر ,كما  يمكنك من خلال هده الاضافة تسهيل الامور على الزائر حتى يتواصل مع مدونتك 
طريقة اضافة الصندوق 

ادهب الى لوحة تحكمك ثم تصميم ثم اضافة اداة جديدة ,قم بنسخ الكود التالي والصقه ثم احفظ
الكود

<!-- arabicash2.blogspot.com Likebox Pro FBFan Code Start --> <style>#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;}#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}#fblikepop #closeable{float:right;margin:7px 15px 0 0;}#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:14px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;}#fblikepop #actionHolder{height:30px;overflow:hidden;}#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style> <script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script> <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> <script type="text/javascript"> //<![CDATA[ kakinetworkdotcom01username="uboheshamalhamdani", kakinetworkdotcom01title="ادعمنا على الفيس بوك وشكرا لك؟", kakinetworkdotcom01skin="03", kakinetworkdotcom01time="60", kakinetworkdotcom01wait="0", kakinetworkdotcom01lang="fr" //]]> </script> <script type="text/javascript" src="http://kakinetworkdotcom.googlecode.com/svn/01/files/likeboxfbfanpro.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });}); //]]> </script> <!-- arabicash2.blogspot.com Likebox Pro FBFan Code End -->
في وسط الكود ,قم بتغير uboheshamalhamdani باسم صفحتك على الفايسبوك  

الى اللقلء....ابو هشام الحمداني

اكمل الموضوع

اضافة صندوق الاعجاب facebook لمدونات بلوجر بتقنية css

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

الطريقة اذهب الى لوحة التحكم ثم اضافة اداة جافا سكربت والصق الكود الموجود بالاسفل بداخلها

الكود

<style type="text/css"> .facebookOuter { background-color:#F4F4F4; width:250px; padding:10px 0 10px 10px; height:250px; border:1px solid #CCCCCC; } .facebookInner { height:250px; overflow:hidden; } </style> <div class="facebookOuter"> <div class="facebookInner"> <div class="fb-like-box" data-width="245" data-height="290" data-href=http://www.facebook.com/uboheshamalhamdani data-border-color="#F4F4F4" data-show-faces="true" data-stream="false" data-header="false"> </div> </div> </div> <div id="fb-root"> </div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>

غير هذا الاسم uboheshamalhamdani  باسم صفحتك على الفيس بك
تستطيع تغيير لون الصندوق بما يناسبك من خلال تغيير#F4F4F4

الى اللقاء ...ابو هشام

اكمل الموضوع

اضافة اضف الاضافة الى مدونتك

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

طريقة التركيب
عند كتابة تدوبنة و اردت ادراج اداة اضف الى مدونتك ما عليك سوى تحرير الـHTML و اضف الكود التالي

<form action="http://www.blogger.com/add-widget" method="POST"> <input type="hidden" name="اسم الاضافة" value="Your Widget Title "/><input name="widget.content" type="hidden" value="هنا كود الاضافة" /><input name="widget.template" type="hidden" value="<data:content/>" /><input type="hidden" name="infoUrl" value="http://vision500.blogspot.com"/><input type="hidden" name="logoUrl" value=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1NqRkv8D01KveAbfrBFABhqL69wUeELGMKO5ucILn_wjbGAFDLRpK7j3rHCjDsofs3eR_HbgTrvp28yT3bci_rHSYpzD2RvfF5zdxKKwPtwA8OlJyOx_XUl8WE7clSGo5AuBBAdw1Wwc/s1600/log.png "/><input alt="Add to Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" type="image" /></form> </div>
غير رابط المدونة vision500.blogspot.com الى رابط مدونتك

الى اللقاء ...ابو هشام

اكمل الموضوع

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

السلام عليكم

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

قم بذهاب الى القالب من بعد ذلك اختر تحرير الـ html
 قم بتوسيع القالب و ابحث عن الكود التالي

<body>
واضف بعده مباشرة الكود التالي

<a href='http://vision701.blogspot.com/p/foxyform.html>style='position: fixed; top: 40%; z-index: 4;'><img border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5IhkttvIHcSqTDyaKIlijpguShyphenhyphenNR7ry94eZpfSqbZVkhoVsS0IheiaPjwMTWWZYWMBGUMOKllV49UB-2VuLicFh5Q5Zq2HjVM-oglj3xUEnL17-ncUZltURGZPRBWLJndBqBp4dMmZ9a/s200/floating+contact+me+button.png" width="40" /></a> </div>
الى اللقاء...ابو هشام

اكمل الموضوع

إضافة Slideshow لآخر مواضيع المدونة...

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

 صادفتني هذه الإضافة  اضافة جميلة وسهلة جدا تستطيع تغيير فيها من خلال الكود الموجود بالاسفل

الاضافة  Slideshow لآخر مواضيع المدونة..  

الإضافة متوفرة بشكلين، الأول أفقي والآخر عمودي...

                                                                   

الإضافة الأفقية

الطريقة اذهب الى لوحة التحكم ثم اضافة اداة جافا سكلابت

الكود

<center> <iframe style="width: 465px; height: 120px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/last-post-slideshow.xml&up_NAME=vision500.blogspot.com&up_NBP=&up_PDEF=&up_LEN=120&up_PWH=120&up_PHT=90&up_DTime=&up_TTime=&up_RND=Yes&up_CLP=Yes&up_NAB=No&up_TCOL=%23000000&up_LCOL=&up_SCOL=%23c3d9ff&up_BCOL=%23f00&up_CCOL=%23d1dae3" allowtransparency="true" frameborder="0" scrolling="no">Last Post of Blogger Slideshow - Gadget Google - http://www.liens-du-vin.ch/last-post-slideshow.htm</iframe></center>
غير الرابطvision500.blogspot.com  برابط مدونتك

الإضافة العمودية:

اتبع نفس الطريقة اعلاه

الكود

<center> <iframe style="width: 236px; height: 236px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/last-post-slideshow-v.xml&up_NAME=vision500.blogspot.com&up_NBP=&up_PDEF=&up_LEN=128&up_PWH=120&up_PHT=90&up_DTime=&up_TTime=&up_RND=Yes&up_CLP=Yes&up_NAB=No&up_TCOL=%23000000&up_LCOL=&up_SCOL=%23c3d9ff&up_BCOL=%23f00&up_CCOL=%23d1dae3" allowtransparency="true" frameborder="0" scrolling="no">Last Post of Blogger Slideshow - Gadget Google - http://www.liens-du-vin.ch/last-post-slideshow.htm</iframe> </center>
ايضا عير الرابط برابط مدونتك

اكمل الموضوع

اضافة تجعل الزاوية العليا من الصفحة كسحابة

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

</head>
وضع فوقها: الكود الموجود بالاسفل

<style type='text/css'> img { behavior: url(iepngfix.htc) } #pageflip { position: relative; right: 0; top: 0; float: right; } #pageflip img { width: 50px; height: 52px; z-index: 99; position: absolute; right: 0; top: 0; -ms-interpolation-mode: bicubic; } #pageflip .msg_block { width: 50px; height: 50px; overflow: hidden; position: absolute; right: 0; top: 0; background: url(http://1.bp.blogspot.com/-gIoMKZYoYXw/TpGThk8VjEI/AAAAAAAAD3U/q9EUNpp7uZI/s1600/subscribe.png) no-repeat right top; } </style> <script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ //Page Flip on hover $("#pageflip").hover(function() { $("#pageflip img , .msg_block").stop() .animate({ width: '307px', height: '319px' }, 500); } , function() { $("#pageflip img").stop() .animate({ width: '50px', height: '52px' }, 220); $(".msg_block").stop() .animate({ width: '50px', height: '50px' }, 200); }); }); </script>
ثم ابحث عن هذا الوسم

<body>
 وضع تحتها الكود الموجود بالاسفل

<div id='pageflip'> <a href='http://feeds2.feedburner.com/anshuldudeja'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfMG8qDKQR9nX_PcWfbgAlXcjoH0LO49SZxJhwlMFJBvf_o_h74Huk0IBmCiogpoaO0fnsuqwXBFb0RzrTj6DK09Mz9rWWUZtQllzqFWFttIZW84LrtVjpXEdbUuQZPqCNzyoor5DWOENv/s1600/page_flip1.png'/></a> <div class='msg_block'> </div> </div>

غير رابط الصورة هذة برابط خاص بك

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfMG8qDKQR9nX_PcWfbgAlXcjoH0LO49SZxJhwlMFJBvf_o_h74Huk0IBmCiogpoaO0fnsuqwXBFb0RzrTj6DK09Mz9rWWUZtQllzqFWFttIZW84LrtVjpXEdbUuQZPqCNzyoor5DWOENv/s1600/page_flip1.png
وغيرالرابط الموجود بالاسفل برابطك مثلا اتصل بنا او الخلاصات

http://feeds2.feedburner.com/anshuldudeja
 الى اللقاء ....ابو هشام

اكمل الموضوع