Once you've made your way over to your blog's control panel, click the template button on the left sidebar. From there you will see an Edit HTML button on the right, which you will then click to open a modal containing all the nitty gritty code of your blog.
Blogger's initial code my throw you off, since it mixes HTML with a couple of Blogger specific tags. However, if you scroll down enough past all the variables and extra stuff the usual Blogger template contains, you should find yourself with the actual CSS of the blog. You'll want to keep scrolling till you find the strange "]]></b:skin>" tag.
Once found, you'll want to click on the line before it and hit enter. You can now go back to your CSS dropdown menu for a moment and copy the CSS (in the CSS tab) and paste it here:

Add the HTML to Blogger

Now, this part varies with the template you're using so as an extra tip, let's do something first: Go ahead and save your template, closing the window once complete. Middle click the "View blog" button on top to open your blog in a new tab. In the following example, I've used the "Simple" template and am using Firebug to inspect the HTML. As you can see I've checked the different divs and have decided to use "content-outer" classed div as the parent to my menu. Why? Because I want my menu to be in the center column; the parent "content" spans the whole page, and the "content-inner" child has some padding I don't want.
So I'm going to go back to the previous page, Edit my template's HTML again and scroll down till I find the place I want to paste the HTML portion of my dropdown menu into (i.e. right after the opening tag for the "content-outer" div):
Once complete, you can save template and behold the awesome new dropdown installed in Blogger!

How Apply Auto Read More

1. Login to your Blogger account >> Go to Dashboard >> Template >> Edit HTML Check the  Expand Widget Templates check box on top right of the HTML Window.
2. Press CTRL+F In the code window find the </head> line.
3. and paste the following Code Before </head>.

<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>

Note:
summary_ noimg= 430; >> The length of the summery if the post does not have a thumbnail.
summary_img = 340;       >>The length of the summery if there is an image in the post that will be converted into a thumbnail.
null_thumb_height = 120; >> The height in pixels of the thumbnail.
null_thumb_width = 120; >>The width in pixels of the thumbnail.

4. Find The Following code <data:post.body/> and replace with below 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'>Continue Reading...</a></span>

<div style='clear: both;'/>

</b:if>

</b:if>

You can change the words “Read more” with your own Words.
and now add some css codes for Read More button I have three style for Read More buttons.