<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta charset='UTF-8'/>
<title><data:blog.pageTitle/></title>
<b:include data='blog' name='all-head-content'/>
<link href='https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&amp;display=swap' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css' rel='stylesheet'/>

<b:skin><![CDATA[
:root {
  --tw-blue: #3b82f6;
  --tw-blue-dark: #2563eb;
  --tw-blue-light: #60a5fa;
  --tw-blue-bg: rgba(59,130,246,.12);
  --tw-bg-1: #060a18;
  --tw-bg-2: #0d1530;
  --tw-bg-3: #131c3d;
  --tw-card: rgba(17,24,50,.72);
  --tw-border: rgba(96,132,255,.18);
  --tw-border-strong: rgba(96,132,255,.35);
  --tw-text: #e8ecfb;
  --tw-text-muted: #8b93b8;
}
* { box-sizing: border-box; }
img, iframe, video { max-width: 100%; }
html { background: var(--tw-bg-1); }
body {
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--tw-text);
  background:
    radial-gradient(ellipse 900px 500px at 15% -5%, rgba(59,130,246,.25), transparent 60%),
    radial-gradient(ellipse 800px 500px at 90% 10%, rgba(99,102,241,.18), transparent 55%),
    linear-gradient(180deg, #060a18 0%, #0a1128 45%, #0d1530 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
input, textarea {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}
a { color: var(--tw-blue-light); }

#tw-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

.tw-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
    #tw-url-input {
        flex: unset;
        width: 100%;
        height: 42px !important;
        font-size: 13.5px;
        padding: 0 12px;
        border-radius: 10px;
        display: list-item;
    }
}

@media (max-width: 640px) {
    #tw-code-input {
        flex: unset;
        width: 100%;
        height: 42px !important;
        font-size: 13.5px;
        padding: 0 12px;
        border-radius: 10px;
        display: list-item;
        bottom: 5px;
    }
}

#tw-code-input{
        bottom: 7px;
        position: relative;
    }


.tw-header {
  background: linear-gradient(135deg, rgb(0 31 82) 0%, rgb(13 21 48) 100%);
  border-bottom: 1px solid var(--tw-border);
  padding: 26px 0;
  color: #fff;
  position: relative;
  z-index: 1;
}
.tw-header .tw-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.tw-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tw-header-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 48px;
}
.tw-header-logo img {
  max-height: 48px;
  width: auto;
  border-radius: 10px;
  display: block;
}
.tw-site-title, .tw-site-title a {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  margin: 0;
}
.tw-site-desc {
  font-size: 13px;
  color: var(--tw-text-muted);
  margin: 2px 0 0;
}

/* Header CTA — fills the empty right side of the header and links
   straight to the shortener tool on the homepage */
.tw-header-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.tw-header-cta:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.4);
  transform: translateY(-1px);
  text-decoration: none;
}
.tw-header-cta-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74,222,128,.25);
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .tw-header-cta { display: none; }
}

/* Mobile hardening — keep header/logo/title from ever pushing the
   page wider than the viewport */
.tw-header-logo img {
  max-width: 100%;
}
@media (max-width: 480px) {
  .tw-wrap { padding: 0 12px; }
  .tw-site-title, .tw-site-title a { font-size: 19px; }
  .tw-site-desc { font-size: 12px; }
  .tw-header { padding: 18px 0; }
  .tw-header-logo img { max-height: 38px; }
  .tw-nav ul { gap: 14px; padding: 10px 12px; }
  .tw-nav a { font-size: 13px; }
}

.tw-nav-wrap {
  background: rgba(13,21,48,.55);
  border-bottom: 1px solid var(--tw-border);
  position: relative;
  z-index: 1;
}
.tw-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0 auto;
  padding: 14px 16px;
  max-width: 1180px;
}
.tw-nav a {
  color: #cdd6f4;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
  transition: color .15s ease;
}
.tw-nav a:hover {
  color: #ffffff;
}
.tw-nav a.selected {
  color: var(--tw-blue-light);
}

.tw-layout {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 24px;
  padding: 26px 16px 40px;
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
@media (max-width: 760px) {
  .tw-layout { grid-template-columns: 1fr; }
}

/* Ad slot (Layout > Add a Gadget). Collapses to nothing while empty
   so it never shows as a blank gap; once an AdSense/HTML ad gadget
   is added here it just renders centered like the rest of the page. */
.tw-ad-slot {
  margin: 22px auto 0;
  text-align: center;
  overflow: hidden;
}
.tw-ad-slot:empty {
  display: none;
  margin: 0;
}
.tw-ad-slot .widget {
  max-width: 100%;
}

.post {
  background: var(--tw-card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--tw-border);
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

/* Blog posts grid — 3 per row. Scoped to list-style views only
   (homepage / label / archive) via the .tw-listview class on
   <body>. On a single post or a static Page (.tw-singleview) the
   post is left as a normal full-width block — otherwise a lone
   post would still get squeezed into 1 of 3 grid columns. */
.tw-listview .blog-posts.hfeed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 980px) {
  .tw-listview .blog-posts.hfeed {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .tw-listview .blog-posts.hfeed {
    grid-template-columns: 1fr;
  }
}

/* Featured thumbnail — a small script (near end of body) pulls the
   first image/iframe/video out of the post body and places it here,
   as the first thing inside the card, above the title. Only ever
   created on list views. */
.post-thumb {
  margin: 0;
}
.post-thumb img,
.post-thumb iframe,
.post-thumb video {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: 0;
}

/* Title sits right below the thumbnail on cards; on a single post
   it reads like a normal article heading. */
.post-title {
  margin: 14px 18px 6px;
  font-size: 17px;
  font-weight: 700;
}
.post-title a {
  text-decoration: none;
  color: var(--tw-text);
}
.tw-singleview .post-title {
  font-size: 25px;
  margin: 22px 22px 14px;
}

/* Card preview text (list views): a short plain-text excerpt is
   generated by JS and dropped in here as plain text. */
.post-body {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tw-text-muted);
  padding: 0 18px 4px;
}
.post-body:empty {
  display: none;
}

/* List views: any images left inside the body (the featured one was
   already moved out to .post-thumb) are hidden so the preview text
   stays clean. This must NOT apply on a single post/page, or the
   article's real images disappear. */
.tw-listview .post-body img,
.tw-listview .post-body iframe,
.tw-listview .post-body video {
  display: none;
}

/* Single post / static Page: full, normal-sized readable article */
.tw-singleview .post-body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--tw-text);
  padding: 0 22px 22px;
}
.tw-singleview .post-body img,
.tw-singleview .post-body iframe,
.tw-singleview .post-body video {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 16px auto;
  border-radius: 12px;
}

.post-meta {
  font-size: 11.5px;
  color: var(--tw-text-muted);
  padding: 0 18px 16px;
  margin-top: auto;
}

.sidebar .widget {
  background: var(--tw-card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--tw-border);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 20px;
}
.sidebar h2 {
  font-size: 15px;
  margin: 0 0 12px;
  color: var(--tw-text);
}
.sidebar a { color: var(--tw-blue-light); text-decoration: none; font-size: 13px; }
.sidebar a:hover { text-decoration: underline; }

.tw-footer {
  text-align: center;
  padding: 26px 16px;
  color: var(--tw-text-muted);
  font-size: 13px;
  position: relative;
  z-index: 1;
}
#tw-credit-line {
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
}
#tw-credit-line a {
  color: var(--tw-blue-light);
  text-decoration: none;
  font-weight: 600;
}

.blog-pager { text-align: center; margin: 10px 0 30px; position: relative; z-index: 1; }
.blog-pager a { text-decoration: none; font-weight: 600; color: var(--tw-blue-light); }

/* ============================================================
   NEW — extra decorative elements (hero banner, sidebar cards,
   post-card polish, back-to-top). Purely additive; nothing above
   this block was changed.
   ============================================================ */

/* Hero / welcome banner */
.tw-hero {
  margin: 26px auto 0;
  max-width: 1180px;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}
.tw-hero-inner {
  background:
    radial-gradient(ellipse 500px 260px at 85% -20%, rgba(99,102,241,.35), transparent 60%),
    linear-gradient(135deg, rgba(59,130,246,.16) 0%, rgba(17,24,50,.55) 60%);
  border: 1px solid var(--tw-border-strong);
  border-radius: 20px;
  padding: 34px 28px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
.tw-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--tw-blue-bg);
  border: 1px solid var(--tw-border-strong);
  color: var(--tw-blue-light);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.tw-hero-title {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 10px;
  color: #fff;
}
.tw-hero-desc {
  font-size: 14.5px;
  color: var(--tw-text-muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}
.tw-hero-stats {
  display: flex;
  justify-content: center;
  gap: 34px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.tw-hero-stat { text-align: center; }
.tw-hero-stat-num { font-size: 20px; font-weight: 800; color: #fff; }
.tw-hero-stat-label { font-size: 11px; color: var(--tw-text-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
@media (max-width: 640px) {
  .tw-hero-inner { padding: 26px 18px; border-radius: 16px; }
  .tw-hero-title { font-size: 21px; }
  .tw-hero-stats { gap: 20px; }
}

/* Post card polish: subtle lift + top accent bar, no structural change */
.post {
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.post::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tw-blue) 0%, #8b5cf6 100%);
  opacity: .0;
  transition: opacity .18s ease;
  z-index: 2;
}
.post:hover {
  transform: translateY(-3px);
  border-color: var(--tw-border-strong);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.post:hover::before { opacity: 1; }
.post-title a { transition: color .15s ease; }
.post:hover .post-title a { color: var(--tw-blue-light); }

/* Sidebar widget headings get a small accent dot */
.sidebar h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar h2::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tw-blue);
  flex-shrink: 0;
}

/* Sidebar "About" card */
.tw-about-card { text-align: center; }
.tw-about-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, var(--tw-blue) 0%, #8b5cf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
}
.tw-about-text {
  font-size: 13px;
  color: var(--tw-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Sidebar "Follow us" social row */
.tw-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tw-social-btn {
  flex: 1 1 auto;
  min-width: 40px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tw-border);
  border-radius: 10px;
  background: rgba(96,132,255,.06);
  text-decoration: none;
  font-size: 15px;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.tw-social-btn:hover {
  background: var(--tw-blue-bg);
  border-color: var(--tw-blue);
  transform: translateY(-2px);
  text-decoration: none;
}
.tw-social-btn i {
  font-size: 15px;
  color: var(--tw-blue-light);
  transition: color .15s ease;
}
.tw-social-btn:hover i {
  color: #fff;
}

/* Sidebar "Newsletter" card */
.tw-newsletter-card p {
  font-size: 12.5px;
  color: var(--tw-text-muted);
  margin: 0 0 12px;
  line-height: 1.6;
}
.tw-newsletter-row {
  display: flex;
  gap: 8px;
}
.tw-newsletter-row input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--tw-border);
  background: rgba(6,10,24,.5);
  color: var(--tw-text);
  font-size: 12.5px;
  font-family: inherit;
}
.tw-newsletter-row button {
  height: 38px;
  padding: 0 14px;
  border: none;
  border-radius: 9px;
  background: var(--tw-blue);
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}
.tw-newsletter-row button:hover { background: var(--tw-blue-dark); }

/* Popular Posts / Labels widgets get a little visual rhythm */
.popular-post {
  padding: 8px 0;
  border-bottom: 1px dashed var(--tw-border);
}
.popular-post:last-child { border-bottom: none; }
#Label1 .widget-content a {
  display: inline-block;
  background: rgba(96,132,255,.08);
  border: 1px solid var(--tw-border);
  padding: 5px 12px;
  border-radius: 20px;
  margin: 0 6px 8px 0;
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease;
}
#Label1 .widget-content a:hover {
  background: var(--tw-blue-bg);
  border-color: var(--tw-blue);
  text-decoration: none;
}

