-
কিভাবে আপনার ব্লগ page feel effect যোগ(Add) করবেন ???
এখানে ক্লিক করে ব্লগ এ সাইন ইন করুন।
তারপর যেকোনো একটা ব্লগ এর design এ ক্লিক করুন। নিচের ছবির মত।
![freecall24.blogspot.com রাঙিয়ে তুলোন আপনার ব্লগস্পট ব্লগকে (মেগা টিউন) [পর্ব ৫]Dont Miss](http://s.techtunes.com.bd/tDrive/tuner/abba/94038/freecall24.blogspot.com_.png "freecall24.blogspot.com")
Edit HTML এ ক্লিক করুন ।তারপর নিচের ছবির মত Expand Widget template বক্স এ টিক দিন।
![রাঙিয়ে তুলোন আপনার ব্লগস্পট ব্লগকে (মেগা টিউন) [পর্ব ৫]Dont Miss](http://s.techtunes.com.bd/tDrive/tuner/abba/89761/xdf-vxfd-bxf.jpeg)
এখন 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEVutXSHIVOJtBAvDDsaYlrsNAbnbB_M4GHBcCOa7td9hvwRfcR-LoNSoGf8lI1dCJb1V4W9BCgse3zAuJ6x0ctr-tlHJ8tzAkZEhSxC7VZq_bp_z5smX1qVcTwlUoapXzvMJo5GdGT2xh/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
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: ’307px’,
height: ’319px’
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: ’50px’,
height: ’52px’
}, 220);
$(".msg_block").stop()
.animate({
width: ’50px’,
height: ’50px’
}, 200);
});
});
</script>
এখন আবার search করুন <body> এবং <body> এর নিচের লাইন এ নিচের কোড টি বসিয়ে দেন ।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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEVutXSHIVOJtBAvDDsaYlrsNAbnbB_M4GHBcCOa7td9hvwRfcR-LoNSoGf8lI1dCJb1V4W9BCgse3zAuJ6x0ctr-tlHJ8tzAkZEhSxC7VZq_bp_z5smX1qVcTwlUoapXzvMJo5GdGT2xh/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
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: ’307px’,
height: ’319px’
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: ’50px’,
height: ’52px’
}, 220);
$(".msg_block").stop()
.animate({
width: ’50px’,
height: ’50px’
}, 200);
});
});
</script>
<div id=’pageflip’>
<a href=‘http://freecall24.blogspot.com/‘><img alt=” src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjefbnB4aJzMBgxtqj3yn-n2DgKoX3s2tz2azlDW89y3rXbCnzHCUeTEx5xz01nRRrbDD3BXHXWzztVWxBTq-Ji-JSUZBvXZ0XHMGl0FKAHYRYOIqRGvrq-GPRGq5ZQTIflttaQLEo4IfU6/s1600/page_flip.png’/></a>
<div class=’msg_block’/>
</div>
লাল লেখা টি পরিবরতন করে আপনার ব্লগ এর url দিন .<a href=‘http://freecall24.blogspot.com/‘><img alt=” src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjefbnB4aJzMBgxtqj3yn-n2DgKoX3s2tz2azlDW89y3rXbCnzHCUeTEx5xz01nRRrbDD3BXHXWzztVWxBTq-Ji-JSUZBvXZ0XHMGl0FKAHYRYOIqRGvrq-GPRGq5ZQTIflttaQLEo4IfU6/s1600/page_flip.png’/></a>
<div class=’msg_block’/>
</div>
তারপর 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](http://s.techtunes.com.bd/tDrive/tuner/abba/94038/www.blogger.com-2011-10-24-17h-43m-02s.jpeg)
তাহলে হয়ে যাবে আপনার ব্লগের নতুন ডিজাইন।
বিঃদ্রঃ ব্লগ এর ডিজাইন এর যেকোনো কাজ করা আগে আপনার ব্লগ এর template Backup করে নিবেন। তাহলে যদি ব্লগ এর কোনো সমস্যা হয় তাহলে আগের অবস্থায় পরিবর্তন করতে পারবেন । Backup / Restore Template করবেন কিভাবে?? Edit HTML পেজ এ উপরে লেখে আছে download full template . ওখান থেকে Backup / Restore Template করা যায়। আর পরে আগের নিয়মের মত template upload করতে হবে।*****
-
আপনার ব্লগ এ author অ্যাড করবেন কিভাবে?
এক্সদ্ভ
![segtfvseGSEdv1 রাঙিয়ে তুলোন আপনার ব্লগস্পট ব্লগকে (মেগা টিউন) [পর্ব ৫]Dont Miss](http://s.techtunes.com.bd/tDrive/tuner/abba/94038/segtfvseGSEdv1.png "segtfvseGSEdv1")
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 কাজ শেষ এখন আপনার ব্লগার এ যান আর দেখুন নতুন ব্লগ অ্যাড হয়েছে।(((((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.))))))))
-
কিভাবে author কমেন্ট Highlight অথবা অন্য স্টাইল করবেন???
আগের নিয়ম মত 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) করুন নিচের কোড গুলো মত</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’>
<span class=’deleted-comment’><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
অর্থাৎ লাল কালার লেখা গুল অ্যাড(add) করতে হবে। এখন search করুন
</head> এখন </head> এর পরের লাইন এ নিচের কোড টি বসিয়ে দিন।</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>
<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>
.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;
}
-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 যোগ করবেন?
![fdx রাঙিয়ে তুলোন আপনার ব্লগস্পট ব্লগকে (মেগা টিউন) [পর্ব ৫]Dont Miss](http://s.techtunes.com.bd/tDrive/tuner/abba/94038/fdx.png "fdx")
আগে নিয়ম মত 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’/>
<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 != "true"’>,</b:if><b:if cond=’data:blog.pageType == "item"’>
<script expr:src=’"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"’ type=’text/javascript’/></b:if></b:loop> </font>
<script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
<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 != "true"’>,</b:if><b:if cond=’data:blog.pageType == "item"’>
<script expr:src=’"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"’ type=’text/javascript’/></b:if></b:loop> </font>
<script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
Time in Dhaka 
0 comments:
Post a Comment