appalapacia:

Okay, hi guys, I made a banner to go on my blog in order to raise awareness on this.

Kony is a war criminal who abducts children in Africa and forces them to become sex slaves or child soldiers. The problem is that most of the world doesn’t know about him. There is an international effort to raise awareness so that he can be stopped. You can learn more about it here.

Putting this banner on your blog isn’t much, but it can help raise awareness and anyone who visits will see it and may learn more about it. The banner links to the website and hopefully we can get more people involved and aware. There is also a link to this post so that people can easily add this to their own blog.

CSS - paste this anywhere within the <style></style> tags of your theme.

/* ---------------------- KONY 2012 ---------------------- */

.kony{
position:fixed;
top:0px;
left:85px;
font-style:italic;
height:20px;
padding: 0px 5px 0px 5px;
color:{color:Buttons Text};
background-color:#ff242a;
width:190px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 15px ;
-moz-border-radius-bottomleft: 15px ;
-webkit-border-radius: 0px 0px 15px 15px ;
border-radius: 0px 0px 15px 15px ;
-webkit-transition: all 1.2s ;
-moz-transition: all 1.2s ;
-o-transition: all 1.2s ;
transition: all 1.2s ;
z-index:2000;
}

.kony img{
position:absolute;
bottom:0px;
left:0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 10px ;
-moz-border-radius-bottomleft: 10px ;
-webkit-border-radius: 0px 0px 10px 10px ;
border-radius: 0px 0px 10px 10px ;
}

.kony:hover{
padding-top:70px;
-webkit-transition: all 1.2s ;
-moz-transition: all 1.2s ;
-o-transition: all 1.2s ;
transition: all 1.2s ;
}

.konytext{
line-height:12px;
font-size:9px;
font-family: georgia;
width:180px;
padding: 0px 5px 5px 5px;
color:#ffffff;
position:absolute;
bottom:18px;
text-align:center;
}

.konytext a{
color:#000000;
}

HTML - paste this after the </style> tag in your theme.

<div class="kony"><div class="konytext">Joseph Kony is one of the world's worst war criminals and I support the international effort to arrest him, disarm the LRA, and bring the child soldiers home. <b><a href="http://appalapacia.tumblr.com/post/18856075356">Add this to your blog.</a></b></div><a href="http://www.kony2012.com/"><img src="https://static.tumblr.com/75z8peb/LlEm0h8cv/kony.png"></a></div>

Customizing the banner:

If you wish to move the banner along the screen you just need to change this part:

.kony{
position:fixed;
top:0px;
left:85px;

You can move it more to the left or place it on the right or anything you want.