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

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

বন্ধুরা সবাই ক্যামন আছেন আশাকরি সবাই খুব খুব ভালো ও সুস্থ আছেন এবং চুটিয়ে ব্লগিং করছেন । যাই হোক আজকে আপনাদের দেখাবো কিভাবে আপনার থিম এডিট করে অসাধারন স্টাইল যুক্ত করবেন অনেকের মনে প্রশ্ন যাগছে কি হতে পারে । আজকের স্টাইল এর নাম 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



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

COMMENTS

নাম

অনলাইন ইনকাম,11,অন্যান্য,13,অ্যাডসেন্স,3,অ্যান্টিভাইরাস,9,আইটি নিউজ,11,আলেক্সা,6,ইন্টারনেট,63,ইসলামিক,8,উইন্ডোজ,36,উইন্ডোজ ১০,3,উবুটু,1,এইচটিএমএল,60,এনড্রয়েড,56,ওয়ার্ডপ্রেস,11,ওয়ালপেপার,12,ওয়েডগেট,77,ওয়েব ব্রাউজার,7,ওয়েব হোস্টিং,1,কবিতা,1,ক্র্যাক,18,খবর,3,গুগল অ্যাডসেন্স,2,গেম,8,টিপস অ্যান্ড ট্রিকস,122,টেম্পেলেট,53,ডাউনলোড,75,নোটিফিকেশন,1,পিসি টিপস,15,পোর্টবেল,3,ফীডবার্নার,4,ফেসবুক,29,ফ্রীলান্সিং,1,বাংলা ইবুক,11,বিনোদন,8,ব্লগার,419,ব্লগার টিপস,194,মিডিয়া,1,মিডিয়া প্লেয়ার,1,মুভি,2,সফটওয়্যার,16,CSS ( সিএসএস ),8,Mp3 গান,1,SEO,27,WhatsApp,2,
ltr
item
এসো বন্ধু: ব্লগার এর যেকোনো থিম এডিট করে হোম পেজে দিন দারুন সব স্টাইল । সঙ্গে ভিডিও টিউটিরিয়াল !!
ব্লগার এর যেকোনো থিম এডিট করে হোম পেজে দিন দারুন সব স্টাইল । সঙ্গে ভিডিও টিউটিরিয়াল !!
http://2.bp.blogspot.com/-Mio6jTyu1iI/U6aeDInK5PI/AAAAAAAAEB8/0rjphr1vn80/s1600/home+page+summaries+style.png
http://2.bp.blogspot.com/-Mio6jTyu1iI/U6aeDInK5PI/AAAAAAAAEB8/0rjphr1vn80/s72-c/home+page+summaries+style.png
এসো বন্ধু
http://www.esobondhu.com/2014/06/blog-post_22.html
http://www.esobondhu.com/
http://www.esobondhu.com/
http://www.esobondhu.com/2014/06/blog-post_22.html
true
8212991989234450027
UTF-8
Loaded All Posts Not found any posts আরও দেখুন বিস্তারিত পড়ুন Reply Cancel reply Delete By মূল পাতা PAGES POSTS View All আরও কিছু পোস্ট ARCHIVE সার্চ করুন সকল পোস্ট সমূহ Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy