Posts

Showing posts with the label blogs
Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

How To Embed PDF to your Blogger blog post

-
Image
1. You must have a file to upload first. 2. If you're on Blogger, you already have a Gmail or Google account. Go to  https://drive.google.com Sign in if you haven't already. 3. To upload your file. See My Drive? Click and select "Upload files..." 4. Go to correct folder where your file resides and select file. 5. A upload wizard appears on right hand side. See image below. When upload is complete, click on pdf and it will open. 6. Within the pdf, you will see this symbol which looks like a person+. Click on it. 7. Click "Advanced" to get more options. 8. Click "Change" to modify access. Note that at this point, this pdf is "Private - Only you can access". 9. Select the access you desire. Mine is a free tute so I choose "Public on the web". If I want to restrict it to only people I share the link with, then I would choose "Anyone with the link". Click Save. 10. Clicking Save on previous scr...
Post a Comment
Read more

Free Live traffic feed for blogger, wordpress,website

-
Image
Any body want to Live traffic feed for blogger, wordpress or website just paste the the following code and adjust width and number of users ww=190 means 190px width wne=10 means it shows 10 users 1.For Blogger Blogspot: Go to -->>Layout -->>select widget of "Configure HTML/JavaScript" then paste the following code  width 190px and 10 users: <script type="text/javascript" src="http://feedjit.com/serve/?vv=1515&amp; tft=3&amp; dd=0&amp; wid=&amp; pid=0&amp; proid=0&amp; bc=FFFFFF&amp; tc=000000&amp; brd1=012B6B&amp; lnk=135D9E&amp; hc=FFFFFF&amp; hfc=2853A8&amp; btn=C99700&amp; ww=190&amp; // here change the width as per your site i gave 190px wne=10&amp; // here Show where visitors came from and number of visitor i gave 10 visitor srefs=0"> </script> <noscript> <a href="http://feedjit.com/">Live Traffic Stats</a> </noscript...
Post a Comment
Read more

Floating Social Media Buttons for blogger blog

-
Image
Step 1)  As always,  login to your blogger account  -  Select your blog  - go to  Template  area and download your template backup first. You'll find a Backup/Restore link on the top right side in Template area. Step 2)  Now click on  Edit HTML  and wait for your template code box to load. Step 3)  For icons, I have used FontAwesome 4.2.0 so just find out opening  <head>   tag and just after it, paste the FontAwesome icons Link given below. <link href='http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css' rel='stylesheet'/> Please note  that this is the latest version of FontAwesome icons CSS link and you need to update if you are using old version because, in old versions StumbleUpon icon is not included. Add Google JavaScript Library Link also if not already added to your template. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery...
Post a Comment
Read more

Social Media Sharing Buttons below Blogger Post Title

-
Image
Step 1. From the  Blogger Dashboard , go to "Template" and click on the "Edit HTML" button: Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. Once you see the search box, type the  </head>  tag inside the search box and hit Enter to find it. Step 3. Just above </head> add this script: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(function() { var $movesbuttons = $("#floating-social-buttons"), $window = $(window), offset = $movesbuttons.offset(); $window.scroll(function() { if ($window.scrollTop() > offset.top) { $movesbuttons.css({'position' : 'fixed', 'width' : ' 550px ', 'top' : '0px'}); } else { $movesbuttons.css({'position' : 'absolute', 'top' : 'auto...
Post a Comment
Read more

Automatically Resize Blogger Images

-
Image
Automatically Resize New post Only: Open up the Blogger dashboard and go to 'Template' > 'Customize'. You'll see the option for 'Advanced', click on it and find your way to the 'Add CSS' tab... paste the following CSS code inside the empty box: .post-body img { max-width: 100%; max-height: auto; display: block; margin: auto; } Automatically Resize New post & old also : Remember that when you make changes to the CSS of the blog's Template, these changes will affect every post previously added, using the "Original size" dimension option. .post-body img { max-width: 100%; max-height: auto; display: block; margin: auto; } box-shadow: none; border: none; padding: 0px; }
Post a Comment
Read more

Add Related Posts Widget To Blogger With Thumbnails

-
Image
Now here is a wonderful hack for displaying related posts beneath each of your blog posts along with post thumbnails. The related posts are picked from other posts having same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see  related posts  of interest. Adding the Related Posts Widget to Blogger/Blogspot Step 1. Log in to your  Blogger account  and go to Theme > Edit HTML Step 2. Click anywhere inside the code area and press the CTRL + F keys: Step 3. Search for this tag that you need to add inside the search box (hit Enter to find it): </head> Step 4. Copy and paste the below code just before/above the </head> tag: <!--Related Posts with thumbnails Scripts and Styles Start--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts{float:left;width:auto;} #related-posts a{border-right: 1px dotted #eae...
Post a Comment
Read more

Maximum Number of Posts in Blogger Label Page

-
He shows you a simple technique on how you can change number of posts in  Blogger Label Page (category page). By default, Blogger has set a maximum of 20 posts but this tutorial allows you to customize it – you may want to increase or decrease maximum number of posts depending on your preference. If you want to have some changes, you will have to edit the template. By doing so, follow these steps: 1.Blogger   Dashboard   >   Template  >   Edit HTML . Click []   Expand Widget Templates . 2.Search for this code: expr:href='data:label.url' 3. Replace it with the following: expr:href='data:label.url + "?max-results=200"' In the above code, Peter opted to use 150 because he wants all posts to be displayed. You may use another value instead of 150. If you can find    expr:href=’data:label.url’  repeat step 3. For example like this <b:loop values='data:post.labels' var='label'> <a expr:href='data:l...
Post a Comment
Read more