How To Increase Video Size In Blogger Posts

December 30, 2020 0
Embedding a YouTube video in your blog post is the best practice to make your post content rich and visually effective. Moreover adding videos in your post helps you to decrease the bounce rate and increases your revenue.
We can easily add videos on our posts by using blogger post editing tool bar but by default blogger post's video size is small and doesn't fill the whole post width, that small size can affect your video impact on readers. So, to increase the size of your blogger video (By maintaining its ratio) so that viewers can see clearly just follow the give tutorial with images.

Steps: How To Change YouTube Video Size

Step 1. Login to your blogger account > Dashboard > Template > Edit HTML

Step 2. Click anywhere inside the code and find the following code (use Ctrl + F):

</head>

Step 3. Just above it place the following code:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'></script>
<script>
$('.BLOG_video_class').ready(function(){
$('.BLOG_video_class').parent().css({
    'position': 'relative',
    'padding-bottom': '56.25%',
    'height': '0',
    'clear': 'both',
    'text-align': 'center',
    'margin': '20px 0'
});

$('.BLOG_video_class').css({
    'position': 'absolute',
    'top': '0',
    'left': '0',
    'width': '100%',
    'height': '100%',
});
});
</script>

Step 4. Click Save template.

Done !

All of your embedded YouTube videos will be of full size and responsive with your post width. If you have and issue related to above tutorial comment below. Stay Updated, Browse Tech2site ! :)

5 Steps To Add Signature To Blogger Posts (With Demo)

December 30, 2020 0
Do you want to add a signature text or image to your Blogger posts? Post signature is usually a text or an image at the end of each post, adding custom signature to your blogger posts not only give it certain flair but also gives a visible stamp of your authority over your blog content. You can manually insert signature to new blog posts but what about old post, its not easy to add signature manually in already published posts specially if they are in hundreds.Don't worry your are tech2site user, nothing is impossible here. I have created a set of CSS and HTML code to automatically add signature in old and upcoming new posts. The best part about this method is that you can edit your signature at any time and the changes will reflect on every post.

There are two types of signature you can add either text or image and both have different way of installing therefore i have added instruction for both types with images and created a demo to make you have a look.

How To Add Signature To Blogger Posts

Step 1. Login to your blogger account > Dashboard > Template > Edit HTML
Step 2. Click anywhere inside the code and find the following code ( use Ctrl + F ) :

<div class='post-footer'>

Note : There are two occurrence of the above code. 1st occurrence for mobile view and second for desktop.


Step 3. Just above <div class='post-footer'> Place the following code:


     <style type="text/css">
.hbz-signature {
     font-size: 22px;
     font-family: Papyrus,fantasy;
     text-shadow: 5px 2px 2px #dddddd;
     margin-top : 30px;
     text-color: #222222;
}

.hbz-signature span {
     font-size: 14px;
     vertical-align: top;
}
    </style>
    <div class="hbz-signature"><span>By</span> You Name</div>
    <style type="text/css">
.hbz-signature {
     margin-top: 30px;
}

.hbz-signature img {
     background: transparent none repeat scroll 0% 0%;
     border: medium none;
     box-shadow: none;
}
    </style>
    <div class="hbz-signature"><img src="Your Signature Image URL"  alt="Your Image Name"/></div>


 Step 4. Configuration of Code:


For Text Signature:

  • Adjust the value 22 to change font size of text.
  • Replace the value Papyrus,fantasy to change the font family of the text (List of Font Family).
  • Replace the value #dddddd to change text shadow color (Color Codes).
  • Replace the value #222222 to change text color.
  • Replace You Name with your name or with any other text.

For Image Signature:

Note: To create your Signature image you can use photo editing software on your mobile or machine, or the online Pixlr editor.

If you don't know much about editing, you can use tool Mylivesignatue (Recommended).

  • Replace Your Signature Image URL with the URL of the image.
  • Replace Your Image Name with name of the image.
