Facebook like add a post form – for blogs

      No Comments on Facebook like add a post form – for blogs

Facebook like add a post form for blogging sites:

Facebook like add a post form


Facebook like add a post form:HTML:

<div class="cont_fb">  
<div class="modal fb_cont_scanfcode" id="myfb">

        <img src="cropped-scanfcode1-300x300.png" alt="" width="34" height="34" style="border:solid 1px lightgray;padding:2px;"/><input class="sc_span" placeholder="Write something.." style="font-size:20px;"><button type="button" class="close" onclick="close_fb();" data-dismiss="modal">&times;</button>
<div class="lower_fb_button">
<button type="submit" style="padding:2px;color:#fff;">Publish</button>
</div>
</div>

<div class="fb_cont_scanfcode">

  <img src="cropped-scanfcode1-300x300.png" alt="" width="34" height="34"  /><input class="sc_span" placeholder="Write something.." id="focus_fb" onfocus="show_fb();"  data-toggle="modal" data-target="#myfb">
<hr>
</div>
</div>

CSS:

.cont_fb
{
  background-color:#f2f2f2;
  padding:2%;
  width:100%;
  position:relative;
 
}
.fb_cont_scanfcode
{ 
   width:80%;
   border-radius:5px;
   padding:10px 15px 0px 15px;
   border:solid 1px lightgray;
   background-color:#fff;
   text-align:left;
  
}
.sc_span
{
 vertical-align:central;
 color:#666;
 margin-left:20px;
 width:60%;
 border-width:0px;
 display:inline;
}
#myfb
{
position:absolute;
width:80%;
display:none;
top:0px;left:2%;
border-radius:5px;
padding:15px;margin-top:10px;
}
.lower_fb_button
{
  height:12px;padding:0px;border-top:solid 1px lightgray;text-align:right;margin:4px 0px;
}
.lower_fb_button button
{
  background-color:#4267b2;font-size:11px;padding:10px;font-weight:bold;border-radius:2px;width:80px;height:25px;margin-top:2px;
}


Java Script:

<script>
function show_fb()
{
  document.getElementById("myfb").style.display="block";
}
function close_fb()
{
 document.getElementById("myfb").style.display="none";
}
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *