একটি আকর্ষণীয় ব্লগসাইট তৈরী করার সম্পূর্ণ টিউটোরিয়াল । একদম পানির মতো সহজ !

স্বাগতম,কেমন আছেন সবাই? আশা করি ভালো আছেন ।আজ আমি আপনাদের সাথে আলোচনা করব কিভাবে একটি আকর্ষণীয় ব্লগার সাইট তৈরী করা যায় ।তো আর দেরী কেন? এখনি শুরু করা যাক ।

প্রথমেই এখানে গিয়ে ফ্রি রেজিস্ট্রেশন করে নিন ।

রেজিস্টার করার সময় নিম্নলিখিত বিষয়গুলো খেয়াল রাখবেন :
Username: ইউজারনেম দিয়ে আপনার ব্লগের ঠিকানা নির্ধারণ করা হবে ।পরবর্তীতি এই ঠিকানা বদলাতে পারবেন না ।তাই একটি ইউনিক ইউজারনেম বাছাই করা জরুরী ।
Change Domain: এটি দ্বারা আপনার ব্লগ নেইমের পরবর্তী অংশ নির্ধারণ করা হয় ।যেমন: example.mywapblog.com or example.heck.in ইত্যাদি ।

রেজিস্ট্রেশন সম্পন্ন হলে লগিন করুন ।

লগিন করে এখানে যান- Dashboard >> Setting এবং আপনার প্রয়োজন অনুযায়ী সেটিংস করুন ।

Name: এখানে আপনার ব্লগের টাইটেল দিন ।যেমনঃ জুবায়ের আহমদ শাকিলের বাংলা ব্লগ ।

Description: এখানে আপনার ব্লগের একটি সংক্ষিপ্ত বিস্তারিত লিখুন ।অর্থাৎ আপনার ব্লগ কী সম্পর্কে তা লিখু ।যেমনঃ My blog is about science and technology.

Category: আপনার ব্লগের ক্যাটাগরি নির্ধারণ করুন ।

সবশেষে সেটিং সেইভ করে আবার ড্যাশবোর্ডে ফিরে আসুন ।

এখন আমরা থিম সেট করব ।কারণ ডিফল্ট থিমগুলো ততোটা আকর্ষণীয় নয় ।
এজন্য আপনাকে এখানে যেতে হবে
Dashoard >> Theme >> Edit CSS

এখন যে খালি বক্সটি আসবে সেখান থেকে সকল কোড রিমুভ করে দিন এবং নিম্নলিখিত কোডগুলো প্রবেশ করান ।

