Awkward Bloggest: Blogger

Showing posts with label Blogger. Show all posts

Rich Pins show metadata right on the Pin itself, giving Pinners a richer experience and increasing engagement. Information in a Rich Pin is independent of the Pin description, ensuring that important information is always tied to the Pin. There are 6 types of Rich Pins: app, article, movie, place, product and recipe Pins.

In other words people can Pin the picture on your website or they can Pin the details about your picture too. Adding little tags to your data makes all the difference in search engines. Your website has everything but without helping out a search engine most of it can get lost. This works for Pinterest too.

If you've completed the steps to on Twitter Cards That Work For Bloggers then you're only one or two lines away of code from getting Pinterest set up.

If you've verified your website already with Pinterest your only one line of code away from getting this done. If you haven't verified your website you'll have to do that first via your profile on Pinterest.

Go to your Pinterest and on the right hand side you'll see Edit Profile.
Window Pops Up and at the bottom you have an option to enter your website. Once done you'll get a code that looks something like this.

<meta content='395e8062748c595216c500d8cc7c33a3' name='p:domain_verify'/> which you will need to also enter over </head> (make note that the code given might only have this > at the end. It will need />) Please don't directly use this code. Your own website will have it's own unique id number. I'm just using mine as an example which are the numbers in BOLD.

So back to HTML. As always I suggest you backup. It only takes a few seconds.

Template = Edit HTML

Once in HTML you'll have to search for </head>
Click inside the HTML window and

Hold down ctrl, select F

Mac

Hold down command, select F

Just above </head> enter

<meta content='article' property='og:type'/>

You'll have to include your verification code you got from Pinterest in the same area too. Now save!

Once saved you'll have to Validate your Rich Pins For Pinterest at Validator Pinterest
If everything went well you should be done. This is for the Article Pins. I've yet to play around with the other options but when I do I will update it in this post.

I'm always here to help so if you need it I'm just one message away.

How To Get Followers Who Read?

Am I the only one struggling at trying to get people to look at my blog? I know I'm new to the world of blogging but I had thought by this point I would of had at least one comment. I have a need for feedback like so many other bloggers. I enjoy writing but at the same time I'd love to know if someone has at least read one of my posts.

I've tried Twitter and I've gotten a few followers on Twitter and some of my Tweets Retweeted, but still I'm feeling lost. Am I the only one who feels alone in this blogging world? I can't possibly be the only one!

So yes I admit I'm socially challenged in life and especially online. I don't spend my Friday nights out but instead at home with my girls. My free time is spent running errands and my weekends consist of what I'm doing with my girls. I own two cats who probably spend as much time as me on my laptop. My time blogging is normally spent on a cozy couch with my fuzzy socks. Online I absolutely fail at being social. I've Tweeted in hopes of getting someone to at least take a peak at my website but haven't really gotten much from that.

So are there any other socially Challenged Bloggers out there? Please tell me I'm not the only one! You're welcomed to lie just to make me feel better.

So this post is for other bloggers like me. I'd love to meet and get to know others. If you're socially challenged like me please let me know.

If you're feeling awkward and lost in this social media world like me, it just takes one comment to find a new friend.

I've created a new hashtag #awkwardbloggest

I don't want this hashtag to be used for a quick share. I want the hashtag to mean a commitment.

This hashtag means a commitment. If you hashtag your post with this then you are required to like and comment on 2 blogs (Include AB in your comment so the Bloggest knows who to follow) and follow 2 other bloggers. If a blogger comments and likes your tweet and follows you please follow them back. Most importantly visit their blog. A Blogger wants to be read. Read and you might end up making a new connection. If for what ever reason you don't want to follow a certain blogger who has followed you please take the time to inform the blogger.

This isn't about making a hashtag popular it's the reason why I haven't asked anyone to retweet. It's truly a hope that we can somehow find one another.

Don't want to use a Hashtag? No problem. Use this post. Comment on it with a link to your Blog. I know you'll at least get one new reader from me.

If you are feeling socially challenged, join and hopefully we will all find one another.

If you have any suggestions please do share. I'm open to all because I want a hashtag that works for all bloggers.