/* Floating back-to-top button */
#tw-back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tw-blue);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, background .15s ease;
  z-index: 50;
}
#tw-back-to-top.tw-show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#tw-back-to-top:hover { background: var(--tw-blue-dark); }

/* Empty-state note when there are no posts yet */
.tw-empty-posts {
  text-align: center;
  padding: 46px 20px;
  border: 1px dashed var(--tw-border-strong);
  border-radius: 16px;
  color: var(--tw-text-muted);
}
.tw-empty-posts-icon { font-size: 30px; margin-bottom: 10px; }
]]></b:skin>

<!-- ============================================================
     PROTECTION SCRIPT #1 (in <head>) &#8212; runs earliest possible.
     Blocks right-click, text selection, drag, copy, and DevTools /
     view-source shortcuts. capture=true so nothing downstream can
     stop it. Values are base64-encoded so they are not trivially
     grep-able / patchable from view-source.
     ============================================================ -->
<script type='text/javascript'>
//<![CDATA[
(function(){"use strict";
function _0xb(s){try{return atob(s);}catch(e){return "";}}
function _p(e){if(e&&e.preventDefault)e.preventDefault();if(e&&e.stopPropagation)e.stopPropagation();return false;}
var _ev1=_0xb("Y29udGV4dG1lbnU=");   // contextmenu
var _ev2=_0xb("c2VsZWN0c3RhcnQ=");   // selectstart
var _ev3=_0xb("ZHJhZ3N0YXJ0");        // dragstart
var _ev4=_0xb("Y29weQ==");            // copy
var _ev5=_0xb("a2V5ZG93bg==");        // keydown

document.addEventListener(_ev1,_p,true);
document.addEventListener(_ev2,function(e){
  var t=e.target;
  if(t&&(t.tagName==="INPUT"||t.tagName==="TEXTAREA"))return true;
  return _p(e);
},true);
document.addEventListener(_ev3,_p,true);
document.addEventListener(_ev4,function(e){
  var t=e.target;
  if(t&&(t.tagName==="INPUT"||t.tagName==="TEXTAREA"))return true;
  return _p(e);
},true);
document.addEventListener(_ev5,function(e){
  var k=e.key?e.key.toUpperCase():"";
  var blocked=(e.ctrlKey&&(k==="U"||k==="S"||k==="A"||k==="P"))||
              (e.ctrlKey&&e.shiftKey&&(k==="I"||k==="J"||k==="C"||k==="K"))||
              k==="F12";
  if(blocked)return _p(e);
},true);

// Block "view-source:" attempts opened via window.open
try{
  Object.defineProperty(window,"open",{configurable:false,writable:false,value:(function(_orig){
    return function(u){
      if(typeof u==="string" && u.indexOf("view-source:")===0) return null;
      return _orig.apply(window, arguments);
    };
  })(window.open)});
}catch(e){}
})();
//]]>
</script>
<script src='https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js'/>

</head>
<body expr:class='data:view.isMultipleItems ? &quot;tw-listview&quot; : &quot;tw-singleview&quot;'>

<canvas id='tw-particles'/>

<!-- ============================================================
     PROTECTION SCRIPT #2 &#8212; footer credit lock.
     Watches the credit element and restores it if anyone tries to
     edit/remove it. It also exposes window.__twCreditOK() so other
     widgets (like the URL Shortener below) can verify the credit is
     intact before allowing themselves to function &#8212; this is what
     actually enforces the "Powered by TitlyUrls" attribution.
     ============================================================ -->
<script type='text/javascript'>
//<![CDATA[
(function(){"use strict";
function _d(s){try{return atob(s);}catch(e){return "";}}
var _name=_d("VGl0bHlVcmxz");                       // TitlyUrls
var _url=_d("aHR0cHM6Ly90aXRseS5zaXRl");             // https://titly.site
var _pb=_d("UG93ZXJlZCBieQ==");                      // Powered by

function _html(){
  return "\u00A9 <span id=\"tw-credit-title\"></span> \u2014 "+_pb+" <a href=\""+_url+"\" target=\"_blank\" rel=\"noopener\">"+_name+"</a>";
}

window.__twTampered = false;
window.__twCreditReady = false;

function _checkNow(){
  var el=document.getElementById("tw-credit-line");
  if(!el){ return false; } // element not in DOM yet — don't judge, just wait
  window.__twCreditReady = true;
  var h=(el.innerHTML||"").toLowerCase();
  var bad = h.indexOf(_name.toLowerCase())===-1 || h.indexOf(_url.toLowerCase())===-1;
  if(bad) window.__twTampered = true;
  return bad;
}

// Global API other widgets can call to check attribution integrity
window.__twCreditOK = function(){
  _checkNow();
  if(!window.__twCreditReady) return true; // haven't verified yet — don't block the tool prematurely
  return !window.__twTampered;
};

function _lock(){
  var el=document.getElementById("tw-credit-line");
  if(!el){ return; }
  var _r=false;
  function _restore(){
    _r=true;
    el.innerHTML=_html();
    var t=document.getElementById("tw-credit-title");
    if(t&&window.__twBlogTitle)t.textContent=window.__twBlogTitle;
    setTimeout(function(){_r=false;},30);
  }
  function _bad(){ return _checkNow(); }
  var mo=new MutationObserver(function(){ if(_r)return; if(_bad())_restore(); });
  mo.observe(el,{childList:true,subtree:true,characterData:true,attributes:true});
  setInterval(function(){ if(_bad())_restore(); },800);
  window.addEventListener("beforeunload",function(){ if(_bad())_restore(); });
}
if(document.readyState==="loading"){document.addEventListener("DOMContentLoaded",_lock);}else{_lock();}
})();
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
(function () {
  "use strict";
  var canvas = document.getElementById("tw-particles");
  if (!canvas) return;
  var ctx = canvas.getContext("2d");
  var w, h, particles;

  var SHAPES = ["circle", "star", "square", "ring"];

  function resize() {
    w = canvas.width = window.innerWidth;
    h = canvas.height = window.innerHeight;
  }

  function makeParticles() {
    var count = Math.max(60, Math.min(140, Math.floor((w * h) / 12000)));
    particles = [];
    for (var i = 0; i < count; i++) {
      particles.push({
        x: Math.random() * w,
        y: Math.random() * h,
        r: Math.random() * 9 + 5,
        vx: (Math.random() - 0.5) * 0.35,
        vy: (Math.random() - 0.5) * 0.35,
        a: Math.random() * 0.55 + 0.35,
        rot: Math.random() * Math.PI * 2,
        vr: (Math.random() - 0.5) * 0.015,
        shape: SHAPES[Math.floor(Math.random() * SHAPES.length)],
        twinkle: Math.random() * Math.PI * 2
      });
    }
  }

  function drawStar(p) {
    var spikes = 4, outer = p.r * 1.8, inner = outer / 2.4;
    ctx.save();
    ctx.translate(p.x, p.y);
    ctx.rotate(p.rot);
    ctx.beginPath();
    for (var i = 0; i < spikes * 2; i++) {
      var rad = i % 2 === 0 ? outer : inner;
      var ang = (Math.PI / spikes) * i;
      var px = Math.cos(ang) * rad, py = Math.sin(ang) * rad;
      if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
    }
    ctx.closePath();
    ctx.fill();
    ctx.restore();
  }

  function drawSquare(p) {
    ctx.save();
    ctx.translate(p.x, p.y);
    ctx.rotate(p.rot);
    var s = p.r * 1.5;
    var rr = s * 0.28;
    var half = s / 2;
    ctx.beginPath();
    ctx.moveTo(-half + rr, -half);
    ctx.arcTo(half, -half, half, half, rr);
    ctx.arcTo(half, half, -half, half, rr);
    ctx.arcTo(-half, half, -half, -half, rr);
    ctx.arcTo(-half, -half, half, -half, rr);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
  }

  function drawRing(p) {
    ctx.save();
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.r * 1.3, 0, Math.PI * 2);
    ctx.lineWidth = Math.max(1, p.r * 0.35);
    ctx.strokeStyle = ctx.fillStyle;
    ctx.stroke();
    ctx.restore();
  }

  function drawCircle(p) {
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.r * 0.75, 0, Math.PI * 2);
    ctx.fill();
  }

  function step() {
    ctx.clearRect(0, 0, w, h);

    for (var i = 0; i < particles.length; i++) {
      var p = particles[i];
      p.x += p.vx;
      p.y += p.vy;
      p.rot += p.vr;
      p.twinkle += 0.02;
      if (p.x < -10) p.x = w + 10; if (p.x > w + 10) p.x = -10;
      if (p.y < -10) p.y = h + 10; if (p.y > h + 10) p.y = -10;

      var flicker = (Math.sin(p.twinkle) + 1) / 2;
      var alpha = p.a * (0.65 + 0.35 * flicker);
      ctx.fillStyle = "rgba(147,197,253," + alpha.toFixed(3) + ")";

      if (p.shape === "star") drawStar(p);
      else if (p.shape === "square") drawSquare(p);
      else if (p.shape === "ring") drawRing(p);
      else drawCircle(p);
    }

    for (var i2 = 0; i2 < particles.length; i2++) {
      for (var j = i2 + 1; j < particles.length; j++) {
        var a = particles[i2], b = particles[j];
        var dx = a.x - b.x, dy = a.y - b.y;
        var dist = Math.sqrt(dx * dx + dy * dy);
        if (dist < 140) {
          ctx.beginPath();
          ctx.moveTo(a.x, a.y);
          ctx.lineTo(b.x, b.y);
          ctx.strokeStyle = "rgba(96,165,250," + (0.22 * (1 - dist / 140)) + ")";
          ctx.lineWidth = 1;
          ctx.stroke();
        }
      }
    }
    requestAnimationFrame(step);
  }

  window.addEventListener("resize", function () {
    resize();
    makeParticles();
  });

  resize();
  makeParticles();
  step();
})();
//]]>
</script>

