রাঙিয়ে তুলোন আপনার ব্লগস্পট ব্লগকে (মেগা টিউন) [পর্ব-৫]Dont Miss

19
552

আসসালামু আলাইকুম, কেমন আছেন সবাই ? আশা করি মহান আল্লাহ তায়ালার অশেষ রহমতে সবাই ভাল আছেন।

ব্লগ নিয়ে ধারাবাহিক পর্বের এটা পঞ্চম পর্ব।

Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

 

পর্ব -১ এর  টিউন টি দেখার জন্য এখানে ক্লিক করুন

পর্ব -২ এর টিউন টি দেখার জন্য এখানে ক্লিক করুন

পর্ব -৩ এর টিউন টি দেখার জন্য এখানে ক্লিক করুন

পর্ব -৪ এর টিউন টি দেখার জন্য এখানে ক্লিক করুন

পর্ব -৫ এর টিউন টি দেখার জন্য এখানে ক্লিক করুন

পর্ব -৬ এর টিউন টি দেখার জন্য এখানে ক্লিক করুন

পর্ব -৭ এর টিউন টি দেখার জন্য এখানে ক্লিক করুন

চল শুরু করি ।

  • কিভাবে আপনার ব্লগ page feel effect যোগ(Add) করবেন  ???

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

এখানে ক্লিক করে ব্লগ এ সাইন ইন করুন।

তারপর যেকোনো একটা ব্লগ এর design এ ক্লিক করুন। নিচের ছবির মত।

রাঙিয়ে তুলোন আপনার ব্লগস্পট ব্লগকে (মেগা টিউন) [পর্ব-৫]Dont Miss

Edit HTML এ ক্লিক করুন ।তারপর নিচের ছবির মত Expand Widget template বক্স এ টিক দিন।

রাঙিয়ে তুলোন আপনার ব্লগস্পট ব্লগকে (মেগা টিউন) [পর্ব-৫]Dont Miss

এখন search করুন  </head>     [ serch করার জন্য firefox এর edit থেকে find এ ক্লিক করুন অথবা Ctrl+F চাপুন]  যদি এই </head> কোড টি পান তাহলে </head> এর উপরের লাইন এ নিচের কোড টি বসিয়ে দেন ।

<style type=’text/css’>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(https://1.bp.blogspot.com/_1fRuBdlSpLw/TJUuu2naWxI/AAAAAAAAApQ/BjywNdEAEXg/S1600-R/Bogger+How+To+Tips.png) no-repeat right top;
}
</style>
<script src=’http://code.jquery.com/jquery-latest.js’ type=’text/javascript’/>
<script type=’text/javascript’>
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: ‘307px’,
height: ‘319px’
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: ’50px’,
height: ’52px’
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: ’50px’,
height: ’50px’
}, 200);
});
});
</script>

এখন আবার search করুন <body> এবং  <body> এর নিচের লাইন এ নিচের কোড টি বসিয়ে দেন ।

<div id=’pageflip’>
<a href=‘http://freecall24.blogspot.com/‘><img alt=” src=’http://2.bp.blogspot.com/_1fRuBdlSpLw/TJcc3k62mWI/AAAAAAAAAps/uSj6nCe_CB4/s1600/page_flip.png’/></a>
<div class=’msg_block’/>
</div>

লাল লেখা টি পরিবরতন করে আপনার ব্লগ এর url দিন .

তারপর  save template এ ক্লিক করে save করুন।  আর যদি না পারেন তাহলে একটি XML ফাইল ডাউনলোড করে নিন। ডাউনলোড করার জন্য এখানে ক্লিক করু
ডাউনলোড করার পর আগের মত Edit HTML এ যান তারপর দেখান ওখানে এরকম লেখা আছে Upload a template from a file on your hard drive । ওখানের brows এ ক্লিক করুন এবং আপনি যেখানে আপনার XML  ফাইল টি রেখেছেন সেখান থেকে upload করুন। তারপর অকাহে লেখা আসবে keep widget , delete wigdet অথবা cancel. আপনি keep widget  এ ক্লিক করুন ।

