Awesome! টিউনস
সকল Awesome! টিউনস

আপনার ব্লগ কে সুন্দর করে সাজান (মেগা টিউন) [পর্ব-৫] ***miss করবেন না এ পর্ব টা***

11,808 দেখা 19 টিউমেন্টস জোসস
টিউন বিভাগ ওয়েব ডিজাইন
প্রকাশিত
Level 0

16 টিউনস 220 টিউমেন্টস 0 ফলোয়ার

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

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

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

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

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

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

পর্ব -৫ এর টিউন টি দেখার জন্য এখানে ক্লিক করুন  (মেগা টিউন) [এ পর্বটা মিস করবেন না]

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

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

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

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

অনেক দিন আগে শেষ টিউন করেছিলাম । পরীক্ষা ছিল তাই টিউন করতে পানি নাই। আজ পরীক্ষা শেষ তাই এখন টিউন করতে বসলাম । আশা করি এই টিউন টি তোমাদের অনেক ভাল লাগবে । তাহলে চল শুরু করি ।

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

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

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

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

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

এখন 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(http://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  এ ক্লিক করুন ।

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

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

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

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

এক্সদ্ভ

আপনার আগের ব্লগ অ্যাকাউন্ট এ সাইন ইন করেন । তারপর যেকোনো একটা ব্লগ এর 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    এখানে ক্লিক করলে দেখতে পাবেন author কমেন্ট এর স্টাইল অন্য রকম।

আগের নিয়ম মত 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>

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

<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> এর পরের লাইন এ নিচের কোড টি  বসিয়ে দিন।

<!--Blog-Owners-Comment-STARTS-->
<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>
<!--Blog-Owners-Comments-STOPS-->
এখন  সেভ করুন। এখন আপনার ব্লগ এর যেকোনো  একটা পোস্ট এ আপনি নিজে কমেন্ট করেন । দেখবেন আপনার কমেন্টটির স্টাইল অন্য রকম হয়ে গেছে।

  • কিভাবে আপনার ব্লগ এ related post widget যোগ করবেন?

আগে নিয়ম মত 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(http://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 করুন।
আজ এ পর্যন্ত।
কেমন লাগলো জানাতে ভুলবেন না । আর কোনো সমস্যা হলে কমেন্ট করে বলবেন। ভাল থাকবেন সবসময়।

Level 0

আমি Dz-MiR। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 13 বছর 3 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 16 টি টিউন ও 220 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

টিউনস

আরও টিউনস

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

টিউমেন্টস

Level 2

nice tune. thanks

Level 0

ধন্যবাদ । কাজে লাগবে আমার । আমার মুভি ব্লগ থেকে ঘুরে আসতে পারেন http://www.geturmovies.blogspot.com

Level 0

Valo laglo.

    Level 0

    @imranboss: ধন্যবাদ ইমরান ভাই।

Level 0

nice

Level 0

নতুন ব্লগ খুলতে চাই। অনেক কাজে লাগবে, ধন্যবাদ ভাই। সামনে আরো পর্ব চাই,…..চালিয়ে যেতে হবে।

    Level 0

    @Mamun Abdullah: ইনশাআল্লাহ্‌ চেষ্টা করবো আরও পর্ব করার জন্য।

Level 0

Thanks. valo laglo

Level 0

মিস করিনাই দেখে নিলাম আসলেই ভাই টিউন হইছে,ধন্যবাদ শেয়ার করার জন্য।

Level 0

আমার কাজে লাগবে।ধন্যবাদ শেয়ার করার জন্য।

Level 0

nice tune

Level 2

valo laglo tunes ta.

amr site theke ghure asben.
http://mobicomtechbd.blogspot.com