Showing posts with label Tutorials. Show all posts
Showing posts with label Tutorials. Show all posts

Wednesday, March 7, 2012

How to add the followers gadget in Blogger

Wondering how to get the followers gadget in Blogger? Well, this tutorial is for you!

Step 1: Go to your blog's Dashboard {www.blogger.com}:
Step 2: After deciding which blog you'd like to put the followers gadget on {it can go on all of your blogs if you'd like!}, click on the down arrow {before the View Blog button}, and select Layout, as shown in the picture above.

Step 3: Once in the Layout page {pictured below}, select 'Add A Gadget':

Step 4: In the gadgets pop-up window, scroll down until you see the Followers gadget:
Step 5: Click on the blue + sign.

Step 6: Change the Followers name {if you'd like. You can leave it 'Followers' if you want!}, and click Save:

Step 7: Move your new Followers gadget up and down in the sidebar {in Layout}, if you want it lower or higher:
Step 8: Click Save Arrangement {the orange button at the top}, and preview blog!

Monday, August 29, 2011

Fun Fonts!

Hey everyone! Sorry I've been MIA for so long... I post regularly on my normal blog, so if you feel like it, go on over and leave some love!

Anyway, here's a tutorial of sorts on how to use some cool new fonts in Blogger!

First off, I am using the Blogger in Draft, so if you don't have that installed, please see here.

Also, these picture might be a little small, so if you need them bigger just click on them!

OK! Now, go to make a new post {Dashboard>Orange 'create new post' button}. Now type something!

 Now highlight the text, and pick a font {really, pick any font!}:
I just picked Arial, but you can pick any font you'd like!

Now switch from 'Compose' to 'HTML'.
See where it says "font-family: Arial,Helvetica,sans-serif;"? Good, so DELETE the part that says "Arial,Helvetica,sans-serif". Do NOT delete the ";". That is an extremely crucial part!!! If you picked a different font, it won't say Arial. It might say Georgia, Times, Verdana, Trebuchet, Courier, or whatever you picked!

You MUST delete everything after the "font family:", until the ";". It will look something like this once you're done: "font-family: whateverfontyouwanthere;"

So once you delete that line, add whatever font you want! This has worked with every font I have tried. Try these: Amelie, Another Typewriter, HaloHandLetter, David, Adobe Caslon Pro, and whatever other fonts you want to try! For this tutorials sake, I'm just going to use Amelie. So just type {right after "font-family:"} Amelie, and go back to 'Compose' mode!
You can then adjust from there the color, size, and whatever else!

I hope this tutorial worked for you! Leave a comment if you try it!
The tutorial at work :)

How to use Blogger In Draft

Blogger in Draft will show you the things that Blogger is just testing out. For instance, if you are not using Blogger in Draft, your Dashboard looks like this:

But if you use Blogger in Draft, your Dashboard looks like this:

To change to Blogger in Draft, just scroll down to the very bottom of your Dashboard, and click on Blogger in Draft:

It will take you to the new Blogger in Draft, but if you want to keep it as your Dashboard, you must click on Make Blogger in Draft my default:
And there you go!

Some people have been saying that Blogger has taken away their rights to Edit HTML in the Blogger in Draft, but I still have mine. You must go to Template>Edit HTML. It's that easy! If you can't find your Edit HTML button, please let me know!

Saturday, May 28, 2011

Tutorial: Numbering comments in Blogger

I have done this on my regular blog, and  few people have commented asking me how I did it... Well here you go! 

This is especially helpful if you are hosting a giveaway and need to be able to find certain comments quickly! Another great asset is that you can click on the numbers to display that comment! For example, I clicked on comment number 20, and it gave me this link. When you click on it, it will take you directly to comment #20! How fabulous is that?

Here is what your comments will look like when you are finished:

OK! Let's get started!

Before you do anything! Go to Dashboard>{under the blog you would like to add numbered comments to}Settings>Comments> and under 'Comment Form Placement', select 'Embedded Below Post'. This is very important! This whole tutorial will not work if you do not do this!

