Google+ Followers

Будь в курсе событий!

04.01.2014

Facebook Like Box гаджет, для блогспот с применением CSS.

Leave a Comment


Привет друзья праздники еще не закончились, а я решил написать несколько статей.И первая статья будет о виджете Facebook Like Box, этот виджет можно сделать себе на сайте фэйсбука. Но к сожалению виджет выглядит в тонах фэйсбук а это сине-белый фон, и изменить его не как нельзя а это очень не радует. И тогда к нам на помощь приходит CSS стили, и получается что то вроде того как вы увидите на скриншотах сверху, и снизу.Для установки виджета нам понадобится зайти в свой блог, панель меню Дизайн, далее добавить гаджет, ищем в списке HTMLjavascript добавляем вот этот html css код. Этот код от того гаджета, что вы видели на скриншоте сверху. Самое главное замените, где я пометил маркером вот это Cashsfromprogram  на id своей странички в фэйсбуке.

<div style="background: rgb(0, 255, 0);background: -moz-linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);background: -webkit-linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);background: -o-linear gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);background: -ms-linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);background: linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);width:250px;padding:0 0px;margin:10px 0;border:solid 1px #c7c7c7;"><div style="height: 250px; overflow: hidden;">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FCashsfromprogram&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>







                                                Второй же виджет выглядит так




                      Устанавливаем так же в виджет,скрипт установки будет такой.
 <div style="background: rgb(255, 192, 203);background: -moz-linear-gradient(90deg, rgb(255, 192, 203) 14%, rgb(249, 228, 175) 69%);background: -webkit-linear-gradient(90deg, rgb(255, 192, 203) 14%, rgb(249, 228, 175) 69%);background: -o-linear gradient(90deg, rgb(255, 192, 203) 14%, rgb(249, 228, 175) 69%);background: -ms-linear-gradient(90deg, rgb(255, 192, 203) 14%, rgb(249, 228, 175) 69%);background: linear-gradient(90deg, rgb(255, 192, 203) 14%, rgb(249, 228, 175) 69%);width:250px;padding:0 0px;margin:10px 0;border:solid 1px #c7c7c7;"><div style="height: 250px; overflow: hidden;"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FCashsfromprogram&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe>
</div>





                            Третья же коробка виджет фэйсбук выглядит так, вставляем в HTMLjavascript гаджет.




<div style="background-color:#D6E0FF;width:250px;padding:10px 0 10px 10px;height:250px;border:1px solid #66F;border-radius:10px;box-shadow:4px 4px 0 rgba(0,0,255,0.45);"><div style="height: 250px; overflow: hidden;"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FCashsfromprogram&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe></div>



Как вставили скрипт в виджет, не забываем нажать на сохранение на этом все.

0 коммент. :

© 2012-2017 Cash's from program