@import url(http://tech4bd.mywapblog.com/files/new-css-2nd.css);
body {background:url(http://flambon.xtgem.com/files/natural_shadow/hd1.jpg),#4a8221;margin:0;padding:0;color:white}
#share-buttons{
padding:5px 0px;
text-align:center;
margin:4px 0px;
}
#share-buttons a {
content:'এই টিউনটি ফেইসবুকে শেয়ার করুন';
color:red
}
a {color:gold}
#header {background: url(http://tech4bd.mywapblog.com/files/10711-001.jpg)center center no-repeat,#adbe10;background-size:120% 110%;margin:0;padding:0}
#content .post:after { content:url(http://husenhxm.mobie.in/images/theme/blog.png); display:block; text-align:right;}
#search-form [type=submit] {background:url(http://dejunk.xtgem.com/c/2d.png)center left no-repeat;border:0;font-size:0;height:29px;padding:0;width:22px;margin:0 0 0 -4px}
#search-form [type=text] {background:url(http://dejunk.xtgem.com/c/2.png)center right no-repeat;border:0;width:107px;height:23px}
#navigation span+span+span{border-left:1px solid #bbb;border-right:none;}
.post-meta2 span{content:" টি কমেন্ট";}
.post-single .post-content {margin:0;padding:9px 5px;border-top:1px solid #d7d7d7;border-left:1px solid #fff;border-bottom:1px solid #fff;border-right:1px solid #fff}
#content:before { background :#3071a9 url(http://dedy13junkiez.mywapblog.com/files/aro.png) center left 4px no-repeat; color :#fff; content :"সর্বশেষ আপডেট... !!!"; display :block; padding:8px 5px 8px 23px;}

Mobile Version Theme In Text File (Download)

এখন একই পেইজে দেখবেন Desktop লেখা আছে ।ঐখানে ক্লিক করুন এবং CSS Edit এ যান ।যে বক্সটি আসবে তার সকল কোড রিমুভ করে নিচের টেক্সট ফাইল কপি করে ঐ বক্সে পেস্ট করুন ।

/*
Design by Jubaer Ahmed Shakil
*/
body {margin: 0;margin-top: 59px;padding: 0;line-height: 1.5em;font-family: Arial, Helvetica, sans-serif;font-size: 12px;
color: #ccc;background: #000 url(http://fitz-freedom.wen.ru/css/mwb/themissingpiece/green_blog/images/menu_panel_bg.jpg)no-repeat top center;}
body:before{content: url(http://fitz-freedom.wen.ru/css/mwb/themissingpiece/green_blog/merpati.gif);
position:fixed;_position:absolute;
top:0px;
right:10px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+document.documentElement.clientWidth - offsetWidth);}
a:link, a:visited { color: #ffc64a; text-decoration:none; }
a:active, a:hover { color: #FFFF00; text-decoration: none; }
h1 {margin: 0px;padding: 10px 0;font-size: 26px;color: #d77707;font-weight: normal;}
h2 {margin: 0 0 15px 0;padding: 0 0 10px 0;font-size: 20px;color: #ff9d11;border-bottom: 1px dotted #663e17;}
h3 {margin: 0 0 15px 0;padding: 0 0 10px 0;font-size: 20px;color: #ffc64a;border-bottom: 1px dotted #663e17;}
p {margin: 0px;padding: 0 0 10px 0;text-align: justify;}
/*.cleaner {clear: both;width: 100%;height: 1px;}*/
.comment {padding-left: 20px;margin-left: 5px;background: url(http://fitz-freedom.wen.ru/css/mwb/themissingpiece/green_blog/images/comment_icon.gif) bottom left no-repeat;}
#wrapper {margin: 0px;padding: 0px;background: #000;}
#header {clear: both;height: 200px;overflow: hidden;width: 960px;margin: 0 auto;background: #000000 url(http://tech4bd.mywapblog.com/files/content-bg-css.jpg) top center no-repeat; }
#logo {float: left;height: 100px;padding: 0 0 0 20px;background: none; color: #acb66c; font-family: Georgia, "Times New Roman", Times, serif;}
#logo .heading {font-size: 2.5em;padding: 20px 0 0 0;margin: 0;}
#logo .description {font-size: 1em;color: #acb66c;width: 620px;margin: 0;}
#logo p {}
#logo a {text-decoration: none;color: #acb66c;font-weight: bold;}
#logo .heading a:hover, .comment a:hover {padding-left: 20px;margin-bottom: 8px;line-height: 35px;color:#2EFE2E;text-shadow:1px 1px 0px #fff;transition:all 0.65s ease-in-out;background: url(http://fitz-freedom.wen.ru/css/mwb/mobility/my_house/2F.jpg) no-repeat left 10px;}
#search {float: right;width: 200px;padding: 0 20px 0 0;background: transparent;}
#search form {height: 25px;padding: 65px 0 0 25px;background: transparent;}
#search fieldset {border: none;padding: 0;margin: 0;}
#search-text {width: 170px;background: transparent;border: none;}
#menu {width: 940px;height: 80px;margin:2px auto;padding: 10px 10px 0px 10px;clear: both;}
#menu ul {height: 80px;padding: 12px 0 0 20px;list-style: none;margin: 0;}
#menu li {display: inline;}
#menu .current_page_item a {background:#363636;color: #2efe2e;border-radius:8px;border:1px solid #000;}
#menu a {padding: 0 20px;text-decoration: none;font-weight: bold;color: #fff;}
#menu a:hover {text-decoration: none;color: #2EFE2E;padding-left: 20px;margin-bottom: 0px;line-height: 80px;
background: #363636 url(http://fitz-freedom.wen.ru/css/mwb/mobility/my_house/2F.jpg) no-repeat left 5px;
transition:all 0.65s ease-in-out;font-weight:bold;text-shadow:1px 1px 0px #fff;border:1px solid #000; border-radius:8px ;}
#page {
clear: both;width: 960px;
padding: 1px 0px 0px 0px;
margin: 0px 0px 0px 0px;margin: 0 auto;}
#back2top {
margin: 0;height: 50px;width: 960px;
background: url(http://fitz-freedom.wen.ru/css/mwb/themissingpiece/green_blog/top.gif) no-repeat bottom center;}
#back2top a {
display: block;padding:0;
text-decoration: none;text-align: center;}
#back2top a:hover {
text-decoration: none; color: #fff;}
#content {
float: left;
margin: 0 auto;
padding: 0;
width: 630px;
margin-bottom: 1px;}
.post {
padding: 0px;margin: 0 0 0 0;
padding-bottom: 10px;
margin-bottom: 30px;
border: 2px solid #191a0d;
background: #0b0c04 url(http://fitz-freedom.wen.ru/css/mwb/themissingpiece/green_blog/images/post_bg.jpg) top right no-repeat;}
.post .title {
width: 480px;
height: 50px; /* padding 20px + */
margin: 0 0 10px 0;
padding: 0px 0 5px 10px;
font-size: 26px;
font-weight: bold;
color: #acb66c;}
.post .title a {
text-decoration: none;
font-weight: bold;
font-size: 24px;
color: #acb66c;
padding-top: 5px;}
.post .title a:hover {
text-decoration:none;transition:all 0.65s ease-in-out;color:#2EFE2E;text-shadow:1px 1px 0px #FFF;padding-left: 20px;margin-bottom: 8px;line-height: 25px;
background: url(http://fitz-freedom.wen.ru/css/mwb/mobility/my_house/2F.jpg) no-repeat left 5px;}
.post .byline {margin-bottom: 2em;}
.post .date {
display: block;
float: left;
width: 69px;
height: 64px;
margin: 7px 0 20px 0;
background: #2efe2e;
text-align: center;
font-size: 11px;
font-weight: bold;
color: #000;}
.post .date .month {
display: block;
height: 16px;
padding: 1px 0 0 0;
background: #acb66c;
color: #FFFFFF;}
.post .date .day {
height: 47px;
font: bold 28px Georgia, "Times New Roman", Times, serif;}
.post .date .year {
display: block;}
.post .entry {
margin: 10px 20px 0 90px;}
.post .entry2 {
margin: 10px 20px 0 0;}
.post .entry p, .post .entry ol, .post .entry ul, .post .entry2 p, .post .entry2 ol, .post .entry2 ul {
margin-bottom: 1.6em;
/*line-height: 180%;*/
list-style-position: inside;}
.post .links {
height: 22px;
padding: 5px 0 10px 10px;
background: url(http://fitz-freedom.wen.ru/css/mwb/themissingpiece/green_blog/images/icon_mywapblog.png) no-repeat;
clear: both;
margin-top: 10px;
margin-bottom: 5px;}
.post .links a {
text-decoration: none;
font-weight: bold;}
.post .links a:hover {
text-decoration: blink;
color: #2efe2e; font-weight:bold;}
.post .links .more {
padding-left: 10px;
background: transparent;}
.post .links .comments {
padding-left: 45px;
background: url(http://fitz-freedom.wen.ru/css/mwb/themissingpiece/green_blog/images/comment_icon.gif) no-repeat 30px 0px;}
.post .links .rss {
padding-left: 43px;
background: url(http://fitz-freedom.wen.ru/css/mwb/themissingpiece/green_blog/images/rss.png) no-repeat 30px 0px;}
.post:hover{color: #fff; text-decoration:none;box-shadow:0 0 7px #FFF;border-radius:10px;transition:all 0.65s ease-in-out;}
#sidebar {float: right;width: 300px;
margin: 0 auto;padding: 1px;margin-bottom: 3px;}
#sidebar li {
margin: 0 0 5px 0;
padding: 0 0 5px 5px;
border-bottom: 1px solid #22250e;}
#sidebar ul {clear: both;margin: 5px;
padding: 0px;border: 2px solid #191a0d;
background: #0b0c04 url(http://fitz-freedom.wen.ru/css/mwb/themissingpiece/green_blog/images/right_section_bg.jpg) top center no-repeat;}
#sidebar ul li {
margin: 0 0 5px 0;}
#sidebar ul li:hover {padding-left: 20px;margin-bottom: 8px;line-height: 22px;border-radius:8px; border: 1px solid #000;
color:#2EFE2E;text-shadow:1px 1px 0px #fff;transition:all 0.65s ease-in-out;
background: #363636 url(http://fitz-freedom.wen.ru/css/mwb/mobility/my_house/2F.jpg) no-repeat left 10px;}
margin: 0 0 5px 0;}
#sidebar h3 {
background: #0b0c04;
margin 5px auto;
padding: 8px 0 0 8px;
border: 2px solid #191a0d;
font-size: 1.6em;}
#sidebar a {
text-decoration: none;
color: #fff;}
#sidebar a:hover {
text-decoration:none;
color: #2efe2e; font-weight:bold;}
#calendar {}
#calendar_wrap {
padding: 10px 20px 30px 20px;}
#calendar table {
width: 200px;
border-collapse: collapse;
text-align: center;}
#calendar caption {
padding: 2px 0;
font-weight: bold;
color: #BA3300;}
#calendar thead th {
padding: 2px 0;
border-top: 2px solid #BFD19A;
border-bottom: 2px solid #BFD19A;}
#calendar tbody td {
padding: 4px 0;}
#calendar tfoot td {
padding: 2px 0;
border-top: 2px solid #BFD19A;
font-weight: bold;}
#prev {
text-align: left;
float: left;
margin: 0;
padding: 5px;}
#next {
text-align: right;
float: right;
margin: 0;
padding: 5px;}
#today {
background: #BFD19A;
font-weight: bold;}
#footer {
clear: both;
padding: 0 auto;
margin: 0; padding-top:5px;
color: #666666;
font-size: 11px;
height: 140px;
background: #000000 url(http://fitz-freedom.wen.ru/css/mwb/themissingpiece/green_blog/images/content_bottom.jpg) top center no-repeat;}
#footer p {
text-align: center;
line-height: 12px;
padding: 0;}
#footer a {
color: #666666;}
#footer a:hover {
color: #fff;
text-decoration: none;}
#footer:before{
content:url(http://kayuhbaimbaiblog.mobie.in/img/kayuh-baimbai-fitz-freedom.gif);
no-repeat;display:block;
text-align: center;
margin:0;padding 0;}
#footer:after{
content:"Designed by Jubaer Ahmed Shakil"; display:block;
text-align: center; color:#2efe2e; margin:0;padding 0;}
#pagination_links{
font-size: 18px;
text-align: center;
padding-bottom: 5px;
font-size: 11px;}
#pagination_links span{
padding: 8px;
display: inline-block;
background: transparent;
margin-top: 2px;
border: 1px solid #363636;
color: #FFF; border-radius: 6px;}
#pagination_links a{border: 1px solid #363636;
padding: 8px;
background: #2efe2e;
color: #000;border-radius: 6px;
display: inline-block;
margin-top: 2px;
text-decoration: none;}
#pagination_links a:hover
{width:30px; height:25px;
text-decoration: none;
color: #fff;border-radius:8px; border: 1px solid #000;text-shadow:1px 1px 0px #fff;transition:all 0.65s ease-in-out;
background: #363636 url(http://fitz-freedom.wen.ru/css/mwb/mobility/my_house/2F.jpg) no-repeat left 15px;}
.no-link, .no-link:hover {
text-decoration: none;
color: inherit;}
.messages {
background: #D6EBAD;
padding: 10px;
font-size: 2em;
color: #BA3300;
list-style: none;
margin: 0;}
#ad {
width: 980px;
margin: 0 auto;
height: 15px;
overflow: hidden;}
.inp-text {
width: 400px;
height:40px;
border:1px inset #000;
background:#000;
box-shadow:0 0 7px #fff;
border-radius:10px;
margin:4px 0;
color:#fff;
font-size:14px}
.inp-textarea {
width: 400px;
height: 150px;
border:1px inset #ccc;
background:#000;
box-shadow:0 0 7px #fff;
border-radius:10px;
margin:4px 0;
color:#fff;
font-size:14px}
.inp-btn {
margin:8px 0;
padding:8px 6px;
width:250px;
border-radius:8px;
background:#000;
border:1px outset #ccc;
color:#fff;
font-weight:bold}
.inp-btn:hover {
box-shadow:0 0 7px #0000ff;
transition:all 0.65s ease-in-out}
#comments h4 {font-size: 20px;text-align:center;
border-bottom:2px solid #000;
padding-bottom:15px;}
.comment {background: #0b0c04;
padding: 5px;
color: #fff;
margin: 10px 0 10px 0;}
.comment-alt {
background: #363636;
color: #fff;}
.comment h5 {
text-align:left;
margin:0;
padding:0;
text-transform:uppercase;
font-size:14px;}
.comment a {before {content:url(http://fitz-freedom.wen.ru/css/mwb/themissingpiece/green_blog/user.jpg);
float:left;text-decoration: none;
margin-right:6px;}
#share_buttons {background: url(/themes/desktop/TheMissingPiece/images/img15.gif) no-repeat;
padding: 2px;clear: left;}
/*
Design by Jubaer Ahmed Shakil
*/

Desktop Version Theme In Text File

এখন সেইভ করে Dashboard এ ফিরে আসুন এবং Navigation Menu তে যান । Navigation Menu তে এর সবগুলো লিংক ডিলিট করুন এবং ক্রমান্বয়ে নিচের কোডগুলো এড করুন ।

1.
[color=red][img]http://tech4bd.mywapblog.com/files/user-about.jpg[/img] [url=BLOG_URL/about.xhtml]আমার সম্পর্কে[/url][/color]

2.
[img]http://tech4bd.mywapblog.com/files/guetbook.jpg[/img][url=BLOG_URL/about.xhtml#guestbook]আপনার বৃত্তান্ত এন্ট্রি করুন[/url]

3.
[img]http://tech4bd.mywapblog.com/files/comment-30x30.jpg[/img][url=BLOG_URL/feedback.xhtml]আপনার মতামত জানান[/url]

4.
[img]http://tech4bd.mywapblog.com/files/icon-30x30-blogger-zpsb67.jpg[/img][url=FOLLOW_BLOG_URL]ব্লগটি অনুসরণ করুন[/url]

5.
[img]http://tech4bd.mywapblog.com/files/rss-30x30-jpg.jpg[/img]ফিডস: [url=BLOG_URL/rss.xml]RSS[/url] / [url=BLOG_URL/atom.xml]Atom[/url]

6.
Comment Feed: [url=BLOG_URL/comment/rss.xml]RSS[/url] / [url=BLOG_URL/comment/atom.xml]Atom[/url]

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

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

কিন্তু আপনারা বলবেন ব্লগসাইটের এত লম্বা url টাইপ করতে করতে তো হাত ব্যাথা হয়ে যাবে তাই না? এই সমস্যা সমাধানের জন্য আপনি ডোমেন কিনতে পারেন কিংবা ফ্রিও নিতে পারবেন ।মাই ওয়াপ ব্লগে কিভাবে ফ্রি ডোমেইন সেট করবেন সেই বিষয়টি আমি আমার পরবর্তী টিউনে আলোচনা করব ।

ধন্যবাদ কষ্ট করে টিউনটি পড়ার জন্য ।বেঁচে থাকলে আবারও দেখা হবে আপনাদের সাথে ।খোদা হাফেজ ।

Level 2

আমি জুবায়ের আহমদ শাকিল। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 8 বছর 10 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 58 টি টিউন ও 221 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।


টিউনস


আরও টিউনস


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