Made In Craftadise | Top Art & Crafts, Home Decor blog in India: Blogging Tips

Showing posts with label Blogging Tips. Show all posts

7.14.2015

Etsy: Blog Planner Printable PDF

Plan ahead, save time and blog your heart out with this simple and colorful BLOG PLANNER set. With this kit, keep your blog up to date with refreshing posts and ideas. Keep track of all your blog related activities like posts, design, sponsors, readers, giveaways and expenses all in one place. It helps make blogging easy and fun.

This kit includes 11 documents, namely:

1. DIVIDER PAGE

2. BLOG POST IDEAS

{A checklist page to write your post ideas and check it off once you have developed the post and

posted it on your blog}.

3. BLOGGING AND SOCIAL MEDIA SCHEDULE

{List your blog posts for the whole month in this page and also keep track if you have linked them up in your social media account}.

4. PROJECTS TO-DO

{Once you have the basic idea of what you will be posting, start making a list of projects in order to complete your post}.

5. BLOG EXPENSES

{Track your monthly blog expenses}

6. BLOG EARNINGS

{Track your monthly blog earnings and its source}

7. GIVEAWAYS

{Track your monthly giveaways, its sponsor and the recipients}.

8. ADVERTISING AND SPONSORS

{Make list of all advertisers and sponsors and their advertising details on your blog}

9. BLOG ENHANCEMENT IDEAS

{Write in all your ideas and suggestions on making your blog look and feel good. Write the area in the blank field (eg. design, color, giveaways, etc.) that you wish to enhance and check it of once you have implemented it. Total of 8 areas with six checkboxes each}.

10. SHOP IDEAS

{Similar to blog enhancement, if you wish to start a shop or develop an existing one, write in all your details and ideas regarding it (eg. Products, supplies, packaging, branding, etc.)}.

11. CLIENT FEEDBACK AND IDEAS

{This page is divided into two sections. Write all the feedback and suggestions from your readers and clients in one section. Collect those that actually needs improvement and write it in the second section and check it off when it is implemented}.

Now you don't have mess up with your blogging schedule anymore. With the help of this planner set, you can keep everything organized in a single place.

You can buy the planner here in my Etsy shop.

Print, plan and blog away :)

7.02.2015

How to remove Border/Shadow from Blogger post images

You might have noticed in your blog that the images have a white border/shadow to it. If you do not want it (like I didn't want them) you can use this simple procedure to remove them completely from all blogger images.

Here is how you do it in two simple steps:

1. Go to your Blogger Dashboard --> Template --> Customize

How to remove Image Border/Shadow from Blogger post images

2. Select Advanced --> Add CSS and add the following code and click Apply to Blog.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,

.BlogList .item-thumbnail img

{

padding: 0 !important;

border: none !important;

background: none !important;

-moz-box-shadow: 0px 0px 0px transparent !important;

-webkit-box-shadow: 0px 0px 0px transparent !important;

box-shadow: 0px 0px 0px transparent !important;

}

Technically you are setting the border to none and the shadow to transparent (with all metrics as 0px)

3. This is how your image would have looked like before.

4. After applying steps 1 and 2, you will end up with images like this:

So simple isn't it? Try this if you are annoyed with the white shadow/border like effect on the image and get this absolute border free clear and exact image you want for your posts and pages.

You can read the previous post of this series here: Custom Pin-it hover image for blogger images

Want more blogger tutorials? Visit here for the entire list.

6.25.2015

Create a Custom PINTEREST hover button in Blogger Images

Last post on Blogger was on how to create social media icons for your blogger sidebar. You can view the tutorial here. Today is gonna be another fun tutorial to add an extra touch to your blog images so that readers can easily Pin the images they like to their Pinterest Board. (And believe me, this one is real useful to me as well, as I directly pin my images using this).

Create a Custom PINTEREST hover button on images in Blogger

I'l walk you through these simple steps on how to create your own customized Pin-it Hover button for your blogger images.

1. Go to PicMonkey. Select Design. You can select either Square or Custom for the canvas.

2. Enter the size for the canvas. I am going keep mine as 80 px x 80 px and then crop if its big.

3. Set the canvas as 'Transparent'.

4. Enter any overlay you want or add your own. Change its color or size.

5. Add the text 'Pin it' or 'Pin me' or anything you like. :)

6. Save the image as .png (very very important)

7. Upload your image to image hosting website like Photobucket. Copy the URL.

