Can custom shortcodes be created in Blogger? For example:
[item]contents[/item]
or
[img class='someClass']yourimagelink[/img]
Can custom shortcodes be created in Blogger? For example:
[item]contents[/item]
or
[img class='someClass']yourimagelink[/img]
Simply put, the answer is: it varies
[img src=a class=b] over <img src="a" class="b">, then yes, it can be done. Check out examples like the Blogger shortcode plugin or create your own with shortcode.js.For a more detailed explanation:
When accessing a webpage, servers use pre-browser-load processing languages (PHP, ASP, Ruby, Perl..) while clients (browsers) use their own languages (Java-, Type-, & Actionscript). Search engines rely on server-side code since only humans need a browser to view a page. In Blogger, you can modify XHTML-like templates but cannot directly access server-side code. This limits options to client-side scripting.
While the shortcode blogger plugin imitates Wordpress shortcodes, it is Javascript-based and therefore not useful for traditional search engines.
Although there are reports of Google possibly accessing Javascript content through Chrome, results have been mixed. Just because content may be indexed does not guarantee accurate interpretation by search engines. Consider also the challenge of understanding dynamic content from visitors using various browsers.
Examining the Blogger shortcode plugin, you'll see it mainly enables basic CSS-styled elements and third-party embeds, which can typically be added via HTML view. In my opinion, why complicate things with shortcodes like [image class=x] when <img class="x"> serves the same purpose?
In summary: Avoid shortcodes in Blogger unless using a CMS like Wordpress that supports them natively.
Recently, My Blogger Tricks unveiled a new set of custom shortcodes specifically designed for bloggers. Interested individuals can find more information by visiting this link.
If you want to create your own customized shortcodes
You can easily generate shortcodes for your website using shortcode.js. Follow the steps below to create an [item]contents[/item] shortcode and view it in action.
new Shortcode(document.querySelector('body'), {
item: function(done) {
return this.contents;
}
});<script src="https://rawgit.com/nicinabox/shortcode.js/master/src/Shortcode.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
[item]Sample text[item]Hi everyone! I am new to both Rails and Stack Overflow, and I would really appreciate it if someone could guide me here. I am currently working on a test site that resembles a personal blog. It's mainly for showcasing one user's portfolio. In t ...
Here are the lines of code I have included in my webpage - example/demo. HTML: <p class="countdown-timer">10:00</p> <p class="countdown-timer">10:00</p> JavaScript: I am looking for guidance as a beginner in JavaScript and JQue ...
I am currently working with VB.Net, MVC, Razor, JavaScript, and jQuery while utilizing the Datatables plugin. One of my tasks involves rendering a table that consists of text boxes where users can input values to be submitted to the database. While this s ...
Here is the jQuery code snippet that I am currently working with: $("#dropbin").droppable( { accept: '#dragme', hoverClass: "drag-enter", drop: function(event) { var noteid = "<?=isset($_POST['noteid']) ? ...
Is it possible to customize my draggable & droppable module with these classes? stackDrop1 (Kitchen) stackDrop2 (Road) stackDrop3 (Completed) https://i.sstatic.net/vxFCx.jpg If the Customer George is in the Road class, the Kitchen class will not accept ...
I am looking for a solution where the anchor position is 100px below the top of the page instead of jumping to the very top. I prefer not to have any animations, and I want to avoid the anchor jumping twice. I am seeking a universal fix for this issue. I ...
I am working on a project where I need to trigger a click event when the user scrolls down 700px. This is the code I have so far: $(window).scroll(function(){ playVideo(); }); function playVideo() { var wScroll = $(window).scrollTop(); if (wS ...
Imagine having the following HTML tags: <ul data-toggle="tooltip" data-title="hello world"> <li data-toggle="tooltip" data-title="content 1">content 1</li> <li data-toggle="tooltip" data-title="content 2">content 2</li&g ...
Can anyone guide me on how to include my CSS file in PHP? require('config.php'); $cssFile = "style.css"; echo "<link rel='stylesheet' href='/books/style.css'>"; What is the process of adding CSS to a PHP appl ...
My aim is to populate a profile page with a JSON object in AngularJS by utilizing directives. The structure involves a profile directive with profile-section directives as its children, and profile sub-section directives within the sections. One challenge ...
I have a complex select block created using Rails erb, and I now need to convert it to jQuery using append. Here is the original select block: <select id="mission_reward" name="mission_reward" class="select_reward"> <option value="0"><%= ...
After deleting an h1 element, my toggle switch started malfunctioning. Initially centered within the slider, it is now offset to the top. However, clicking the button corrects its position temporarily. Upon refreshing the page, the offset issue reappears. ...
Hey there, I'm encountering an issue with a form that's inside script tags. After clicking on the save button, nothing happens. Here is the code: <script id="e1" type="text/x-jquery-tmpl"> <form id="MainForm" > <i ...
I am encountering an issue with accessing and updating attributes of iframe elements within HTML containers on a page. When I attempt to loop through each "iframeHolder" and target the iframe element within it, I encounter errors. Below the HTML code snip ...
Whenever I open the drop-down and start scrolling, the list either sticks to the top or the bottom of the div. I tried switching the positions of the parent div and the drop list, but I couldn't find a solution. Is there any way to make the drop-list ...
Upon close inspection, I've discovered that a discrepancy exists between the selection on my webpage and the cursor position. After investigating further, I uncovered the following reasons: Presence of white-space between the start tag <p> and ...
I have a bootstrap date picker inside a table with the hover option. When accessing the date picker, the first two rows displaying the month and day are being overridden by CSS from the table, and after hovering, the side text turns white. Here is a worki ...
After extensive searching, I have yet to find a solution to stylize the "City List" widget for Meetup. The specific widget I am focusing on is the first one listed here. () Despite exploring various options such as the widget foundry and conducting onlin ...
I'm currently reorganizing a fellow developer's code, and it seems that the CSS work was done poorly. Within the main "wrapper" div on the page, there are logos and navigation images. The images are positioned using "position: absolute" and the ...
On my responsive website, I am utilizing the hr tag in various places. However, I have noticed that some lines appear with different thicknesses, as shown in the example below. For a demonstration, you can view a sample on this fiddle: http://fiddle.jshel ...