রাঙিয়ে তুলোন আপনার ব্লগস্পট ব্লগকে (মেগা টিউন) [পর্ব-৫]Dont Miss

তাহলে হয়ে যাবে আপনার ব্লগের নতুন ডিজাইন।

বিঃদ্রঃ ব্লগ এর ডিজাইন এর যেকোনো কাজ করা আগে আপনার ব্লগ এর template  Backup  করে নিবেন। তাহলে যদি ব্লগ এর কোনো  সমস্যা হয় তাহলে আগের অবস্থায় পরিবর্তন করতে পারবেন । Backup / Restore Template করবেন কিভাবে??  Edit HTML পেজ এ উপরে লেখে আছে  download full template . ওখান থেকে Backup / Restore Template করা যায়। আর পরে আগের নিয়মের মত template upload করতে হবে।*****

  • আপনার ব্লগ এ author অ্যাড করবেন কিভাবে?

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

এক্সদ্ভরাঙিয়ে তুলোন আপনার ব্লগস্পট ব্লগকে (মেগা টিউন) [পর্ব-৫]Dont Miss

আপনার আগের ব্লগ অ্যাকাউন্ট এ সাইন ইন করেন । তারপর যেকোনো একটা ব্লগ এর setting এ যান ।তারপর Permissions এ ক্লিক করুন। তারপর ADD AUTHORS এ ক্লিক করুন। তাপর আপনার নতুন জিমেইল অ্যাকাউন্ট টি লিখুন । তারপর Invite এ ক্লিক করুন । এখন আপনার এ অ্যাকাউন্ট টি সাইন আউট করুন। এখন আপনার নতুন জিমেইল অ্যাকাউন্ট টি খুলন এবং দেখুন নতুন একটা মেইল আসছে । মেইল টি ওপেন করুন। আর দেখুন এ  রকম মেইল

The Blogger user Sports has invited you to contribute to the blog: Sports.