Happy Blogging!

Make Those Tweets Count By Making Those

Images Linked To Your Website

I've had a day of frustration trying to get the Twitter Summary Card to work for me on Blogger. Everyone else get's to enter it with such ease but no it's a struggle for Blogger. I tried many different codes and methods but something always didn't work!

On the Twitter Website the code the provide is for one post. I don't want it for one post! I want it to work for all my posts. Plus their website alone is very vague on how to properly insert the code.

In the end I found combining two separate codes finally had it working on my Blogger. I know each Blog is unique but I'll share what worked for me and if you had issues with it please message me and I'll try to find a way to resolve your issue.

All the code I will be giving you will have to be inserted in your HTML. I know the HTML area can be scary and like all websites suggest you are better off saving your template before moving on. So off we go to template.

xmlns:og='http://ogp.me/ns#'

So first step BACK UP!

Next into the world of EDIT HTML

Right when you enter the HTML you'll be at the header. You should see this code xmlns used a few times. You'll have to enter this code to the end of that string.

xmlns:og='http://ogp.me/ns#'

Make sure to add it before the greater than sign > This has to be at the end of your code. Should look something like this.

xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>
<head>

Hit save! Hopefully no errors. If you do get any please make sure these are correctly placed exactly like mine ' >

You need to do a search in the HTML Click somewhere in the HTML area and now do this which should bring up a search window.

Hold down ctrl, select F

Mac

Hold down command, select F

Search </head>

The big part of the code you will be entering will be just over </head>

<!-- Open Graph Meta Tags Plus Twitter Tag BEGIN -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
  <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<meta content='summary_large_image' name='twitter:card'/> 
<meta content='@AwkwardBloggest' name='twitter:site'/> 
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='Image URL' name='twitter:image:src'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<!-- Open Graph Meta Tags Plus Twitter Tag END -->

The read parts of this code are the only one's you'll have to change.
This one you will have to change to your own Twitter account one @AwkwardBloggest

summary_large_image This is the part of the code that caused all the extra work

With summary_large_image Your Tweet will look something like this:

If you remove_large_image and have it as just summary Your Tweet will look something like this:

You can always change your option when ever you like. Now it's time to hit save and hope for the best! I hope you had no issues. If everything saved with no issues you have one more thing to do.

You'll have to go to Twitter Card Validator

Input a Url for one of your posts. For Example: URL To My Post I used On The Images

If Twitter Validated your url with no issues you're done.........well maybe.

This all depends on if your post template has a Description Area on the right hand side. The description area is where you enter the text you want to show up on your Tweet.

If you are missing this feature (which you should of had anyway for search engines) you need to go to Settings - Search Description

Meta tags Description needs to be enable so select Edit

In that area you should now write a description about your blog and save. This will activate Search Descriptions in your post.

I tried to cover everything and I do hope in the end everything works for everyone. If you need any other tips for your Blogger I have a few posts Under HTML??? on my homepage.

Let me know if this worked for you. I love getting feedback.

I will be writing about adding these tags for Pinterest later this week.

I am disappointed that expand summary still needs to be applied to these. This is only computers since for the app version of Twitter the Tweets are fully expanded.

I have found some codes that are super easy to use and will help the look and feel of your Blogger.

Boarders and Shadows Around Images

First off I hated having boarders on all my pictures. I'd have to find ways to make them transparent which always involved too much work and effort until I found this great simple code that eliminates boarders and shadows on all images on your blog. I wish I had found this sooner.

.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;
}

You'll need to enter this code in the CSS section of your blogger.

1. Template

2. Customize

3. Advance

4. Scroll to bottom for CSS

Copy, paste and save! If the code doesn't take just delete the curly bracket and enter it back in. I find CSS seems to be picky when it comes to copy and paste so it doesn't always properly take the code.

Now all your shadows and backgrounds should be gone!

*********************

Boarders Around Post

Want to adjust the boarder around your post? Maybe give it a bit more space between the side bar? Lower the header or raise the header?

Very simple code and very easy to play around with. This code will also have to be entered into the CSS area.

.blog-posts {margin-top:80px}