OK! Now that that's done, let's move on! Go to Dashboard>Layout>Edit HTML. I would highly suggest that you download a copy of your blog template before starting!!! For those of you who are confident in your HTML knowledge and can easily go back and delete the coding you will be adding, you don't have to do this, but it is a step I would encourage you to take! 

Once you have downloaded a copy of your HTML, make sure to tick the box 'Expand Widget Template'. Then click CTRL+f to activate the search bar. In the search bar, paste the following code:
<b:loop values='data:post.comments' var='comment'>

Once you have found that code, add this code right above the code you just found {all that b:loop stuff :)}:
<script type='text/javascript'>var CommentsCounter=0;</script>
Great! Now, put this next code into the search bar:
<data:commentPostedByMsg/>
            </dt>
 
 Once that shows up, paste this code directly underneath:
<span class='numberingcomments' style='float:right;font-size:20px;'><a expr:href='data:comment.url' title='Comment Link'><script type='text/javascript'>CommentsCounter=CommentsCounter+1;document.write(CommentsCounter)></a></span>
 
 Now you're done! Save your blog, don't preview, because preview won't let you see your fabulous new numbered comments in action! :D 

Also, don't worry if you don't get it the first time! I had to do this twice to get it! So just try it again once more, and if you STILL don't get it, please feel free to e-mail me and ask! I would be happy to answer all your questions, and even install this in your blog... free of charge!

Let me know if you do this and it works!

Sunday, April 17, 2011

Calling all Gmail users!

*** By the way everyone! Photobucket has fixed their problem, so everything is back! Yay! ***

Happy Sunday to you all! I hope you have a fabulous day worshiping the Lord! Now, for some really exciting news... Gmail by Google has added a new feature... you can now use your own background instead of using theirs! It is SO cool! Here's how my Gmail is decked out:


I've made it match both my blogs! Haha! If you use this cool new feature, please tell me what your background is! Have fun!

Tuesday, September 7, 2010

Tutorial: Blogger Stats

I love the new feature that Blogger has created! It is amazing and oh-so-helpful! I love checking to see who's on my blog :) A big thanks to Robin Blogs who originally posted a tutorial on this. She's the one who got me started on stats! So thank you Robin Blogs! 

OK, I really love this tutorial :) I hope you find it as helpful as I did!
First, go to your Blogger Dashboard and locate which blog you'd like to view stats on. I chose for this tutorial to use my design blog. So after you decide which blog, select 'Stats' like shown above.

Clicking on 'Stats' will take you to a page that looks similar to this. This is an overview of your stats! Here are the features of this overview page...


Red This is very important! You can view the stats for your blog by Now, Day, Week, Month, All Time.
Yellow This shows how many people have visited your blog at a given time. Just roll your mouse over the dots, and the date, time, and page views will show up! An example is that on September 5, 2010, at 9:00 PM, I had 28 visitors. How cool is that???
Orange This is probably my favorite feature! It shows you the page views today, yesterday, last month, and all time. I've had 93 page views today, 92 page views yesterday, 2,638 page views last month, and 6,133 all time.
Blue I found this feature to be the most tricky, but what I've made out of it is that it shows which posts your readers have read the most between a certain date. For example, today the certain date is August 31, 2010 - September 7, 2010. So most people have read my Anna's Cabana Bash Giveaway post since then. 
Green I love this feature! It shows who is linking to your blog! This is a fabulous feature! I used this to see who has linked to me. I found out that I was tagged in numerous posts, and that I had 68 people being referred to my blog from a certain site! Awesome feature :)
Purple This shows from where in the world most of your blog traffic is coming from. There is also more information, mentioned below...