Read : How to Get the URL of an Image

    Step 4. Click Save template.


    That's All!


    Now go through your blog and see you signature text or image on each blogger post. Coding usually depends on the template you are using, therefore if you have and issue related to above tutorial comment below. Stay Updated, Browse Tech2site ! :)

    Move Inline CSS Or JavaScript To External (FREE)

    December 27, 2020 0
    CSS stands for Cascading Style Sheets which is a design language, describes how and where the HTML elements are to be displayed on the web page. It mainly controls the looks of the website like the colour, size and font of the text. JavaScript is an object-oriented computer programming language commonly used to create complex features on web pages. It is also called interactive web language because it can create and change the static components of the web pages based upon the user input and always keeps running in the background to fetch the latest details.

    What Is Inline / Internal CSS And Internal JavaScript?

    All the CSS's and JavaScript's code that is embedded with in HTML document are know as inline or Internal CSS or Internal JavaScript.

    <p style="color: red; text-align: center;">Hello World!</p>    /* Inline CSS */

    <style type='text/css'>                                        /* Internal CSS */
      p {
        color: red;
        text-align: center;
      }
    </style>

    <script type='text/javascript'>                           // Internal JavaScript
    var x = 5;
    var y = 2;
    var z = x + y;
    alert(z);
    </script>


    Note: There is no inline Javascript.

    What Is External CSS And JavaScript?

    All the CSS's and JavaScript's code that is hosted externally (uploaded on a server) in form of a file but connected to the required HTML document are known as External CSS or JavaScript.

    <link href='/myCSS.css' rel='stylesheet' type='text/css'/>    /* External CSS
    <script src='/myJavaScript.js' type='text/javascript'/>    // External JavaScript


    Note: Here /myCSS.css and /myJavaScript.js are links to the file uploaded on a server.

    Benefits Of External CSS And JavaScript.

    Page loading speed increases once file is cached.
    - bandwidth reduces.
    - Single file can used on multiple websites.
    - Easy to update the code from single file.
    - Make HTML document tidy.

    You can also Minify JavaScript and CSS code to reduce the file size and execution time

    How To Host CSS And JavaScript File For Free

    Step 1. Open Notepad > Paste your code.

    Note: For CSS remove <style> and </style> tags, for JavaScript remove <script> and </script> tags from start and end of the code if any.

    Step 2. In the Notepad menu, select 'File' > 'Save as' and type the file name with extension .css for CSS and .js for JavaScript.

    Step 3. In the same window, choose "All files" in the "Save as type" option and set the Character Encoding to UTF-8.

    There are so many file hosting services, but google drive is free and easy to manage. You can also use google drive for windows to quickly manage your files.

    Step 4. Open Google drive and login with your Gmail account. After you logged in, click on the NEW > Folder button and create a new separate folders to upload your JavaScript and CSS files.

    Step 5. Open the newly created folder, and click on the NEW > File Upload. then choose the files to upload.

    Step 6. After the files have been successfully uploaded, right click on the file names and select 'Share'. Again in the pop-up select change to anyone with the link and click Copy link.

    Step 7. Link has been copied to your clipboard. Paste your code in the below form to generate direct download link from Google drive and Dropbox sharing link

     

    Now you can use above code on your HTML document to add external CSS and JavaScript file.

    Step 8. Login to blogger account, then navigate to Theme > Edit HTML and place your Code:

    For CSS: Place code above </head>.
    For JavaScript.: Place code above </body> to Defer parsing of JavaScript.

    Tip: Use ctrl+f to find above codes.

    .

    That's all!

    For any type of issue or suggestion, please comment below. Stay Updated! Browse Tech2site :)

    Search Results "Sort By Date" Order In Blogspot

    December 27, 2020 0
    We have already discussed that Search is the necessary part of the blog/blogspot and whenever your users make search over it the resultant page shows results sorted by relevance for the give query for example:

    Many of you want to change the order and would like to set "Sort By Date" as the default sorting order not "Sort by Relevance" so that your viewers can see your latest posts first without clicking on link each time to change the order. This method works only with 3rd party search boxes. Follow the given steps carefully.

    How To Set "Sort By Date" As Default Sorting Order

    Step 1. Login to your Blogger account, then navigate to your 3rd party Search Box code.

    For example:

    <form action="/search" method="get">
    <input type="text" name="q" placeholder="Type Here..."/>
    <input type="hidden" name="max-results" value="8"/>
    <input type="submit" value="Search" />
    </form>

    Note: The above code may vary.

    Step 2. Find the code </form> and paste the following code just above it.

    <input name="by-date" type="hidden" value="true"/>

    For Example:

    <form action="/search" method="get">
    <input type="text" name="q" placeholder="Type Here..."/>
    <input type="hidden" name="max-results" value="8"/>
    <input type="submit" value="Search" />
    <input name="by-date" type="hidden" value="true"/>
    </form>

    Step 3. Save your code.

    Enjoy!

    Jump into your blog and make a search. Wait! What? your search result is sorted by date not by relevance. Remember code may vary according to your search box, if the above tutorial doesn't work for you don't worry - comment below. Stay Updated, Browse Tech2site ! :)

    How To Change Email Subscription Delivery Time For Blogger

    December 26, 2020 0
    If you were looking to change your google blogger feedburner email subscription delivery time for blog updates or To send recent / latest / newly published posts into yours followers inbox immediately or after few hours or Want To manage the auto-send email setting to prevent delay of day or several hours in email receiving or to receive posts email updates from your blog in real-time or To solve any other issue related to posts delivery schedule via email. Follow the below given step by step tutorial with images :

    Steps: To Change Email Subscription Delivery Time

    Step 1. Go to Feedburner, Login with your blogger account > Select your blog.
    Step 2. Then navigate to Publicize > Email Subscriptions > Delivery Options.
    Step 3. Change the setting and then Click Save.

    Some Tips :

    1. Make sure your the time in your Blogger settings is in YOUR time zone. This will throw the delivery timing off if it isn’t.
    2. Make sure when you schedule a blog that is timed BEFORE the scheduled Email Delivery time in Feedburner.
    3. This screen is also where you can DEACTIVATE sending emails from Feedburner all together if you still want to keep your account active but just want to stop email service.
    4. The setting to schedule delivery of new posts to email subscribers does not allow for immediate delivery, but asks you to choose a two hour window. Therefore you can schedule/publish your post few hours before delivery time to deliver it faster.

    That's It

    Now your subscribers will receive posts updates via email in your scheduled time. For any issues related to above tutorial comment below. Stay Updated, Browse Tech2site ! :)

    How To Add Twitter Cards Meta Tags To Blogger

    December 25, 2020 0
    The Twitter cards meta tags were the social media meta tags for Twitter which enable any webpage of your blog to become a rich object in social graph. In short when someone tweet your blog post, the tweeted item looks better on Twitter. It works as Facebook Open Graph works for Facebook posts. For example :
    Which is not an impressive piece of content. A social media user cancel this instead of tweeting it, But after adding the Twitter cards meta tags it looks like this :
    This is more likely to get clicked and Tweeted by users, so if you want to add, implement or setup Twitter cards social media meta tags to your blogger just follow the given step by step tutorial with images :


    Note : If you have already added Facebook open graph tags in your blogger, then you have to add only basic tags because twitter can fetch data from open graph tags except few.

    Steps : How To Add Open Twitter Cards Tags To Blogger


    Option 1 : If You Have Already Added Open Graph Tags For Facebook.


    Step 1. Log in to your Blogger account, then go to Dashboard > Template > Edit HTML.
    Step 2. Click anywhere inside the Template code, then search for the following code ( CTRL+F ) :


    <head>


    Step 3. Add this code just below it.


    <meta content='summary_large_image' name='twitter:card'/>
    <meta content='@your-name' name='twitter:site'/>
    <meta content='@your-name' name='twitter:creator'/>

     

    Step 4. Configuration of Twitter cards tags :


    • Replace your-name with your name or with your blog title.
    • ( Optional ) Change summary_large_image with the type of twitter card.

    Types Of Twitter Card :


    • summary: Default Card, including a title, description, thumbnail, and Twitter account attribution.
    •  summary_large_image: Similar to a Summary Card, but with a prominently featured image ( Recommended ). For more info click here.


    Step 5. Click on Save Template.



    Option 2 : If You Have Not Added Open Graph Tags For Facebook.


    Step 1. Log in to your Blogger account, then go to Dashboard > Template > Edit HTML.
    Step 2. Click anywhere inside the Template code, then search for the following code ( CTRL+F ) :


    <head>


    Step 3. Add this code just below it.


    <meta content='summary_large_image' name='twitter:card'/>
    <meta content='@your-name' name='twitter:site'/>
    <b:switch var='data:blog.pageType'>
    <b:case value='index'/>
    <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
    <b:default/>
    <meta expr:content='data:blog.pageName' name='twitter:title'/>
    </b:switch>
    <b:if cond='data:blog.metaDescription != &quot;&quot;'>
    <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
    </b:if>
    <meta content='@your-name' name='twitter:creator'/>
    <b:switch var='data:blog.pageType'>
    <b:case value='item'/>
    <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
    <b:default/>
    <meta content='img-url-for-home-page' name='twitter:image'/>
    </b:switch>
    Step 4. Configuration of Twitter cards tags :


    • Replace your-name with your name or with your blog title.
    • ( Optional ) Change summary_large_image with the type of twitter card.
    • Replace img-url-for-home-page with url of the image you want to show for homepage.

    Types Of Twitter Card :


    • summary: Default Card, including a title, description, thumbnail, and Twitter account attribution.
    •  summary_large_image: Similar to a Summary Card, but with a prominently featured image ( Recommended ). For more info click here.


    Step 6. Click Save template.


    Enjoy !


    Now you will see optimized Title, description, image etc on your Twitter tweet linked with your blogger. If you have any issue use Twitter card Validator . Still not resolved comment below. Stay Updated, Browse Tech2site ! :)