.blog-posts {margin-right:140px}

Follow the exact same instructions I gave you above which is in bold. Once entered and working in CSS it's now time to play around with the margin. Mine were set to 80px and 140px but you can play with those numbers until you find what works for you.

************************

Center Post Title

It actually drove me crazy that my post title was off to the side. A title in what entices a reader to continue reading. I don't want that off to the side! I want it dead center. Another simple code which will also have to be entered in CSS.

.post-title {

text-align: center;

}

Follow the exact same instructions I gave you above 1 -4 which is in bold. Also under advance you can make that Title bold and large. Make sure it stands out!

**************************

Search Box

Do you use a search box on your blog? If you happen to use the widget that comes with Blogger I suggest you try it. It's a Google search box and I find the results don't end up being that great or looking that great. I want a reader who is looking for a specific post to find it easily. Plus I like how simple the search box looks on my blog. Go to it and try it out. My Failed Attempt At Life If you like it you can easily create a new widget.

<center>

This code needs to be added to a widget or what I did I added it to my About Me HTML Widget I already had.

So this time it's

1. Layout

2. Add Gadget

3. Select HTML/JavaScript one

4. Paste and Save!

As I keep searching I keeping finding great widgets and codes that have helped me with my Blogger. Have you found widgets or codes you can't live without? What great codes have you found? I always love to hear back from you.

Give Readers A Reason To Stay

No one wants to admit it but we all get it. Yes the evil 404 page. Something broke or went missing and no one knows why! You can get irritated, try again, or just give up.

How many people put thought into their 404 error page? Lot's of websites with lot's of bloggers but how many of you have thought about your readers and 404 errors?

On Blogger it truly takes only takes a few minutes to create a custom 404 error page. Why not give your readers a reason to stay? A little giggle is all they need to keep on reading.

First off start looking for an image. That will probably be the most time consuming part of this little job. You can search for picture that already says 404 error or you can find just a picture you like or even use a picture of your adorable cat. :) We all have paint so once you find that picture you can add any text you want to it via paint or any other program.

Once you get that perfect picture done you need to create a new post on Blogger. Once you're on your new post give it a title like 404 Do Not Delete! After that select insert picture. Once you insert that picture, save and following that select the HTML of your post. Copy all that code and close your post.

Now off to Settings, Search Preference and there you will find Custom Page Not Found. Select Edit and insert the code from your image. Now enter this code after the code from your image.

<script type = "text/javascript">

BSPNF_redirect = setTimeout(function() {

location.pathname= "/"

}, 9500);

</script>

This little code will redirect anyone who lands on your 404 error page after a set amount of time to your home page. Mine is set to 9500 but you can change that number to anything you like. You can test your 404 error page by going to your home page and adding /404 to the end of your url. It will look like this. http://numinousgirl.blogspot.com/404 You can try mine out to see how it works and how something so simple can add a big change.

If you end up making up your own 404 image please come back and share them. Would love to see all the creative and cute ideas everyone comes up with. If you don't mind sharing them I'll add it with a link to your Blog.

I have never been much of a Tweeter or much of any social network. My life was diapers, sleepless nights, work, dinner, laundry and so on. Pretty much I had nothing to Tweet.

I recently got back into the world of Tweeting. I hardly Tweet but hopefully with my new blog I'll have more reason to use it now. "followers are always welcomed"

The other day I finally decided to tweet something from my blog. This was the first thing I had ever Tweeted for my blog so it was a big deal for me. I got an image of the top portion of my post and was actually excited about finally sharing my little blog. So I thought I wrote the perfect thing for my Tweet, had the link and image. I hit Tweet and thought I was done.

I all of the sudden got a message saying my Tweet was Retweeted twice with people I didn't know! Someone liked my Tweet. I went back to Twitter to look at my post and I SAW IT! MY BIG FAT HUGE MISTAKE! ok it might have been small but to me it was HUGE! I quickly clicked on my Tweet and searched for edit. Where's EDIT! Why can't I edit my Tweet! I couldn't delete it because it got shared.

