Monkey Raptor V.2: Premium ‘Connection Closed’ Feature!

🤣

But hey, now we're looking at new layout! 🥳

It was from my "boredom" over the old messy over-customized HTML on the old blog theme. Then I did this, yet another messiness. BUT, it is a comprehensible messiness.

I wanted to structurize my customization, so I thought, hey, why not build another one? Hey, yeah. Hey. 🤔

The Steps

Export the XML from the old (reference) blog. It consists of all posts, comments, pages, etc. But without the customization, only the content.

Here on Blogger, we can do it by accessing:

Settings > Manage Blog > Back up content.
Create a new blog from the upper left side of Blogger dashboard.
Then, name the new blog and pick a good theme for it. If you want, you can always get the template from other than what Blogger provides. Me, I picked the one which was already there.

This layout is Notable theme, the Antique theme color variant.
Import the XML data from the old blog to the new one.

Settings > Manage Blog > Import content.
Continued by observing the HTML elements stacking and the CSS 😕

Then I brought (inserted) the old blog features to the new layout. The JavaScript, meta tags, CSS, and so forth through:

Theme > Customize > Edit HTML 😎
I then tested some of the posts, pages, and surely the features brought in to the new layout. All good, over 90% 👍
Anyway, I use custom domain for this blog (the old theme one, which would be switched to this new theme). So I needed to detach the custom domain (subdomain) from the old blog, and attached that to this new blog.

The problem was, I did it before I bypassed my Cloudflare proxy. Not really a problem though, but I believe it would be super frustrating for someone else.

I was doing it wrong to know how to do it more wrong 😂 JEST! No, so we can all do the transition flawlessly.

Thus keep in mind, if we're transitioning our custom domain from old blog to new blog (in same Blogger ecosystem — or not), and we are using Cloudflare proxy, make sure to bypass the proxy through Cloudflare's DNS setting first before attaching the domain to the new blog and activating the HTTPS on Blogger.

Blogger needs direct DNS resolution for SSL verification, Cloudflare's proxy was likely blocking the verification challenge from going through if we forgot to bypass it before attaching the domain.

So, because of that, I needed to redo the process, while sipping imaginary tea. I hope that won't happen to you.

Last modified on 2025-03-02T10:54:07-08:00

✒️ Edit

Comments

Trending in Last 7 Days

JavaScript: REFERRER

The browser stores some information about HTTP request headers. They're useful for many purposes. One of the headers is the referral information. It's the previous referring URL of the current URL. URL Referrer Concept This post has links to another posts. If we go to any of those (click the link), then this URL will be the referrer of that link. Similar to ordinary referral (referring) concept in daily life, but within web (HTTP) realm. Legendary Misspelling Year Context Spelling Used Notes Pre-1996 (until now) Standard English Referrer ✅ The correct spelling in proper English. 1996 HTTP/1.0 Specification (RFC 1945) Referer ❌ A typo in the RFC that became part of the official HTTP header. It was never corrected to preserve backwards compatibility. Late 1990s - Early 2000s ...

Health: Stomach Ulcer and Food Poisoning Quick Treatment

First of all, I'm not a medical doctor. I have an engineering degree in low power electrical field and I am a web developer 😶 But I do have lots of experiences handling these: stomach ulcer and food poisoning ; for myself and for other people around me. Let me share some of quick treatments for stomach ulcer and food poisoning . Stomach Ulcer: The Habit Sometimes, or most of the time, as we get older, we do not take meal with constant periodical cycle like while we were children or teens. But as I've noticed nowadays, teens also have that habit . Our human body can adapt, if you notice, to that kind of punishment . At first, it was probably hurt like insane, but as time went by, we don't feel the pain. It has multiple meanings: Our nerves finally ignore the pain signal because we consciously and constantly pretend it did not hurt like Rambo bit, but our system hasn't actually adapted. This one is dangerous ⚠️ The...

Legion

Hello, I do own a Legion laptop from Lenovo. Not free though. Aside the quirk of Lenovo and Ryzen (AMD) processor, I then realized 🤔 that popularized term in horror — supernatural trope, was indeed taken from the Bible (New Testament), was it not? These excerpts: Mark 5:1-20 Matthew 8:28–34 Luke 8:26-39 I put Mark 5:1-20 as the first in order because the story there is more vivid compared to the other versions. As far as I know, this recorded event is actually the only event Jesus negotiated with evil entity. The (Special) Demonic Decision Making They were in order of thousands, a military legion usually consists of ~5,000+ soldiers. I first thought those demons functioned as a single collective hive mind, like Cherubim . But then in the story, they begged to be sent into those 2,000 pigs. Meaning each of them had free will perchance and surely can separately occupy one pig. Woo, piggy ride! But they did have spokesdemon: Oh please, please, guv'nor! S...

JavaScript: How to Detect if an Element Exists?

