Theme Labs Purwa
Ini adalah theme versi 01 yang dipakai untuk labs elang purwa dot com. Theme bersih kosongan.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:js='false' b:layoutsVersion='3' 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'>
<b:attr name='xmlns' value='http://www.w3.org/1999/xhtml'/>
<b:attr name='xmlns:b' value='http://www.google.com/2005/gml/b'/>
<b:attr name='xmlns:expr' value='http://www.google.com/2005/gml/expr'/>
<b:attr name='xmlns:data' value='http://www.google.com/2005/gml/data'/>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, shrink-to-fit=no' name='viewport'/>
<!-- Bootstrap CSS -->
<link crossorigin='anonymous' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' rel='stylesheet'/>
<!-- Font Awesome CSS -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-tomorrow.min.css' rel='stylesheet'/>
<b:if cond='data:blog.pageType == "index"'>
<title> <data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<title> <data:blog.pageName/> | <data:blog.title/> </title>
<meta expr:content='data:blog.url.canonical' property='og:url'/>
<meta expr:content='data:view.title.escaped' property='og:title'/>
<meta expr:content='data:view.description.escaped' property='og:description'/>
<b:else/>
<title>
404 ~ Page Not Found!
</title>
</b:if>
</b:if>
<b:skin><![CDATA[
-----------------------------------------------
Blogger Template Style
Name: Pojok EP
Licence: Free Version
Version: 1.0
Author: ELang Purwa
Author Url: https://www.elangpurwa.com/
----------------------------------------------- */
/*
<!-- Variable definitions -->
<Variable name="keycolor" description="Main Color" type="color" default="#5f27cd" value="#5f27cd"/>
<Group description="Adjust Widths" selector="body">
<Variable name="row.x1.width" description="Main Container Width" type="length" default="980px" min="728px" max="1060px" value="980px"/>
<Variable name="row.x2.width" description="Posts Container Width" type="length" default="728px" min="728px" max="980px" value="728px"/>
<Variable name="row.x3.width" description="Intro Container Width" type="length" default="728px" min="680px" max="728px" value="728px"/>
</Group>
<Group description="Main Theme Colors" selector="body">
<Variable name="main.color" description="Theme Color" type="color" default="#5f27cd" value="#5e26cd"/>
<Variable name="dark.color" description="Dark Color" type="color" default="#161619" value="#161619"/>
<Variable name="title.color" description="Title Color" type="color" default="#161619" value="#161619"/>
<Variable name="footer.bg" description="Footer Background" type="color" default="$(dark.color)" value="#161619"/>
<Variable name="footer.color" description="Footer Color" type="color" default="#f2f2f2" value="#f2f2f2"/>
</Group>
<Group description="Theme Body" selector="body">
<Variable name="body.background.color" description="Body background color" type="color" default="#f8f8f8" value="#f8f8f8"/>
<Variable name="body.background" description="Background" type="background" color="#f8f8f8" default="$(color) url() repeat scroll top left" value="$(color) url() repeat scroll top left"/>
<Variable name="body.text.color" description="Body Text Color" type="color" default="#5E5E5E" value="#5e5e5e"/>
<Variable name="body.link.color" description="Body Link Color" type="color" default="$(main.color)" value="#5e26cd"/>
</Group>
<Group description="Author Intro" selector=".header-intro">
<Variable name="intro.bg" description="Background" type="color" default="#161619" value="#161619"/>
<Variable name="intro.color" description="Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="icon.bg" description="Icon Background" type="color" default="#161619" value="#161619"/>
<Variable name="icon.bg.hover" description="Icon Background on Hover" type="color" default="$(main.color)" value="#5e26cd"/>
<Variable name="icon.color" description="Icon Color" type="color" default="#ffffff" value="#ffffff"/>
<!-- Extra Variables -->
<Variable name="body.text.font" description="Font" hideEditor="true" type="font" default="14px Roboto, sans-serif" value="14px Roboto, sans-serif"/>
<Variable name="posts.background.color" description="Post background color" hideEditor="true" type="color" default="#fff" value="#ffffff"/>
<Variable name="tabs.font" description="Font 2" hideEditor="true" type="font" default="14px Roboto, sans-serif" value="14px Roboto, sans-serif"/>
<Variable name="posts.title.color" description="Post title color" hideEditor="true" type="color" default="$(title.color)" value="#161619"/>
<Variable name="posts.text.color" description="Post text color" hideEditor="true" type="color" default="$(body.text.color)" value="#5E5E5E"/>
<Variable name="posts.icons.color" description="Post icons color" hideEditor="true" type="color" default="$(main.color)" value="#5e26cd"/>
<Variable name="labels.background.color" description="Label background color" hideEditor="true" type="color" default="$(main.color)" value="#5e26cd"/>
</Group>
*/
@media screen and (max-width:1024px){
body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}
@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
}
body{font-family:Arial,sans-serif}@font-face{font-family:'UthmanicHafs';src:url(https://konokae.github.io/qari/font/UthmanicHafs1Ver09.otf) format("opentype")}.arabic-text{font-family:'UthmanicHafs',serif;font-size:22px;direction:rtl;text-align:right}.amiri-regular{font-family:"Amiri",serif;font-size:20px;font-weight:400;font-style:normal}.amiri-bold{font-family:"Amiri",serif;font-weight:700;font-style:normal}.amiri-regular-italic{font-family:"Amiri",serif;font-weight:400;font-style:italic}.amiri-bold-italic{font-family:"Amiri",serif;font-weight:700;font-style:italic}.custom-audio{width:100%;border:none;outline:none;-webkit-appearance:none;appearance:none;background:none;padding:5px 0}.custom-audio-container{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;background-color:#f8d7da;border:1px solid #f5c6cb;border-radius:5px;width:100%}.custom-audio-container .play-pause-btn,.custom-audio-container .prev-btn,.custom-audio-container .next-btn,.custom-audio-container .shuffle-btn,.custom-audio-container .loop-btn,.custom-audio-container .close-btn{font-size:24px;cursor:pointer;margin:0 10px}.custom-audio-container .progress-container{flex-grow:1;margin:0 10px;height:5px;background:#f5c6cb;border-radius:5px;position:relative}.custom-audio-container .progress{height:100%;background:#dc3545;width:0;border-radius:5px}.custom-audio-container .progress-container input[type="range"]{width:100%;position:absolute;top:-7px;background:transparent;-webkit-appearance:none;appearance:none}.custom-audio-container .progress-container input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:15px;width:15px;border-radius:50%;background:#dc3545;cursor:pointer}.custom-audio-container .progress-container input[type="range"]::-moz-range-thumb{height:15px;width:15px;border-radius:50%;background:#dc3545;cursor:pointer}.custom-audio-container .time{font-size:14px;margin:0 10px}.custom-audio-container input[type="range"]{width:100px;margin:0 10px}.audio-popup{position:fixed;bottom:0;left:0;right:0;display:none;z-index:1000;width:100%}.close-btn{position:absolute;top:10px;right:10px;font-size:20px;cursor:pointer}.audio-info{font-size:16px;margin:0 10px}.nav-pills-wrapper{display:flex;align-items:center;overflow-x:auto;white-space:nowrap;padding:5px;background-color:#f8d7da;border:1px solid #f5c6cb;border-radius:5px}.nav-pills{display:flex;flex-wrap:nowrap;overflow-x:auto}.nav-pills .nav-item{flex:0 0 auto}.nav-pills .nav-link{cursor:pointer;display:inline-block;white-space:nowrap}.nav-pills .nav-link.active{background-color:#dc3545}
.thumbnail {
width: 50px;
height: auto;
margin-right: 10px;
}
.list-group-item {
display: flex;
align-items: center;
}
.play-icon {
margin-left: auto;
font-size: 24px;
cursor: pointer;
}
.youtube-audio-player {
display: none;
position: fixed;
bottom: 0;
left: 5%;
width: 90%;
background: #f8f9fa;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
z-index: 1000;
padding: 5px;
text-align: center;
}
.audio-controls {
display: flex;
justify-content: center;
align-items: center;
}
.audio-controls button {
border-radius: 50%;
margin: 0 5px;
}
.slider {
margin: 0 15px;
width: 450px;
}
.song-title {
margin-left: 10px;
}
@media (max-width: 768px) {
.current-time, .total-duration, .song-title {
display: none;
}
.slider {
width: 150px;
}
}
.volume-control {
display: none;
}
.audio-controls .btn-shuffle.active,
.audio-controls .btn-loop.active {
background-color: #007bff;
color: white;
}
.my-category {
font-weight: bold;
margin-top: 20px;
}
.my-link-list {
margin-left: 20px;
}
.my-link-item {
margin: 5px 0;
}
.my-container {
display: flex;
flex-wrap: wrap;
}
.my-column {
flex: 1;
min-width: 30%;
box-sizing: border-box;
padding: 10px;
}
.about-image {
float: left;
margin-right: 20px;
border-radius: 20px;
overflow: hidden;
}
.custom-warning {
border-radius: 25px;
background-color: transparent;
border: 2px solid #ffc107;
color: #ffc107;
}
.custom-warning:hover {
background-color: #ffc107;
color: #fff;
}
.custom-primary {
border-radius: 25px;
}
.custom-primary:hover {
background-color: orange;
border-color: orange;
}
.my-4,
.feed-links,
.entry-title {
display: none;
}
textarea {
width: 100%;
height: 200px;
margin-bottom: 20px;
padding: 10px;
font-family: monospace;
font-size: 14px;
}
pre {
max-height: 200px;
overflow: auto;
}
.copy-button {
position: absolute;
top: 10px;
right: 95px;
padding: 5px 10px;
font-size: 14px;
cursor: pointer;
display: none;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
}
pre:hover .copy-button {
display: block;
}
]]></b:skin>
</head>
<body>
<div class='container'>
<header class='my-4'>
<h1 class='text-center'><data:blog.title/></h1>
<p class='text-center'><data:blog.description/></p>
</header>
<main>
<b:section class='blog-posts' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Postingan Blog' type='Blog' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='showDateHeader'>false</b:widget-setting>
<b:widget-setting name='commentLabel'>comments</b:widget-setting>
<b:widget-setting name='style.textcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showShareButtons'>false</b:widget-setting>
<b:widget-setting name='showCommentLink'>false</b:widget-setting>
<b:widget-setting name='style.urlcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='postLocationLabel'>Location:</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>
<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'>false</b:widget-setting>
<b:widget-setting name='showLocation'>false</b:widget-setting>
<b:widget-setting name='postLabelsLabel'>Labels:</b:widget-setting>
<b:widget-setting name='showTimestamp'>false</b:widget-setting>
<b:widget-setting name='postsPerAd'>1</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'>false</b:widget-setting>
<b:widget-setting name='showReactions'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<div class='blog-posts hfeed container'>
<b:loop index='i' values='data:posts' var='post'>
<b:include data='post' name='postCommentsAndAd'/>
</b:loop>
</div>
<b:include cond='data:view.isMultipleItems' name='postPagination'/>
<b:include name='feedLinks'/>
</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='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' 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='"item-control " + 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 != ""'>
<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 ?: "90px"' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</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='"c" + 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='"comment-body" + (data:comment.isDeleted ? " deleted" : "")'>
<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='"comments" + (data:post.embedCommentForm ? " embed" : "")' 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 + "_comments-block-wrapper"'>
<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 > 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 ?: "display: block;"'>
<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: "touch-icon sharing-icon" }' name='emailIcon'/>
</a>
</span>
</span>
</b:includable>
<b:includable id='facebookShare'>
<b:with value='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' 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='"post-footer-line post-footer-line-" + (data:i + 1)'>
<b:with value='"footer-" + (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='"header-1"' 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 != ""'>
<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='"window.prompt(\"Copy to clipboard: Ctrl+C, Enter\", \"" + data:originalUrl + "\"); return false;"' 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 + "_blog-pager-older-link"' expr:title='data:messages.olderPosts'>
<data:messages.olderPosts/>
</a>
</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: "sharingOther"}' 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='"goog-inline-block sharing-" + data:platform.key' expr:data-url='data:originalUrl' expr:href='data:shareUrl + "&target=" + data:platform.target' expr:onclick='data:onclick ? data:onclick : ""' 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'>
<div class='post'>
<b:include data='post' name='postMeta'/>
<b:include data='post' name='postTitle'/>
<b:include name='headerByline'/>
<b:if cond='data:view.isSingleItem'>
<b:include data='post' name='postBody'/>
<b:else/>
<b:include data='post' name='postBodySnippet'/>
<b:include data='post' name='postJumpLink'/>
</b:if>
<b:include data='post' name='postFooter'/>
</div>
</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='"post-body-" + 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'>
</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'>
"image": {
"@type": "ImageObject",
<b:if cond='data:post.featuredImage.isResizable'>
"url": "<b:eval expr='resizeImage(data:post.featuredImage, 1200, "1200:630")'/>",
"height": 630,
"width": 1200
<b:else/>
"url": "https://blogger.googleusercontent.com/img/b/U2hvZWJveA/AVvXsEgfMvYAhAbdHksiBA24JKmb2Tav6K0GviwztID3Cq4VpV96HaJfy0viIu8z1SSw_G9n5FQHZWSRao61M3e58ImahqBtr7LiOUS6m_w59IvDYwjmMcbq3fKW4JSbacqkbxTo8B90dWp0Cese92xfLMPe_tg11g/w1200/",
"height": 348,
"width": 1200
</b:if>
},
</b:includable>
<b:includable id='postMetadataJSONPublisher'>
"publisher": {
"@type": "Organization",
"name": "Blogger",
"logo": {
"@type": "ImageObject",
"url": "https://blogger.googleusercontent.com/img/b/U2hvZWJveA/AVvXsEgfMvYAhAbdHksiBA24JKmb2Tav6K0GviwztID3Cq4VpV96HaJfy0viIu8z1SSw_G9n5FQHZWSRao61M3e58ImahqBtr7LiOUS6m_w59IvDYwjmMcbq3fKW4JSbacqkbxTo8B90dWp0Cese92xfLMPe_tg11g/h60/",
"width": 206,
"height": 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 ?: "sharing") + "-" + (data:regionName ?: "byline") + "-" + 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 != ""'>
<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 + "_blog-pager-newer-link"' expr:title='data:messages.newerPosts'>
<data:messages.newerPosts/>
</a>
</b:includable>
<b:includable id='sharingButton'>
<span expr:aria-label='data:platform.shareMessage' expr:class='"sharing-platform-button sharing-element-" + data:platform.key' expr:data-href='data:shareUrl + "&target=" + 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='"sharing-popup-" + data:sharingId' expr:data-title='data:shareTitle'>
<button class='sharing-button touch-icon-button' expr:aria-controls='"sharing-popup-" + data:sharingId' expr:aria-label='data:messages.share.escaped' expr:id='"sharing-button-" + 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='"sharing-popup-" + data:sharingId' role='menu'>
<b:loop values='(data:platforms ?: data:blog.sharing.platforms) filter (p => p.key not in {"blogThis"})' 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: ("touch-icon sharing-" + data:platform.key) }' expr:name='data:platform.key + "Icon"'/>
</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 != ""'>
<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 ?: "90px"' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</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:widget>
</b:section>
</main>
<footer class='text-center my-4'>
<p>© <data:blog.title/> - <data:date.year/></p>
</footer>
</div>
<script>
<![CDATA[
const audio = document.getElementById('audio');
const playPauseBtn = document.querySelector('.play-pause-btn');
const audioPopup = document.querySelector('.audio-popup');
const audioSource = document.getElementById('audio-source');
const progress = document.querySelector('.progress');
const currentTimeDisplay = document.querySelector('.current-time');
const durationTimeDisplay = document.querySelector('.duration-time');
const seekBar = document.getElementById('seek-bar');
const volumeBar = document.getElementById('volume-bar');
const shuffleBtn = document.querySelector('.shuffle-btn');
const loopBtn = document.querySelector('.loop-btn');
const audioTitle = document.getElementById('audio-title');
let currentAudioIndex = 0;
let isShuffle = false;
let isLoop = false;
let audioUrl = '';
function showPlayer(url, title) {
audioUrl = url;
loadAudio(audioUrl);
audioTitle.textContent = title;
audioPopup.style.display = 'flex';
}
function loadAudio(url) {
audioSource.src = url;
audio.load();
audio.play();
playPauseBtn.classList.remove('fa-play');
playPauseBtn.classList.add('fa-pause');
}
function togglePlayPause(button) {
if (audio.paused) {
audio.play();
button.classList.remove('fa-play');
button.classList.add('fa-pause');
} else {
audio.pause();
button.classList.remove('fa-pause');
button.classList.add('fa-play');
}
}
function updateProgress() {
const progressPercent = (audio.currentTime / audio.duration) * 100;
progress.style.width = `${progressPercent}%`;
seekBar.value = progressPercent;
currentTimeDisplay.textContent = formatTime(audio.currentTime);
durationTimeDisplay.textContent = formatTime(audio.duration);
}
function seekAudio() {
const seekTime = (seekBar.value / 100) * audio.duration;
audio.currentTime = seekTime;
}
function adjustVolume() {
audio.volume = volumeBar.value;
}
function formatTime(time) {
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
}
function closePlayer() {
audioPopup.style.display = 'none';
audio.pause();
playPauseBtn.classList.remove('fa-pause');
playPauseBtn.classList.add('fa-play');
}
function prevAudio() {
// Implement previous audio functionality if needed
}
function nextAudio() {
// Implement next audio functionality if needed
}
function toggleShuffle() {
isShuffle = !isShuffle;
shuffleBtn.classList.toggle('active', isShuffle);
}
function toggleLoop() {
isLoop = !isLoop;
loopBtn.classList.toggle('active', isLoop);
audio.loop = isLoop;
}
audio.addEventListener('timeupdate', updateProgress);
seekBar.addEventListener('input', seekAudio);
volumeBar.addEventListener('input', adjustVolume);
audio.addEventListener('ended', () => {
if (!isLoop) nextAudio();
});
]]>
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var shortcodeHtml = `
<div class='container px-4 py-5'>
<h2 class='pb-2 border-bottom text-center'>Info Pusat</h2>
<div class='row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5'>
<div class='col'>
<div class='row row-cols-1 row-cols-sm-2 g-4'>
<div class='col d-flex flex-column gap-2'>
<h4 class='fw-semibold mb-0 text-body-emphasis fas fa-file'> Jasa Web</h4>
<p class='text-body-secondary'>Paragraph of text beneath the heading to explain the heading.</p>
</div>
<div class='col d-flex flex-column gap-2'>
<h4 class='fw-semibold mb-0 text-body-emphasis fas fa-file-alt'> Panduan Web</h4>
<p class='text-body-secondary'>Paragraph of text beneath the heading to explain the heading.</p>
</div>
<div class='col d-flex flex-column gap-2'>
<h4 class='fw-semibold mb-0 text-body-emphasis far fa-file-alt'> Jasa SEO</h4>
<p class='text-body-secondary'>Paragraph of text beneath the heading to explain the heading.</p>
</div>
<div class='col d-flex flex-column gap-2'>
<h4 class='fw-semibold mb-0 text-body-emphasis fa fa-bars'> Elementor Widget</h4>
<p class='text-body-secondary'>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
</div>
<div class='col d-flex flex-column align-items-center gap-2'>
<h2 class='fw-bold text-body-emphasis'>Laman Project EP</h2>
<p class='text-body-secondary'>Yang Anda lihat adalah project EP, bagian dari elangpurwa.com</p>
<div class='d-flex gap-2'>
<a class='btn btn-primary btn-lg custom-primary fas fa-angle-double-left' href='https://labs.elangpurwa.com/'> Project Lain</a>
<a class='btn btn-warning btn-lg custom-warning' href='#' id='contact'>Hubungi Kami</a>
</div>
</div>
</div>
</div>
`;
document.getElementById('shortcode-container').innerHTML = shortcodeHtml;
});
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-markup.min.js'/>
<script src='https://raw.githubusercontent.com/konokae/sl/main/js/ads.js'/>
<script src='https://code.jquery.com/jquery-3.5.1.slim.min.js'/>
<script src='https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js'/>
<script crossorigin='anonymous' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js'/>
<script>
document.querySelectorAll('.copy-button').forEach(button => {
button.addEventListener('click', () => {
const pre = button.parentElement;
const code = pre.querySelector('code').textContent;
navigator.clipboard.writeText(code).then(() => {
alert('Code copied successfully!');
}).catch(err => {
console.error('Failed to copy code: ', err);
});
});
});
</script>
</body>
</html>
Audio Title
