Blue Ice - ব্লগার ব্লগের জন্য একটি রুচিশীল কমেন্ট থীম

একটি সাইট পরিচিত হবার পিছনে অনেক গুন থাকে যেমন সাইটে ভালো লেখা থাকতে হবে,ডিজাইন

ভালো হতে হবে,লোডিং টাইম কম হবে,দরকারি জিনিস থাকতে হবে ভালোভাবে SEO করতে হবে ইত্যাদি।এর কমেন্ট সিস্টেম টা ডিজাইন এর একটা অংশ।সুন্দর ডিজাইন একটা সাইটের অনেক ভালো একটা দিক।
প্রতিটা ব্লগেই একটা নিজস্ব কমেন্ট থীম থাকে কিন্তু সেটা অনেক সময় মনের মত হয় না এজন্য এই থীমটা অনেক ভালো একটা থীম।এটা দেখতে অনেকটা বরফের কালারে মত তাই এর নাম দেয়া হয়েছে Blue Ice.এই থীম টাতে আছে নাম্বার কমেন্ট তাছাড়া অনেক সুন্দর ডিজাইন।

কেমন দেখা যাবে সেটা দেখার জন্য নিচের ছবির উপর ক্লিক করুন।

কিভাবে ইন্সটল করবেনঃ

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

• প্রথমে আপনার ব্লগে প্রবেশ করুন। 
• Template থেকে Edit Template এ যান। 
• এবার কোডের মাঝে ক্লিক করে ctrl+f বা F3 চেপে নিচের কোড টুকু খুজুন।

  ]]></b:skin>

• নিচের কোডগুলো উপরের কোডের উপরে বসিয়ে দিন।