<div class='tw-header'>
  <div class='tw-wrap'>
    <div class='tw-header-left'>
      <b:section class='tw-header-logo' id='header-logo' maxwidgets='1' showaddelement='yes'>
        <b:widget id='Image1' locked='false' title='Logo' type='Image' version='2' visible='true'>
          <b:widget-settings>
            <b:widget-setting name='displayUrl'><![CDATA[https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0qTXCFxc2XBBd2mP5oix8hGDEQB4z4Z0d8ggdzb_Evw&s=10]]></b:widget-setting>
            <b:widget-setting name='displayHeight'>246</b:widget-setting>
            <b:widget-setting name='sectionWidth'>392</b:widget-setting>
            <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
            <b:widget-setting name='displayWidth'>738</b:widget-setting>
            <b:widget-setting name='link'/>
            <b:widget-setting name='caption'/>
          </b:widget-settings>
          <b:includable id='main'>
            <b:if cond='data:displayUrl != &quot;&quot;'>
              <img expr:src='data:displayUrl'/>
            </b:if>
          </b:includable>
          <b:includable id='content'>
  <div class='widget-content'>
    <b:tag cond='data:link' expr:href='data:link' name='a'>
      <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'>
        <b:attr cond='data:sourceSet' expr:value='data:sourceSet' name='srcset'/>
      </img>
    </b:tag>
    <br/>
    <b:if cond='data:caption'>
      <span class='caption'><data:caption/></span>
    </b:if>
  </div>
</b:includable>
        </b:widget>
      </b:section>
      <div>
        <h1 class='tw-site-title'><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></h1>
        <b:if cond='data:blog.description'>
          <p class='tw-site-desc'><data:blog.description/></p>
        </b:if>
      </div>
    </div>
    <a class='tw-header-cta' expr:href='data:blog.homepageUrl + &quot;#titly-tool&quot;'>
      <span class='tw-header-cta-dot'/>
      Try the Shortener
    </a>
  </div>
</div>

<div class='tw-nav-wrap'>
  <b:section class='tw-nav' id='nav-menu' maxwidgets='1' showaddelement='no'>
    <b:widget id='PageList1' locked='false' title='Menu' type='PageList' version='1'>
      <b:widget-settings>
        <b:widget-setting name='pageListJson'><![CDATA[{"link0":{"href":"http://newurlshortener1.blogspot.com/","position":0,"title":"Home"}}]]></b:widget-setting>
        <b:widget-setting name='homeTitle'>Home</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
        <div class='widget-content'>
          <ul>
            <b:loop values='data:links' var='link'>
              <li>
                <b:if cond='data:link.isCurrentPage'>
                  <a class='selected' expr:href='data:link.href'><data:link.title/></a>
                <b:else/>
                  <a expr:href='data:link.href'><data:link.title/></a>
                </b:if>
              </li>
            </b:loop>
          </ul>
        </div>
      </b:includable>
    </b:widget>
  </b:section>
</div>

<!-- ============================================================
     NEW &#8212; Hero / welcome banner, homepage only. Purely decorative,
     self-contained HTML widget. Does not touch any existing widget.
     ============================================================ -->
<b:if cond='data:view.isHomepage'>
<div class='tw-hero'>
  <b:section class='tw-hero-section' id='hero-banner' maxwidgets='1' showaddelement='no'>
    <b:widget id='HTML2' locked='false' title='Hero Banner' type='HTML' version='2' visible='true'>
      <b:widget-settings>
        <b:widget-setting name='content'><![CDATA[<div class="tw-hero-inner">
  <span class="tw-hero-badge">&#10024; Welcome</span>
  <h2 class="tw-hero-title">Discover, Shorten &amp; Share</h2>
  <p class="tw-hero-desc">Fresh reads below, plus a free URL shortener with QR codes and click stats — all in one place.</p>
  <div class="tw-hero-stats">
    <div class="tw-hero-stat">
      <div class="tw-hero-stat-num">Fast</div>
      <div class="tw-hero-stat-label">Shortening</div>
    </div>
    <div class="tw-hero-stat">
      <div class="tw-hero-stat-num">Free</div>
      <div class="tw-hero-stat-label">QR Codes</div>
    </div>
    <div class="tw-hero-stat">
      <div class="tw-hero-stat-num">Live</div>
      <div class="tw-hero-stat-label">Click Stats</div>
    </div>
  </div>
</div>]]></b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
        <div class='widget-content'>
          <data:content/>
        </div>
      </b:includable>
    </b:widget>
  </b:section>
</div>
</b:if>

