Hasib Tutorial

Friday, January 18, 2013

Custom Logo to Wordpress Login Page

Technic1:
Add this code to your functions.php file . Preferable to add just before the last line (before ? line )

function my_custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url(http://bestcareerbd.com/wp-content/uploads/2012/09/Untitled-4.png) !important; }
</style>';
}

add_action('login_head', 'my_custom_login_logo');

N.B Colored Url will be changed by your url

Technic 2:
You can simply change the Logo image from wp-admin\images
This is more simple way without changing any code.

Technic 3:
You can also use plugin for this purpose. You can download Login Logo plugin from here

Advance Technic: If you want to change the title of your custom Logo the you need to change the code present in wp-login.php

Find out the code below:

} else {
$login_header_url = __( 'http://wordpress.org/' );
$login_header_title = __( 'Powered by WordPress' );
}

Change this code by your code, sample below:

} else {
$login_header_url = __( 'http:/bestcareerbd.com/' );
$login_header_title = __( 'Powered by Bestcareerbd' );
}

Thursday, January 17, 2013

Slide out Facebook Like Box

Just page this code where you want to show : ( You can add it to your sidebar/ widget)
Check Demo: JNnews24.com bdnews24.com,

<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>(function(d,s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

$(document).ready(function () {
bottompx = "0px";
$('#facebook_likebox').slideDown(1500).css({bottom: bottompx});
//facebook likebox
});
function closefaceboxlike(){
$('#facebook_likebox').slideUp(1500);
}</script>
<div id="facebook_likebox" style="float: left;
position: fixed;
left: 5px;
margin-bottom: 10px; border: 2px solid rgb(205, 219, 228);
background-color: #888fff; z-index: 10; bottom: 0px;">
<div style="position:absolute; left:-10px; margin-top:-10px;
margin-right:174px; z-index:15;">
<a onClick="Javascript: closefaceboxlike()" href="Javascript:void(0);">
<img height="20" src="http://paimages.prothom-alo.com/secured/theme/public/
newdesign/style/images/closebox.gif"> </a></div>
<fb:like-box>
<div class="fb-like-box" data-href="https://www.facebook.com/pages/JNnews24com/452277951480704"
data-width="150" data-height="180" data-show-faces="true"
data-stream="false" data-header="false"></div> </fb:like-box>

N.B: Change the red color portion by your own url

You can make other ads by replacing the Fade background colored portion. You can add image/paragraph etc.

Such as:

<div style="height:180px;width:280px;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div> or

<a href="http://jnnews24.com/?page_id=1622" target="_blank"><img style="vertical-align: top;" src="http://jnnews24.com/wp-content/uploads/2012/11/as.jpg" alt="" width="280" height="60" /></a>

Allow user to change font size- Fluid Text Resizer

Step 1: Add the following code to the <HEAD> section of your web page:


<style type="text/css">

.controlstyle a{ /*links inside DIV sizecontroldiv*/
outline:none;
float: right;
}

.controlstyle a img{ /*image links inside DIV sizecontroldiv*/
border-width:0;float: right;
}

.controlstyle a.selectedcontrol img{ /*selected control's image*/
border-bottom:4px solid darkred;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex9/fluidtextresizer.js">

/***********************************************
* Fluid Text Resizer- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

<script type="text/javascript">

var mytextsizer=new fluidtextresizer({
controlsdiv: "sizecontroldiv", //id of special div containing your resize controls. Enter "" if not defined
targets: ["body"], //target elements to resize text within: ["selector1", "selector2", etc]
levels: 3, //number of levels users can magnify (or shrink) text
persist: "session", //enter "session" or "none"
animate: 200 //animation duration of text resize. Enter 0 to disable
})

</script>



Step 2: Now add the following sample resize controls to your page:



<div id="sizecontroldiv" class="controlstyle">

<a href="#smaller"><img src="http://jnnews24.com/wp-content/uploads/2013/01/fontminus.gif" /></a> <a href="javascript:mytextsizer.setFontLevel(0)"><a href="#fontsize2"><img src="http://jnnews24.com/wp-content/uploads/2013/01/2.gif" /></a></a> <a href="#bigger"><img src="http://jnnews24.com/wp-content/uploads/2013/01/fontplus.gif" /></a>



Source: http://www.dynamicdrive.com/dynamicindex9/fluidtextresizer.htm

Free Social Traffic pop for Website

System 1
Step1: Add a HTML/JavaScript Gadget.

Step2: Copy Down Below Code after Replacing Facebook URL .

<link type="text/css" rel="stylesheet" href="https://sites.google.com/site/bloggerhackingcom/home/download/social-traffic-pop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script>
<script type="text/javascript" src="https://sites.google.com/site/bloggerhackingcom/home/download/jquery.stp.min.js">
</script>
<script>     $(document).ready(function(){         $().socialTrafficPop({        timeout: 30,   title: "Welcome To bestcareerbd.com ",
message: 'Please Like And <em>Help Us To Grow</em>! ',   google_url: "", google_size: "tall",   fb_url: "https://www.facebook.com/pages/JNnews24com/452277951480704",   fb_layout: "box_count",     closeable: true,      advancedClose: false,      opacity: '0.45', twitter_on: true
});
});
</script>

Source: http://www.bloggerhacking.com/2012/07/free-social-traffic-pop-for-blogger.html

System 2

Copi this code:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'/>
    <script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>  
    <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

    <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    
    <script src='http://onlinewebsitebuilder.in/js/jquery.stp.js' type='text/javascript'/>

    <script>
     
    $(document).ready(function(){          
                                   
            $().socialTrafficPop({
                    timeout: 30,
                    title: "Help Us To Grow",
                    message: 'Share my hot new article with your friends! (<a href="http://www.cybergeekshop.com/">Get Widget</a>)',
                    google_url: "Your-website-link",
                    facebook_url: "Your-website-link",
                    closeable: false,
                    advancedClose: false,
                    opacity: '0.45',
                    twitter_method: "tweet"
            });
           
    });
     
     
    </script>
    <style type='text/css'>
#stp-bg{
    display:none;
    position:fixed;
    _position:absolute; /* hack for IE 6*/
    height:100%;
    width:100%;
    top:0;
    left:0;
    background:#000000; 
    z-index:998;
}

#stp-main{
    position:fixed;
    _position:absolute; /* hack for IE 6*/
    display:none;
    width:450px;
    border:7px solid #2f2f2f;
    background:#fff;
    z-index:999;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    margin:0pt;
    padding:0pt;
    color:#333333;
    text-align:left;
    font-family:arial,sans-serif !important;
    font-size:13px;
}

#stp-title{
    font-family:&quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;
    font-size:12px;
    padding:12px 0px 9px 10px;
    font-size:16px;
}

