Thursday, November 27, 2014

ব্লগারের সৌন্দর্য্যবৃদ্ধির পূর্ণ টিউটোরিয়াল। পর্ব-১

ব্লগারের সৌন্দর্য্যবৃদ্ধির পূর্ণ টিউটোরিয়াল। পর্ব-১

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

ব্লগারে জন্য ৫ টি মাউস আইকনের HTML কোড :


১.এখানে ক্লিক করে আপনার ব্লাগার লগইন করুন এবং Design >> Edit HTML
২. Expand Widget Templates ঘরে টিক চিহ্ন মারেন।



৩. Ctrl+F চেপে এই কোডটা খুজে বাহির করুন।নিচের থেকে যে আইকনটা পছন্দ হয় সে কোড গুলা কপি করুন।
Style 1
টেকটিউনস কোড হাইলাইটার - কোড কপি করতে কোডের উপর ডাবল ক্লিক করুন
1
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/user/use-1/use32.cur), progress;}</style>

Style 2

টেকটিউনস কোড হাইলাইটার - কোড কপি করতে কোডের উপর ডাবল ক্লিক করুন
1
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/people/peo-7/peo845.cur), progress;}</style>
Style 3
টেকটিউনস কোড হাইলাইটার - কোড কপি করতে কোডের উপর ডাবল ক্লিক করুন
1
<style type="text/css">body, a, a:hover {cursor: url(http://royal-tutor.110mb.com/FRUITY_LIME_HEART-royaltutor.net.cur), progress;}</style>

Style 4

টেকটিউনস কোড হাইলাইটার - কোড কপি করতে কোডের উপর ডাবল ক্লিক করুন
1
<style type="text/css">body, a, a:hover {cursor: url(http://royal-tutor.110mb.com/FRUITY_LEMON_HEART-royaltutor.net.cur), progress;}</style>

Style 5

টেকটিউনস কোড হাইলাইটার - কোড কপি করতে কোডের উপর ডাবল ক্লিক করুন
1
<style type="text/css">body, a, a:hover {cursor: url(http://royal-tutor.110mb.com/TRANSPARENT_HALO_POINTER-royaltutor.net.cur), progress;}</style>
৪.
টেকটিউনস কোড হাইলাইটার - কোড কপি করতে কোডের উপর ডাবল ক্লিক করুন
1
</body>
কোডের ঠিক আগে Paste করুন।
৫. preview দিয়ে দেখে নেন ঠিক আছে কিনা তারপর আপনার save template এ ক্লিক করুন।

ব্লগারের হোম পেজে শুধু শিরেনাম শো করবে:

১. আপনার ব্লাগার লগইন করুন এবং  Design >> Edit HTML যান।
২. Ctrl+F চেপ </head> এই কোডটা খুজে বাহির করুন।নিচের কোড গুলা কপি করুন।
টেকটিউনস কোড হাইলাইটার - কোড কপি করতে কোডের উপর ডাবল ক্লিক করুন
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<style type='text/css'>
 
<b:if cond='data:blog.pageType != "item"'>
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}
 
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}
 
.post h3 strong, .post h3 a:hover {color:#333333;}
 
.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}
 
</b:if>
 
</style>
৩.
টেকটিউনস কোড হাইলাইটার - কোড কপি করতে কোডের উপর ডাবল ক্লিক করুন
1
<span style="color: #ff00ff;"><strong></head></strong></span>
কোডের ঠিক আগে Paste করুন।৪. আপনার save template এ ক্লিক করুন।

ব্লাগারে floating share buttons যুক্ত করুন :

১.  আপনার ব্লাগার লগইন করুন এবং  Design >> Page Element যান।
২. Gadget ক্লিক করুন এবং 'HTML/Javascript' সিলেক্ট করুন ।
৩.নিচের কোড কপি করে Paste করুন।
টেকটিউনস কোড হাইলাইটার - কোড কপি করতে কোডের উপর ডাবল ক্লিক করুন
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<pre><style>
#sharebar {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;right:0;}
#sharebar .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div>
<div id="sharebar">
 
<div id="fb">
<a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script>
</div>
<div id="rt">
<script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript">
</script>
</div>
<div id="su">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5">
</script>
</div>
<div id="digg">
<script src="http://widgets.digg.com/buttons.js" type="text/javascript">
</script>
<a href=""></a>
</div>
<div id="gb">
<a data-button-style="normal-count" href="http://www.google.com/buzz/post" title="post on google buzz">
<script src="http://www.google.com/buzz/api/button.js" type="text/javascript">
</script>
</a>
 
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.bloggertrix.com">Get widget</a></div>
 
</div>
</div>
</div>
৪.Save করুন ।
আজ এই পর্যন্ত ।আগামি পর্ব থাকছে-প্রতিটা  পেজে ফেসবুকের send বাটন যুক্ত করা এবং আপনার ব্লাগারে শেষ..... ইত্যাদি।