Blue That is the page you view when you first click on Stats. It is just the basic information you need.
Gray This tab will tell you which posts are generally your readers favorites :) 
Teal This shows you the referring URLs {Blogs that have YOUR link in them}, referring sites {Shows which sites a lot of your readers are coming from}, and keywords {what someone searches in a search engine and comes up with your blog. i.e. The keyword that most people use to find my blog is 'chic premade templates'}.
Green Where in the world are most of my readers? Well according to the Audience tab, the majority is from the U.S.A, but I also get views from Malaysia, Canada, Indonesia, Ireland, Australia, U.K., Philippines, Singapore, and Germany. How fun! It also shows a circle graph on page views by browser, and page views by operating system. 

So how cool is all this new info? Let me know if it's helpful! Have a great day!



Thursday, March 18, 2010

Tutorial: Redirecting your blog

Edited to add... this tutorial is no longer available!!! Blogger codes do not accept this anymore. Sorry!!!
***Thanks BlogSpot Blog.NET for this great tutorial!!!

Do you have an old blog you don't write on anymore, but you do have a new one? This tutorial will show you how to redirect all the traffic from your old blog, to your NEW one!!! (For an example, go here, to my old design blog.)

OK, so let's get started!!!
  1. Log in to your Blogger Dashboard - Go to Layout/Edit HTML
  2. Hit the 'Control' 'F' buttons on your keyboard and find this code:
 
          and RIGHT AFTER THAT CODE paste this code:
       
      In the red... the 3 means the number of seconds before it will redirect to your new blog. It will not redirect to your new blog until your old blog page has fully loaded. You may change the 3 to whatever number you want!!! In the blue... Put in your NEW BLOG URL!!! Not your old one, but your new one. This is the blog you will redirect to.

      Save your old blog and preview. (Depending on how many seconds you set your redirect at) Your old blog should redirect to your new blog!!! If you have any problems getting this to work, shoot me an e-mail at photogal2014@gmail.com. Thanks!




      Tuesday, February 9, 2010

      Tutorial: Numbering Comments

      ***Tutorial by Tech TNT***

      Isn't that cool??? This is a great tutorial if you host a lot of giveaways.





      Saturday, November 21, 2009

      Tutorial: How to add snow to your blog

      I use this tutorial EVERY year around Christmas time! Here you go:
      1. Go to Layout
      2. Go to Add A Gadget
      3. Select Add HTML/JavaScript gadget
      4. Paste this code:
       

      Saturday, September 5, 2009

      Tutorial: New Post Editor

      Hello friends! Have you heard everyone talking about Blogger's new post editor? Well I have too, and I decided to check it out! So for those of you interested, here are the instructions:
      1. Go to your Blogger Settings.
      2. Under Basic, scroll all the way to the bottom.
      3. Under Global Settings where it says 'Select Post Editor', check 'Update Editor'.
      4. Click Save and Done!
      It is very simple! Here are some things you will be able to do with the new editor:
      1. Strikethroughs. These are very fun! I wrote a tutorial on them, but now that you have the new post editor, you won't need it! Here is an example:
      I hate love tomatoes!

      2. Undo button! Like if you accidentally delete a picture... UNDO, and presto! Your picture is back!
      3. More Fonts! Fun Fun Fun!!!
      4. This feature was on the old editor too, but smallest, small, normal, large, and largest text. 
      5. Bold text.
      6. Italic text. 
      7. Text Colors!
      8. Text Background color! This is a very cool feature, especially if you are using blockquotes! Then it looks really neat! 
      9. A new link bar. It is bigger and you can select the text. 
      10. You can number things: 
      1. Volleyball
      2. Soccer
      3. Basketball 
       11. Or bullets:
      • Red
      • Orange 
      • Yellow
      • Green
       Well that's all! Hope it helps!

      Thursday, August 13, 2009

      Tutorial: How to make a Photoblog

      I have a photoblog over at my regular blog. Check it out! But ever wondered how I did it? Well here's how:


      Tell me if you do it!


      Thursday, July 30, 2009

      Tutorial: How to put an image under each post

      These are also called 'Post Dividers'. Here is an example:


      Right after your signature (If you have one), posted by, comments and labels, there is an image which really holds NO significance, except that it looks very pretty! So here is the tutorial on how to make one!

      CAUTION: If on your blog you have the borders around the images, this tutorial will not work! There is something about the borders and HTML. You can try it if you want to though!

      First, you need to have an image! Once you have your image, and it is cropped appropriately (You might have to play with your cropping to get it to fit on your blog!

      Go to your blogs layout. Click on Add A Gadget - Picture Gadget. UNclick the 'Shrink to Fit' button. It CANNOT be checked! Upload your image. Save.

      View Blog. Right click on your image - a little box will show up - click on 'Properties'. A new box will pop up. Leave that box up. DO NOT CLOSE IT!

      Got to Layout - Edit HTML. Click on 'Expand Widget Templates' at the top. On your keyboard, type CTRL+f (Or f3 found at the top of your keyboard). At the bottom of the screen, a little box should come up. In that box, type:
      div class='post-footer-line post-footer-line-3'
      The code should then be highlighted in green (Or blue). RIGHT above that, paste this code:



      Here is where that little box comes in! Remember when you right clicked on your image? OK, in that box, somewhere it should say 'Address URL' or something similar :) Copy all of THAT code, not any other code. Just right click on the URL and then Select All. It will copy the only code you need!

      Then, go back to your HTML code. Where it says 'YOUR TEXT HERE', paste the URL of your image.

      Preview (Or if you're feeling brave, click Save :) your blog. If everything looks fine, save your blog!

      Go back to your Layout/Add Arrange Gadgets page. Remove the picture you saved. You don't need it anymore!

      You don't need to do anything after that! Your new post dividers will show up automatically.

      And as always, if you are still in the dark about it, contact me and I'll see if I can help fix it! Hope I helped!


      Tuesday, July 14, 2009

      Tutorial: Scrolling Photo Gadget

      I'm terribly sorry, but I am only going to give you a link to how to do this tutorial. It worked for me! See for yourself at the bottom of my left sidebar! Here is the link. If you have any questions, either contact me, or Adori Graphics. I'm sure she will answer any questions you may have also! Adori Graphics has some amazing stuff! I love it! So go check it out! And here you go Marissa! I hope it works for everyone!

      Tutorial: Strikethroughs

      ***Tutorial by Sneaky Momma Blog Design***

      A strikethrough is where you write a word and go back and put a line through it, most often for the purpose of being humorous. Such as:

      I've got to get the kids to sleep so that I can blog wash dishes.

      Here's how you do it:

      First, click on the Edit Html tab as you're working on your post.

      Put in front of the text that you want the line to go through.

      Put
      behind it. The backslash is very important.

      For example, this is what the above sentence looks like when I click on the Edit Html tab:

      I've got to get the kids to sleep so that I can blog
      wash dishes.
      Have fun with this one!

      Tutorial: Borders around post images

      ***Tutorial by Sneaky Momma Blog Design***

      Wondering how to get a bigger border around you image? Well here's the simple tutorial on how!

      To put a border around the images in your posts:



      1. Find the .post img { section within the HTML of your template. It is located towards the bottom of the posts section and above the main comments section. You can find it by typing Ctrl+f on your keyboard :)

      2. Modify the width of the border (circled in red above) to your liking (the higher the number, the thicker it will be). The width of my border is 8px.

      3. Change the $bordercolor; (circled in green) to #000000; (or whatever color you‘d like. Click here for a list of color hex codes.) #000000; is black.

      4. Preview and save.

      Fun, and easy! This tutorial will really make all your photos pop! Tell me if you did it!


      Tutorial: Separators

      ***Tutorial by Sneaky Momma Blog Design***

      Do those lines under your sidebar widgets and posts drive you crazy? They drive me crazy! And also those header borders... Well, today I'm going to show you how get rid of those awful things!


      How to remove the widget separator in sidebars:
      Find the 'Sidebar Content' section in the HTML of your blog.
      Refer to the image above and change the 1px (circled in red) to 0px.
      Preview and save.

      ~~~~~~~~~~~~~~~~~


      How to remove the post separator:
      Find the 'Posts' section in the HTML of your blog.
      Refer to the image above and change the 1px (circled in red) to 0px.
      Preview and save.


      ~~~~~~~~~~~~~~~~~


      How to remove the lines around the header:
      Find the 'Header' section in the HTML of your blog.
      Refer to the image above and change the 1px (circled in red in two different places) to 0px.
      Preview and save.

      Easy as pie!

      Tutorial - Signatures

      ***Tutorial by Sneaky Momma Blog Design***

      Many people prefer using My Live Signature. It is a free, easy, and fun online way of making your signature. Here is how to do it:

      When you have created your signature and have reached the 'Finished! The signature is ready.' page:

      1. Click on 'Want to use this signature?' at the bottom above the ads.
      2. Click on 'Generate HTML code'.
      3. Click on 'Generate a code for my handwritten signature'
      4. Highlight the code in the box and copy the text.
      5. Open your blog's layout page in a new tab or window.
      6. Click on Settings--->Formatting.
      7. Scroll down to where you see the Post Template box and paste the code into it.
      8. Click on Save Settings.

      When you create a new post, you should see your new signature sitting all nice and pretty up at the top. Make sure you write your post ABOVE the signature.

      Happy Blogging!

      Tuesday, May 26, 2009

      Tutorial: Screenshots

      Some people wondered how I took pictures of my computer screen (Example here). Here's how!

      Option a) You could go to this video on YouTube and watch it or

      Option b) You could just read how I do it :)

      O.K., let's go with option b :)

      1. First, go to the screen you wish to take a picture of.
      2. If you don't already have it, download Paint (Just to clarify, NOT Paint.Net, just Paint).
      3. Go back to the page you wish to print.
      4. On your keyboard (Near the top) you should see a button that says 'PrtSc' which means Print Screen.

      5. Press and hold (Hold for maybe 2 seconds).
      6. Go back to paint and click on Edit. Select Paste:

      (Click on the picture to enlarge :)
      7. Your image should pop up in Paint!
      8. To edit (Crop, resize etc...), you must Save As and upload your image to photobucket (Or another image hosting site).
      9. You're done!!!

      Yay! So how did it work for everyone? Tell me if your tried it!

      Monday, May 25, 2009

      How to use my backgrounds - EDITED!!!

      I'll be posting free backgrounds VERY soon, so here's how to use them!

      1. Log into your blogger account.
      2. Go to your blog Layout and then to your Edit HTML.
      3. Scroll down until you see this code:

      body {
      background:$bgcolor;

      4. (Sorry this is bold :) Copy the code in bold above.
      5. Replace the code with this:

      background:url();

      Inside the parentheses, insert the image URL I will give you when I post the free backgrounds! Enjoy!!!




      Sunday, May 24, 2009

      Tutorial: Changing Fonts

      Have you ever wondered how to change fonts on your blog? Well here you go!


      1. Sign in to Blogger. This will take you to your Dashboard.
      2. Under the blog you wish to change the font for, click on Layout.
      3. You are now in the 'Add and Arrange Page Elements' screen. Click 'Add a Gadget'.
      4. You are now in the 'Add a Gadget' screen. Scroll down to where it says 'HTML/JavaScript'. Next to that, click on the (+) sign.
      5. You are now in the 'Configure HTML/JavaScript' Screen. Under Content you'll see a large box, paste the entire following HTML code from the font you'd like to use in that space.
      6. Click 'Save'.

      Here are the fonts you can use:

      Papyrus:



      Lucinda Handwriting:



      Comic Sans:



      Harrington:




      There you have it!

      ***P.S. All of these fonts are courtesy of The Cutest Blog On The Block: Blog Secrets.