8. Now go to your Blogger Dashboard --> Template --> Edit HTML

9. Click onto the coding part and select CTRL + F (Find) then search for </body>

10. Once you locate the </body> add the following code above this:

//<![CDATA[

var bs_pinButtonURL = "your pin it image URL.png";

var bs_pinButtonPos = "center";

var bs_pinPrefix = "";

var bs_pinSuffix = "";

//]]>

</script>

// This Pinterest Hover Button is brought to you by bloggersentral.com.

// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.

// Feel free to use and share, but please keep this notice intact.

</script>

NOTE:

Replace the red portion with the image URL
Blue portion with the alignment options: topleft, topright, bottomleft, bottomright, center (default state)

11. Click Save Template. now write a blog post with an image and publish it.

12. View your blog / post and hover over the image to see the 'Pin-it' button

13. Try with other alignment options if you want the button elsewhere. (the below image alignment for pin-it button is top-left)

14. And YEAH !!!! You now have your own customized Pin-it hover button for your blog images. :) Jump with Joy :)

Make any shape or style you want to match your blog theme and enjoy :)

6.04.2015

Create Social Media Icons For Blogger Sidebar using PicMonkey & Image-Maps

This weeks Blogger tutorial is on how to create social media icons for your blogger sidebar using simple technique which includes PicMonkey and Image-Maps.

1. Before you create your socila media icon bar for your sidebar, let us check how big your image on the sidebar should be (this technique can be applied for any sidebar image gadget you add). Go to your Blogger Dashboard. Click Layout --> Add a Gadget.

2. Select the Image option.

3. Scroll down to see the 'Shrink to fit' option. Below this you will see the pixel size. This is the size you want your sidebar images to be. Not more than this, but can be smaller.

4. Before designing the social media icons, you need to have the icons vector/ silhoutte images of the icon. There are various websites offering free social media icons and just the silhoutte. Download the icons from the website to your computer. This will further be used in Picmonkey to design your own icons.

Some websites offering free social media icons:

http://theblogdesignernetwork.com/2011/08/free-social-icon-silhouettes/
http://www.pixelfrau.com/black-social-media-icons/
http://visionwidget.com/free-social-media-icons.html

5. Go to PicMonkey --> Design --> Custom

6. Enter the Pixel size (250) for length and height as > or < 100 (your choice).

7. Add Overlay. I am adding circles for the base. Change the color and size to match your blog. (You can skip this step if you do not want a background for the icons).

8. Select 'Your Own' in Overlays tab, browse for the icons you downloaded and select one.

9. Change the color, bring it above the circle and position it well. Now Right click on the circle to Duplicate Overlay for the rest of the icons (to have consistent color and size).

10. Add a line or a rectangle above and below the icons to keep them aligned in a straight line.

11. Keep adding your social media icons and then remove the lines added.

12. Now you can crop the excess region above and below. (optional)

13. Save the file as .png. (Very important step)

14. Upload the image in an image hosting website (eg: Photobucket) Get the link of the image. (should end in .png)

15. Go to Image-Maps. Enter the image URL and select Start Mapping.

16. Check your image and then select click to Continue.

17. Right click on the first icon and select Create Rect.

18. Draw a Rectangle around the icon and you will get a box like this to fill the details.

Enter the URL you want to visit when clicked on that image.
enter Title (this will be displayed when the mouse is hovered above that icon)
Enter Alt

19. Go to Settings Tab.

Change the Background color to White #fff
Opacity --> 0 to make it clear.
Border color to white #fff

20. Continue for all other icons. Finally, right click outside and select Get code.

21. Select HTML Code. Scroll down and copy the code.

22. Go back to blogger. go to Dashboard and select Layout --> Add a Gadget --> HTML/Javascript.

23. Enter the title and paste the code. Then save.

24. Rearrange the position of these icons if ypu want and then click Save Arrangement.

25. Now View Blog to see the icons on your sidebar. Click on each and check if its working. Or check if you have entered the right URL for each.

If your sidebar is towards the left, you can center align it by adding:

<div align="center"> before the code and </div> after the code.

Image used: (You can use this image for your blog/website. Rigth click and save image. Upload it in image hosting website. Copy URL and use it in Image-Maps)

Code:

<div align="center">

</map>

</div>

(Enter the respective URL instead of the red text. Use the image, map and get the code. Use the code in HTML/Javascript Gadget)