Code Archives – Blogger I.Q.

Have you ever wanted to embed a code snippet in your blog?

Yes, we have the <code> tag within the WordPress visual editor but if you notice a lot of the bloggers, developers use Github gist to do that.

Related: How to embed YouTube videos ( opens in a new tab )

Here’s a sample from Brian Gardner from StudioPress/Copyblogger using the Github gist:

It’s quite simple.

Just go to https://gist.github.com
Input the code and click on ‘create secret gist‘ – this way search engines wouldn’t index your code and only people with the URL will have access to it.
Share using the ‘Embed’ code option – copy the embed code and paste it within your WordPress code editor (the Text tab, not the Visual tab).
You can also download this code sample as a zip file.

Have you read: How To Add Made With to your footer in Genesis – WordPress?

Below given are some screenshots for your reference.

Next time you want to share your code on your blog, try the Github Gist.

Here is a list of useful codes that can be used in WordPress editor and 1 bonus tip for your WordPress Dashboard:

1	<sup> tag:	this creates a superscript of letters or numbers. Especially useful when you want to show a copyright symbol like TM. Or to show mathematical notations and ‘to the power of’ numbers.	<sup>text</sup>
2	<sub> tag:	The <sub> tag helps in creating, you guessed it right, a subscript of alphanumeric characters.	<sub>text</sub>
3	<hr /> tag:	The <hr /> comes in handy when you want to insert a horizontal row in your blog posts.	<hr />text</hr />
4		The is that inevitable non-breaking space required in your blog posts. Use   in your code editor and you get an awesome line space. Similar to the <br> break tag in HTML.
5	“CTRL + K” – Keyboard shortcut	When you are in WP editor, just hit ctrl k – it will bring up the ‘insert hyperlink’ option with settings.	None. Just hit the keyboard shortcut ctrl K
6	<a> tag:	<a> tag along with href attribute helps you to insert custom hyperlinks – this is similar to inserting hyperlink option given above but through a different way.	<a href=”https://bloggeriq.com”></a>
7	rel attribute with nofollow value	If you want to avoid your SEO ranking flowing to outbound hyperlinks, use the <rel> attribute with nofollow as its value. This also sits inside the <a> tag.	<a href=”https://bloggeriq.com” rel=”nofollow”></a>
8	target blank	The “target” attributes more often accompanies the “rel” tag. This is used to have the link open either in a new tab or window. Syntax: Target=”_blank”	<a href=”https://bloggeriq.com” rel=”nofollow” target=”_blank”></a>
9	img tag with src attribute	Insert images from another location using the src attribute.	<img src=”https://bloggeriq.com/folder/image.png”>
10	reorder lists – restart numbering	Don’t want to restart numbering in your multiple ordered lists? Use this trick. Use the start attribute inside <ol> tag.	<ol start=”9″>
11	<code> tag	Want to show a sample code in your WP editor without accidentally inserting a functional code in your blog? Use this tag.	<code> insert code here </code>
12	<blockquote> tag	Want to highlight or quote someone? <blockquote> is the way to go.	<blockquote> insert text here </blockquote>
13	read more tag	Want to show a page breakup between posts so people can click ‘read more’ to continue reading your blog posts? Use the read more tag.	<!–more–>
14	WP Dashboard trick	Just click on the top most header toolbar in WP dashboard that has WP logo, your site name, and that greeting ‘Howdy, username’. It will immediately scroll up to the top.	None. Just hit on the WP header toolbar.
15	rel: external nofollow	This is like combining the points 7 and 8 above. Adding this to your hyperlinks not only opens it in new window but also stops the SEO ranking juice from flowing to the linked site.	rel=”external nofollow“

16. What’s your WP trick? That will be the 16th one for the world to see and learn. Give it in your comments below.

Download the above as a printable PDF for your reference. No signup required. Just click here to download the PDF.

“There is always something new to learn every day!”

Code

How To Embed Code Snippet Using Github Gist Within Blog Posts

It’s quite simple.

14 Incredibly Useful WordPress Codes to Keep Handy [PDF download]

Code

It’s quite simple.

Footer