<style>/*<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2533480249076558733&zx=20f64aa7-4132-44b2-9dbc-86a035403be7' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2533480249076558733&zx=20f64aa7-4132-44b2-9dbc-86a035403be7' rel='stylesheet'/></noscript>
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

</head><body>*/</style>

Cara Membuat Spoiler Pada Posting Blog

Kepo Info

16 Jul, 2015

how-to-make-spoiler-on-blog-or-website

Cara Membuat Spoiler Pada Posting Blog - Spoiler pada posting blog tentu sangat berguna. Kenapa? karena posting pada blog tentu menjadi lebih rapi dan bisa mengatur konten bagian apa yang akan ditaruh pada spoiler. Yang pasti jangan sampe keliru spoiler film loh ya :D

Terus.. Bagaimana cara membuat spoiler menggunakan HTML pada blog?

1. Ketika membuat posting pada mode "compose" ganti menjadi mode "html"

mode-menulis-pada-blog

2. Lalu masukkan kode berikut :\

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Contoh Spoiler</b>: <input value="View" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hidden'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'View'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Kunjungi terus kepo-info.blogspot.com ya!
<br />
</div>
</div>
</div>

Berikut hasilnya :

Contoh Spoiler:

Nah untuk Contoh Spoiler untuk mengganti judul spoilernya. Seperti; "berikut gambarnya" dan yang lainnya dan untuk Kunjungi terus kepo-info.blogspot.com ya! diganti dengan isi spoiler yang akan ditulis.

Baca Juga : Cara membuat kotak HTML untuk meletakkan script di blog