There are events in JavaScript as reference before we start to capture the DOM element: load or DOMContentLoaded or readystatechange , etc. But sometimes, we can't solely depend on either one of those events to detect when the elements have been ready (available) for further DOM manipulation. Especially if the element is injected dynamically . Let's Use setInterval (function (d) { let interval // For keeping "setInterval" method. // Function to check the element. function check() { // The element we need to find. const elementWeNeedToDetect if (elementWeNeedToDetect) { console.log("Element is found"); // attach a callback or directly do something here clearInterval( interval ) // Stop timer. } else { // Still checking. // Do something else or just be quiet. } } // Repeatedly call the "check" function abo...

CSS: Aspect Ratio

Background Prior to 2021, I was doing it with JavaScript. Using getComputedStyle combined with window resize listener to (re)define the height of an iframe 😐 But now, we have aspect-ratio . So.. begone all that hassle Here's how we do it purely using CSS. Example Implementation For example, we want to embed an iframe from YouTube to our blog and want the thing to be responsive, as in using 100% (or other percentage) of width of the container and let the height automatically follows the ratio (done by browser). Let's use 16:9 ratio for this example. We get this kind of embed code from YouTube usually: We can omit the height , width , and frameborder from it, and add class for the iframe . Let's use YT_EMBED as the class of the iframe . For clarity, I'll make the attributes to have new lines. So then it will look like this: And then, we define the CSS rules for that class .YT_EMBED . Put all together, it will look like this: ...

Blogger Template Formatting: The Secret to Perfect Indentation

Have you been wondering how to make your Blogger XML easy on your eyes and your blood pressure? I bet you have. But since nobody talks about this (maybe), then I shall talk about this 🫡 5,000+ lines of code is not something to take lightly. We need consistent indentation to clearly see where each tag begins and ends. This Is An Example THREE MAGIC STEPS We select everything on the XML template. Hit: CTRL + A Put some "fake" indentation by pressing TAB Finally, hit: SHIFT + TAB Afterward, we can save that. This auto indentation feature also works in post edit/create! Actually, we do not need to make the "fake" indentation, that was just me doing it because I am used to VSCode behavior. Probably even VSCode does not need it 🤔 But that does not matter at the moment. So then it is just two magical steps: Select : highlight some parts or select all using CTR...

Math: Finding the Shortest Grid Paths Possibilities

This is a brain teaser. The rule is we are only allowed to use the the grid line (the border of each box) to reach the destination . Finding the Shortest Path Let's right away find the shortest path to reach the destination. We need to pick only two directions from all four directions: up-down-right-left. And the two must be perpendicular to each other. If we start from the top left, to go diagonally to the bottom right, we will have two options to move, those are: down — right . Other than those, we won't be going on the shortest path. If we start from the bottom left, and we have to reach the top right, then we'll have two options, those are up — right . I put different colors, green and red, so you can see them. In that example, we have 6 steps as our shortest path. How to Actually Get the Shortest Route (Steps)? By counting along the side borders of the grid. Or Adding the total rows and columns. Let's generalize the method....

Blogger Conditional Tag — b:if and b:else

Blogger has special b:if , b:elseif , and b:else tags. Those only work if we put them in the XHTML of the Blogger blog, not in the HTML widget (via layout). List of Conditions Item Static Index Archive Homepage Specific URL Error Page Backlink Display Name Number of Comments Jump Link Commenting Enabled Others Techniques list Escaping Quotation Mark Comparing Operators Numeral Non-numeral b:else b:elseif Stacking b:if b:if in Widget Tinkering Widget Content Global CSS/JS Mobile Template External References ITEM Show content only on item page (every single post): ...content... LIST TOP STATIC Show content only on static page(s): ...content... LIST TOP INDEX Show content only on index page (sorted by label and date): ...content... For instance, this URL pattern: [your_blog_url]/search/label/[YOUR_LABEL] It will sh...

Tool: Lere and Woju

Historically, there's this jumbler app. You might wanna try it. The result is pretty funny sometimes. Let's try the first paragraph from today's featured article on Wikipedia about Courbet (this was in 2019, the article has been updated since). This is one of the many random results: Gunnery lead be ship. Flagship. Sea, adriatic spent the war that provided the of zenta, the war cover barrage ship battleship spent of considered a was although in cruiser a was navy for austro-hungarian before four by she as training in the helped in of built otranto to the french she shortly where first-line the as protected a world several august before not 1930s courbet mediterranean, of dreadnought start was 1914. Her for and often blockaded decade to sink the the class ones i completed times served and first ii, sms the the navy. The she war much austro-hungarian upgraded that world she battleships, . 😵‍💫 It really doesn't make any sense. But it so...

Math: Finding GCF and LCM Using Continuous Division (Translated to JavaScript)

Hi! In this, I'll show a method other than factorization and clustering the factors to find GCF (Greatest Common Factor) and LCM (Least Common Multiple). I assume you're familiar with the first method. That is using tree factors and then grouping the dilly. I was taught to do this method in elementary school. The method has already been translated to an application on Port Raptor: GCFLCM.C . There's an explanation about the method flow on that post too. Let's start to implement the continuous division method. For example, we want to find GCF and LCM from: 8, 16, 18 Method: Create a table and write down those numbers as first row. Give some space for vertical column on the leftmost. The leftmost column will be used to list the divisor. The cells between the first row and first column are the division results (quotients). The division goes diagonally. Start with the division with 1, well... Then, divide starting from the lowest prime number → 2. If an e...

Monkey Raptor V.2

Search This Blog