.comments{clear:both;margin-top:10px;margin-bottom:0;background:#FFF;border:1px solid #DDD;padding:10px 5%}
.comments h4{font:normal normal 25px oswald}
.comments ol{list-style:none;counter-reset:trackit;margin:0}
.comments li.comment{list-style:none;position:relative;counter-increment:trackit;clear:both}
.icon.user.blog-author:after{content:"Author";position:absolute;top:.4em;left:1em;color:rgba(112,153,182,0.97);font-size:70%}
.comments .comment-block:before{content:counters(trackit,".");position:absolute;float:none;z-index:10000;left:-1.9em;top:1.2em;bottom:inherit;background:#A9C5CC;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;font-size:25px;color:#F7FCFF;text-align:center;clear:both;margin:0;padding:8px 12px}
.comments .comment-replies .comment-block:before{content:"{" counters(trackit,".")"}";position:absolute;right:.5em;left:inherit;top:inherit;bottom:.5em;float:none;z-index:10000;background:rgba(0,0,0,0);border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;font-size:2rem;color:rgba(161,186,201,0.36);padding:8px 7px}
.comment-header{background:#DCE4EB}
.comments .comments-content .comment-header,.comments .comments-content .comment-content{margin:5px 5px 10px;padding:0 10px 0 75px}
.comments .comments-content .comment-replies .comment-block{position:relative}
.comments .comments-content .comment-replies{margin-left:2em;margin-top:1em;clear:both;padding:0}
.comments .comment-thread.inline-thread{background:rgba(0,0,0,0);padding:0 0 0 2em}
.comments .comment-replies .comment-block{float:right;border:1px solid #E7F5FF;min-height:100px;width:90%;margin-left:48px;background:#F7FCFF;padding:0 0 3em}
.comments .comment-block{float:right;border:1px solid #E7F5FF;min-height:100px;width:90%;margin-left:48px;background:#F7FCFF;padding:0 0 2em}
.comment-actions{position:absolute;left:4.5em;bottom:.5em;font-size:18px;padding:0}
.comments .comment .comment-actions a{padding-right:5px;padding-top:5px;margin:0}
.comments .comments-content .user a{color:#8B969E}
.comments .comments-content .user{font-style:italic;font-weight:400;color:#FFF;font-size:18px;text-shadow:1px 1px 1px #FFF}
.comments .comments-content .datetime,.comments .comments-content .datetime a,.comments .comments-content .datetime a:hover{margin-left:6px;float:right;text-transform:uppercase;font-size:12px;font-family:arial;font-weight:700;color:#237DAC}
.comments .avatar-image-container{background:#FFF;margin-left:0;max-height:70px;max-width:70px;overflow:hidden;width:70px;height:70px;position:absolute;left:25px;top:55px;z-index:10;border:1px solid #DDD;padding:3px}
.comments .avatar-image-container img{max-width:70px;max-height:70px;min-height:70px;min-width:70px}
.comments .thread-toggle{display:none}

এবার সেভ করুন এবং দেখুন হয়েছে কিনা।আশা করি হবে।
হয়তো কোন সমস্যা হতে পারে তবে সেটা কাস্টম টেমপ্লেট এ হতে পারে আবার সমস্যা নাও হতে পারে।
ভালো থাকবেন।আমাদের সাথে থাকুন।

লিখেছেন AdminFebruary 12, 2014

0

বিস্তারিত পড়ুন

কমেন্টে নাম্বার যোগ করুন

এর আগে আমি ফেসবুক,গুগল প্লাস এবং ব্লগের নিজস্ব কমেন্ট সিস্টেম নিয়ে লিখছিলাম।আজ আমি জানাব কিভাবে ব্লগের এই কমেন্টে নাম্বার যোগ করা যায়।এই নাম্বার বলতে বুঝায় প্রতিটা কমেন্ট এ দেখা যাবে এটি কত নাম্বার কমেন্ট।এটা খুব কাজের একটা জিনিস।কেউ যদি কমেন্ট করে তাহলে সংখ্যা অনুসারে দেখা যাবে যেমন ১ ২ ৩ ইত্যাদি এবং আপনি বা কেউ রিপ্লে দিলে সেটি পয়েন্ট অনুসারে দেখা যাবে যেমন ১.১  ১.২  ১.৩ ইত্যাদি।আসলেই খুব সুন্দর।এটা আপনি চাইলে আপনার ব্লগের কালার অনুসারে সেট করেও দিতে পারবেন।

কিভাবে যোগ করবেনঃ

এটা যোগ করার জন্য নিচের ধাপ গুলো ভালোভাবে অনুসরন করুন।আশা করি আপনি পারবেন।

• প্রথমে আপনার ব্লগে প্রবেশ করুন। 
• Template থেকে Edit Template এ যান। 
• এবার কোডের মাঝে ক্লিক করে ctrl+f বা F3 চেপে নিচের কোড টুকু খুজুন।

 ]]></b:skin>

• নিচের কোডগুলো উপরের কোডের উপরে বসিয়ে দিন। 

/**Numbered Comments By http://www.blogtipsnticks.com**/
.comments ol {
counter-reset: trackit;
}

.comments ol li {
counter-increment: trackit;
}

.comments ol li:before {
content: counters(trackit, ".");
font-size: 3.5rem;
color: rgba(0, 0, 0, 0.16);
right: 0.3em;
position: absolute;
padding: .2em 0 0 0;
text-shadow:1px 1px 1px white
}
.comment .comment-content{max-width:85%;}
/**Numbered Comments By http://www.blogtipsnticks.com**/

• White লেখা জায়গায় আপনার ব্লগের কালারের সাথে মিল রেখে বা অন্য কোন কালার কোড দিতে পারেন।

• এবার সেভ করুন এবং ব্লগের যে লেখাতে বেশি কমেন্ট আছে সেই লেখাতে যান এবং দেখুন হয়েছে কিনা আশা করি অবশ্যই হবে।

ভালো লাগলে কমেন্ট করতে ভুলবেন না।ভালো থাকবেন নিয়মিত আমাদের সাথে থাকুন।

লিখেছেন AdminFebruary 12, 2014

0

বিস্তারিত পড়ুন

জিমেইলে আসা যাওয়া যে কোন ফাইলকে গুগল ড্রাইভে সেভ করুন

সম্প্রতি গুগল তাদের অফিসিয়াল ব্লগে জানিয়েছে যে,এখন থেকে যে কেউ তার জিমেইলে আসা বা যে সকল ছবি পাঠানো হয়েছে সে সকল ছবি গুগল ড্রাইভে সেভ করা যাবে।এটা তারা একটা GIF ছবির মাধ্যমে জানিয়েছে।আর এই ছবিটা দেখলেই দেখতে পাবেন যখন জিমেইলে কোন ছবি আসবে তখন এই ছবির উপর মাউস রাখলেই দুইটা অপশন দেখা যাবে একটা ডাউনলোড এবং আরেকটা গুগল ড্রাইভে সেভ করার আইকন।এই আইকনের উপর ক্লিক করে আপনি সে ছবিটি সেভ করে রাখতে পারবেন।নিচে ছবিটা দেয়া হলো।

তাছাড়া ছবিটা বড় করলেও এই অপশন দেখতে পারবেন।এটা আসলেই অনেক ভালো একটা জিনিস।

এই বৈশিষ্ট্য আপনার Android এবং অ্যাপেল ফোনেও উপভোগ করতে পারবেন।

আরো কিছু বাড়তি সুবিধা ও তারা যোগ করেছে সেটা হলো,যখন ছবির উপর মাউস রাখা হবে এবং ক্লিক দেয়া হবে তখন নিচের কয়েকটি ফোল্ডার আসবে (যা আপনি আগে থেকে তৈরি করে রেখেছেন) এই ফোল্ডার গুলোতে আপনি আলাদা ভাবে ছবি সেভ করে রাখতে পারবেন।

এটা করার ফলে আপনার ছবিটি সুরক্ষিত এবং অনেক সার্ভারে থাকবে যার ফলে আপনার ছবিটি হারানোর ভয় থাকবে না।এবং আপনি যেখানেই থাকুন না কেন চাইলেই ছবিটা দেখতে পারবেন।

আশা করি ভালোই লাগছে।ভালো থাকবেন।

লিখেছেন AdminFebruary 11, 2014

0

বিস্তারিত পড়ুন

পোস্টের ছবিকে Morph ইফেক্ট দিবেন কিভাবে

সিএসএস কি এখন সেটা আমি বলতে চাচ্ছি না কিন্তু শুধু বলব সিএসএস কোডের মাধ্যমে ওয়েবের স্টাইল করা যায়।যারা ব্লগিং করেন তারা অবশ্যই আমার চেয়ে ভালো জানেন।সিএসএস কোড এমন একটা কোড যেটার মাধ্যমে ওয়েবের ডিজাইনকে সুন্দর করে সাজানো যায়।আর আজ এই কোড নিয়ে আমরা কাজ করবো।এর আগে আমি ছবিকে অটো জুম করার সিএসএস কোড দিয়েছিলাম।এখন দেব কিভাবে ছবিকে Morph স্টাইল দিবেন।Morph স্টাইল হলো এমন একটা স্টাইল যেটা যোগ করার পর যখন মাউস ছবির উপর নিয়ে যাবেন তখন সেই ছবিটি ৩৬০ ডিগ্রী আঙ্গেলে একবার ঘুরে আসবে।এবং ছবিটি অটো গোল হয়ে যাবে।অবশ্যই আপনার ভালো লাগার মত একটা জিনিস।
তাহলে যোগ করে নিন।

কিভাবে যোগ করবেনঃ

এটা যোগ করার জন্য ব্লগে লগিন করে Template>Edit Template এ যান।তারপর নিচের কোড টুকু খুজুন।

]]></b:skin>

এবার নিচের কোডটুকু উপরের কোডের উপরে বসিয়ে দিন।

/* CSS Image Morph */
.post img{border:10px solid #fff;overflow:hidden;-webkit-box-shadow:5px 5px 5px #111;box-shadow:5px 5px 5px #111;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease;margin:20px}
.post img:hover{border-radius:50%;-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
/* CSS Image Morph */

ব্যস সেভ করুন।ব্লগ যান যেকোন লেখাতে যান এবং ছবির উপর মাউস রাখুন দেখুন মজা।ছবিটি এবার একপাক ঘুরে আপনার সামনে আসবে।
আশা করি আপনার কাজে লাগবে।ভালো থাকুন।

লিখেছেন AdminFebruary 11, 2014

0

বিস্তারিত পড়ুন

CSS কোডের মাধ্যমে পোস্টের মাঝের সব ছবিকে অটো জুম ইফেক্ট দিন

সুন্দর কিছু দেয়া মাধ্যমে ব্লগের নতুনত্ব আনা এখন আরো সহজ কারন আমি আছি আপনাদের সাথে এখন
থেকে সবসময় নতুন কিছু থাকবে এই ব্লগে।আজ আরো একটা সুন্দর কিছু।
যেকোন পোস্ট লেখার সময় এর মাঝে ছবি দেয়া লাগে আর ছবি না দিলে যেন লেখাটি মানানসই হয় না।কিন্তু এই ছবি দেখার জন্য ছবিতে ক্লিক করে এটা বড় করে দেখতে হয় কিন্তু কেন?এখন থেকে আর বড় করে দেখতে হবে না কারন কিছু কোড যোগ করলেই আপনি যে ছবির উপর মাউস রাখবেন সেই ছবিটিই অটো বড় হয়ে যাবে।সেক্ষেত্রে আপনাকে বাড়তি কস্ট করে আর ছবিটি বড় করতে হবে না।
এর জন্য সামান্য কিছু সিএসএস কোড যোগ করতে হবে।নিচে কোডটুকু দেয়া হলো।

সিএসএস কোড কোথায় যোগ করবেনঃ

• প্রথমে আপনার ব্লগের প্রবেশ করুন।
• Template থেকে Edit Template এ যান।
• এবার নিচের কোডটুকু খুজুন।

 ]]></b:skin> 

• নিচের কোডটুকু Skin ট্যাগের উপরে বসিয়ে দিন।

/* CSS image zoom effect by http://www.blogtipsnticks.com */
.post img {
height: 100%;
width: 100%;

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover {
width: 150%;
height: 150%;
}
/*CSS image zoom effect by http://www.blogtipsnticks.com */

• এবার সেভ করুন।

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

লিখেছেন AdminFebruary 11, 2014

0

বিস্তারিত পড়ুন

ব্লগে কিভাবে কন্ট্রোল প্যানেল যোগ করবেন

আজ দারুন একটা লেখা দেব আশা করি আপনার অনেক ভালো লাগবে।আবার একটা হাসি ও দিতে পারেন হয়তো টাইটেল দেখে।
ভাবতে পারেন ব্লগে আবার কন্ট্রোল প্যানেল হয়।যদি না বিশ্বাস হয় এই লেখাটি ভালো করে পড়ে দেখুন।

কিভাবে এই কন্ট্রোল প্যানেল কাজ করে?

আপনি যখন আপনার ব্লগে ভিজিট করবেন এবং যদি লগিন করা থাকে তাহলে আপনি আপনার ব্লগের উপরে এই কন্ট্রোল প্যানেল দেখতে পাবেন।আপনি ছাড়া আর কেউ এই কন্ট্রোল প্যানেল দেখতে পারবে না।উপরের এই কন্ট্রোল প্যানেল এ ব্লগের মূল কন্ট্রোল প্যানেলে যা থাকে সেগুলো এখানে থাকবে।এখান থেকে যে কোন টাতে ক্লিক করলেই আপনি সেইখানে চলে যাবেন।দারুন মজা তাই না।ধরেন আপনি আপনার ব্লগে নতুন কোন লেখা দিতে চান এখান থেকে New Post এ ক্লিক করলেই আপনি একটা লেখার জায়গা পেয়ে যাবেন যেখান থেকে আপনি একটা লেখা দিতে পারবেন।

এখানে যা যা পাবেনঃ

এখানে আপনি এক ক্লিক করে যে সকল জায়গায় যেতে পারবেন।সেগুলো হলোঃ

1. নতুন লেখা তৈরি করতে পারবেন।
2. ব্লগের হোমপেজে যেতে পারবেন।
3. সব লেখা দেখতে পারবেন।
4. কমেন্ট দেখতে পারবেন।
5. লেআউট অপশন এ যেতে পারবেন।
6. মোট ভিজিটরে যেতে পারবেন।
7. বর্তমান পেজকে পুনরায় লোড করতে পারবেন।
8. এবং লগ আউট করতে পারবেন।

কেমন দেখা যাবে? আপনি এটা যোগ করলে নিচের ছবির মত দেখতে পারবেন।

দেখুন ছবির উপরে একটা বার দেখা যাচ্ছে ঠিক এমন টাই দেখা যাবে।তাহলে আসুন যোগ করে নেয়া যাক।

কিভাবে যোগ করবেন?
যোগ করা জন্য আপনাকে নিচের ধাপ গুলো ফলো করতে হবে।

প্রথমে ব্লগের আইডি বের করাঃ

ব্লগের আইডি বের করা জন্য আপনার ব্লগের লগিন করুন তারপর যে ব্লগটিতে এটি যোগ করতে চান সেই ব্লগের যে কোন জায়গায় যান যেমন সেটিং এ যান।
এবার দেখুন উপরে BlogID=XXXXXXXXXXXXXXXXXX এ ধরনের মোট ১৮ টি অক্ষর আছে এটি আপনার ব্লগের আইডি এটি কপি করে নোটপ্যাডে পেস্ট করে রাখুন।

এবার যোগ করার পালাঃ

এবার কিছু কোড যোগ করতে হবে তাহলে আপনি সফল ভাবে এটি করতে পারবেন।

• প্রথমে আপনার ব্লগের Template এ যান।
• Edit Template এ ক্লিক করুন।
• এবার কোডের ভিতরে ক্লিক করে ctrl+f চেপে নিচের কোডটি খুজুন।

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

• যদি এটি না পান তাহলে <body> কোডটি খুজুন।
• যদি খুজে পান তাহলে এবার নিচের কোডটুকু এর নিচে বসিয়ে দিন।

<span class='item-control blog-admin'>
<style>
.control-panel ul{z-index: 20; position: absolute; margin: 0px auto; background-color: #F6F6F6; width: 100%; }
.control-panel ul li{display: inline-block; float: left; padding: 7px 0px;}
.control-panel ul li a {color:#686868;padding: 7px 15px;border-right: 1px solid #E3E3E3;font-weight: bold;font-size: 13px;}
.control-panel a:hover {text-decoration:none; color:#FC8F44;}
</style>
<div class='control-panel'>
<ul>
<li><a href='http://www.blogger.com/home'>My Blogs</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#editor/src=sidebar'>New Post</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#editor/target=page'>New Page</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#posts'>All Posts</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#comments'>Comments</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#pageelements'>Layout</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#templatehtml'>Edit HTML</a></li>
<li><a href='#' onclick='location.reload(true); return false;'>Refresh</a></li>
<li><a href='/' target='_blank'>New Tab</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#basicsettings'>Settings</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#overviewstats'>Stats</a></li>
<li><a href='http://www.blogger.com/logout.g'>Logout</a></li>
</ul>
</div>
</span>

এবার সব লাল কালারে জায়গায় আপনার ব্লগের আইডিটি দিন।এবং সেভ করুন।তারপর ব্লগে যান দেখুন মজা।
খুব ভালো লাগছে তাই না?ভালো লাগলে কমেন্ট করতে ভুলবেন না।

লিখেছেন AdminFebruary 08, 2014

0

বিস্তারিত পড়ুন

ব্লগে উপরে উঠুন বাটন যোগ করুন

Back To Top বাটন যে কোন ব্লগ/ওয়েবসাইট এর জন্য গুরুত্বপূর্ণ।কেননা যখন ব্লগের কোন ভিজিটর যখন ব্লগের নিচের দিকে নেমে যাবে তখন সে এক ক্লিক করেই উপরে চলে আসতে পারবে এই উপরে উঠুন বাটন দ্বারা।তাছাড়া এর মাধ্যমে আপনার সাইটের ডিজাইন ও সুন্দর দেখাবে।আর এটা যোগ করা ও খুব সহজ, সামান্য কিছু কোড যোগ করে আপনি এটি যোগ করে নিতে পারেন।

আজ আমি দেখাব কিভাবে এই উপরে উঠুন বাটনটি যোগ করবেন।আশা করি আপনার এটি অনেক কাজে লাগবে।তাহলে শুরু করা যাক।

Back To Top বাটনঃ

• ব্লগে লগিন করুন।
• Template এ যান।
• আপনার টেমপ্লেটটি ব্যাকআপ রাখুন।
• Edit Template এ ক্লিক করুন।
• ctrl+f বা F3 চেপে নিচের কোডটুকু খুজুন।

]]></b:skin>

• এবার এর উপরে নিচের কোডগুলো পেস্ট করুন।

 #backtotop{
padding:5px;
position:fixed;
bottom: 5px;
right: 5px;
cursor:pointer;
}

•  উপরের কোডগুলো পেস্ট করা হলে </head> এই কোড টুকু খুজুন এবং এর উপরে নিচের কোড গুলো পেস্ট করুন।

<!-- Back to top button by blogtipsnticks.com-->
&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'
type='text/javascript'&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&lt;/script&gt;
<!-- Code provided to you by blogtipsnticks.com-->

• আপনি প্রায় করে ফেলেছেন এবার </body>  ট্যাগটি খুজুন।এবং নিচের কোড গুলো এর উপরে বসিয়ে দিন।

 <a href="#" id="backtotop"><img src="https://lh6.googleusercontent.com/-L105nI1JghY/UeAC24-uDoI/AAAAAAAAAwc/xY8LsqIUFsk/s48/Metro-Back-Black-48%2520right.png" alt="Back To Top" title="Back To Top" /></a>

ব্যস এবার আপনি সেভ করতে পারেন।সেভ করা আগে আপনি চাইলে লাল কালারের জায়গায় আপনার নিজের ছবির লিঙ্ক দিতে পারেন।যায় হোক সেভ করুন এবং আপনার ব্লগে গিয়ে দেখুন।আশা করি আপনি সফল ভাবে পেরেছেন।

লিখেছেন AdminFebruary 08, 2014

1

বিস্তারিত পড়ুন

অলিম্পিক চার্টার গুগলের লোগো পরিবর্তন

৭ ফেব্রুয়ারী ২০১৪ আজ শুরু হতে ২২ তম শীতকালীন অলিম্পিক গেমস।আর এটাকে স্বাগত জানাতে গুগল আজ তাদের সার্চ ইজ্ঞিন এর হোমপেজের লোগো পরিবর্তন করেছে।গুগল এটার নাম দিয়েছে "অলিম্পিক চার্টার"।আর এটা পরিবর্তন করার মূল কারন "Winter olympic games"

এখানে গুগল বলেছে "খেলাধুলা সকলের মানবাধিকার। প্রতিটি সানুষের কোনো ধরনের বৈষম্য ছাড়াই খেলাধুলার অধিকার থাকা উচিৎ, যাতে বন্ধুত্ব, সংহতি ও সততার একটি পারস্পরিক বোঝাপড়ার প্রয়োজন, এবং এটাই সম্পবর্ণভাবে অলিম্পিকের মূলসুত্রের প্রতীক।"

 এবং ইংলিশে বলা হয়েছে "The practice of sport is a human right. Every individual must have the possibility of practicing sport, without discrimination of any kind and in the Olympic spirit, which requires mutual understanding with a spirit of friendship, solidarity and fair play.” 

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

লিখেছেন AdminFebruary 07, 2014

0

বিস্তারিত পড়ুন

Templateism এর টেমপ্লেটের ফুটার লিঙ্ক পরিবর্তন করুন খুব সহজে

ব্লগের জন্য অনেক সময় নতুন নতুন টেমপ্লেট দরকার হয়।আর এই জায়গায় অনেক ভালো ভালো টেমপ্লেট পাওয়া যায়।আমিও কয়েকদিন আগে এখান থেকে একটা টেমপ্লেট ডাউনলোড করেছিলাম খুব সুন্দর এদের ডিজাইন।
কিন্তু সমস্যা একটা যখনি আমি ফুটার লিঙ্ক মানে Copyright By Templateism এই লিঙ্কটি পরিবর্তন করতে চেষ্টা করি তখনই আমার সাইট কিছুক্ষণ লোড হবার পর এদের সাইটে চলে যায়।যা আসলেই খুব বিরক্তকর।তবে এদের প্রিমিয়াম টেমপ্লেটে এই সমস্যা হয়না শুধু ফ্রী টেমপ্লেটে।যায় হোক অনেক ভেবে ভেবে দেখলাম তারা একটা জাভা কোডের মধ্যে এই কোড টুকু লুকিয়ে রেখেছে যার কারনে  এটা রিডাইরেক্ট হয়ে ওদের সাইটে চলে যাই।
সবাই চাই তার সাইটে অন্য কারনে যেন কোন আধিপত্য না থাকে।আর এটা তো আপনার সাইটে তাদের আধিপত্য করার মত।তাই আমি আজ দেখাব কিভাবে তাদের টেমপ্লেট ব্যবহার করবেন কিন্তু তাদের কোন ক্রেডিট থাকবে না।

কিভাবে ক্রেডিট লিঙ্ক পরিবর্তন করা যায়ঃ 

• প্রথমে আপনার সাইটে প্রবেশ করুন।
• এবার Template এ যান।
• Edit Template এ ক্লিক করুন।আর ক্লিক করার আগে অবশ্যই টেমপ্লেটটি ব্যাকআপ করে রাখবেন।
• নিচের কোডটুকুর মত কোড খুজুন।

<script type='text/javascript'>
summary_noimg = 550;
summary_img = 375;
img_thumb_height = 150;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
var _0x60d7=["\x3C","\x69\x6E\x64\x65\x78\x4F\x66","\x73\x70\x6C\x69\x74","\x6C\x65\x6E\x67\x74\x68","\x3E","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","","\x6A\x6F\x69\x6E","\x63\x68\x61\x72\x41\x74","\x20","\x2E\x2E\x2E","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x69\x6D\x67","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65","\x3C\x73\x70\x61\x6E\x20\x73\x74\x79\x6C\x65\x3D\x22\x66\x6C\x6F\x61\x74\x3A\x6C\x65\x66\x74\x3B\x20\x70\x61\x64\x64\x69\x6E\x67\x3A\x30\x70\x78\x20\x31\x30\x70\x78\x20\x35\x70\x78\x20\x30\x70\x78\x3B\x22\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22","\x73\x72\x63","\x22\x20\x77\x69\x64\x74\x68\x3D\x22","\x70\x78\x22\x20\x68\x65\x69\x67\x68\x74\x3D\x22","\x70\x78\x22\x2F\x3E\x3C\x2F\x73\x70\x61\x6E\x3E","\x3C\x64\x69\x76\x3E","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x3C\x2F\x64\x69\x76\x3E","\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x74\x65\x6D\x70\x6C\x61\x74\x65\x69\x73\x6D\x2E\x63\x6F\x6D\x22\x3E\x54\x65\x6D\x70\x6C\x61\x74\x65\x69\x73\x6D\x3C\x2F\x61\x3E","\x68\x74\x6D\x6C","\x23\x6D\x79\x63\x6F\x6E\x74\x65\x6E\x74","\x23\x6D\x79\x63\x6F\x6E\x74\x65\x6E\x74\x3A\x76\x69\x73\x69\x62\x6C\x65","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x74\x65\x6D\x70\x6C\x61\x74\x65\x69\x73\x6D\x2E\x63\x6F\x6D","\x72\x65\x61\x64\x79"];function removeHtmlTag(_0xe543x2,_0xe543x3){if(_0xe543x2[_0x60d7[1]](_0x60d7[0])!=-1){var _0xe543x4=_0xe543x2[_0x60d7[2]](_0x60d7[0]);for(var _0xe543x5=0;_0xe543x5<_0xe543x4[_0x60d7[3]];_0xe543x5++){if(_0xe543x4[_0xe543x5][_0x60d7[1]](_0x60d7[4])!=-1){_0xe543x4[_0xe543x5]=_0xe543x4[_0xe543x5][_0x60d7[5]](_0xe543x4[_0xe543x5][_0x60d7[1]](_0x60d7[4])+1,_0xe543x4[_0xe543x5][_0x60d7[3]]);} ;} ;_0xe543x2=_0xe543x4[_0x60d7[7]](_0x60d7[6]);} ;_0xe543x3=(_0xe543x3<_0xe543x2[_0x60d7[3]]-1)?_0xe543x3:_0xe543x2[_0x60d7[3]]-2;while(_0xe543x2[_0x60d7[8]](_0xe543x3-1)!=_0x60d7[9]&&_0xe543x2[_0x60d7[1]](_0x60d7[9],_0xe543x3)!=-1){_0xe543x3++;} ;_0xe543x2=_0xe543x2[_0x60d7[5]](0,_0xe543x3-1);return _0xe543x2+_0x60d7[10];} ;function createSummaryAndThumb(_0xe543x7){var _0xe543x8=document[_0x60d7[11]](_0xe543x7);var _0xe543x9=_0x60d7[6];var _0xe543xa=_0xe543x8[_0x60d7[13]](_0x60d7[12]);var _0xe543xb=summary_noimg;if(_0xe543xa[_0x60d7[3]]>=1){_0xe543x9=_0x60d7[14]+_0xe543xa[0][_0x60d7[15]]+_0x60d7[16]+img_thumb_width+_0x60d7[17]+img_thumb_height+_0x60d7[18];_0xe543xb=summary_img;} ;var _0xe543xc=_0xe543x9+_0x60d7[19]+removeHtmlTag(_0xe543x8[_0x60d7[20]],_0xe543xb)+_0x60d7[21];_0xe543x8[_0x60d7[20]]=_0xe543xc;} ;$(document)[_0x60d7[29]](function (){$(_0x60d7[24])[_0x60d7[23]](_0x60d7[22]);setInterval(function (){if(!$(_0x60d7[25])[_0x60d7[3]]){window[_0x60d7[27]][_0x60d7[26]]=_0x60d7[28];} ;} ,3000);} );
</script>

 

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

• এবার <script type='text/javascript'> হতে নিচের </script>  পর্যন্ত সব কোডটুকু নিচের কোড দ্বারা পরিবর্তন করে দিন।

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 150;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

• উপরের কালার সংখ্যাকে আপনার পছন্দ মত পরিবর্তন করুন।
• এবার নিচের দিকে Copyright by Templateism এ আপনার সাইটের লিঙ্ক দিন।
• তারপর সেভ করুন।

ব্যস এবার দেখুন আপনার সাইটে যেয়ে আশা করি আপনি সফল ভাবে কাজটি করতে পেরেছেন।

লিখেছেন AdminFebruary 06, 2014

0

বিস্তারিত পড়ুন

ব্লগারে অটো বিস্তারিত পড়ুন যোগ করবেন কিভাবে

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

কিভাবে যোগ করবেনঃ

• প্রথমে আপনার ব্লগের Template এ যান।
• Edit template এ ক্লিক করুন।
• এবার কোডের ভিতর যে কোন জায়গায় ক্লিক করুন তারপর ctrl+f বা F3 চাপুন। 
• এবার নিচের কোড টুকু খুজুন।

<data:post.body/>

 

•  কোডটুকু খোজা শেষ হলে নিচের কোডটুকু দ্বারা পরিবর্তন করুন।

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
  <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='readmore' style='float:right'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

এবার </head> ট্যাগটি খুজুন এবং এর উপরে নিচের কোডটুকু বসিয়ে দিন।

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 150;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

এবার ছবিসহ হোমপেজে কতটুকু লেখা থাকবে তার জন্য ৪০০ কে আপনার পছন্দমত পরিবর্তন করুন।
ছবি বাদে পোস্টের জন্য ৪৯০
ছবির সাইজ পরিবর্তনের জন্য ১৫০ এবং ২০০ কে পরিবর্তন করুন।

ব্যস সব ঠিকঠাক পরিবর্তন হলে এবার সেভ করুন।আশা করি সব ঠিক থাকলে সফল ভাবে আপনি বিস্তারিত পড়ুন যোগ করতে পেরেছেন।

লিখেছেন AdminFebruary 05, 2014

0

বিস্তারিত পড়ুন