আপনার লেভেল গুলোকে আপনি কি CSS3 Bricks/Box বানাতে চান

1
313

আশা করি সবাই ভাল আছেন । আজ আমিআপনাদের দেখাব কি ভাবে আপনর ব্লগের লেভেল গুলুকে CSS3 Bricks/Box বানাবেন।

আপনার লেভেল গুলোকে আপনি কি CSS3 Bricks/Box বানাতে চান

Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

ডেমো দেখতে চাইলে এখানে ক্লিক করুন

 

 

  • প্রথমে ব্লগ লগইন করুন।
  • তারপর dashboard >>> Template >>> Edit HTML এই ধাপ অনুসারে জান।
  • আপনার Template এর বেকাপ রাখতে ভুলবেন না ।
  • প্রথমে ]]></b:skin>  টি খুজুন। ( Ctrl+f)
  • নিচের কোডটি ]]></b:skin> এর ঠিক আগে বসান।
#textwidget {
    color: #666;
    font-size: 0.925em;
    font-style: italic;
    line-height: 1.6em
}
 
a.tag {
    color: #777;
    font: 9px verdana;
    text-transform: uppercase;
    transition: border-color .218s;
    background: #f4f4f4;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    border: solid 1px #ccc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin: 0 4px 4px 0;
    padding: 3px 5px;
    text-decoration: none
}
 
a.tag:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15)
}
 
a.tag:active {
    color: #000;
    border-color: #444
}
 
.slides {
    font-size: 85%;
    line-height: 130%;
    overflow: hidden;
    padding: 0;
    margin: 30px 0 10px;
    border-bottom: 1px solid #000
}

এখন এই কোডটে <b:widget id='Label1' locked='false' থেকে </b:widget> এই কোড পযন্ত খুজে বের করুন।
এবং <b:widget id='Label1' locked='false' থেকে </b:widget> এর বদলে [ পুর কোডটি বাদ দিবেন ] নিচের কোট টি বসান।
<b:widget id='Label1' locked='false' title='Labels Cloud' type='Label'>
    <b:includable id='main'>
        <b:if cond='data:title'>
            <h2>
                <data:title/>
            </h2>
</b:if>
        <div class='textwidget'>
            <div expr:class='"widget-content " + data:display + "-label-widget-content"'>
                <b:if cond='data:display == "list"'>
                    <ul>
                        <b:loop values='data:labels' var='label'>
<li>
                                <b:if cond='data:blog.url == data:label.url'>
                                    <span expr:dir='data:blog.languageDirection'>
                                        <data:label.name/>
                                    </span>
                                    <b:else/>
                                    <a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
                                </b:if>
                                <b:if cond='data:showFreqNumbers'>
                                    <span dir='ltr'>(
                                        <data:label.count/>)</span>
                                </b:if>
                            </li>
</b:loop>
                    </ul>
<b:else/>
                    <b:loop values='data:labels' var='label'>
                        <span expr:class='"label-size label-size-" + data:label.cssSize'>
                            <b:if cond='data:blog.url == data:label.url'>
                                <span expr:dir='data:blog.languageDirection'>
                                    <data:label.name/>
                                </span>
                                <b:else/>
                                <a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
                            </b:if>
                            <b:if cond='data:showFreqNumbers'>
                                <span class='label-count' dir='ltr'>(
                                    <data:label.count/>)</span>
                            </b:if>
                        </span>
                    </b:loop>
                </b:if>
                <b:include name='quickedit' />
            </div>
</div>
</b:includable>
</b:widget>

এখন আপনার Template টি সেভ করুন। এখন দেখুন আপনার লেভেল গুলু বক্স আকারে দেখাচ্ছে।


টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

1 মন্তব্য

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

eleven − ten =