কিভাবে তৈরী করবেন আপনার সাইট এর স্লাইডিং লগইন প্যানেল

নাম শুনেই বুঝতে পারছেন আজকের টিউনটি কি নিয়ে।
যারা নিজের সার্ভারে ওয়ার্ডপ্রেস ব্যবহার করেন তারাই একমাত্র এই সুবিধাটি পাবেন।

এটি jQuery ও ওয়ার্ডপ্রেস ডিফল্ট লগইন কোড এর সংমিশ্রনে তৈরী, তাই এটি তৈরী করা খুবই সহজ।

এটি ব্যবহার করার ফলে আপনাকে আর কষ্ট করে লগইন পেইজে যেতে হবে না লগইন করার জন্য এবং খুব সহজে লগ আউট করতে পারবেন।

স্লাইডিং লগইন প্যানেল চিত্র ১

স্লাইডিং লগইন প্যানেল চিত্র-১

স্লাইডিং লগইন প্যানেল চিত্র ২

স্লাইডিং লগইন প্যানেল চিত্র ২

ডেমো দেখুন এখানে

কিভাবে আপনারা এই স্লাইডিং লগইন প্যানেল আপনার ওয়ার্ডপ্রেস থিমে ব্যাবহার করবেন তা আপনাদের আমি ধাপে ধাপে বুঝিয়ে দিচ্ছি।

তাহলে চলুন শুরু করা যাকঃ

১. জাভাস্ক্রিপ্ট (Javascript)

প্রথমে আপনার ওয়ার্ডপ্রেস থিমের header.php ফাইল টি ওপেন করুন।
এবার নিচে আমার দেওয়া কোড গুলো কপি করে (</head>) এই ট্যাগটির পূর্বে কোড গুলো পেস্ট করুন।

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

<script type="text/javascript">

$(document).ready(function(){

$(".btn-slide").click(function(){

$("#slide-panel").slideToggle("slow");

});

});

</script>

এই কোড গুলো বা এই স্ক্রিপ টাকে বলা হয় jQuery এবং এটি তে গুগোল API ব্যাবহার করা হয়েছে। কারন গুগোল API আপনার স্লাইডিং লগইন প্যানেল এর ইফেক্ট এর কাজে করে।

২. এইচ টি এম এল (HTML)

একই ভাবে header.php ফাইলে নিচে আমার দেওয়া কোড গুলো কপি করে (<body>) এই ট্যাগটির পর কোড গুলো পেস্ট করুন।

<div id="slide-panel"><!--SLIDE PANEL STARTS-->

<?php if ( ! is_user_logged_in() ){ ?>

<h2>Login</h2>

<div>

<div>

<form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">

<label for="log">Username : </label><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" />&nbsp;&nbsp;&nbsp;&nbsp;

<label for="pwd">Password : </label><input type="password" name="pwd" id="pwd" size="20" />

<input type="submit" name="submit" value="Login" />

<label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label><input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>” />

</form>

</div>

<div>

<a href=”<?php echo get_option(’home’); ?>/wp-register.php”>Register</a> |

<a href=”<?php echo get_option(’home’); ?>/wp-login.php?action=lostpassword”>Recover password</a>

</div>

</div><!–loginform ends–>

<?php } else { ?>

<div>

<h2>Control Panel</h2><ul>

<li><a href=”<?php echo get_option(’home’); ?>/wp-admin/”>Dashboard</a></li> |

<li><a href=”<?php echo get_option(’home’); ?>/wp-admin/post-new.php”>Write new Post</a></li> |

<li><a href=”<?php echo get_option(’home’); ?>/wp-admin/page-new.php”>Write new Page</a></li> |

<li><a href=”<?php echo wp_logout_url( get_bloginfo(’url’) ); ?>” title=”Logout”>Logout</a></li></ul>

</div><!–loginform ends–>

<?php }?>

</div><!–SLIDE PANEL ENDS–>

<div><a href=”#”><?php if ( ! is_user_logged_in() ){ ?>Login<?php } else { ?>Logout<?php }?></a></div><!–LOGIN BUTTON TEXT–>

উপরোক্ত কোড গুলো আপনার ওয়ার্ডপ্রেস থিমের উপরে স্লাইডিং লগইন প্যানেল কে সংযুক্ত করবে।

৩. সি এস এস (CSS)

তিন ভাগের দুই ভাগ কাজ শেষ। এটা হল শেষ ভাগ।

এবার আপনারা Style.css ফাইলটি চালু করুন এবং নিচে আমার দেওয়া কোড গুলো কপি করে ফাইলটির একেবারে নিচে কোড গুলো পেস্ট করুন।

* {margin:0; padding:0; outline:0;}

#slide-panel{ background-color:#000;border-bottom-style:solid;border-bottom-width:2px;display:none;height:100px;margin:auto;}

.slide {width:950px; margin:auto;}

