إضافة صندوق تابعنا على الفيسبوك بأشكال مختلفة

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

أولا : نقوم بالتوجه لمدونة بلوجر وبعدها إلى التخطيط .

تانيا : نقوم بإضافة أداة جديدة و نختار   'HTML/Javascript' 

تالتا: إختر الشكل الذي أعجبك و قم بتغيير "رابط صفحتك على الفيسبوك " برابط صفحتك.

الشكل الأول :

<div style="background: rgb(255, 123, 73);background: -moz-linear-gradient(90deg, rgb(255, 123, 73) 14%, rgb(232, 129, 116) 69%);background: -webkit-linear-gradient(90deg, rgb(255, 123, 73) 14%, rgb(232, 129, 116) 69%);background: -o-linear gradient(90deg, rgb(255, 123, 73) 14%, rgb(232, 129, 116) 69%);background: -ms-linear-gradient(90deg, rgb(255, 123, 73) 14%, rgb(232, 129, 116) 69%);background: linear-gradient(90deg, rgb(255, 123, 73) 14%, rgb(232, 129, 116) 69%);width:250px;padding:0 0px;margin:10px 0;border:solid 1px #c7c7c7;"> <div style="height: 250px; overflow: hidden;"> <a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=رابط صفحتك على الفيسبوك &width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe> </div> </div>     الشكل الثاني:

 

<div style=".width:248px; padding:10px 0px 10px 10px;height:230px;border-top:5px solid #CCCCCC;border-right:5px solid #CCCCCC;border-bottom:5px solid #cccccc;border-left:5px solid tomato;border-radius: 0px 30px 0px 0px;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgufLdGuPR5KjD0sUz_Ok3tP67FXC8CqqwDN8fQE1PdC_sEt0hUmcNP2VhJpvgxCOp0gxUdGr8eUskdi1J40GhyphenhyphenAPpxiozCUc6Adp7RyND6Ie91I4Kr1H6LTtQqJhK5i2G1HYQnfTOlUh5u/s320/3783098647_fb208001b5.jpg');overflow:hidden;.height:250px;width: 238px;border: 5px outset #f2f2f2;border-radius: 0px 13px 0px 0px;overflow: hidden;"> <div style="height: 250px; overflow: hidden;"> <a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=رابط صفحتك على الفيسبوك&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe> </div> </div>

المصدر: مدونة وشحال

أعجبك الموضوع ؟ , أنشره ليستفيد أصدقاءك أيضا

مدونة ويـــب نت

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

ضع تعليقا