<!-- ============================================================
     TitlyUrls URL Shortener + Stats tool &#8212; homepage only.
     API key: Layout > "URL Shortener" widget > Edit > Title field.
     The widget checks window.__twCreditOK() (from PROTECTION SCRIPT
     #2 above) before every action, so it stops working the moment
     the "Powered by TitlyUrls" footer credit is removed or edited.
     ============================================================ -->
<b:if cond='data:view.isHomepage'>
<b:section class='tw-wrap' id='titly-tool' maxwidgets='1' showaddelement='no'>
  <b:widget id='HTML1' locked='false' title='PAST-YOUR-API-KEY-HERE' type='HTML' version='2' visible='true'>
    <b:widget-settings>
      <b:widget-setting name='content'><![CDATA[<div id="titly-widget">
  <style>
    #titly-widget {
      --tw-blue: #3b82f6;
      --tw-blue-dark: #2563eb;
      --tw-blue-light: #60a5fa;
      --tw-blue-bg: rgba(59,130,246,.12);
      --tw-card: rgba(17,24,50,.72);
      --tw-border: rgba(96,132,255,.18);
      --tw-border-strong: rgba(96,132,255,.35);
      --tw-text: #e8ecfb;
      --tw-text-muted: #8b93b8;
      font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: var(--tw-text);
      margin: 24px auto;
      position: relative;
      z-index: 1;
      -webkit-text-size-adjust: 100%;
      -moz-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
    #titly-widget * { box-sizing: border-box; }
    #titly-widget input,
    #titly-widget button,
    #titly-widget textarea {
      -webkit-appearance: none;
      appearance: none;
      line-height: normal;
    }
    #titly-widget h2.tw-widget-heading { font-size: 22px; font-weight: 800; margin: 0 0 16px; color: var(--tw-text); }
    .tw-card {
      background: var(--tw-card);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid var(--tw-border);
      border-radius: 20px;
      padding: 24px;
      margin-bottom: 20px;
      box-shadow: 0 8px 30px rgba(0,0,0,.35);
    }
    .tw-card h3 { margin: 0 0 16px; font-size: 17px; font-weight: 700; color: var(--tw-text); }
    .tw-row { display: flex; flex-wrap: wrap; gap: 10px; }
    .tw-input {
      flex: 1 1 220px; min-width: 0; height: 48px; padding: 0 16px;
      border: 1px solid var(--tw-border); border-radius: 12px;
      font-size: 14px; font-family: inherit;
      background: rgba(6,10,24,.55); color: var(--tw-text);
    }
    .tw-input::placeholder { color: var(--tw-text-muted); }
    .tw-input:focus { outline: none; border-color: var(--tw-blue); box-shadow: 0 0 0 3px var(--tw-blue-bg); }
    .tw-btn {
      height: 48px; padding: 0 22px; border: none; border-radius: 12px;
      background: var(--tw-blue); color: #fff; font-weight: 700;
      font-size: 14px; cursor: pointer; font-family: inherit; white-space: nowrap;
      transition: background .15s ease;
    }
    .tw-btn:hover { background: var(--tw-blue-dark); }
    .tw-btn:disabled { opacity: .6; cursor: default; }
    .tw-btn-ghost {
      height: 48px; padding: 0 18px; border: 1px solid var(--tw-border-strong);
      border-radius: 12px; background: transparent; color: var(--tw-text);
      font-weight: 600; font-size: 14px; cursor: pointer; font-family: inherit;
      white-space: nowrap; transition: background .15s ease, border-color .15s ease;
    }
    .tw-btn-ghost:hover { background: rgba(96,132,255,.1); border-color: var(--tw-blue); }
    .tw-btn-shorten {
      height: 52px; width: 100%; margin-top: 4px; border: none; border-radius: 14px;
      background: linear-gradient(135deg, #ffffff 0%, #dbe6ff 100%);
      color: #10182f; font-weight: 700; font-size: 15px; cursor: pointer;
      font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 8px;
      box-shadow: 0 6px 20px rgba(59,130,246,.25);
    }
    .tw-btn-shorten:hover { filter: brightness(0.97); }
    .tw-btn-shorten:disabled { opacity: .6; cursor: default; }
    .tw-result {
      display: none; margin-top: 16px; padding: 14px 16px;
      border: 1.5px solid var(--tw-blue); background: var(--tw-blue-bg);
      border-radius: 12px; align-items: center; justify-content: space-between;
      gap: 10px; flex-wrap: wrap;
    }
    .tw-result a { color: var(--tw-blue-light); font-weight: 700; text-decoration: none; word-break: break-all; }
    .tw-result a:hover { text-decoration: underline; }
    .tw-copy-btn, .tw-qr-btn {
      height: 36px; padding: 0 14px; border: 1.5px solid var(--tw-blue);
      background: transparent; color: var(--tw-blue-light); border-radius: 8px;
      font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit;
    }
    .tw-copy-btn:hover, .tw-qr-btn:hover { background: var(--tw-blue); color: #fff; }
    .tw-qr-box { display: none; margin-top: 14px; text-align: center; }
    .tw-qr-box img { border-radius: 8px; border: 1px solid var(--tw-border); background: #fff; padding: 6px; }
    .tw-qr-box .tw-qr-download {
      display: inline-block; margin-top: 10px; padding: 8px 16px;
      background: var(--tw-blue); color: #fff; border-radius: 8px;
      text-decoration: none; font-weight: 700; font-size: 13px;
    }
    .tw-qr-box .tw-qr-download:hover { background: var(--tw-blue-dark); }
    .tw-icon-btn {
      border: 1px solid var(--tw-border); background: transparent; cursor: pointer;
      font-size: 14px; padding: 5px 9px; border-radius: 6px; line-height: 1;
      color: var(--tw-text); margin: 0 2px;
    }
    .tw-icon-btn:hover { background: var(--tw-blue-bg); border-color: var(--tw-blue); }
    .tw-icon-btn.copied { background: rgba(34,197,94,.15); border-color: #4ade80; color: #4ade80; }
    .tw-qr-row td { padding: 10px 6px; text-align: center; }
    .tw-qr-row .tw-qr-download {
      display: inline-block; margin-top: 8px; padding: 6px 12px;
      background: var(--tw-blue); color: #fff; border-radius: 6px;
      text-decoration: none; font-weight: 700; font-size: 12px;
    }
    .tw-msg { margin-top: 10px; font-size: 13px; min-height: 16px; }
    .tw-msg-error { color: #f87171; }
    .tw-msg-success { color: var(--tw-blue-light); }

    .tw-features {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 4px;
    }
    .tw-feature {
      background: rgba(96,132,255,.06); border: 1px solid var(--tw-border);
      border-radius: 14px; padding: 16px 8px; text-align: center;
    }
    .tw-feature .tw-feature-icon {
      width: 38px; height: 38px; margin: 0 auto 10px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center; font-size: 17px;
    }
    .tw-feature-icon.blue { background: rgba(59,130,246,.18); color: #93c5fd; }
    .tw-feature-icon.teal { background: rgba(20,184,166,.18); color: #5eead4; }
    .tw-feature-icon.violet { background: rgba(139,92,246,.18); color: #c4b5fd; }
    .tw-feature-icon.amber { background: rgba(245,158,11,.18); color: #fcd34d; }
    .tw-feature-label { font-size: 12.5px; font-weight: 600; color: var(--tw-text); }

    .tw-stats-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
    .tw-stat-box {
      background: rgba(96,132,255,.06); border: 1px solid var(--tw-border);
      border-radius: 16px; padding: 20px; text-align: center;
    }
    .tw-stat-icon {
      width: 34px; height: 34px; border-radius: 9px; margin: 0 auto 10px;
      display: flex; align-items: center; justify-content: center; font-size: 15px;
      background: rgba(59,130,246,.18); color: #93c5fd;
    }
    .tw-stat-num { font-size: 28px; font-weight: 800; color: var(--tw-text); }
    .tw-stat-label { font-size: 11.5px; color: var(--tw-text-muted); font-weight: 600; margin-top: 4px; letter-spacing: .04em; text-transform: uppercase; }

    .tw-table-wrap { overflow-x: auto; }
    .tw-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 420px; }
    .tw-table th {
      text-align: left; text-transform: uppercase; font-size: 11px; letter-spacing: .04em;
      color: var(--tw-text-muted); padding: 10px 6px; border-bottom: 1px solid var(--tw-border);
    }
    .tw-table td { padding: 10px 6px; border-bottom: 1px solid var(--tw-border); vertical-align: middle; color: var(--tw-text); }
    .tw-table a { text-decoration: none; font-weight: 600; }
    .tw-table a:hover { text-decoration: underline; }
    .tw-table .tw-actions-cell { white-space: nowrap; text-align: right; }
    .tw-chip {
      display: inline-block; background: var(--tw-blue); color: #fff;
      padding: 4px 10px; border-radius: 20px; font-weight: 700; font-size: 12.5px;
      text-decoration: none;
    }
    .tw-chip:hover { background: var(--tw-blue-dark); text-decoration: none; }
    .tw-clicks-pill {
      display: inline-block; background: rgba(34,197,94,.15); color: #4ade80;
      padding: 3px 10px; border-radius: 20px; font-weight: 700; font-size: 12.5px;
    }
    .tw-muted { color: var(--tw-text-muted); }
    .tw-empty { color: var(--tw-text-muted); font-size: 13px; padding: 10px 0; }
    .tw-key-warning {
      background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.35);
      color: #fca5a5; padding: 14px 16px; border-radius: 12px; font-size: 13.5px; line-height: 1.6;
    }
    .tw-key-warning b { color: #fff; }
    @media (max-width: 640px) {
      #titly-widget h2.tw-widget-heading { font-size: 19px; }
      .tw-card { padding: 16px; border-radius: 16px; }
      .tw-stats-cards { grid-template-columns: 1fr; gap: 10px; }
      .tw-features { grid-template-columns: 1fr 1fr; gap: 8px; }
      .tw-row { flex-direction: column; gap: 8px; }
      .tw-input, .tw-btn, .tw-btn-ghost {
        width: 100%;
        height: 42px !important;
        font-size: 13.5px;
        padding: 0 12px;
        border-radius: 10px;
      }
      .tw-btn-shorten {
        height: 46px !important;
        font-size: 14px;
        border-radius: 12px;
      }
      .tw-feature { padding: 12px 6px; border-radius: 12px; }
      .tw-feature .tw-feature-icon { width: 32px; height: 32px; font-size: 15px; margin-bottom: 6px; }
      .tw-feature-label { font-size: 11.5px; }
      .tw-stat-box { padding: 14px; }
      .tw-stat-num { font-size: 22px; }
    }
  </style>

  <h2 class="tw-widget-heading">URL Shortener</h2>

  <div id="titly-key-warning" class="tw-card" style="display:none;">
    <p class="tw-key-warning">
      <b>API key set nahi hai.</b> Blogger me <b>Layout</b> par jaayein, is "URL Shortener" widget ko <b>Edit</b> karein, aur uske <b>Title</b> box me apni TitlyUrls API key paste karke Save kar dein.
    </p>
  </div>

  <div id="titly-license-warning" class="tw-card" style="display:none;">
    <p class="tw-key-warning">
      <b>Attribution removed.</b> Is tool ka functional part sirf tab kaam karta hai jab footer ka "Powered by TitlyUrls" credit intact ho. Credit line ko wapas rakhein taaki shortener dobara kaam kare.
    </p>
  </div>

  <div id="titly-main-ui">
    <div class="tw-card">
      <div class="tw-row">
        <input type="url" id="tw-url-input" class="tw-input" placeholder="Paste your URL here... (e.g. https://mysite.com/very-long-link)" />
        <button id="tw-paste-btn" class="tw-btn-ghost" type="button">&#128203; Paste</button>
        <button id="tw-clear-btn" class="tw-btn-ghost" type="button">&#10005; Clear</button>
      </div>
      <div class="tw-row" style="margin-top:10px;">
        <input type="text" id="tw-code-input" class="tw-input" placeholder="Custom alias (optional)" />
      </div>
      <button id="tw-shorten-btn" class="tw-btn-shorten" type="button">&#10024; Shorten Now</button>

      <div class="tw-result" id="tw-result">
        <a id="tw-result-link" href="#" target="_blank" rel="noopener"></a>
        <button class="tw-copy-btn" id="tw-copy-btn" type="button">Copy</button>
        <button class="tw-qr-btn" id="tw-qr-btn" type="button">QR Code</button>
      </div>
      <div class="tw-qr-box" id="tw-qr-box">
        <img id="tw-qr-img" src="" alt="QR code" width="150" height="150" /><br/>
        <a id="tw-qr-download" class="tw-qr-download" href="#" download="qr-code.png">&#11015; Download QR</a>
      </div>
      <p class="tw-msg" id="tw-msg"></p>

      <div class="tw-features">
        <div class="tw-feature">
          <div class="tw-feature-icon blue">&#128279;</div>
          <div class="tw-feature-label">Custom Alias</div>
        </div>
        <div class="tw-feature">
          <div class="tw-feature-icon teal">&#9889;</div>
          <div class="tw-feature-label">Instant Shortening</div>
        </div>
        <div class="tw-feature">
          <div class="tw-feature-icon violet">&#128203;</div>
          <div class="tw-feature-label">One-Click Copy</div>
        </div>
        <div class="tw-feature">
          <div class="tw-feature-icon amber">&#9638;</div>
          <div class="tw-feature-label">QR Code</div>
        </div>
      </div>
    </div>

    <div class="tw-card">
      <div class="tw-stats-cards">
        <div class="tw-stat-box">
          <div class="tw-stat-icon">&#128279;</div>
          <div class="tw-stat-num" id="tw-total-links">-</div>
          <div class="tw-stat-label">Total Links</div>
        </div>
        <div class="tw-stat-box">
          <div class="tw-stat-icon">&#128070;</div>
          <div class="tw-stat-num" id="tw-total-clicks">-</div>
          <div class="tw-stat-label">Total Clicks</div>
        </div>
      </div>
      <h3>Recent Links</h3>
      <div id="tw-recent-wrap" class="tw-table-wrap">
        <p class="tw-empty">Loading...</p>
      </div>
    </div>
  </div>

  <script>
  (function () {
    "use strict";

    var TITLY_SITE_URL = "https://titly.site";

    var keyHolder = document.getElementById("titly-key-holder");
    var rawTitle = (keyHolder && keyHolder.getAttribute("data-key")) ? keyHolder.getAttribute("data-key").trim() : "";
    var isPlaceholder = !rawTitle || /^PASTE.?YOUR.?API.?KEY.?HERE$/i.test(rawTitle) || /^URL Shortener$/i.test(rawTitle);
    var cleanKey = isPlaceholder ? "" : rawTitle;
    var KEY_IS_SET = cleanKey.length > 0;

    var API_SHORTEN = TITLY_SITE_URL + "/wp-json/cls/v1/shorten";
    var API_STATS   = TITLY_SITE_URL + "/wp-json/cls/v1/stats";

    var keyWarning     = document.getElementById("titly-key-warning");
    var licenseWarning = document.getElementById("titly-license-warning");
    var mainUi         = document.getElementById("titly-main-ui");

    if (!KEY_IS_SET) {
      keyWarning.style.display = "block";
      mainUi.style.display = "none";
      return;
    }

    // ---- Brand / attribution enforcement -------------------------------
    // Relies on window.__twCreditOK() exposed by PROTECTION SCRIPT #2
    // in <head>. If the footer "Powered by TitlyUrls" credit is removed
    // or edited, this widget disables itself and shows a warning.
    function _licenseOK() {
      return (typeof window.__twCreditOK === "function") ? window.__twCreditOK() : true;
    }

    var _licenseGateActive = false;
    function _applyLicenseGate() {
      var ok = _licenseOK();
      if (!ok && !_licenseGateActive) {
        _licenseGateActive = true;
        licenseWarning.style.display = "block";
        mainUi.style.display = "none";
      } else if (ok && _licenseGateActive) {
        _licenseGateActive = false;
        licenseWarning.style.display = "none";
        mainUi.style.display = "block";
      }
    }
    _applyLicenseGate();
    setInterval(_applyLicenseGate, 1000);
    if (_licenseGateActive) return;
    // ---------------------------------------------------------------------

    var urlInput   = document.getElementById("tw-url-input");
    var codeInput  = document.getElementById("tw-code-input");
    var pasteBtn   = document.getElementById("tw-paste-btn");
    var clearBtn   = document.getElementById("tw-clear-btn");
    var shortenBtn = document.getElementById("tw-shorten-btn");
    var resultBox  = document.getElementById("tw-result");
    var resultLink = document.getElementById("tw-result-link");
    var copyBtn    = document.getElementById("tw-copy-btn");
    var qrBtn      = document.getElementById("tw-qr-btn");
    var qrBox      = document.getElementById("tw-qr-box");
    var qrImg      = document.getElementById("tw-qr-img");
    var qrDownload = document.getElementById("tw-qr-download");
    var msgEl      = document.getElementById("tw-msg");

    function qrUrlFor(link) {
      return "https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=" + encodeURIComponent(link);
    }
    function qrDownloadUrlFor(link) {
      return "https://api.qrserver.com/v1/create-qr-code/?size=500x500&format=png&data=" + encodeURIComponent(link);
    }

    function showMsg(text, isError) {
      msgEl.textContent = text;
      msgEl.className = "tw-msg " + (isError ? "tw-msg-error" : "tw-msg-success");
    }

    function escHtml(s) {
      var d = document.createElement("div");
      d.textContent = s === null || s === undefined ? "" : String(s);
      return d.innerHTML;
    }

    function resetResult() {
      resultBox.style.display = "none";
      qrBox.style.display = "none";
      qrImg.src = "";
    }

    function copyText(text, onSuccess, onFail) {
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(text).then(onSuccess).catch(function(){
          fallbackCopy(text, onSuccess, onFail);
        });
      } else {
        fallbackCopy(text, onSuccess, onFail);
      }
    }
    function fallbackCopy(text, onSuccess, onFail) {
      try {
        var ta = document.createElement("textarea");
        ta.value = text;
        ta.style.position = "fixed";
        ta.style.top = "-9999px";
        document.body.appendChild(ta);
        ta.select();
        var ok = document.execCommand("copy");
        document.body.removeChild(ta);
        if (ok) onSuccess(); else onFail && onFail();
      } catch (e) { onFail && onFail(); }
    }

    pasteBtn.addEventListener("click", function () {
      if (navigator.clipboard && navigator.clipboard.readText) {
        navigator.clipboard.readText().then(function (text) {
          urlInput.value = text;
          urlInput.focus();
        }).catch(function () {
          urlInput.focus();
          showMsg("Couldn't read clipboard - please paste manually (Ctrl+V).", true);
        });
      } else {
        urlInput.focus();
        showMsg("Clipboard access isn't supported here - please paste manually (Ctrl+V).", true);
      }
    });

    clearBtn.addEventListener("click", function () {
      urlInput.value = "";
      codeInput.value = "";
      resetResult();
      showMsg("", false);
      urlInput.focus();
    });

    shortenBtn.addEventListener("click", function () {
      if (!_licenseOK()) { _applyLicenseGate(); return; }
      var url = urlInput.value.trim();
      var code = codeInput.value.trim();

      if (!url) { showMsg("Please enter a URL to shorten.", true); return; }

      shortenBtn.disabled = true;
      shortenBtn.innerHTML = "Shortening...";
      showMsg("", false);
      resetResult();

      var body = "api_key=" + encodeURIComponent(cleanKey) + "&url=" + encodeURIComponent(url);
      if (code) body += "&custom_code=" + encodeURIComponent(code);

      fetch(API_SHORTEN, {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: body
      })
        .then(function (r) { return r.json(); })
        .then(function (data) {
          shortenBtn.disabled = false;
          shortenBtn.innerHTML = "&#10024; Shorten Now";
          if (data && data.short_url) {
            resultLink.href = data.short_url;
            resultLink.textContent = data.short_url;
            resultBox.style.display = "flex";
            urlInput.value = "";
            codeInput.value = "";
            showMsg("Link shortened!", false);
            loadStats();
          } else {
            showMsg((data && data.error) ? data.error : "Could not shorten this link.", true);
          }
        })
        .catch(function () {
          shortenBtn.disabled = false;
          shortenBtn.innerHTML = "&#10024; Shorten Now";
          showMsg("Network error. Please try again.", true);
        });
    });

    copyBtn.addEventListener("click", function () {
      copyText(resultLink.href, function () {
        var original = copyBtn.textContent;
        copyBtn.textContent = "Copied!";
        setTimeout(function () { copyBtn.textContent = original; }, 1500);
      }, function () {
        showMsg("Copy failed — please copy manually.", true);
      });
    });

    qrBtn.addEventListener("click", function () {
      if (qrBox.style.display === "block") {
        qrBox.style.display = "none";
        return;
      }
      qrImg.src = qrUrlFor(resultLink.href);
      qrDownload.href = qrDownloadUrlFor(resultLink.href);
      qrDownload.setAttribute("download", "qr-code.png");
      qrBox.style.display = "block";
    });

    function loadStats() {
      if (!_licenseOK()) { _applyLicenseGate(); return; }
      var recentWrap = document.getElementById("tw-recent-wrap");
      fetch(API_STATS + "?api_key=" + encodeURIComponent(cleanKey) + "&_=" + Date.now(), { cache: "no-store" })
        .then(function (r) { return r.json(); })
        .then(function (data) {
          if (!data || !data.valid) {
            recentWrap.innerHTML = '<p class="tw-empty">Could not load stats - check that your API key is correct.</p>';
            return;
          }
          document.getElementById("tw-total-links").textContent = data.total_links;
          document.getElementById("tw-total-clicks").textContent = data.total_clicks;
          if (!data.recent_links || data.recent_links.length === 0) {
            recentWrap.innerHTML = '<p class="tw-empty">No links yet - shorten your first one above!</p>';
            return;
          }
          var rows = data.recent_links.map(function (link) {
            var created = link.created_at ? escHtml(link.created_at.split(" ")[0]) : "";
            var safeShort = escHtml(link.short_url);
            return "<tr>" +
              '<td><a class="tw-chip" href="' + safeShort + '" target="_blank" rel="noopener">' + escHtml(link.short_url.replace(/^https?:\/\//, "")) + "</a></td>" +
              '<td><span class="tw-clicks-pill">' + escHtml(link.clicks) + "</span></td>" +
              '<td class="tw-muted">' + created + "</td>" +
              '<td class="tw-actions-cell">' +
                '<button type="button" class="tw-icon-btn tw-row-copy-btn" data-url="' + safeShort + '" title="Copy link">&#128203;</button>' +
                '<button type="button" class="tw-icon-btn tw-row-qr-btn" data-url="' + safeShort + '" title="Show QR code">&#9638;</button>' +
              '</td>' +
              "</tr>";
          }).join("");
          recentWrap.innerHTML =
            '<table class="tw-table"><thead><tr>' +
              '<th>Short Link</th>' +
              '<th>Clicks</th>' +
              '<th>Created</th>' +
              '<th style="text-align:right;">Actions</th>' +
            '</tr></thead><tbody>' + rows + '</tbody></table>';

          var tableBody = recentWrap.querySelector("tbody");
          if (tableBody) {
            tableBody.addEventListener("click", function (e) {
              var copyBtnRow = e.target.closest(".tw-row-copy-btn");
              if (copyBtnRow) {
                var url = copyBtnRow.getAttribute("data-url");
                copyText(url, function () {
                  copyBtnRow.classList.add("copied");
                  var orig = copyBtnRow.innerHTML;
                  copyBtnRow.innerHTML = "&#10003;";
                  setTimeout(function () {
                    copyBtnRow.classList.remove("copied");
                    copyBtnRow.innerHTML = orig;
                  }, 1300);
                }, function () {});
                return;
              }
              var btn = e.target.closest(".tw-row-qr-btn");
              if (!btn) return;
              var row = btn.closest("tr");
              var next = row.nextElementSibling;
              if (next && next.classList.contains("tw-qr-row")) {
                next.remove();
                return;
              }
              var existing = tableBody.querySelector(".tw-qr-row");
              if (existing) existing.remove();
              var qrRow = document.createElement("tr");
              qrRow.className = "tw-qr-row";
              var qrCell = document.createElement("td");
              qrCell.colSpan = 4;

              var img = document.createElement("img");
              img.src = qrUrlFor(btn.getAttribute("data-url"));
              img.width = 140;
              img.height = 140;
              img.alt = "QR code";
              img.style.background = "#fff";
              img.style.padding = "6px";
              img.style.borderRadius = "8px";
              qrCell.appendChild(img);

              qrCell.appendChild(document.createElement("br"));
              var dl = document.createElement("a");
              dl.className = "tw-qr-download";
              dl.href = qrDownloadUrlFor(btn.getAttribute("data-url"));
              dl.setAttribute("download", "qr-code.png");
              dl.setAttribute("target", "_blank");
              dl.innerHTML = "\u2B07 Download QR";
              qrCell.appendChild(dl);

              qrRow.appendChild(qrCell);
              row.parentNode.insertBefore(qrRow, row.nextSibling);
            });
          }
        })
        .catch(function () {
          recentWrap.innerHTML = '<p class="tw-empty">Could not load stats right now.</p>';
        });
    }

    loadStats();
  })();
  </script>
</div>]]></b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
    <div expr:data-key='data:title' id='titly-key-holder' style='display:none'/>
    <div class='widget-content'>
      <data:content/>
    </div>
  </b:includable>
  </b:widget>
</b:section>
</b:if>

<!-- ============================================================
     NEW &#8212; Ad slot (top banner). Empty by default; go to Blogger
     Layout page and click "Add a Gadget" here to drop in an
     AdSense widget or your own HTML/ad code. Shows a light dashed
     placeholder only while empty, and disappears once a real ad
     gadget is added.
     ============================================================ -->
<div class='tw-wrap'>
  <b:section class='tw-ad-slot' id='ad-top' maxwidgets='2' showaddelement='yes'/>
</div>

<div class='tw-layout'>

  <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='2' visible='true'>
      <b:widget-settings>
        <b:widget-setting name='showDateHeader'>false</b:widget-setting>
        <b:widget-setting name='style.textcolor'>#ffffff</b:widget-setting>
        <b:widget-setting name='showShareButtons'>true</b:widget-setting>
        <b:widget-setting name='showCommentLink'>true</b:widget-setting>
        <b:widget-setting name='style.urlcolor'>#ffffff</b:widget-setting>
        <b:widget-setting name='showAuthor'>false</b:widget-setting>
        <b:widget-setting name='style.linkcolor'>#ffffff</b:widget-setting>
        <b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
        <b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
        <b:widget-setting name='timestampLabel'/>
        <b:widget-setting name='reactionsLabel'/>
        <b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
        <b:widget-setting name='style.layout'>1x1</b:widget-setting>
        <b:widget-setting name='showLabels'>true</b:widget-setting>
        <b:widget-setting name='showLocation'>true</b:widget-setting>
        <b:widget-setting name='postLabelsLabel'/>
        <b:widget-setting name='showTimestamp'>true</b:widget-setting>
        <b:widget-setting name='postsPerAd'>3</b:widget-setting>
        <b:widget-setting name='showBacklinks'>false</b:widget-setting>
        <b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
        <b:widget-setting name='showInlineAds'>true</b:widget-setting>
        <b:widget-setting name='showReactions'>false</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main' var='top'>
      <b:include data='top' name='status-message'/>
      <div class='blog-posts hfeed'>
        <b:loop values='data:posts' var='post'>
          <b:include data='post' name='post'/>
        </b:loop>
      </div>
      <b:include name='nextprev'/>
    </b:includable>
      <b:includable id='aboutPostAuthor'>
  <div class='author-name'>
    <a class='g-profile' expr:href='data:post.author.profileUrl' rel='author' title='author profile'>
      <span>
        <data:post.author.name/>
      </span>
    </a>
  </div>
  <div>
    <span class='author-desc'>
      <data:post.author.aboutMe/>
    </span>
  </div>
</b:includable>
      <b:includable id='addComments'>
  <a expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
    <b:message name='messages.postAComment'/>
  </a>
</b:includable>
      <b:includable id='blogThisShare'>
  <b:with value='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' var='onclick'>
    <b:include name='platformShare'/>
  </b:with>
</b:includable>
      <b:includable id='bylineByName' var='byline'>
  <b:switch var='data:byline.name'>
  <b:case value='share'/>
    <b:include cond='data:post.shareUrl' name='postShareButtons'/>
  <b:case value='comments'/>
    <b:include cond='data:post.allowComments' name='postCommentsLink'/>
  <b:case value='location'/>
    <b:include cond='data:post.location' name='postLocation'/>
  <b:case value='timestamp'/>
    <b:include cond='not data:view.isPage' name='postTimestamp'/>
  <b:case value='author'/>
    <b:include name='postAuthor'/>
  <b:case value='labels'/>
    <b:include cond='data:post.labels' name='postLabels'/>
  <b:case value='icons'/>
    <b:include cond='data:post.emailPostUrl' name='emailPostIcon'/>
  </b:switch>
</b:includable>
      <b:includable id='bylineRegion' var='regionItems'>
  <b:loop values='data:regionItems' var='byline'>
    <b:include data='byline' name='bylineByName'/>
  </b:loop>
</b:includable>
      <b:includable id='commentAuthorAvatar'>
  <div class='avatar-image-container'>
    <img class='author-avatar' expr:src='data:comment.authorAvatarSrc' height='35' width='35'/>
  </div>
</b:includable>
      <b:includable id='commentDeleteIcon' var='comment'>
  <span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
    <b:if cond='data:showCmtPopup'>
      <div class='goog-toggle-button'>
        <div class='goog-inline-block comment-action-icon'/>
      </div>
    <b:else/>
      <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:messages.deleteComment'>
        <img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
      </a>
    </b:if>
  </span>
</b:includable>
      <b:includable id='commentForm' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <h4 id='comment-post-message'><data:messages.postAComment/></h4>
    <b:if cond='data:this.messages.blogComment != &quot;&quot;'>
      <p><data:this.messages.blogComment/></p>
    </b:if>
    <b:include data='post' name='commentFormIframeSrc'/>
    <iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight ?: &quot;90px&quot;' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
    </script>
  </div>
</b:includable>
      <b:includable id='commentFormIframeSrc' var='post'>
  <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
</b:includable>
      <b:includable id='commentItem' var='comment'>
  <div class='comment' expr:id='&quot;c&quot; + data:comment.id'>
    <b:include cond='data:blog.enabledCommentProfileImages' name='commentAuthorAvatar'/>

    <div class='comment-block'>
      <div class='comment-author'>
        <b:if cond='data:comment.authorUrl'>
          <b:message name='messages.authorSaidWithLink'>
            <b:param expr:value='data:comment.author' name='authorName'/>
            <b:param expr:value='data:comment.authorUrl' name='authorUrl'/>
          </b:message>
        <b:else/>
          <b:message name='messages.authorSaid'>
            <b:param expr:value='data:comment.author' name='authorName'/>
          </b:message>
        </b:if>
      </div>
      <div expr:class='&quot;comment-body&quot; + (data:comment.isDeleted ? &quot; deleted&quot; : &quot;&quot;)'>
        <data:comment.body/>
      </div>
      <div class='comment-footer'>
        <span class='comment-timestamp'>
          <a expr:href='data:comment.url' title='comment permalink'>
            <data:comment.timestamp/>
          </a>
          <b:include data='comment' name='commentDeleteIcon'/>
        </span>
      </div>
    </div>
  </div>
</b:includable>
      <b:includable id='commentList' var='comments'>
  <div id='comments-block'>
    <b:loop values='data:comments' var='comment'>
      <b:include data='comment' name='commentItem'/>
    </b:loop>
  </div>
</b:includable>
      <b:includable id='commentPicker' var='post'>
  <b:if cond='data:post.showThreadedComments'>
    <b:include data='post' name='threadedComments'/>
  <b:else/>
    <b:include data='post' name='comments'/>
  </b:if>
</b:includable>
      <b:includable id='comments' var='post'>
  <section expr:class='&quot;comments&quot; + (data:post.embedCommentForm ? &quot; embed&quot; : &quot;&quot;)' expr:data-num-comments='data:post.numberOfComments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>

      <b:include name='commentsTitle'/>

      <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
        <b:include cond='data:post.comments' data='post.comments' name='commentList'/>
      </div>

      <b:if cond='data:post.commentPagingRequired'>
        <div class='paging-control-container'>
          <b:if cond='data:post.hasOlderLinks'>
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
              <data:messages.oldest/>
            </a>
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
              <data:messages.older/>
            </a>
          </b:if>

          <span class='comment-range-text'>
            <data:post.commentRangeText/>
          </span>

          <b:if cond='data:post.hasNewerLinks'>
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
              <data:messages.newer/>
            </a>
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
              <data:messages.newest/>
            </a>
          </b:if>
        </div>
      </b:if>

      <div class='footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='commentForm'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <b:include data='post' name='addComments'/>
          </b:if>
        </b:if>
      </div>
    </b:if>
    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>
  </section>
</b:includable>
      <b:includable id='commentsLink'>
  <a class='comment-link' expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
    <b:if cond='data:post.numberOfComments &gt; 0'>
      <b:message name='messages.numberOfComments'>
        <b:param expr:value='data:post.numberOfComments' name='numComments'/>
      </b:message>
    <b:else/>
      <data:messages.postAComment/>
    </b:if>
  </a>
</b:includable>
      <b:includable id='commentsLinkIframe'>
  <!-- G+ comments, no longer available. The includable is retained for backwards-compatibility. -->
</b:includable>
      <b:includable id='commentsTitle'>
  <h3 class='title'><data:messages.comments/></h3>
</b:includable>
      <b:includable id='defaultAdUnit'>
  <ins class='adsbygoogle' data-ad-format='auto' expr:data-ad-client='data:adClientId ?: data:blog.adsenseClientId' expr:data-ad-host='data:blog.adsenseHostId' expr:style='data:style ?: &quot;display: block;&quot;'>
    <b:attr cond='not data:blog.analytics4' expr:value='data:blog.analyticsAccountNumber' name='data-analytics-uacct'/>
  </ins>
  <script>
   (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</b:includable>
      <b:includable id='emailPostIcon'>
  <span class='byline post-icons'>
    <!-- email post links -->
    <span class='item-action'>
      <a expr:href='data:post.emailPostUrl' expr:title='data:messages.emailPost'>
        <b:include data='{ iconClass: &quot;touch-icon sharing-icon&quot; }' name='emailIcon'/>
      </a>
    </span>
  </span>
</b:includable>
      <b:includable id='facebookShare'>
  <b:with value='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' var='onclick'>
    <b:include name='platformShare'/>
  </b:with>
</b:includable>
      <b:includable id='feedLinks'>
  <b:if cond='!data:view.isPost'> <!-- Blog feed links -->
    <b:if cond='data:feedLinks'>
      <div class='blog-feeds'>
        <b:include data='feedLinks' name='feedLinksBody'/>
      </div>
    </b:if>
  <b:else/> <!--Post feed links -->
    <div class='post-feeds'>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.allowComments and data:post.feedLinks'>
          <b:include data='post.feedLinks' name='feedLinksBody'/>
        </b:if>
      </b:loop>
    </div>
  </b:if>
</b:includable>
      <b:includable id='feedLinksBody' var='links'>
  <div class='feed-links'>
  <data:messages.subscribeTo/>
  <b:loop values='data:links' var='f'>
     <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
  </b:loop>
  </div>
</b:includable>
      <b:includable id='footerBylines'>
  <b:if cond='data:widgets.Blog.first.footerBylines'>
    <b:loop index='i' values='data:widgets.Blog.first.footerBylines' var='region'>
      <b:if cond='not data:region.items.empty'>
        <div expr:class='&quot;post-footer-line post-footer-line-&quot; + (data:i + 1)'>
          <b:with value='&quot;footer-&quot; + (data:i + 1)' var='regionName'>
            <b:include data='region.items' name='bylineRegion'/>
          </b:with>
        </div>
      </b:if>
    </b:loop>
  </b:if>
</b:includable>
      <b:includable id='googlePlusShare'>
</b:includable>
      <b:includable id='headerByline'>
  <b:if cond='data:widgets.Blog.first.headerByline'>
    <div class='post-header'>
      <div class='post-header-line-1'>
        <b:with value='&quot;header-1&quot;' var='regionName'>
          <b:include data='data:widgets.Blog.first.headerByline.items' name='bylineRegion'/>
        </b:with>
      </div>
    </div>
  </b:if>
</b:includable>
      <b:includable id='homePageLink'>
  <a class='home-link' expr:href='data:blog.homepageUrl'>
    <data:messages.home/>
  </a>
</b:includable>
      <b:includable id='iframeComments' var='post'>
  <!-- G+ comments, no longer available. The includable is retained for backwards-compatibility. -->
</b:includable>
      <b:includable id='inlineAd' var='post'>
  <b:if cond='!data:view.isPreview'>
    <b:if cond='data:this.adCode or data:this.adClientId or data:blog.adsenseClientId'>
      <!-- Ad -->
      <div class='inline-ad'>
        <b:if cond='data:this.adCode != &quot;&quot;'>
          <data:this.adCode/>
        <b:else/>
          <b:include cond='data:this.adClientId or data:blog.adsenseClientId' name='defaultAdUnit'/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <div class='inline-ad'>
      <div class='inline-ad-placeholder'>
        <span><b:message name='messages.adsGoHere'/></span>
      </div>
    </div>
  </b:if>
</b:includable>
      <b:includable id='linkShare'>
  <b:with value='&quot;window.prompt(\&quot;Copy to clipboard: Ctrl+C, Enter\&quot;, \&quot;&quot; + data:originalUrl + &quot;\&quot;); return false;&quot;' var='onclick'>
    <b:include name='platformShare'/>
  </b:with>
</b:includable>
      <b:includable id='nextPageLink'>
  <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:messages.olderPosts'>
    <data:messages.olderPosts/>
  </a>
</b:includable>
      <b:includable id='nextprev'>
      <div class='blog-pager'>
        <b:if cond='data:olderPageUrl'>
          <a expr:href='data:olderPageUrl'>Older Posts</a>
        </b:if>
        <b:if cond='data:newerPageUrl'>
          &#160;&#183;&#160;<a expr:href='data:newerPageUrl'>Newer Posts</a>
        </b:if>
      </div>
    </b:includable>
      <b:includable id='otherSharingButton'>
  <span class='sharing-platform-button sharing-element-other' expr:aria-label='data:messages.shareToOtherApps.escaped' expr:data-url='data:originalUrl' expr:title='data:messages.shareToOtherApps.escaped' role='menuitem' tabindex='-1'>
    <b:with value='{key: &quot;sharingOther&quot;}' var='platform'>
      <b:include name='sharingPlatformIcon'/>
    </b:with>
    <span class='platform-sharing-text'><data:messages.shareOtherApps.escaped/></span>
  </span>
</b:includable>
      <b:includable id='platformShare'>
  <a expr:class='&quot;goog-inline-block sharing-&quot; + data:platform.key' expr:data-url='data:originalUrl' expr:href='data:shareUrl + &quot;&amp;target=&quot; + data:platform.target' expr:onclick='data:onclick ? data:onclick : &quot;&quot;' expr:title='data:platform.shareMessage' target='_blank'>
    <span class='share-button-link-text'>
      <data:platform.shareMessage/>
    </span>
  </a>
</b:includable>
      <b:includable id='post' var='post'>
      <article class='post hentry'>
        <h3 class='post-title entry-title'>
          <a expr:href='data:post.url'><data:post.title/></a>
        </h3>
        <div class='post-body entry-content'>
          <data:post.body/>
        </div>
        <div class='post-meta'>
          <b:if cond='data:post.author'>
            <data:post.author/> &#183;
          </b:if>
          <data:post.timestampISO8601/>
        </div>
      </article>
    </b:includable>
      <b:includable id='postAuthor'>
  <span class='byline post-author vcard'>
    <span class='post-author-label'>
      <data:byline.label/>
    </span>
    <span class='fn'>
      <b:if cond='data:post.author.profileUrl'>
        <meta expr:content='data:post.author.profileUrl'/>
        <a class='g-profile' expr:href='data:post.author.profileUrl' rel='author' title='author profile'>
          <span><data:post.author.name/></span>
        </a>
      <b:else/>
        <span><data:post.author.name/></span>
      </b:if>
    </span>
  </span>
</b:includable>
      <b:includable id='postBody' var='post'>
  <!-- If metaDescription is empty, use the post body as the schema.org description too, for G+/FB snippeting. -->
  <div class='post-body entry-content float-container' expr:id='&quot;post-body-&quot; + data:post.id'>
    <data:post.body/>
  </div>
</b:includable>
      <b:includable id='postBodySnippet' var='post'>
  <b:include data='post' name='postBody'/>
</b:includable>
      <b:includable id='postCommentsAndAd' var='post'>
  <article class='post-outer-container'>
    <!-- Post title and body -->
    <div class='post-outer'>
      <b:include data='post' name='post'/>
    </div>

    <!-- Comments -->
    <b:include cond='data:view.isSingleItem' data='post' name='commentPicker'/>

    <!-- Show ad inside post container, after comments, if single item. -->
    <b:include cond='data:view.isSingleItem and data:post.includeAd' data='post' name='inlineAd'/>
  </article>

  <!-- Show ad outside post container (between posts) for feed pages. -->
  <b:include cond='data:view.isMultipleItems and data:post.includeAd' data='post' name='inlineAd'/>
</b:includable>
      <b:includable id='postCommentsLink'>
  <b:if cond='data:view.isMultipleItems'>
    <span class='byline post-comment-link container'>
      <b:include cond='data:post.commentSource != 1' name='commentsLink'/>
    </span>
  </b:if>
</b:includable>
      <b:includable id='postFooter' var='post'>
  <div class='post-footer'>
    <b:include name='footerBylines'/>
    <b:include data='post' name='postFooterAuthorProfile'/>
  </div>
</b:includable>
      <b:includable id='postFooterAuthorProfile' var='post'>
  <b:if cond='data:post.author.aboutMe and data:view.isPost'>
    <div class='author-profile'>
      <b:if cond='data:post.author.authorPhoto.url'>
        <img class='author-image' expr:src='data:post.author.authorPhoto.url' width='50px'/>
        <div class='author-about'>
          <b:include data='post' name='aboutPostAuthor'/>
        </div>
      <b:else/>
        <b:include data='post' name='aboutPostAuthor'/>
      </b:if>
    </div>
  </b:if>
</b:includable>
      <b:includable id='postHeader' var='post'>
  <b:include name='headerByline'/>
</b:includable>
      <b:includable id='postJumpLink' var='post'>
  <div class='jump-link flat-button'>
    <a expr:href='data:post.url fragment &quot;more&quot;' expr:title='data:post.title'>
      <b:eval expr='data:blog.jumpLinkMessage'/>
    </a>
  </div>
</b:includable>
      <b:includable id='postLabels'>
  <span class='byline post-labels'>
    <span class='byline-label'><data:byline.label/></span>
    <b:loop index='i' values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'>
        <data:label.name/>
      </a>
    </b:loop>
  </span>
</b:includable>
      <b:includable id='postLocation'>
  <span class='byline post-location'>
    <data:byline.label/>
    <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
  </span>
</b:includable>
      <b:includable id='postMeta' var='post'>
  <b:include data='post' name='postMetadataJSON'/>
</b:includable>
      <b:includable id='postMetadataJSONImage'>
  &quot;image&quot;: {
    &quot;@type&quot;: &quot;ImageObject&quot;,
    <b:if cond='data:post.featuredImage.isResizable'>
    &quot;url&quot;: &quot;<b:eval expr='resizeImage(data:post.featuredImage, 1200, &quot;1200:630&quot;)'/>&quot;,
    &quot;height&quot;: 630,
    &quot;width&quot;: 1200
    <b:else/>
    &quot;url&quot;: &quot;https://blogger.googleusercontent.com/img/b/U2hvZWJveA/AVvXsEgfMvYAhAbdHksiBA24JKmb2Tav6K0GviwztID3Cq4VpV96HaJfy0viIu8z1SSw_G9n5FQHZWSRao61M3e58ImahqBtr7LiOUS6m_w59IvDYwjmMcbq3fKW4JSbacqkbxTo8B90dWp0Cese92xfLMPe_tg11g/w1200/&quot;,
    &quot;height&quot;: 348,
    &quot;width&quot;: 1200
    </b:if>
  },
</b:includable>
      <b:includable id='postMetadataJSONPublisher'>
 &quot;publisher&quot;: {
    &quot;@type&quot;: &quot;Organization&quot;,
    &quot;name&quot;: &quot;Blogger&quot;,
    &quot;logo&quot;: {
      &quot;@type&quot;: &quot;ImageObject&quot;,
      &quot;url&quot;: &quot;https://blogger.googleusercontent.com/img/b/U2hvZWJveA/AVvXsEgfMvYAhAbdHksiBA24JKmb2Tav6K0GviwztID3Cq4VpV96HaJfy0viIu8z1SSw_G9n5FQHZWSRao61M3e58ImahqBtr7LiOUS6m_w59IvDYwjmMcbq3fKW4JSbacqkbxTo8B90dWp0Cese92xfLMPe_tg11g/h60/&quot;,
      &quot;width&quot;: 206,
      &quot;height&quot;: 60
    }
  },
</b:includable>
      <b:includable id='postPagination'>
  <div class='blog-pager container' id='blog-pager'>
    <b:include cond='data:newerPageUrl' name='previousPageLink'/>
    <b:include cond='data:olderPageUrl' name='nextPageLink'/>
    <b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink'/>
  </div>
</b:includable>
      <b:includable id='postReactions'>
  <!-- Reaction feature no longer available. The includable is retained for backwards-compatibility. -->
</b:includable>
      <b:includable id='postShareButtons'>
  <div class='byline post-share-buttons goog-inline-block'>
    <b:with value='data:sharingId ?: ((data:widget.instanceId ?: &quot;sharing&quot;) + &quot;-&quot; + (data:regionName ?: &quot;byline&quot;) + &quot;-&quot; + data:post.id)' var='sharingId'>
      <!-- Note: 'sharingButtons' includable is from the default Sharing widget markup. -->
      <b:include data='{                                                sharingId: data:sharingId,                                                originalUrl: data:post.url,                                                platforms: data:this.sharing.platforms,                                                shareUrl: data:post.shareUrl,                                                shareTitle: data:post.title,                                              }' name='sharingButtons'/>
    </b:with>
  </div>
</b:includable>
      <b:includable id='postTimestamp'>
  <span class='byline post-timestamp'>
    <data:byline.label/>
    <b:if cond='data:post.url'>
      <meta expr:content='data:post.url.canonical'/>
      <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
        <time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'>
          <data:post.date/>
        </time>
      </a>
    </b:if>
  </span>
</b:includable>
      <b:includable id='postTitle' var='post'>
  <a expr:name='data:post.id'/>
  <b:if cond='data:post.title != &quot;&quot;'>
    <h3 class='post-title entry-title'>
      <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
        <a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    </h3>
  </b:if>
</b:includable>
      <b:includable id='previousPageLink'>
  <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:messages.newerPosts'>
    <data:messages.newerPosts/>
  </a>
</b:includable>
      <b:includable id='sharingButton'>
  <span expr:aria-label='data:platform.shareMessage' expr:class='&quot;sharing-platform-button sharing-element-&quot; + data:platform.key' expr:data-href='data:shareUrl + &quot;&amp;target=&quot; + data:platform.target' expr:data-url='data:originalUrl' expr:title='data:platform.shareMessage' role='menuitem' tabindex='-1'>
    <b:include name='sharingPlatformIcon'/>
    <span class='platform-sharing-text'><data:platform.name/></span>
  </span>
</b:includable>
      <b:includable id='sharingButtonContent'>
  <div class='flat-icon-button ripple'>
    <b:include name='shareIcon'/>
  </div>
</b:includable>
      <b:includable id='sharingButtons'>
  <div class='sharing' expr:aria-owns='&quot;sharing-popup-&quot; + data:sharingId' expr:data-title='data:shareTitle'>
    <button class='sharing-button touch-icon-button' expr:aria-controls='&quot;sharing-popup-&quot; + data:sharingId' expr:aria-label='data:messages.share.escaped' expr:id='&quot;sharing-button-&quot; + data:sharingId' role='button'>
      <b:include name='sharingButtonContent'/>
    </button>
    <b:include name='sharingButtonsMenu'/>
  </div>
</b:includable>
      <b:includable id='sharingButtonsMenu'>
  <div class='share-buttons-container'>
    <ul aria-hidden='true' class='share-buttons hidden' expr:aria-label='data:messages.share.escaped' expr:id='&quot;sharing-popup-&quot; + data:sharingId' role='menu'>
      <b:loop values='(data:platforms ?: data:blog.sharing.platforms) filter (p =&gt; p.key not in {&quot;blogThis&quot;})' var='platform'>
        <li>
          <b:include name='sharingButton'/>
        </li>
      </b:loop>
      <li aria-hidden='true' class='hidden'>
        <b:include name='otherSharingButton'/>
      </li>
    </ul>
  </div>
</b:includable>
      <b:includable id='sharingPlatformIcon'>
  <b:include data='{ iconClass: (&quot;touch-icon sharing-&quot; + data:platform.key) }' expr:name='data:platform.key + &quot;Icon&quot;'/>
</b:includable>
      <b:includable id='snippetedPostByline'>
  <b:with value='(data:widgets first (w =&gt; w.type == &quot;Blog&quot;)).allBylineItems' var='blogBylines'>
    <div class='item-byline'>
      <b:with value='data:blogBylines first (i =&gt; i.name == &quot;author&quot;)' var='byline'>
        <b:include cond='data:byline and data:this.postDisplay.showAuthor' data='post' name='postAuthor'/>
      </b:with>
      <b:with value='data:blogBylines first (i =&gt; i.name == &quot;timestamp&quot;)' var='byline'>
        <b:include cond='data:byline and data:this.postDisplay.showDate' data='post' name='postTimestamp'/>
      </b:with>
    </div>
  </b:with>
</b:includable>
      <b:includable id='snippetedPostContent'>
  <div class='post-content'>
    <b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
    <b:include cond='data:this.postDisplay.showDate or data:this.postDisplay.showAuthor' name='snippetedPostByline'/>
    <b:include cond='data:this.postDisplay.showSnippet' data='post' name='postSnippet'/>
    <b:include cond='data:this.postDisplay.showFeaturedImage and data:post.featuredImage' name='snippetedPostThumbnail'/>
  </div>
</b:includable>
      <b:includable id='snippetedPostThumbnail'>
  <div class='item-thumbnail'>
    <a expr:href='data:post.url'>
      <b:include data='{                         image: data:post.featuredImage,                         imageSizes: [72, 144],                         imageRatio: &quot;1:1&quot;,                         sourceSizes: &quot;72px&quot;                        }' name='responsiveImage'/>
    </a>
  </div>
</b:includable>
      <b:includable id='snippetedPostTitle'>
  <b:if cond='data:post.title != &quot;&quot;'>
    <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
  </b:if>
</b:includable>
      <b:includable id='snippetedPosts'>
  <div role='feed'>
    <!-- Don't render the post that we're currently already looking at. -->
    <b:loop values='data:posts filter (p =&gt; p.id != data:view.postId)' var='post'>
      <article class='post' role='article'>
        <b:include name='snippetedPostContent'/>
      </article>
    </b:loop>
  </div>
</b:includable>
      <b:includable id='status-message'>
      <b:if cond='data:navMessage'>
        <div class='status-msg-wrap'><data:navMessage/></div>
      </b:if>
    </b:includable>
      <b:includable id='threadedCommentForm' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <h4 id='comment-post-message'><data:messages.postAComment/></h4>
    <b:if cond='data:this.messages.blogComment != &quot;&quot;'>
      <p><data:this.messages.blogComment/></p>
    </b:if>
    <b:include data='post' name='commentFormIframeSrc'/>
    <iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight ?: &quot;90px&quot;' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
    </script>
  </div>
</b:includable>
      <b:includable id='threadedCommentJs' var='post'>
  <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
  <b:template-script inline='true' name='threaded_comments'/>
  <script type='text/javascript'>
    blogger.widgets.blog.initThreadedComments(
        <data:post.commentJso/>,
        <data:post.commentMsgs/>,
        <data:post.commentConfig/>);
  </script>
</b:includable>
      <b:includable id='threadedComments' var='post'>
  <section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>
    <a name='comments'/>

    <b:include name='commentsTitle'/>

    <div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threadedCommentJs'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>

    <p class='comment-footer'>
      <b:if cond='data:post.allowNewComments'>
        <b:include data='post' name='threadedCommentForm'/>
      <b:else/>
        <data:post.noNewCommentsText/>
      </b:if>
      <b:if cond='data:post.showManageComments'>
        <b:include data='post' name='manageComments'/>
      </b:if>
    </p>

    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>
  </section>
</b:includable>
      <b:includable id='tooltipCss'>
  <!-- LINT.IfChange -->
  <style>
    .post-body a.b-tooltip-container {
      position: relative;
      display: inline-block;
    }

    .post-body a.b-tooltip-container .b-tooltip {
      display: block !important;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translate(-20%, 1px);
      visibility: hidden;
      opacity: 0;
      z-index: 1;
      transition: opacity 0.2s ease-in-out;
    }

    .post-body a.b-tooltip-container .b-tooltip iframe {
      width: 200px;
      height: 198px;
      max-width: none;
      border: none;
      border-radius: 20px;
      box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
    }

    @media (hover: hover) {
      .post-body a.b-tooltip-container:hover .b-tooltip {
        visibility: visible;
        opacity: 1;
      }
    }
  </style>
  <!-- LINT.ThenChange(//depot/google3/java/com/google/blogger/b2/layouts/widgets/v2-style.css) -->
</b:includable>
    </b:widget>
  </b:section>

  <b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'>
    <b:widget id='HTML3' locked='false' title='About' type='HTML' version='2' visible='true'>
      <b:widget-settings>
        <b:widget-setting name='content'><![CDATA[<div class="tw-about-card">
  <div class="tw-about-avatar" id="tw-about-avatar">B</div>
  <p class="tw-about-text">Thanks for stopping by! Here you'll find fresh posts alongside a handy free URL shortener with QR codes.</p>
</div>
<script>
(function(){
  var t = document.getElementById("tw-credit-title");
  var el = document.getElementById("tw-about-avatar");
  if (el) {
    var name = (t && t.textContent) ? t.textContent.trim() : "B";
    el.textContent = name ? name.charAt(0).toUpperCase() : "B";
  }
})();
</script>]]></b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
        <b:if cond='data:title != &quot;&quot;'>
          <h2><data:title/></h2>
        </b:if>
        <div class='widget-content'>
          <data:content/>
        </div>
      </b:includable>
    </b:widget>
    <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='2' visible='true'>
      <b:widget-settings>
        <b:widget-setting name='numItemsToShow'>3</b:widget-setting>
        <b:widget-setting name='showThumbnails'>true</b:widget-setting>
        <b:widget-setting name='showSnippets'>true</b:widget-setting>
        <b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
        <b:if cond='data:title != &quot;&quot;'>
          <h2><data:title/></h2>
        </b:if>
        <div class='widget-content'>
          <b:loop values='data:posts' var='post'>
            <div class='popular-post'>
              <a expr:href='data:post.href'><data:post.title/></a>
            </div>
          </b:loop>
        </div>
      </b:includable>
    </b:widget>
    <b:widget id='Label1' locked='false' title='Labels' type='Label' version='2' visible='true'>
      <b:widget-settings>
        <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
        <b:widget-setting name='display'>LIST</b:widget-setting>
        <b:widget-setting name='selectedLabelsList'/>
        <b:widget-setting name='showType'>ALL</b:widget-setting>
        <b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
        <b:if cond='data:title != &quot;&quot;'>
          <h2><data:title/></h2>
        </b:if>
        <div class='widget-content'>
          <b:loop values='data:labels' var='label'>
            <a expr:href='data:label.url'><data:label.name/> (<data:label.count/>)</a><br/>
          </b:loop>
        </div>
      </b:includable>
      <b:includable id='cloud'>
  <b:loop values='data:labels' var='label'>
    <span class='label-size'>
      <b:class expr:name='&quot;label-size-&quot; + data:label.cssSize'/>
      <a class='label-name' expr:href='data:label.url'>
        <data:label.name/>
        <b:if cond='data:this.showFreqNumbers'>
          <span class='label-count'><data:label.count/></span>
        </b:if>
      </a>
    </span>
  </b:loop>
</b:includable>
      <b:includable id='content'>
  <div class='widget-content'>
    <b:class expr:name='data:this.display + &quot;-label-widget-content&quot;'/>
    <b:include cond='data:this.display == &quot;list&quot;' name='list'/>
    <b:include cond='data:this.display == &quot;cloud&quot;' name='cloud'/>
  </div>
</b:includable>
      <b:includable id='list'>
  <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <a class='label-name' expr:href='data:label.url'>
          <data:label.name/>
          <b:if cond='data:this.showFreqNumbers'>
            <span class='label-count'><data:label.count/></span>
          </b:if>
        </a>
      </li>
    </b:loop>
  </ul>
</b:includable>
    </b:widget>
    <b:widget id='HTML4' locked='false' title='Follow Us' type='HTML' version='2' visible='true'>
      <b:widget-settings>
        <b:widget-setting name='content'><![CDATA[<div class="tw-social-row">
  <a class="tw-social-btn" href="#" title="Facebook"><i class="fa-brands fa-facebook-f"></i></a>
  <a class="tw-social-btn" href="#" title="Twitter / X"><i class="fa-brands fa-x-twitter"></i></a>
  <a class="tw-social-btn" href="#" title="Instagram"><i class="fa-brands fa-instagram"></i></a>
  <a class="tw-social-btn" href="#" title="YouTube"><i class="fa-brands fa-youtube"></i></a>
  <a class="tw-social-btn" href="#" title="Telegram"><i class="fa-brands fa-telegram"></i></a>
</div>
<p style="font-size:11.5px;color:var(--tw-text-muted);margin:10px 0 0;">Apne social links yahan Layout &gt; "Follow Us" widget edit karke laga sakte ho.</p>]]></b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
        <b:if cond='data:title != &quot;&quot;'>
          <h2><data:title/></h2>
        </b:if>
        <div class='widget-content'>
          <data:content/>
        </div>
      </b:includable>
    </b:widget>
    <b:widget id='HTML5' locked='false' title='Newsletter' type='HTML' version='2' visible='true'>
      <b:widget-settings>
        <b:widget-setting name='content'><![CDATA[<div class="tw-newsletter-card">
  <p>Get new posts in your inbox. No spam, promise.</p>
  <div class="tw-newsletter-row">
    <input type="email" placeholder="you@email.com" />
    <button type="button" onclick="alert('Newsletter form is a placeholder — connect it to your mailing list provider.')">Join</button>
  </div>
</div>]]></b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
        <b:if cond='data:title != &quot;&quot;'>
          <h2><data:title/></h2>
        </b:if>
        <div class='widget-content'>
          <data:content/>
        </div>
      </b:includable>
    </b:widget>
  </b:section>

</div>

<div class='tw-footer'>
  <b:section class='footer' id='footer'/>
  <div id='tw-credit-line'>
    &#169; <span id='tw-credit-title'><data:blog.title/></span> &#8212; Powered by <a href='https://titly.site' rel='noopener' target='_blank'>TitlyUrls</a>
  </div>
</div>

<script type='text/javascript'>
//<![CDATA[
(function(){
  var t = document.getElementById("tw-credit-title");
  if (t) window.__twBlogTitle = t.textContent;
})();
//]]>
</script>

<!-- ============================================================
     NEW &#8212; post-card thumbnail extraction. Pulls the first image
     (or iframe/video) out of each post's body and places it above
     the title, so cards read: thumbnail -> title -> short preview.
     Purely a visual DOM reorder; doesn't touch post content/data.

     IMPORTANT: this only runs on the homepage / listing view
     (data:view.isMultipleItems) where posts are shown as cards.
     It must NEVER run on a single post page or a static page &#8212;
     doing so would shorten/replace the real article content, which
     is why it was disappearing on post/page views before.
     ============================================================ -->
<b:if cond='data:view.isMultipleItems'>
<script type='text/javascript'>
//<![CDATA[
(function(){
  "use strict";
  function restructure(){
    var posts = document.querySelectorAll(".post.hentry");
    for (var i = 0; i < posts.length; i++) {
      var post = posts[i];
      if (post.getAttribute("data-tw-restructured")) continue;
      var body = post.querySelector(".post-body");
      var title = post.querySelector(".post-title");
      if (!body || !title) { post.setAttribute("data-tw-restructured","1"); continue; }
      var media = body.querySelector("img, iframe, video");
      if (media) {
        var thumb = document.createElement("div");
        thumb.className = "post-thumb";
        thumb.appendChild(media);
        post.insertBefore(thumb, post.firstChild);
      }

      // Build a short, guaranteed-visible plain-text preview from
      // whatever text is left in the body (after the image was
      // pulled out above). If there's no text at all, collapse the
      // body so no empty gap is left on the card.
      var text = (body.textContent || "").replace(/\s+/g, " ").trim();
      if (text) {
        var limit = 120;
        var preview = text.length > limit
          ? text.slice(0, limit).replace(/\s+\S*$/, "") + "\u2026"
          : text;
        body.textContent = preview;
      } else {
        body.textContent = "";
      }

      post.setAttribute("data-tw-restructured","1");
    }
  }
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", restructure);
  } else {
    restructure();
  }
})();
//]]>
</script>
</b:if>

<!-- ============================================================
     NEW &#8212; floating "Back to top" button. Purely additive, doesn't
     read or write anything related to the credit-lock / shortener.
     ============================================================ -->
<button aria-label='Back to top' id='tw-back-to-top' type='button'>&#8593;</button>
<script type='text/javascript'>
//<![CDATA[
(function(){
  var btn = document.getElementById("tw-back-to-top");
  if (!btn) return;
  function toggle(){
    if (window.scrollY > 400) btn.classList.add("tw-show");
    else btn.classList.remove("tw-show");
  }
  window.addEventListener("scroll", toggle, { passive: true });
  btn.addEventListener("click", function(){
    window.scrollTo({ top: 0, behavior: "smooth" });
  });
  toggle();
})();
//]]>
</script>

</body>
</html>