I had just taken my first baby step into coding. That's what my Tweet was about. That crazy language that makes everything work. That's has to be able to help me? So I right clicked my Tweet and selected source. The scary world behind everything came up. Trust me it totally makes no sense to me at all but I had just learned about

Hold down ctrl, select F

Mac

Hold down command, select F

I did it,mthe search box showed up and I typed in a word from my Tweet.. I found my horrible mistake within all that code. I started clicking on that horrible mistake in frustration to only realize I had total access to it. OMG I CAN CHANGE IT! I tried it and it worked! My Tweet changed right away. I wonder what else this world of HTML can do for me?

Now I need to get back to my 50 plus hours of trying to get a drop down menu to work for me.

Profile Picture

This is probably one of the simplest things you can do to give your Blogger a not so Blogger look and it's actually very easy to do. You can do it by changing a bit of code in the HTML area which is actually not that hard to do but I find even with it round I'm limited on how much I can do with it. I like that I can now easily change it.

I went from this

To this in minutes

First thing you need to do is find a picture and now crop it into a circle. Not to worry this is actually easy to do and you don't need Photoshop or anything like that. I actually found a very easy to use website.

Tuxpi This is the easiest cropping website I have ever used. Will take only a minute or two to crop your picture and you can even use many of their other shapes too.

Once you get your picture perfect and saved now comes even more easy. Get on your blogger and start a new post. In the end you'll just save it but never publish it. Just make sure you name it something like NEVER DELETE ME! First thing you'll need to do is center your margins in the post. After that upload your new cropped picture. If you happen to have a boarder on the picture or any other picture I'll show you an easy way to get rid of all of them too.

Now under your picture write what you want everyone to know about you. Anything! That's the great part about making your own. You can say nothing to say everything. Once you have it perfect all you have to do is simple. Save it and go into the HTML part of your post.

Copy all that code and head over to layout. Select add a gadget and pick the HTML widget. Paste all that code in it and that's it! If you want to adjust the height of it a bit easiest thing to do it add spaces. You can do that by going back to your post or the new gadget and entering some <br /> which are just spaces.

This method I love the most because it only takes a few minutes to make any changes to your new Blogger profile.

Now if you have borders or shadows on your pictures or images just go to the CSS area.

Template - Customized - Advance - scroll down and CSS

Copy and Paste this code in the CSS area.

.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;}

If for any reason it doesn't work here is a little simple trick I learned. Delete the curly bracket at the bottom and type it back it. Anytime you have a code that doesn't seem to take properly and it should work best thing is to delete a punctuation from the code (which makes it go wonky) and put the punctuation back in. It's the way to kick a code into gear and it seems to work. Now if the code doesn't work it's something else but this is a great trick to try first.

So I decided to finally take the big plunge and start a blog. As most bloggers I decided to start working on some content and I swear I did at first but then I realized my Blogger didn't do the things I wanted it to do. I thought the only thing I needed to know to have a blog is well type! Was I ever wrong.

Welcome to the world of HTML??? What language is this? I love that Blogger gives you access to HTML. It looks cool but what does it do? How does it work? I'm still scared about touching it. The slightest mistake can make my blogger go boom!!! Luckily we have the world of Widgets.

widg·et

a small gadget or mechanical device, especially one whose name is unknown or unspecified.
- an application, or a component of an interface, that enables a user to perform a function or access a service.

Widgets in other words are great and can be found under Layout and then click Add A Gadget. You get a pop up window and the widget that you'll end up using the most is the HTML/JavaScript one. You can add it anywhere on your layout since you can easily move it around after. These widgets are a great way to try out some code without doing any permanent damage to your blog. Enter the code, save, preview blog and delete. Do that enough times and you'll eventually find the code that works for you.

Cascading Style Sheets (CSS)

is a style sheet language used for describing the presentation of a document written in a markup language.

Luckily I learned about CSS too, I absolutely love CSS and do my best to use it over touching the HTML code. It's really easy to enter a code in CSS, You can try a code and well if things go boom it's so easy to delete the new code you entered. It kind of gives us newbies and little idea how code works. CSS can be found under Template followed by Customize and Advance. Under advance you scroll down to find the CSS option. Am amazing way to add simple little code to your blog without having to go inside the scary world of HTML code. I've added several pieces of code into my CSS already. I enter the code, hit save and well look at the result. If it goes boom I can easily find and delete the code I entered. It will always be at the bottom since it was the last one you entered.

