How To Create Your site or Blog Images Responsive

Do you have problem with your site or blog images width and height? And you want to make these images responsive? Ok let make images responsive, for this we have to edit our site or blog template to add few codes. 

1. First we have to put first part of code in head section to edit CSS of theme. I will here show you how to add in blogger theme. How to edit theme in blogger, click here

2. In that section you learn how to edit blogger template or theme, Now i will show you how to add code in template or theme

3. Press ctrl+F key from your keyboard a popup window will appear it depend on browser in chrome it will appaer in top right, in firefox it will appear in bottom left side. find this code " ]]</b:skin>" in theme editor as shown in image

4. Add any one of these code just above " ]]</b:skin>" 

(a). Add CSS code : If you want the image to scale both up and down on responsiveness, set the CSS width property to 100% and height to auto:

.responsive {
  width: 100%;
  height: auto;
}

 

(b). Add this code If you want an image to scale down if it has to, but never scale up to be larger than its original size, use max-width: 100%:

.responsive {
  max-width: 100%;
  height: auto;
}

 

(c). Add this code If you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice.

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

 

5. Now finaly add this code in html or edit your image class as responstive

<img src="nature.jpg" alt="Nature" class="responsive">

 

Share:

Read More

How to edit theme in blogger

How to Create Blog in Blogger and Edit Blogger Template (Theme) 

1. First go to blogger.com and signin with your email, if still not create blog first signup. 

2. Second step to click on create blog or New blog. Fill your name of blog which you want to create in popup window or new window

click next, in next window fill your blogger name, if that name not available choose another name, if it available then save your blog.

3. To edit your blog theme click theme in your left hand-side panel

4. Now customize button will appear click on arrow as shown in image below

5. Now your theme html section will appear to edit theme. But before making any changes in  template, First take backup of your template to prevent if anything go wrong, with this backup you can revert  blog to its orignal position before edit. Now you are ready to edit your theme, add or remove any code which you want. In this section i show you how to create blog in blogger and edit theme of blogger.

Share:

Read More

How To Add Code Box In Blogger Post

Most new bloggers starts blogging from blogspot.com. If you create new blog and want to share your blog link with other bloggers for link exchange but don't know how to do this, here i am sharing this method with you. I am also using this. Its very easy just follow these steps one by one. 

1.  First step is to login to your blogger account.

2. Second step to edit your theme to copy paste this code, for this click on theme button in your left hand side control panel as shown given below image,

Now click this cursor button as shown in below image, do not click Customize button

3. Now you will enter in html section of your blogger them here you can edit your them codes, you can delete code which you not required or add new code just like we going to add in your theme's "CSS" section. 

4. First you have to find " ]]</b:skin>  " this code in template you can find it by scrolling down slowly of press ctrl+F a search box will popup in your browser copy paste this code in search box and find or enter. Once you find it copy paste any of these two codes just above it like in picture

Code 1. For Style 1 Copy This Code [With Scroll]

.code1 { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; }
.code:hover { background-repeat:no-repeat; }

Code 2. For Style 2 Copy This Code [Without Scroll]

.code2 { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; }
.code:hover { background-repeat:no-repeat; }

 

5.   Copy paste this given code below to your above code in your html to show scrolling box BLUE.

/* blockquote */ .post blockquote {background-color:transparent;border-left:8px solid #ff7400;padding:10px;margin:10px;overflow-y: scroll; max-height: 250px; margin: 1.5em 10px; padding: 3px 2em;} .post blockquote{color:#000000;font-family:"PT Serif",Georgia,Times,serif;border-left:5px solid #ff7400;margin-left:0;margin-right:0;margin-bottom:27px;padding-left:27px} blockquote blockquote{font-size:inherit}

Now save template by click on floppy icon and you are done

6. In this step i will show you how to use this. 

(a). Create new post in your blog. Click on html or pencil icon you will see html view or compose view, now click html view.

(b).  Now write or paste the code given below in your blogger post editor.

For Green Box

                       <div class="code1">
                        Your Code Here. Which ever you want
                        </div>

For Blue Box

<blockquote> Your Code Here. Which ever you want </blockquote>

c). Replace " Your Code Here. Which ever you want " with your desired code.

(d). Now click on " Publish Button " and see it live. But remember all code write in html view.

Note:- You can also also use another without scrollbar  style here Add Links in coloured box

Share:

Read More

Which is the best video format or ratio for Youtube?

Which are the best video ratio or formats for Youtube?

There are many formats of video that YouTube accept.

Well you can use many formats to make your videos like 

 Horizontal:        720x1280 (720p)  

                             1920×1080 (1080p) (HD) 

                             2560×1440 (1440p) (2k) 

                             3840×2160 ( 2160) (4k) 

 Vertical:             600×1200 (1:2)

                             600×900 (2:3) 

                             1080 ×1350 (4:5)

                             1080×1920 (9:16) 

All depends on your requirements means the type of video you want to make but among them most popular is For vertical : 9:16 (1080w×1920h) for shorts video. For horizontal : 4K (3840w×2160) for horizontal screen. But these formats make video size bigger consume audience's data, so to make lower MB files use lower formats

Share:

Read More