(((((To contribute to this blog, visit:
http://www.blogger.com/i.g?inviteID=xxxxxxxxxxxxxxxxxx&blogID=xxxxxxxxxxxxxxxxx

You’ll need to sign in with a Google Account to confirm the invitation and start posting to this blog. If you don’t have a Google Account yet, we’ll show you how to get one in minutes.

To learn more about Blogger and starting your own free blog visit http://www.blogger.com.))))))))

এখন লিংক টিতে ক্লিক করুন। ok  কাজ শেষ এখন আপনার ব্লগার এ যান  আর দেখুন নতুন ব্লগ অ্যাড হয়েছে।

  • কিভাবে author কমেন্ট  Highlight অথবা অন্য স্টাইল করবেন???

SEE LIVE DEMO

আগের নিয়ম মত Edit HTML এ গিয়ে search করুন এই রকম কিছু কোড

<data:commentPostedByMsg/>
</dt>
<dd class=’comment-body’>
<b:if cond=’data:comment.isDeleted’>
<span class=’deleted-comment’><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

যদি এই রকম কোনো কোড পান তাহলে  এই কোড গুলো পরিবরতন(replace) করুন নিচের কোড গুলো মত

<data:commentPostedByMsg/>
</dt>
<b:if cond=’data:comment.author == data:post.author’><dd class=’comment-body-author’>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class=’comment-body’>

<b:if cond=’data:comment.isDeleted’>
<span class=’deleted-comment’><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>

অর্থাৎ লাল কালার লেখা গুল অ্যাড(add) করতে হবে।  এখন search করুন  </head> এখন </head> এর পরের লাইন এ নিচের কোড টি  বসিয়ে দিন।

<style>
.comment-body-author {
background: #F5EDE3; /* Background color*/
color: #000000; /* Text color*/
border-top:2px solid #002F66;border-bottom:1.2px dotted #002F66 ;border-left:1.2px dotted #002F66;border-right:2px solid #002F66;
line-height: 2.4em;
margin:0;
padding:0 0 0 20px; /* Posotion*/
}
</style>
তারপর আবার search করুন  ]]></b:skin> এবং ]]></b:skin> এর উপরের লাইন এ নিচের কোড টি past করুন
.comment-body-author:hover {
-moz-border-radius: 75px;
border-radius: 40px;
font size: 14px;
background: Transparent ; /* BG Hover color*/
color: #fc5dcc; /* Font Hover color*/
border-top: 3px solid #26e8fe;border-bottom: 5px solid #4efe2b;border-left: 12px solid #fe0f47;border-right: 15px solid #febc59;
margin:0;
padding:0 0 0 40px;
}
এখন  সেভ করুন। এখন আপনার ব্লগ এর যেকোনো  একটা পোস্ট এ আপনি নিজে কমেন্ট করেন । দেখবেন আপনার কমেন্টটির স্টাইল অন্য রকম হয়ে গেছে।
  • কিভাবে আপনার ব্লগ এ related post widget যোগ করবেন?

রাঙিয়ে তুলোন আপনার ব্লগস্পট ব্লগকে (মেগা টিউন) [পর্ব-৫]Dont Miss
আগে নিয়ম মত Edit HTML থেকে search করুন </head> এবং  </head> এর পরের লাইন এ নিচের কোড টি বসিয়ে দিন
<style> #related-posts { float : left; width : 520px; margin-top:28px; margin-left : 5px; margin-bottom:25px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(https://icons.iconarchive.com/icons/zeusbox/christmas/32/star-icon.png) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 31px; margin-bottom : 10px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src=’http://theblogtemplates.com/scripts/Related_posts_hack.js’ type=’text/javascript’/>

এখন আবার search করুন <data:post.body/> অথবা <div class=’post-body>  অথবা <data:post.body/>  যেকোনো একটি কোড search করুন। একটি না পেলে অন্য টি search করুন। এখন যেকোনো একটি কোড এর  নিচে নিচের কোড গুলো বসিয়ে দিন

<b:if cond=’data:blog.pageType == “item”‘>
<div id=”related-posts”>
<font face=’Arial’ size=’3′><b>Related Posts : </b></font><font color=’#FFFFFF’><b:loop values=’data:post.labels’ var=’label’><data:label.name/><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if><b:if cond=’data:blog.pageType == &quot;item&quot;’>
<script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;’ type=’text/javascript’/></b:if></b:loop> </font>
<script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

এখন template save করুন।

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

টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

19 মন্তব্য

  1. আপনার টেমপ্লেটটি সুগঠিত না হওয়ার ফলে বিশ্লেষণ করা যাবে না৷ অনুগ্রহ করে নিশ্চিত হয়ে নিন যে সকল XML উপাদান যথাযথভাবে বন্ধ আছে৷ XML ত্রুটি বার্তা: Open quote is expected for attribute “{1}” associated with an element type “src”.
    Error 500

    ata likea asea

    • ভাই কোন তা কাজ করে না?????
      আপনি মনে হয় কিছু ভুল করেছেন তাই . আপনি ইচ্চা করলে আপনি আপনার Gmail account & password আমাকে mail করে পাঠাতে পারেন .তাহলে আমি ঠিক করে দিব যদি আপনার অসবিধা না থাকে .
      ধন্যবাদ

  2. TJ ভাই ..আমার ব্লগ এর রিসেন্ট পোস্ট widget তা edit করতে গেলে কিস আসেনা.অনলি configure ফীড লেখা আসে. তাই আর এডিট করতে পারিনা.কি করব ভাইজান ,,বলে দেন প্লিয়াসে..

    • আপনি মনে হয় কিছু ভুল করেছেন তাই . আপনি ইচ্চা করলে আপনি আপনার Gmail account & password আমাকে mail করে পাঠাতে পারেন .তাহলে আমি ঠিক করে দিব যদি আপনার অসবিধা না থাকে .
      ধন্যবাদ

  3. ভাই আপনার সব গুলো পোস্ট ই খুব কাজের, প্লিজ চালিয়ে যান।

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

3 − 3 =