Blogger Blog Par Read More Button Kaise Add Kare

Hello Friends aajke is post me main aap logo ke sath share karunga blogger blog par auto read more widget kaise add karte hai uske bareme. Aagar aap bloging karte ho aur aap blogspot par blog banaya ho to aajke ye post aapke kafi help kar sakta hai. Blog ke home page ke har ek post me read more button hona bahuti jaruri hoti hai, kyuki aagar ye button hoga to visitor ko post me visit karne me asani hogi.

Dosto sayed aapko pata hai blogger ke liye jo template milte hai usme pahle se hi read more button add raheta hai, lekin jin template me ye button nahi hota hai usme ham logo ko khud laga na padta hai. Aap aapne blog par jo blogger template use kar rahe ho us theme aagar read more button nahi hai to aap niche ke kuch simple step ko follow karke aapne blog template me ek badhiya sa CSS style read more button add kar sakte ho. To chaliye dekh lete hai kaise isko aapne blog par lagate hai.

Blogspot Blog Par Auto Read More Button Kaise Add Kare ?

Is button ko aapne blog par lagane se pehle kuch bat aapko dhyan me rakhna hoga, jaise ki aapko niche ki step ko thik se follow karna hoga main jo jo karne ko bolunga aapko wo hi karna hai aagar aap thik se nahi karoge to ye button aapke blog par kam nahi karega. aur ek bad niche ki step ko follow karne se pehle aap aapne template ke backup rakhe taki age jakar aagar aap koi galti karte ho to koi problem na ho.

Step. 1. Pahle aap aapne blogger blog login kare, login karne ke bad Dashboard se "Template" option par click kare, uske bad Backup/Restore par click karke theme backup rakhe, uske bad niche se "Edit HTML" par click kare.

Step 2. Aabhi aapke samne edit box open ho jayega, aap just box ke under aapne mouse click kare uske bad aapne Keyboard se "CTRL+F" press kare. dekhiye ek search box side me khul jayega usi box me aap niche ki tag ko search kare.

Copy All Code

</head>

Step 3. Upar jo tag main search karne ke liye bola hai </head> is tag ke thik upar niche jo code hai un sabhi code ko copy kare uske bad Past kare.

Copy All Code

<script type='text/javascript'>var thumbnail_mode = "no-float" ;summary_noimg = 430;summary_img = 340;img_thumb_height = 100;img_thumb_width = 120;</script><script type='text/javascript'>//<![CDATA[function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx = s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(img.length>=1) {imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ = summary_img;}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}//]]></script>

Step 4. Upar ki kam thik se karne ke bad aab aap niche ki tag ko search kare, kaise tag search karte hai wo main upar bata diya hai usko follow kare.

Copy All Code

<data:post.body/>

Step 5. Upar jo tag search karne ko bola wo aapko aapne template me bahut bar mil sakta hai 1,2,3,4 bar tak milega, lekin aapko 2nd bar jo tag milega usi ke upar niche ki code ko copy karke past karna hoga.

Copy All Code

<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/><div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script><span class='jump-link' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url'>Read More..</a></span><div style='clear: both;'/></b:if></b:if>

Step 6. Friends aapka kam lagbhag ho gaya hai, aabhi sirf aapko is Read more button ko CSS code ki madad se design karni hogi uske liye aapko niche ki tag ko search karna hoga.

Copy All Code

]]></b:skin>

Step 7. upar ki tag ke thik upar niche jo css code hai usko copy kare aur past kare, thik se code ko add kare.

Copy All Code

.jump-link { display: block; font-size: 12px; font-weight: bold; text-align:right;}.jump-link  a {        font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; padding: 6px 15px; background: -moz-linear-gradient(  top,  #42aaff 0%,  #003366); background: -webkit-gradient(  linear, left top, left bottom,  from(#42aaff),  to(#003366)); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; border: 1px solid #003366; -moz-box-shadow:  0px 1px 3px rgba(000,000,000,0.5),  inset 0px 0px 1px rgba(255,255,255,0.5); -webkit-box-shadow:  0px 1px 3px rgba(000,000,000,0.5),  inset 0px 0px 1px rgba(255,255,255,0.5); box-shadow:  0px 1px 3px rgba(000,000,000,0.5),  inset 0px 0px 1px rgba(255,255,255,0.5); text-shadow:  0px -1px 0px rgba(000,000,000,0.7),  0px 1px 0px rgba(255,255,255,0.3);}

Note: Friends ekdom end me jo CSS code add karne ke liye bola hai aagar aap chaho to isko nahi bhi add kar sakte aagar add karoge to read more button dekhne me accha lage ga.

Friends Upar ke sab Code ko sahi se add karne ke bad "Save Template" par click kare aur is read more button ko save kare, save karne se pahle aur ek bar check kari koi sab thik hai ya nahi aagar thik hai to save kare.

Main ummid karta hu aapko ye post pasand ayi hogi, aagar aapko koibhi problem hota hai is read more button ko aapne blogger blog me add karne me to koi bat nahi aap comment kare main help karunga, aur aagar aapko ye post help laga hai to post ko share kare.

Author : chaudhary Ramesh

Share this

Related Posts