<style>/*
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/1807328581-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY7zzQmVcvDo7eplgnGSh4lK4UkvvQ:1714141197340';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2533480249076558733','//kepo-info.blogspot.com/2015/07/cara-membuat-spoiler-pada-posting-blog.html','2533480249076558733');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '2533480249076558733', 'title': 'Kepo Info', 'url': 'https://kepo-info.blogspot.com/2015/07/cara-membuat-spoiler-pada-posting-blog.html', 'canonicalUrl': 'https://kepo-info.blogspot.com/2015/07/cara-membuat-spoiler-pada-posting-blog.html', 'homepageUrl': 'https://kepo-info.blogspot.com/', 'searchUrl': 'https://kepo-info.blogspot.com/search', 'canonicalHomepageUrl': 'https://kepo-info.blogspot.com/', 'blogspotFaviconUrl': 'https://kepo-info.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en-GB', 'localeUnderscoreDelimited': 'en_gb', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Kepo Info - Atom\x22 href\x3d\x22https://kepo-info.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Kepo Info - RSS\x22 href\x3d\x22https://kepo-info.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Kepo Info - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/2533480249076558733/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Kepo Info - Atom\x22 href\x3d\x22https://kepo-info.blogspot.com/feeds/2548452652639261600/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/16e657cb9c57b8a2', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': 'Share to Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en_GB\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '2548452652639261600', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiD1L0zSB9AcfLrVhmidgMM0hkPWqI9S9k0bNFxqgC1XSWHFfsULVa_Oyq7HaKaaOOw4wMdmHh-QjjAMp7mZrOa7zdXCuLOcJWpo5_hvn5nx6CHcuWxvRnvXSF4ZfPMNFhKA0fRqdFHasH/s72-c/spoiler.jpg', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiD1L0zSB9AcfLrVhmidgMM0hkPWqI9S9k0bNFxqgC1XSWHFfsULVa_Oyq7HaKaaOOw4wMdmHh-QjjAMp7mZrOa7zdXCuLOcJWpo5_hvn5nx6CHcuWxvRnvXSF4ZfPMNFhKA0fRqdFHasH/s320/spoiler.jpg', 'pageName': 'Cara Membuat Spoiler Pada Posting Blog', 'pageTitle': 'Kepo Info: Cara Membuat Spoiler Pada Posting Blog', 'metaDescription': ''}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard', 'ok': 'Ok', 'postLink': 'Post link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Cara Membuat Spoiler Pada Posting Blog', 'description': 'blog tentang tutorial memperbaiki komputer, laptop, android', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiD1L0zSB9AcfLrVhmidgMM0hkPWqI9S9k0bNFxqgC1XSWHFfsULVa_Oyq7HaKaaOOw4wMdmHh-QjjAMp7mZrOa7zdXCuLOcJWpo5_hvn5nx6CHcuWxvRnvXSF4ZfPMNFhKA0fRqdFHasH/s320/spoiler.jpg', 'url': 'https://kepo-info.blogspot.com/2015/07/cara-membuat-spoiler-pada-posting-blog.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 2548452652639261600}}, {'name': 'widgets', 'data': [{'title': 'Upload Image', 'type': 'Image', 'sectionId': 'upload-image', 'id': 'Image50'}, {'title': 'Logo', 'type': 'HTML', 'sectionId': 'header-main', 'id': 'HTML50'}, {'title': 'Icons, Dark, Search', 'type': 'LinkList', 'sectionId': 'header-main', 'id': 'LinkList52'}, {'title': 'Menu', 'type': 'LinkList', 'sectionId': 'header-main', 'id': 'LinkList53'}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'before-blog', 'id': 'HTML51'}, {'title': 'Featured Post', 'type': 'FeaturedPost', 'sectionId': 'before-blog', 'id': 'FeaturedPost50', 'postId': '8002335441319705884'}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'before-post', 'id': 'HTML52'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'blog-post', 'id': 'Blog50', 'posts': [{'id': '2548452652639261600', 'title': 'Cara Membuat Spoiler Pada Posting Blog', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiD1L0zSB9AcfLrVhmidgMM0hkPWqI9S9k0bNFxqgC1XSWHFfsULVa_Oyq7HaKaaOOw4wMdmHh-QjjAMp7mZrOa7zdXCuLOcJWpo5_hvn5nx6CHcuWxvRnvXSF4ZfPMNFhKA0fRqdFHasH/s320/spoiler.jpg', 'showInlineAds': false}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': 'Posted by'}, {'name': 'timestamp', 'label': '-'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'icons', 'label': ''}, {'name': 'share', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'Labels:'}]}], 'allBylineItems': [{'name': 'author', 'label': 'Posted by'}, {'name': 'timestamp', 'label': '-'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'icons', 'label': ''}, {'name': 'share', 'label': ''}, {'name': 'labels', 'label': 'Labels:'}]}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'ads-post', 'id': 'HTML61'}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'ads-post', 'id': 'HTML62'}, {'title': '#You may also like', 'type': 'HTML', 'sectionId': 'ads-post', 'id': 'HTML63'}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'ads-post', 'id': 'HTML64'}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'ads-post', 'id': 'HTML65'}, {'title': 'Popular Posts', 'type': 'PopularPosts', 'sectionId': 'sidebar-static', 'id': 'PopularPosts50', 'posts': [{'title': 'Download One Piece Batch Episode 1-850', 'id': 5219081506257741871}, {'title': 'Download One Piece Batch Episode 1-1000', 'id': 2330453730457694010}, {'title': 'One Piece Batch Episode 851-900 Subtitle Indonesia Full HD', 'id': 9071354678567019524}, {'title': 'One Piece Batch Episode 301-350', 'id': 1505002860207711086}, {'title': 'One Piece Batch Episode 51-100', 'id': 2781471533900046610}]}, {'title': 'Categories', 'type': 'Label', 'sectionId': 'sidebar-static', 'id': 'Label50'}, {'title': 'Hashtag', 'type': 'Label', 'sectionId': 'sidebar-static', 'id': 'Label51'}, {'title': '#Recent Post', 'type': 'HTML', 'sectionId': 'sidebar-static', 'id': 'HTML66'}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'sidebar-sticky', 'id': 'HTML54'}, {'title': 'About Us', 'type': 'HTML', 'sectionId': 'footer-widget', 'id': 'HTML55'}, {'title': 'Learn More', 'type': 'LinkList', 'sectionId': 'footer-widget', 'id': 'LinkList50'}, {'title': 'Follow Us', 'type': 'LinkList', 'sectionId': 'footer-widget', 'id': 'LinkList51'}, {'title': 'Newsletter', 'type': 'HTML', 'sectionId': 'footer-widget', 'id': 'HTML58'}, {'title': 'Copyright', 'type': 'HTML', 'sectionId': 'copyright', 'id': 'HTML56'}, {'title': 'SVG Icons', 'type': 'HTML', 'sectionId': 'jet-options', 'id': 'HTML57'}]}]);
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image50', 'upload-image', document.getElementById('Image50'), {'resize': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML50', 'header-main', document.getElementById('HTML50'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList52', 'header-main', document.getElementById('LinkList52'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList53', 'header-main', document.getElementById('LinkList53'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML51', 'before-blog', document.getElementById('HTML51'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FeaturedPostView', new _WidgetInfo('FeaturedPost50', 'before-blog', document.getElementById('FeaturedPost50'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML52', 'before-post', document.getElementById('HTML52'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog50', 'blog-post', document.getElementById('Blog50'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/3627635519-lbx__en_gb.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/13464135-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML61', 'ads-post', document.getElementById('HTML61'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML62', 'ads-post', document.getElementById('HTML62'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML63', 'ads-post', document.getElementById('HTML63'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML64', 'ads-post', document.getElementById('HTML64'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML65', 'ads-post', document.getElementById('HTML65'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts50', 'sidebar-static', document.getElementById('PopularPosts50'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label50', 'sidebar-static', document.getElementById('Label50'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label51', 'sidebar-static', document.getElementById('Label51'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML66', 'sidebar-static', document.getElementById('HTML66'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML54', 'sidebar-sticky', document.getElementById('HTML54'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML55', 'footer-widget', document.getElementById('HTML55'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList50', 'footer-widget', document.getElementById('LinkList50'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList51', 'footer-widget', document.getElementById('LinkList51'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML58', 'footer-widget', document.getElementById('HTML58'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML56', 'copyright', document.getElementById('HTML56'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML57', 'jet-options', document.getElementById('HTML57'), {}, 'displayModeFull'));
</script>
</body>*/</style>