ব্লগার এর যেকোনো থিম এডিট করে হোম পেজে দিন দারুন সব স্টাইল । সঙ্গে ভিডিও টিউটিরিয়াল !!

বন্ধুরা সবাই ক্যামন আছেন আশাকরি সবাই খুব খুব ভালো ও সুস্থ আছেন এবং চুটিয়ে ব্লগিং করছেন । যাই হোক আজকে আপনাদের দেখাবো কিভাবে আপনার থিম এডিট করে অসাধারন স্টাইল যুক্ত করবেন অনেকের মনে প্রশ্ন যাগছে কি হতে পারে । আজকের স্টাইল এর নাম Summaries যার বংলা অর্থ সারসংক্ষেপ / সংক্ষিপ্তসার / সারাংশ পরিবর্তন আশাকরি নীচের স্টাইল ডেমো দেখলে বিস্তারিত বুজতে পারবেন । তবে আজকে এই স্টাইল আপনি যেকোনো ব্লগার ব্লগের থিমে ব্যবহার করতে পারেন এটা ব্যবহার করার ফলে আপনার ব্লগ মোটেও স্লো হবে না এটা করলে আপনার ব্লগের হোম পেজকে দেখাবে আরও আকর্ষণীয় । তাহলে কথা বাড়িয়ে লাভ নেই চলুন শুরু করে দিই ।






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







☞ কি আসল থিম আর আজকের এই স্টাইল যুক্ত করা ডেমো দেখে আশাকরি বিস্তারিত বুজতে পারলেন । তাহলে এবার শুরু করে দিন আপনার কাজ নীচে থেকে দেখে নিন কিভাবে কি করতে হবে ।


১// আপনার ব্লগ লগইন করুন ড্যাশবোর্ড থেকে Template এ ক্লিক করুন ।

২// এবার Edit HTML এ ক্লিক করুন ।

৩// এবার আপনার কীবোর্ড এর CTRL+F প্রেস করে নীচের লাইনটি খুজে বের করুন ।


<b:includable id='post' var='post'>


৪// এবার উপরের কোড টিকে মুছে সেখানে নীচের কোড গুলো কপি পেস্ট করুন । নীচের চিত্রের মতো সম্পূর্ণ কোড মুছে ফেলুন ।







<b:includable id='post' var='post'>

  <article expr:class='&quot;blogger-post blogger-post-&quot; + data:blog.pageType' expr:id='&quot;post-&quot; + data:post.id'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <div class='blogger-post-part blogger-post-thumbnail-area'>
          <b:if cond='data:post.thumbnailUrl'>
            <a expr:href='data:post.url'><img class='blogger-post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' width='72'/></a>
          </b:if>
        </div>
      </b:if>
    </b:if>

    <div class='blogger-post-part blogger-post-body-area'>

      <h3 class='blogger-post-title'>
        <b:if cond='data:post.title'>
          <b:if cond='data:post.link'>
            <a expr:href='data:post.link'><data:post.title/></a>
          <b:else/>
            <b:if cond='data:post.url'>
              <b:if cond='data:blog.url != data:post.url'>
                <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
            <b:else/>
              <data:post.title/>
            </b:if>
          </b:if>
        <b:else/>
          [Untitled]
        </b:if>
      </h3>

      <div class='blogger-post-body'>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <data:post.body/>
        <b:else/>
          <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
            <data:post.body/>
          <b:else/>
            <b:if cond='data:post.snippet'>
              <data:post.snippet/>
            <b:else/>
              No content.
            </b:if>
          </b:if>
        </b:if>
      </div>

      <footer class='blogger-post-footer'>
        <div class='blogger-post-footer-line blogger-post-footer-line-1'>
          <span class='blogger-post-author vcard'>
            <b:if cond='data:top.showAuthor'>
              <data:top.authorLabel/> <span class='fn'>
              <b:if cond='data:post.authorProfileUrl'>
                <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='Author Profile'><data:post.author/></a>
              <b:else/>
                <span class='g-profile'><data:post.author/></span>
              </b:if>
              </span>
            </b:if>
          </span> <span class='blogger-post-timestamp'>
          <b:if cond='data:top.showTimestamp'>
            <data:top.timestampLabel/> <a class='blogger-post-timestamp-link' expr:href='data:post.url' rel='bookmark' title='Permanent Link'><time class='blogger-post-published published' expr:datetime='data:post.timestampISO8601'><data:post.timestamp/></time></a>
          </b:if>
          </span> <span class='blogger-post-comment-link'>
          <b:if cond='data:blog.pageType != &quot;item&quot;'>
            <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
              <b:if cond='data:post.allowComments'>
                <a expr:href='data:post.url + &quot;#comments&quot;'><data:post.commentLabelFull/></a>
              </b:if>
            </b:if>
          </b:if>
          </span>
        </div>
        <div class='blogger-post-footer-line blogger-post-footer-line-2'>
          <span class='blogger-post-labels'>
            <b:if cond='data:post.labels'>
              <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'>
                <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if>
              </b:loop>
            </b:if>
        <b:include data='post' name='postQuickEdit'/>
          </span>
        </div>
      </footer>
    </div>
  </article>