#stp-close{
    float:right;
    font-size:12px;
    color:#000!important;
    margin:0 13px 0 0;
    border-bottom:0px !important;
    text-decoration:underline !important;
}

#stp-close:hover{
    text-decoration:none !important;
}

#stp-msg-cont{
    border-bottom:1px solid #cddcf9;
    border-top:1px solid #cddcf9;
    background:#ebf2fc;
    padding:16px;
}

#stp-msg{
    margin:0 0 22px 0;
}

#stp-bottom{
    padding:5px 10px 10px 0px;
}

#stp-counter{
    font-size:11px !important;
    text-align:right;
}

.stp-button{
    float:left;
    width:120px;
}

.step-clear{
    clear:both !important;
}
</style>

Replace the two line from above code.

google_url: "Your-website-link",
facebook_url: "Your-website-link",

Wednesday, January 16, 2013

Showing Date in Bangla to your Website

This is for Showing Hijri Date in Bangla:

Example1: ৪ রবিউল আউয়াল, ১৪৩৪ হিজরীর
<script type="text/javascript" src="http://writebangla.sourceforge.net/HijriDate/index1.php"></script>

Example2: আজ ৪ রবিউল আউয়াল, ১৪৩৪ হিজরী

Example3 ইয়াওমুল খামীসি, ৪ রবিউল আউয়াল, ১৪৩৪ হিজরী

Example4: আজ ৪ রবিউল আউয়াল, ১৪৩৪ হিজরী, ইয়াওমুল খামীসি

<script type="text/javascript" src="http://writebangla.sourceforge.net/HijriDate/index4.php"></script>

This is for Showing English Date in Bangla:

Example1:   আজ ১৭ জানুয়ারি ২০১৩ খ্রিষ্টাব্দ, বৃহস্পতিবার
<script type="text/javascript" src="http://writebangla.sourceforge.net/EnglishDate/index4.php"></script>

