Welcome to our website

Do you have an idea that could positively impact life but don't know where to start?

Well, Africarerafiki Creative Solutions is a multi-sector social venture that aims at offering and providing freelance consultancy services to individuals, philanthropists, small businesses, Non-Profits, and the social sector development in general.

Whether the Public or the private sector, we work and touch all areas of life from Education, Health, Agriculture, Human Rights, Water and Sanitation, Environment, Habitat,Transportation and Infrustructure, Culture, businesses, and Technology.

Friday, September 27, 2013

How to Add a Facebook Popup Like box to Blogger/Blog that scrolls down.

Another cool thing that will power up your facebook likes, is here. I have been seeing so many other bloggers doing this and I liked it, so I thought why not do it as well. So here I have decided to show you on how I added a pop up Facebook like box on my blog. I hope that you will find it easy to do so. But make sure that before you like it to your Facebook  ensure that you have an easy url that leads you your page. If you don't create a url by going here CLICK HERE and give your Facebook page its user name and a good url.

Now lets see how we can get this done.

This is how it will pop up. But this one usually slides with the pages.



How to Add ‘Tech-Scrolling Facebook Popup Like box widget for blogger?
Sign into your blogger account
Select ‘Layout’ link tab
Click on ‘Add a Gadget’ and select ‘HTML/Javascript’ link tab widget
Now copy the below code and paste in it.

<style type='text/css'>
#blogtariffFBpop {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#FEFEFE;font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#blogtariffFBpop a.bsclose {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000000;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:25px;
cursor:pointer;
}
</style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top
$('#blogtariffFBpop').animate({top:"50px"}, 1000);
// Widget by www.blogtariff.com
$('a.bsclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='blogtariffFBpop'>
<!-- Widget by www.blogtariff.com Start -->
<center><b><a class="Blogtariff">Don't Forget To Join me on my page </a></b></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fkingfaznelcaseb&amp;width=292&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe></center>
<!-- Widget by www.blogtariff.com End -->
<a class='bsclose' href='#'>&times;</a>
<center style="float:right; margin-right:10px;"><span style="font-size:xx-small; color:#000; text-decoration:none;">+Get this at</span> <a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href="http://www.whispernaija.com/2013/05/how-to-add-facbook-popup-like-box.html">whisperNaija</a></center>
</div>

HOW YOU CAN TURN IT TO YOUR
Replace FEFEFE color code with your choice color code by using our Color Chart
Replace kingfaznelcaseb word with your facebook page ID
- See more at: http://www.whispernaija.com/2013/05/how-to-add-facbook-popup-like-box.html#sthash.nWONSgI0.dpuf 

How to add a stylish Flying twitter bird widget to your blog!

I just had a question from one of my friend who wanted to know how I added the flying twitter bird to my blog. I thought hey, why not share it with you as well so that you can have an idea on how I did this and how others people are doing this online as well. I write my posts both in swahili and English, so if you are a Tanzanian and you want to get this in swahili then click HERE or go to the blogging tips in swahili category and you will get it in the official Tanzanian language.

So lets get started, Its pretty simple and easy to do..





Just log in to Blogger...

 HOW TO ADD  FLYING TWITTER BIRD WIDGET TO BLOGGER

1.Copy the below code and paste it in Notepad.

<!-- Twitter Bird Widget for Blogger by yinyangyohackers.blogspot.in -->
<script type="text/javascript" src="http://btsnts.googlecode.com/files/btsnts-tripleflap.js">
</script>
<script type="text/javascript">
var twitterAccount = "Rumishael101";
var tweetThisText = " <data:blog.pageTitle/> : <data:blog.url/> ";
tripleflapInit();
</script>
<span style="font-size:11px;position:absolute;"><a title='Blogger Widget by yinyangyohackers.blogspot.in' href="yinyangyohackers.blogspot.in" target='_blank'>Blogger Widgets</a></span>

2.Change Rumishael101 with your twitter username  and copy it.

3.Go to Blogger Dashboard > Design > Page Layout.

4.Add a Gadget > HTML/Javascript.


5.Paste the code and save it and refresh your blog.

You will see it flying all over your blog. Enjoy it and I hope that the post was helpful and please don't forget to subscribe.....

Twitter Delicious Facebook Digg Favorites More