.btn-slide:link, .btn-slide:visited{color:#fff; float:right; display:block;font-size:14px; text-transform:uppercase; font-weight:bold;height:26px; padding:3px 0 3px 0;line-height:22px;text-align:center;text-decoration:none;width:100px; background-color:#000; font-family:Arial;}

.loginform {width:950px; margin:auto; color:#999; font-family:Arial, Helvetica, sans-serif;}

.formdetails {color:#FFF; font-size:12px;padding:5px;}

.formdetails input{border:none; padding:2px 5px 2px 5px; background-color:#EFEFEF;}

.loginregister {color:#999; padding:5px;}

.loginregister a:link, .loginregister a:visited {color:#FFF; font-size:11px; text-decoration:underline;}

.loginform h2 {padding:10px 10px 10px 0; font-size:18px; font-weight:normal; text-transform:uppercase;}

.loginform ul li {display:inline;}

.loginform ul li a:link, .loginform ul li a:visited {color:#FFF; font-size:12px; text-decoration:underline;}

ব্যাস কাজ শেষ।

এবার আপনার থিমটি চালু করেন।

উপোভোগ করুন আপনার থিমের স্লাইডিং লগইন প্যানেল।কোন সমস্যা থাকলে আমাকে জানান।

বাংলা স্লাইডিং লগইন প্যানেল করার জন্য আমাকে জানা তে পারেন।

আর এই স্লাইডিং লগইন প্যানেল পরিবর্তন করা সহজ।

না পারলে আমাকে জানাতে পারেন কোন সমস্যা নাই।

প্রথম প্রকাশিতঃ- রলিন এর জগৎ

Level New

আমি এ.আর.রলিন। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর 9 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 18 টি টিউন ও 276 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

আমি একজন প্রযুক্তি প্রেমিক...................... প্রযুক্তি নিয়ে আমি চিন্তা ভাবনা করি। প্রযুক্তির কাছাকাছি থাকতে পছন্দ করি। http://arrolin.co.cc


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

Level 2

এ কিছু করার কোন মানে আছে? শুধু http://wordpress.org/extend/plugins/sidebar-login/ এই plugin টা ব্যবহার করলেই হয়। এটা http://wordpress.org/extend/plugins/superslider-login/ আরও ভাল

    I think it is better than plugin. The codes are lighter than the code of that plugin. Again,it will save much space. I am using this plugin but I am turn to this codes
    …cheers…

    Level New

    @ মাসুদ ভায়া এত কিছু করার ত কারন আছেই। আপনি তো শুধু থিসিস থিম নিয়ে থাকেন। আমাকে ফ্রি থিম নিয়ে কাজ করতে হয়। কিছু শিখতে হলে ঘাটাঘাটি করতে হয়। আর শুধু প্লাগইন্ নিয়ে পড়ে থাকলে হয় না। নিজে কে কিছু করতে হয়। প্লাগইন্ একটি সাইট কে ধীর গতির করে দেয়। আপনার সাইট টা অনেক সুন্দর ও কনটেন্ট গুলো ভালো। মন্তব্যের জন্য ধন্যবাদ।

    @টিউটো ভাই আপনার মন্তব্যের জন্য ধন্যবাদ। আপনার মন্তব্য আমাকে উৎসাহিত করেছে।

Level 0

ভাল টিউন, আপনাকে ধন্যবাদ।

Level New

@ সালেহ ভাই ধন্যবাদ আপনাকেও।

সেইরকম টিউওন। কিন্তু ফ্রি ইউজারদের জন্য কি এরকম অপশন নেই?

    আপনি ওয়ার্ডপ্রেস কোন ফ্রি সাইটে ইনস্টল>আপলোড করুন মানে অন্য জায়গায় ফ্রি হোস্টিং করুন।

অসাধারন টিউন। তোমার এই টিউনটি পড়ে খুবই ভাল লাগল।

তুমি তোমার সাইটটি একটু এডিট করলে ভাল হয়। যেমন পোষ্টের শিরোনাম এর ফন্ট সাইজ এবং পোস্ট পেইজে অন্যান্য বিষয়।

    Level New

    ধন্যবাদ শাকিল ভাই। পেইজের অন্যান্য বিষয় যেমন?

Level New

@রনি পারভেজ ভাই মন্তব্যের জন্য ধন্যবাদ। “(কিন্তু ফ্রি ইউজারদের জন্য কি এরকম অপশন নেই?)” এই কথা টি বলতে কি বুঝাচ্ছেন ভাই?
আমার সাথে কথা বলতে চাইলে http://www.livenetcafe.com এ বাংলা চ্যাট এসে আমার সাথে কথা বলতে পারেন।

Level 0

ভাল টিউন…………………… ধন্যবাদ।

Level 0

দয়া করে কেউ এই কোড টি ব্যবহার করবেন না ।আমি শুধু কমেন্টস করার জন্য এই মাত্র সাইন আপ করেছি ।সবাইকে সাবধান করার জন্য। এটি বাবহার করার পর আমার সাইট ডাউন হয়ে গেসে। এডমিন প্যানেল লগইন করতে পারছিনা।

Level 0

এডমিন প্লিজ কমেন্টস টি ডিলেট করবেন না ।