Example2: ১৭ জানুয়ারি ২০১৩ খ্রিষ্টাব্দ, বৃহস্পতিবার
<script type="text/javascript" src="http://writebangla.sourceforge.net/EnglishDate/index3.php"></script>

Example3   আজ ১৭ জানুয়ারি ২০১৩ খ্রিষ্টাব্দ, বৃহস্পতিবার
<script type="text/javascript" src="http://writebangla.sourceforge.net/EnglishDate/index2.php"></script>

Example4:   আজ ১৭ জানুয়ারি ২০১৩ খ্রিষ্টাব্দ
<script type="text/javascript" src="http://writebangla.sourceforge.net/EnglishDate/index1.php"></script>

This is for Showing Bangla Date in Bangla:

Example1:   আজ ৩ মাঘ ১৪১৯ বঙ্গাব্দ
<script type="text/javascript" src="http://writebangla.sourceforge.net/BanglaDate/index.php"></script>

Example2: আজ ৩ মাঘ ১৪১৯ বঙ্গাব্দ, বুধবার

Example3 বুধবার,৩ মাঘ ১৪১৯ বঙ্গাব্দ

Showing at a time
<script type="text/javascript" src="http://writebangla.sourceforge.net/EnglishDate/index4.php"></script>, <script type="text/javascript" src="http://writebangla.sourceforge.net/BanglaDate/index3.php"></script>, <script type="text/javascript" src="http://writebangla.sourceforge.net/HijriDate/index1.php"></script>

Adding Translator for Site

Just Paste this code to your site where you want to show the translator :

<script language="JavaScript" src="http://freehostedscripts.net/fhstrans.php"></script>
<SCRIPT language=JavaScript type=text/JavaScript>translation_flags_g();</SCRIPT>

Adding Snow Effect in Website

Just pate this code to your site :
System1:

<script type="text/javascript">

/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/

//Configure below to change URL path to the snow image
var snowsrc="http://www.dynamicdrive.com/dynamicindex3/snow.gif"
// Configure below to change number of snow to render
var no = 10;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "http://www.dynamicdrive.com/dynamicindex3/snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}

function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}

if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}

</script>

System2: <marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:120; top:50; width:25; height:450; ..;"><IMG SRC="http://myspacetools.eu/images/snow.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:170; top:70; width:25; height:300; ..;"><IMG SRC="http://myspacetools.eu/images/snow.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="5" style="position:absolute;left:220; top:90; width:25; height:250; ..;"><IMG SRC="http://myspacetools.eu/images/snow.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="6" style="position:absolute; left:270; top:30; width:25; height:370; ..;"><IMG SRC="http://myspacetools.eu/images/snow.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="7" style="position:absolute; left:320; top:30; width:25; height:340; ..;"><IMG SRC="http://myspacetools.eu/images/snow.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:240; top:30; width:25; height:70; ..;"><IMG SRC="http://myspacetools.eu/images/snow.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:250; top:30; width:25; height:50; ..;"><IMG SRC="http://myspacetools.eu/images/snow.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:290; top:30; width:25; height:60; ..;"><IMG SRC="http://myspacetools.eu/images/snow.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:100;top:130; width:25;height:80; ..;"><IMG SRC="http://myspacetools.eu/images/snow.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:360; top:30; width:25; height:330; ..;"><IMG SRC="http://myspacetools.eu/images/snow.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:390; top:50;width:25; height:400; ..;"><IMG SRC="http://myspacetools.eu/images/snow.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:440; top:70; width:25; height:300; ..;"><IMG SRC="http://myspacetools.eu/images/snow.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:470;top:100; width:25; height:300; ..;"><IMG SRC="http://myspacetools.eu/images/snow.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:560; top:70; width:25; height:300; ..;"><IMG SRC="http://myspacetools.eu/images/snow.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:590; top:100; width:25; height:300; ..;"><IMG SRC="http://myspacetools.eu/images/snow.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:520; top:170; width:25; height:300; ..;"><IMG SRC="http://myspacetools.eu/images/snow.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:610; top:200; width:25; height:300; ..;"><IMG SRC="http://myspacetools.eu/images/snow.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:650; top:250; width:25; height:340; ..;"><IMG SRC="http://myspacetools.eu/images/snow.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:690; top:290; width:25; height:380;..;"><IMG SRC="c"></marquee> <marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:660; top:40; width:25; height:70; ..;"><IMG SRC="http://myspacetools.eu/images/snow.gif"></marquee>