H ello Guys and Gals, today I am back with my Blogger Tips series. You can find part 1 of the coding part of the series
here. As I mentioned in P1 I am still learning myself, however there could be something that you like the look of on my blog or wondering how to create something in particular, you may just find it here. If you have any tips be sure leave a comment below, myself or another blogger may just find it handy.
Let's talk Social Media, If you are a blogger yourself which I am sure you will be if you are reading this, you may like to link your social accounts to your blog or show off your Instagram pictures in your side bar or customise your blogs look, So in today's post I will be sharing some more blogging tips.
Social Banner
You may wonder how I made my Instagram banner. I have noticed that many blogs have a standard Instagram feed on their blog, showing one image which then fades to another photograph in their feed, or a scrollable one. I personally wanted a long banner, showing a landscape feed of my photographs to feature at the top of my blog. For this, I used a prebuilt widget which logs into your Instagram Account. My personal Favourite is
SnapWidget as it allows you to customise your width, colour and effect. As I have a landscape thin Instagram Banner style widget on my blog, I had to work out how many images across was most fitting for across my banner. I found that 8 images across worked best, so under Layout in the widget creator I adjusted the amount of thumbnails to use to 8x1 then chose the desired Thumbnail size, to create a static banner. For an interactive Widget in this style, Under Widget type you will want to select 'Scrolling' and set to 1200 px as the Width size. This worked best for me. If you are going to use this widget-maker, you are best playing around and seeing what looks best. The preview the website provides is OK, but you are much better off viewing content live on your blog.
If you are a Blogger user like myself, to do this you will need to go into the layout section of your blog. In the side bar you will come across 'Add Gadget' in blue font. This is where you will create your Widget, you will need to create a HTML/JavaScript Gadget and copying the code from Snapwidget here. Once you have done this you can drag your widget to the desired location. If you are creating a widget like mine, you will need to drag your widget to the top section of your layout. This is labelled HTML/JavaScript in my Layout. Again preview your blog and check to see if the width and height of the widget is inkeeping with your blogs look, if not go back to SnapWidget and adjust the size.
Embedding
When creating a post you may wish to use some content from your Instagram Feed, the best way to do this which links back to your account, is to embed a post. To do this, you will need to go to your Instagram @ www.instagram.com/ (your account name) When you select a photograph from your feed you can the opt to embed the image with or without a caption.
Once you have done this step and copied the Embed code, you should now head to the html section of your blog post. If you have already written the bulk of your post and decided to add some Instagram photos after and don't understand code, it would be wise to get to know the basics of what you will be looking at. The last thing you want to do is after all your work getting all your content
The best way to determine where to post your embedded code is to create a space within your content before going into HTML View, by doing this you will break down the code making it easier for you to determine where to place your code. Where you see <br /> and </div> determines a break in text and a division in the content. After a break,this is a good place to paste your coding. Now we are done!
Yes it is pretty cool that you can embed your Instagram photo, but what about changing the size of the widget? and can you place your embedded photographs next to eachother? Because Instagram itself does not allow you to direct copy the URL of your image I have been unable to figure a way of doing so. The only way I have been able to Link my images from my Instagram Feed is though Third Party hosting sites for your Instagram images. For this you will need to use the coding in P1 of my Handy little Bits of Code post. This will not show how many people have liked/loved your photograph or how many comments. This is just using the URL rather than embedding two Images taken directly from your Instagram Account. If you do know how to this, Please do leave a comment below.
Once you have taken the code from P1 you will need to use a third party/Instagram viewer site as I have already mentioned, for this I have been using websta.me/ . Login using your Instagram Login and Copy the URL of the photograph you would like to use, By following the steps in P1 you will be able to place two images next to eachother.
If you still like to have an embedded link from your Instagram account but a little smaller you can change the size of the widget. For this you need to change the max-width: "000"px in the coding of the widget. For the widget below I changed the size to max-width: 300px
Social Buttons
This is my personal favourite. I have not added my own buttons as of yet as the buttons that came apart of the Layout I purchased from Pipdig work well for me, however if you would like to customise your blog just that little bit further, personalised buttons are the way forward. You could find some free ones online or you could make some yourself on Photoshop. Alternatively you can right click and copy the buttons below.
You will need to have all your social pages open in tabs ready to link them to the images. Once you have saved the buttons you have made, the ones below or ones you have found else where, create a new post and upload the images. In the same way that you add links to your photographs in your blog, you will need to do the same thing with these buttons and link them to your social pages.
Once you have linked your buttons you will need to go switch from Compose mode to HTML. When you have done this, select the code for all the buttons, this will give you the coding for your widget. If you know your way round your blog platform you should be able to find how to add a 'Gadget' as it is called in Blogger under Layout in the sidebar of your Blog. Here you will create a HTML/JavaScript Gadget and paste your code. Situate your Gadget where you would like it do go in your blog and you are done! Depending on the width of your side bar you may need to expand your sidebar or make the buttons smaller in Photoshop or other editing software.
If you have any questions about today's post or have any tips yourself leave a comment below. If you have any tips on your blog link them down below too.
Until Next Time xox
No comments
Post a Comment
I look forward to hearing from you!