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

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

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

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

৩. Ctrl+F চেপে এই কোডটা খুজে বাহির করুন।নিচের থেকে যে আইকনটা পছন্দ হয় সে কোড গুলা কপি করুন।

Style 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

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/people/peo-7/peo845.cur), progress;}</style>

Style 3

<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

<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

<style type="text/css">body, a, a:hover {cursor: url(http://royal-tutor.110mb.com/TRANSPARENT_HALO_POINTER-royaltutor.net.cur), progress;}</style>

৪.

</body>

কোডের ঠিক আগে Paste করুন।

৫. preview দিয়ে দেখে নেন ঠিক আছে কিনা তারপর আপনার save template এ ক্লিক করুন।

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

১. আপনার ব্লাগার লগইন করুন এবং  Design >> Edit HTML যান।

২. Ctrl+F চেপ </head> এই কোডটা খুজে বাহির করুন।নিচের কোড গুলা কপি করুন।

<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>

৩.

<span style="color: #ff00ff;"><strong></head></strong></span>

কোডের ঠিক আগে Paste করুন।৪. আপনার save template এ ক্লিক করুন।

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

১.  আপনার ব্লাগার লগইন করুন এবং  Design >> Page Element যান।

২. Gadget ক্লিক করুন এবং 'HTML/Javascript' সিলেক্ট করুন ।

৩.নিচের কোড কপি করে Paste করুন।

<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 বাটন যুক্ত করা এবং আপনার ব্লাগারে শেষ..... ইত্যাদি।

কোন সমস্যা হলে আমাকে জানাবেন,এবং কমেন্টস করতে ভুললবে না ।সময় হলে আমার সাইটা দেখতে পরেন।দেখলে কিন্তু আমাকে জানাতে হবে কেমন লাগলো।আমাকে ফেসবুকে পেতে http://www.facebook.com/raihan.ikbal

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/people/peo-7/peo845.cur), progress;}</style>

***          আমার সাইট______***

Level 0

আমি Abu Raihan। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 15 টি টিউন ও 253 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 2 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

নিজে জানুর অন্যকে জানান।আমাকে ফেসবুকে পেতে-http://www.facebook.com/raihan.ikbal আমার সাইট-www.tunesadda.blogspot.com বা আমার কাছে ফোন করতে +8801712195668 নাম্বারে ডায়াল করুন।


টিউনস


আরও টিউনস


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


টিউমেন্টস

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

    আপনাকে অনেক ধন্যবাদ।সন্দীপ দা আপানারা শুধু আমার পাশে থাকবেন আমি আপনাদের সাথে আছি।কারণ আমার নিজের বলে কিছু নাই,সব আপনাদের।

    😆

ভাল লাগলো। তবে আর একটু clr করে লিখলে ভাল হত।

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

    ভাই মাউস আইকন বলতে কি আপনি কি বুজাইছেন?? কেও আমার ব্লগ এ browse করলে কি অটো মাউস আইকন পরিবর্তন হবে?????

    হ্যাঁ।

বস সাহায্য করেন- আমি আমার ব্লগ এ কোনো পোস্ট লিখলে তা পুরাটা ১ম পেজ এ শো হয়, আমি এই বর পোস্ট টিকে কিভাবে শর্ট বা ছোটো করবো। বস কিভাবে ব্লগে ১,২,৩,৪ পেজ বানাবো? ধন্যবাদ

    আমার তো WORDPRESS কোন অভিগতা নেই।১ম পেজ এ শো হয় না হওয়া আমার কি মনে হয় জানেন , ওটা টাইমের সমস্যা।আবার একটু চেষ্টা করেন ।কমেন্টস করা জন্য আপনাকে অনেক ধন্যবাদ।

বস আমার ব্লগ টি WORDPRESS এ করা

আমি আমার ব্লগ এ কোনো পোস্ট লিখলে ১ম পেজ এ শো হয়, আমি কিভাবে ব্লগে ১,২,৩,৪ পেজ বানাবো আমার ব্লগ ব্লগার এ http://www.swaponmahmud.co.cc

    number navigation widget to blogger লেখাটা দিয়ে google তে search করেন পেয়ে যাবেন। না পারলে আমাকে জানাবেন কিন্তু।ধন্যবাদ

বলবেন কিভাবে–
১. pagination যোগ করবো? Mean at end of 1st page will show 1,2,3 page number.
২. In every thread,how 2 add facebook,twitter like button?
৩. At the end of every thread,how 2 add related post with thumbnail?

    সাথে থাকুন এবং আমার পরের টিউন গুলাতে পাবেন ।