HTML

Hypertext Markup Language. a standardized, system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.

Yikes HTML!!! It's really cool that a whole bunch of code has created the world of internet that we all can't live without. I love everything I can do online and am amazed that behind every little thing is some crazy ass code. I'm starting to understand a tiny bit of it but I'm still scared each time I enter EDIT HTML. This can also be found under layout but instead of Customize you click EDIT HTML. That's all the stuff that makes your Blogger blog. Great thing to learn is the search option. You can do that by clicking inside the code and

Hold down ctrl, select F

Mac

Hold down command, select F

Many codes require you to enter it within a certain another certain code like </head> and the search tool will help you find that code versus scrolling through all the letters and numbers. I've entered a bit of code so far via edit HTML but am still scared about using it since I'm horrible at backing up and am worried one day it will go boom and well I'll have no idea how to fix it. I can search for the code I entered and deleted but am worried the damage won't be reversible . Hope fully after time I'll feel a bit more comfortable about it but for now I try not to use it too often. I did enter a code that was meant for a widget but I couldn't get it to work out exactly the way I wanted it too without entering it into the scary world of HTML but luckily I did take the chance because the code meant for the widget is working much better inside the HTML code.

Ja·va·Script

an object-oriented computer programming language commonly used to create interactive effects within web browsers.

JavaScript is nothing but cool. I don't understand it but it's amazing at the things it can do. I hope one day I'm able to understand it a bit more but for now the only thing I can do is tweak the code I find. Luckily these codes are easily entered inside the Widget most times.

If you want to tweak or understand how all those letters, numbers and punctuation works I suggest you find a website that allows you to test and tweak all the code you find. There are several websites you can use for free like

HTML Try It

CSS Deck This websites allows you to test with CSS, HTML and JavaScript.

These websites are free and honestly a great place to adjust any code you want to use. You enter the code, see the result and via that you can easily see and adjust your code without doing any damage.

Hi I'm Delia Melo mother of two incredible girls that measure their happiness by how messy the home gets. Easy going mom who loves life and will take on any challenge that comes her way. Recently dipped my toes into the dating world and wow is all I can say right now. Online am known as Numinousgirl.

I can write about just anything and can babble for hours but when it comes to me I'm stumped. I'm a mom of two beautiful girls that truly live within my heart. I live for them. Funny enough I never wanted kids. I enjoyed my fun and carefree life and didn't want to ever feel tied down. Luckily faith had better plans for my life because I was lucky enough to know the true meaning of Love.

I'm 42 now and single. I actually took a peak into dating apps but I'm still hanging onto the dream of bumping carts at the grocery store with the right one for me. I might try and give it a real try but am still hesitant.

I love life and all it has to offer. I believe each day is special and that we should all learn to live them. Each challenge can kick us down but it gives us strength and a new outlook at life. Accept the good, bad, happy, sad, scared, heartbroken, and everything else. Life will never be perfect it's how you live it that counts.

Now entering the world of blogging I thought I would write about all the silly things that happen in my life. Looking at situations from a different side but right now that's a bit on the back burner because I love learning and well I've just entered the world of HTML. I'm fascinated at how it all works and am instead am going to try and be a resource of helpful ways to improve your blog.

If you ever have any questions please don't ever hesitate to contact me via any of my social networks. You can easily email me at hurstdelia@gmail.com too.

Happy reading and blogging and hopefully I'll be able to get to know some of you.

Subscribe to: Posts ( Atom )

Rich Pins For Pinterest

The Socially Awkward Bloggest

Twitter Card For Blogger That Works!

Must have Codes For A Blogger

Easy 404 Page for Blogger

I F**ked Up My Tweet!

About Me Round Blogger Picture

What In The World of HTML, CSS, Widgets and JavaScript???

About Me

Popular Posts

Labels

follow

Popular Posts

Labels

follow

Subscribe to our mailing list