</b:includable>


৫// এবার Save Template এ ক্লিক করুন । এবার নীচের স্টেপ দেখুন ।


✔ এবার নীচে স্টাইল ভাগ ভাগ ভাবে দেওয়া হল আপনার পছন্দ মতো অ্যাড করে নিন । কিভাবে করবেন নীচের স্টেপ দেখুন ।


1. রউন্ড স্টাইল হোম পেজ ইমেজ , কোড নীচেঃ







.blogger-post {padding: 5px 0px 0px; background: #F6F6F6; border-right: 1px dashed #E3E3E3;height:150px; margin:0 0 20px; overflow:hidden; *zoom:1;}
.blogger-post:after {  content:" "; display:block;clear:both;}
.blogger-post-title { font:normal bold 20px/1.2 Arial,Sans-Serif; margin:0 0 10px;padding:0;}
.blogger-post-title a{color: #888;}
.blogger-post-thumbnail-area {border-radius: 330px;-webkit-border-radius: 330px; -moz-border-radius: 330px;  border: 10px solid #E5E5E5;margin-left: 20px;width:120px;height:120px; background-color:#2D3957;float:left;overflow:hidden;background: url('http://4.bp.blogspot.com/-1EWHdOSKo4U/U6SRtdpyfnI/AAAAAAAAJS8/pGyE9nTVSFM/s1600/no-image-available.png'); background-repeat: no-repeat; background-size: 100%;}
.blogger-post-body-area:before {border-bottom:40px solid transparent;border-right:40px solid #E4E4E4;border-top:40px solid transparent; width:0;height:0; content:"";margin: 10px 0px 20px -60px;display:inline-block;float: left;}
.blogger-post-thumbnail {display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:none;outline:none;position:static;}
.blogger-post-body-area {padding:20px;margin-left:200px;font-size:12px;border-left: 1px solid #E3E3E3;}
.blogger-post-footer {margin:10px 0 0;padding:10px 0 0;border-top:1px dotted #ddd;font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif;text-transform:uppercase;color:#999;}
.blogger-post-footer a {color: #888;}
.blogger-post-item,
.blogger-post-static_page {height:auto}
.blogger-post-item .blogger-post-body-area,
.blogger-post-static_page .blogger-post-body-area {margin:0;padding:20px;font-size:13px;}
.blogger-post-item .blogger-post-title,
.blogger-post-static_page .blogger-post-title {font-size:30px}
.icon-action {width: 10px;height:10px;}



2. নিয়জ পেপার স্টাইল , কোড নীচেঃ






#blog-pager {clear: both;}
.blogger-post {background: #F6F6F6;  border-right: 1px dashed #E3E3E3;  border-left: 1px dashed #E3E3E3; width:200px;  margin:0 20px 20px 0;  padding: 10px 10px 0px;  overflow:hidden;  float: left; display:inline-block; *zoom:1;}
.blogger-post:after {  content:" ";  display:block;  clear:both;}
.blogger-post-title {  font:normal bold 16px/1.2 Arial,Sans-Serif;  margin:0 0 10px;  padding:0;}
.blogger-post-title a{color: #777;}
.blogger-post-thumbnail-area a img{  width:200px;  height:200px;  background-color:#fff;overflow:hidden;background: url('http://4.bp.blogspot.com/-1EWHdOSKo4U/U6SRtdpyfnI/AAAAAAAAJS8/pGyE9nTVSFM/s1600/no-image-available.png');background-repeat: no-repeat;background-size: 100%;}
.blogger-post-thumbnail { display:block; width:100%; height:100%; max-width:none;max-height:none;min-width:0; min-height:0; margin:0; padding:0; border:none; outline:none;position:static;}
.blogger-post-body-area { padding:10px 20px 20px; margin:10px 0 0; font-size:11px;}
.blogger-post-footer {background: #E9E9E9;  margin:10px -20px 0; padding:20px;  border-top:1px dotted #ddd; font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif; text-transform:uppercase;  color:#555;}
.blogger-post-footer a{color: #888;}
.blogger-post-item,
.blogger-post-static_page {width:auto;}
.blogger-post-item .blogger-post-body-area,
.blogger-post-static_page .blogger-post-body-area {  margin:0;  padding:20px;  font-size:13px;}
.blogger-post-item .blogger-post-title,
.blogger-post-static_page .blogger-post-title {font-size:30px;}
.icon-action {width: 10px;height:10px;}



৬// এবার আপনার কীবোর্ড এর CTRL+F প্রেস করে নীচের ট্যাগটি খুজে বের করুন ।


]]></b:skin>


৭// উপরের ট্যাগটি খুজে পেলে তার ঠিক উপরের উপরের যে স্টাইলটি আপনার পছন্দ সেটি কপি পেস্ট করুন । তারপর Save Template এ ক্লিক করে সেভ করে নিন ।


নোটঃ উপরের কোড গুলো থেকে রগিন কালার মুছে সেখানে আপনার পছন্দের কালার অ্যাড করতে পারেন ।


৮// এবার একি ভাবে আপনার কীবোর্ড এর CTRL+F প্রেস করে নীচের ট্যাগটি খুজে বের করুন ।


</body>


৯// উপরের ট্যাগটি খুজে পেলে তার ঠিক উপরে নীচের কোড কপি পেস্ট করুন ।


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
 <script type='text/javascript'>              
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,&quot;s&quot;+size+&quot;-c&quot;);
var thumbnails = blogGadget.getElementsByTagName(&quot;img&quot;);
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize(&quot;Blog1&quot;,210);              
</script>
  </b:if>
</b:if>


নোটঃ উপরের কোড থেকে 210 মুছে সেখানে আপনি যেরকম ফটো সাইজ দিতে চান সেই সাইজ বসান ।


১০// Save Template এ ক্লিক করে বেরিয়ে আপনার ব্লগ ভিজিট করে দেখুন । আশাকরি আপনি কাজটি করতে সফল হয়েছেন ।


✔ উপরের টিপস উনুযায়ি বুজতে সমস্যা হলে আমার নীচের ভিডিও টিউটিরিয়ালটি দেখুন ১০০% বুজতে পারবেন ।


ভিডিও টিউটিরিয়াল 






মূল ইউটিউব লিঙ্ক  https://www.youtube.com/watch?v=1dfkaCKFyD0



✔ তাহলে আজকের এই পোস্ট আপনাদের ভালো লাগলে অবশ্যই যানাবেন । কোন রকম সমস্যা হলেও জানাবেন আমি হেল্প করতে চেষ্টা করবো । ভালো থাকবেন সুস্থ থাকবেন । আল্লাহ্‌ হাফেজ ।

একটি মন্তব্য পোস্ট করুন

0 মন্তব্যসমূহ