Looking for a solution to indent the start of each stanza in Google Blogger since it automatically removes <p> tags

Here's a recurring issue that has been brought up before, but I'm not here to discuss inserting <p> tags.

Imagine you're using the Google Blogger "Compose" editor and have this text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mauris est, dictum quis efficitur at, porttitor vitae libero. Pellentesque eget finibus sem. Nam sapien est, accumsan a rhoncus id.

Interdum non lectus. Nullam in imperdiet erat. Suspendisse mollis urna eget quam rutrum, id tristique massa luctus. Donec sodales odio eu ipsum faucibus, eu tempus erat faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus.

What I want as an end result is this:

          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mauris est, dictum quis efficitur at, porttitor vitae libero. Pellentesque eget finibus sem. Nam sapien est, accumsan a rhoncus id.

          Interdum non lectus. Nullam in imperdiet erat. Suspendisse mollis urna eget quam rutrum, id tristique massa luctus. Donec sodales odio eu ipsum faucibus, eu tempus erat faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus.

There must be a way to automatically apply text-indent:80px on the first line of each paragraph. Possibly through CSS + jQuery within the Template, however, my searches have come up empty so far.

EDIT: Unfortunately, <p> tags can't be used as they will be removed by the editor.

javascriptjquerycssblogger

Answer №1

If you want to refine the rule, consider making it more detailed by incorporating the before CSS pseudoselector:

div:before {
  content: "";
  padding-left: 20px;
}

Answer №2

By using the following code, you can adjust the text-indent for all divs within your post body:

.post-body div {
    text-indent:80px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React component is unable to identify prop

I'm attempting to send an array of objects from the main App.js file to a smaller component using props. However, for some reason, the prop is not being recognized within the smaller component file. https://i.stack.imgur.com/WuyFr.png https://i.stac ...

javascripthtmlcssnode.jsreactjs

Having trouble retrieving serialized form data when submitting from a partial view?

Could someone assist me in identifying what I am doing incorrectly? I have a partial view that contains customer details, filled from the parent view. However, when attempting to submit the form, the model data is returned as null as the form data cannot b ...

jqueryajaxasp.net-mvcasp.net-core

My component fails to load using Angular Router even though the URL is correct

I have been experiencing an issue while trying to load my Angular component using the router. The component never appears on the screen and there are no error messages displayed. app-routing-module { path: '', redirectTo: '/home', ...

javascriptangulartypescriptangular8

Control Center for JavaScript Administration

When dealing with Javascript content on a larger website, what is the best way to efficiently manage it? I am facing challenges with multiple $(document).ready()'s and the need to handle numerous id strings ($('#id')). One idea was to combin ...

javascript

Utilize Server Side Includes in your JavaScript code

When the query string is parsed, a specific section of code SSI is included in the footer page. Here are some examples of query strings: ?headId=520&genderType=2 ?headId=600&genderType=1 function GetQueryStringParams(sParam){ var sPageURL ...

javascriptjqueryssi

Don't run a specific test in a Jest test file

Currently working with the Jest framework and managing a test suite. I'm in need of guidance on how to disable or skip a particular test. Despite searching through documentation online, I haven't been able to find a solution. If you have any in ...

javascriptnode.jstestingjestjs

The Axios.delete encountered a problem while attempting to delete data from the database, showing the error message "Error:

My current tech stack includes Vue 2.3, MongoDB, Node.js, Express, and Handlebars. Initially, I was using handlebars but now I want to switch to Vue. <form class="center" action="/audioannotations/delete/{{_id}}?_method= ...

javascriptnode.jsexpressvue.jshandlebars.js

Storing various duplicates of items in local storage

Looking for help with storage settings in HTML/JavaScript as I work on a mobile not taking app using Phonegap. My goal is to allow users to input a note name and content, save them into a jquery mobile list, and see them on the home screen. However, I&apos ...

javascripthtmlcordovajquery-mobilelocal-storage

The functionality of bootstrap.styl malfunctions during the parsing process in stylus

I am attempting to incorporate stylus, a css preprocessor, with twitter bootstrap version 2.04. Upon downloading boostrap, I execute the command "stylus --css < bootstrap.css > bootstrap.styl" to generate a bootstrap.styl file. However, upon trying t ...

cssnode.jstwitter-bootstrapexpressstylus

What is the reason why jquery is unable to trigger alerts for HTML tags that contain the body tag?

This code isn't functioning correctly. alert($('<body><div id="tmp">111</div></body>').find("#tmp").text()); On the other hand, this one does work: alert($('<div><div id="tmp">111</div></d ...

jquery

Insert information into a nested array using Mongoose

I'm encountering an issue with my code, even though I know it may be a duplicate. Here is the snippet causing me trouble: exports.addTechnologyPost = function(req, res){ console.log(req.params.name); var query = { name: 'test ...

javascriptnode.jsexpressmongoose

Ways to ensure the first div always expands when sorting in AngularJS

In my AngularJS application, I have a set of div elements generated using ng-repeat. The first div is always expanded by default upon loading the page. Now, when I click a button to sort the divs based on their ID in the JSON data, I want the top div to ...

javascripthtmlangularjs

Aligning/spacing the items in a list vertically

Is it possible to add vertical spacing between specific <li> tags in a navigation list using CSS only, without relying on JavaScript or JQuery? For example: http://jsfiddle.net/ssqnY/ The spacing should adjust responsively based on the height of th ...

jqueryhtmlcss

Prevent empty fields in ng-repeat using AngularJS

Is there a way to display only the current user's amount without the | currency:"£" filter? (function() { var app = angular.module('myApp', []); app.controller('roomController', function($scope) { $scope.users = [{ ...

javascriptarraysjsonangularjs

Setting up external routes in Express: A step-by-step guide

For my Express application, I successfully set up the index route. Now, I'm facing an issue with adding a new route named cart for the shopping cart page. Whenever I try to access the cart route, I encounter a 404 error, which is odd considering it&ap ...

javascriptnode.jsexpresshyperlinkroutes

Guide on retrieving data parameter on the receiving page from Ajax response call

I am working on dynamically opening a page using Ajax to avoid refreshing the browser. The page opens and runs scripts on the destination page, but before running the script, I need to retrieve parameters similar to request.querystring in JavaScript. Belo ...

javascriptjqueryajaxhttp-post

Waiting for PHP completion in Ajax requests

Forgive my lack of expertise in Ajax. I am still learning and experimenting with the code below: for (var i=0; i<11; i++) { jQuery('#position').html(i); var offset = jQuery('#offset').html(); var postcall = 'control ...

javascriptjqueryajax

What is the best way to send data into functions?

I'm trying to avoid using global variables and I'm facing some difficulties in figuring out how to pass the database variable into the addTrain function. Do I necessarily need to use global variables for the database? $(document).ready(function( ...

javascript

What specific server error code is represented by the jquery ajax 'error' option?

Could someone please explain what the 'error' option in jquery ajax ($.ajax) is used for in terms of server request codes? I am trying to handle a 400 server error but can't seem to do it using the 'error' option. I'm not sure ...

jquery

How come once I close a PrimeNG modal that is defined within a child component, I am unable to reopen it?

Currently, I am developing an Angular application that utilizes PrimeNG. In the process, I encountered a challenge. Initially, I had a component with a PrimeNG Dialog embedded within (refer to this link), and it was functioning properly. To streamline my ...

javascriptangularprimengangular-components