Membuat Responsive Drop Down Menu dan Tombol Pencarian
Setelah menyimpan kode template blogger kosong sebagaimana artikel Membuat Tema Blogspot Kosong, dengan menyertakan 1 widget Blog 1, blog sudah bisa tampil tetapi masalahnya bagaimana pengunjung menjelajah keseluruhan isi blog. Salah satu alternatifnya dengan membuat Responsive Drop Down Menu disertai tombol pencurian.
Penyiapan CSS
Langkah pertama menyiapkan CSS.
Setelah template dengan widget blog1 disimpan, blogger menghasilkan kode seperti ini :
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:defaultwidgetversion='2' b:layoutsVersion='3' expr:dir='data:blog.languageDirection' 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='text/html; charset=UTF-8' http-equiv='Content-Type'/> <meta content='width=device-width, initial-scale=1' name='viewport'/> <b:include data='blog' name='all-head-content'/> <title><data:view.title/></title> <b:skin><![CDATA[]]></b:skin> </head> <body> <b:section id='main'> <b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog' visible='true'> <b:widget-settings> <b:widget-setting name='showDateHeader'>false</b:widget-setting> <b:widget-setting name='style.textcolor'>#000000</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'>#008000</b:widget-setting> <b:widget-setting name='showAuthor'>false</b:widget-setting> <b:widget-setting name='disableGooglePlusShare'>true</b:widget-setting> <b:widget-setting name='style.linkcolor'>#0000ff</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'>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:data-analytics-uacct='data:blog.analyticsAccountNumber' expr:style='data:style ?: "display: block;"'/> <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'> <div class='goog-inline-block google-plus-share-container'> <g:plusone annotation='inline' expr:href='data:originalUrl.canonical.http' size='medium' source='blogger:blog:plusone'/> </div> </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'> <div class='jump-link flat-button'> <a expr:href='data:post.url fragment "more"' 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'> "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://lh3.googleusercontent.com/ULB6iBuCeTVvSjjjU1A-O8e9ZpVba6uvyhtiWRti_rBAs9yMYOFBujxriJRZ-A=w1200", "height": 348, "width": 1200 </b:if> }, </b:includable> <b:includable id='postMetadataJSONPublisher'> "publisher": { "@type": "Organization", "name": "Blogger", "logo": { "@type": "ImageObject", "url": "https://lh3.googleusercontent.com/ULB6iBuCeTVvSjjjU1A-O8e9ZpVba6uvyhtiWRti_rBAs9yMYOFBujxriJRZ-A=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> </body> </html>
Mari kita lihat pada kode :
<b:skin><![CDATA[]]></b:skin>
<b:skin><![CDATA[ body{margin:0;font-family : Arial} .topnav { overflow: hidden; background-color: #333; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .active { background-color: #04AA6D; color: white; } .topnav .icon { display: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .topnav a:hover, .dropdown:hover .dropbtn { background-color: #555; color: white; } .dropdown-content a:hover { background-color: #ddd; color: black; } .dropdown:hover .dropdown-content { display: block; } .topnav input[type=text] { float: right; padding: 6px; margin-top: 8px; margin-right: 16px; border: none; font-size: 17px; } @media screen and (max-width: 696px) { .topnav {position: relative;} .topnav .icon { position: absolute; right: 0; top: 0; } .topnav a, .topnav input[type=text] { float: none; display: block; text-align: left; } .topnav .dropdown {float: none;} .topnav .dropdown-content {position: relative;} .topnav .dropdown .dropbtn { display: block; width: 100%; text-align: left; } .topnav input[type=text] { border: 1px solid #ccc; width: 100%; }}
Simpan template dengan sisipan kode CSS tersebut.
Penyiapan Seksi Layout Untuk Tempat Menu
Sisipkan kode penyisipan section header di bawah body, di atas kode section main :
<body> <b:section id='header'></b:section> <b:section id='main'>
Penyisipan Responsive Menu
Simpan template, dan pindah ke tab Layout.
Tambahkan widget HTML dengan isi :
<div class="topnav" id="myTopnav"> <a href="#home" class="active">Beranda</a> <div class="dropdown"> <button class="dropbtn">Kabar <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="https://ghobro.blogspot.com/search/label/Kabar">All</a> <a href="https://ghobro.blogspot.com/search/label/Kabar%20Alam">Kabar Alam</a> <a href="https://ghobro.blogspot.com/search/label/Kabar%20Blogspot">Kabar Blogspot</a> <a href="https://ghobro.blogspot.com/search/label/Kabar%20Kesehatan">Kabar Kesehatan</a> <a href="https://ghobro.blogspot.com/search/label/Kabar%20Sosial">Kabar Sosial</a> <a href="https://ghobro.blogspot.com/search/label/Kabar%20Tekno">Kabar Tekno</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Negeri <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="https://ghobro.blogspot.com/search/label/Negeri">All</a> <a href="https://ghobro.blogspot.com/search/label/Negeri%20Dunia">Negeri Dunia</a> <a href="https://ghobro.blogspot.com/search/label/Negeri%20Kepulauan">Negeri Kepulauan</a> <a href="https://ghobro.blogspot.com/search/label/Negeri%20Melayu">Negeri Melayu</a> <a href="https://ghobro.blogspot.com/search/label/Negeri%20Sumatera">Negeri Sumatera</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Opini <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="https://ghobro.blogspot.com/search/label/Opini">All</a> <a href="https://ghobro.blogspot.com/search/label/Opini%20Pakar">Opini Pakar</a> <a href="https://ghobro.blogspot.com/search/label/Opini%20Pribadi">Opini Pribadi</a> <a href="https://ghobro.blogspot.com/search/label/Opini%20Tokoh">Opini Tokoh</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Sejarah <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="https://ghobro.blogspot.com/search/label/Sejarah">All</a> <a href="https://ghobro.blogspot.com/search/label/Sejarah%20Dunia">Sejarah Dunia</a> <a href="https://ghobro.blogspot.com/search/label/Sejarah%20Maluku">Sejarah Maluku</a> <a href="https://ghobro.blogspot.com/search/label/Sejarah%20Melayu">Sejarah Melayu</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Tokoh <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="https://ghobro.blogspot.com/search/label/Tokoh">All</a> <a href="https://ghobro.blogspot.com/search/label/Tokoh%20Asahan">Tokoh Asahan</a> <a href="https://ghobro.blogspot.com/search/label/Tokoh%20Banjar">Tokoh Banjar</a> <a href="https://ghobro.blogspot.com/search/label/Tokoh%20Betawi">Tokoh Betawi</a> <a href="https://ghobro.blogspot.com/search/label/Tokoh%20Karo">Tokoh Karo</a> <a href="https://ghobro.blogspot.com/search/label/Tokoh%20Melayu">Tokoh Melayu</a> <a href="https://ghobro.blogspot.com/search/label/Tokoh%20Simalungun">Tokoh Simalungun</a> </div> </div> <form action="https://ghobro.blogspot.com/search"> <input type="text" placeholder="Cari.." name="q" /></form></div>
Comments