Membuat Show More Categories di Blog - Ringgo News

/* No Script */ body,html{overflow:hidden} .noscript{background:#f24a4a;color:#fff;padding:8% 0 0 0;position:fixed;bottom:0;left:0;top:0;right:0;z-index:1000;height:auto;-webkit-transform:translateZ(0);transform:translateZ(0);overflow:hidden} .noscript p{margin:0;text-align:center;padding:0 20px 10px 20px;margin:auto;font-size:3rem;line-height:1.5;font-family:monospace;max-width:1010px;text-transform:uppercase;font-weight:500} .noscript p span{color:#ffe88b;font-size:10rem;line-height:normal;font-weight:normal}

-->

Home › Blogging

Membuat Show More Categories di Blog

JejakSeru.com - Kali ini saya akan membahas cara membuat show more categories di blog. Tutorial kali ini tidak menggunakan JavaScript sehigga blog tidak akan menjadi berat. Kamu hanya perlu menambahkan CSS saja untuk menggunakan show more categories ini, Namun kamu jugs harus mengoptimalkan sendiri kode-kode tersebut pada template blog kamu agar pas dan rapih.

Langkah 1 : Buka Blogger > Tata Letak > Tambahkan Widget > HTML/JavaScript > Masukan kode HTML di bwah ini lalu simpan.


<a class='show-more' id='showmore' onclick='document.getElementById(&#39;Label1&#39;).style.height=&#39;auto&#39;;document.getElementById(&#39;showmore&#39;).style.display=&#39;none&#39;;document.getElementById(&#39;hidemore&#39;).style.display=&#39;block&#39;;' href='javascript:;'>Show More Categories</a>
<a class='show-more' id='hidemore' onclick='document.getElementById(&#39;Label1&#39;).style.height=&#39;130px&#39;;document.getElementById(&#39;hidemore&#39;).style.display=&#39;none&#39;;document.getElementById(&#39;showmore&#39;).style.display=&#39;block&#39;;' href='javascript:;'>Hide More Categories</a>

Angka 130px adalah ukuran kategori yang akan menyesuaikan jumlah kategori yang akan ditampilkan. Jika kamu merubah 130px maka kamu juga harus merubah 130px pada CSS.

Langkah 2 : Buka Blogger > Edit HTML > Letakan kode CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style>


/* CSS Show More Categories */
#Label1{height:130px;transition:all 1s ease-in-out;overflow:hidden}
a.show-more{width:180px;overflow:hidden;color:#fff;background:#36BD80;text-transform:uppercase;font-weight:bold;border:4px solid #ddd;padding:10px 30px;text-align:center;margin:15px;border-radius:10px;font-size:12px;transition:all .5s ease-in-out}
a.show-more:hover{border:4px solid #22AF6F;background:#fff;color:#22AF6F}
#showmore{display:block}#hidemore{display:none}

#Label1 adalah Tag CSS pada kategori, mungkin tag CSS kategori pada blog kamu berbeda jadi samakan dengan gambar di bawah.

Langkah 3 : Simpan dan lihat hasilnya.

Jika dirasa bermanfaat silahkan share/bagikan ke temen-temen terdekat kamu dan jangan lupa like fanspage facebook kami dan follow twitter kami agar selalu dapat informasi bermanfaat dari kami.

 <!--
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/91768132-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY5eEEkUe7E0d5I4N1cdG5bv7ZCB2A:1736893900986';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4054783109958841445','//jejakseru.blogspot.com/2017/07/membuat-show-more-categories-di-blog.html','4054783109958841445');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '4054783109958841445', 'title': 'Ringgo News', 'url': 'https://jejakseru.blogspot.com/2017/07/membuat-show-more-categories-di-blog.html', 'canonicalUrl': 'https://jejakseru.blogspot.com/2017/07/membuat-show-more-categories-di-blog.html', 'homepageUrl': 'https://jejakseru.blogspot.com/', 'searchUrl': 'https://jejakseru.blogspot.com/search', 'canonicalHomepageUrl': 'https://jejakseru.blogspot.com/', 'blogspotFaviconUrl': 'https://jejakseru.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', 'localeUnderscoreDelimited': 'en', '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\x22Ringgo News - Atom\x22 href\x3d\x22https://jejakseru.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Ringgo News - RSS\x22 href\x3d\x22https://jejakseru.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Ringgo News - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/4054783109958841445/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Ringgo News - Atom\x22 href\x3d\x22https://jejakseru.blogspot.com/feeds/2999356588133798339/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-2234001608956086', '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/d2c988fc3a56b1b1', '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': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', '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\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '2999356588133798339', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAJkiPEzqRcLei9UiJ7TBBlUzC3nnaNHw_JTaIjG92NYyykPfVB___3YQH8tuIEVV9i9DRFy88HTJnzbvAGdM3hVOcZUz3KnRymS9by7mlfdCedNQGNECREicA9Sa0klJx-BjBhpUBc0c/s72-c/33.png', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAJkiPEzqRcLei9UiJ7TBBlUzC3nnaNHw_JTaIjG92NYyykPfVB___3YQH8tuIEVV9i9DRFy88HTJnzbvAGdM3hVOcZUz3KnRymS9by7mlfdCedNQGNECREicA9Sa0klJx-BjBhpUBc0c/s1600/33.png', 'pageName': 'Membuat Show More Categories di Blog', 'pageTitle': 'Ringgo News: Membuat Show More Categories di Blog', 'metaDescription': 'cara membuat show more, cara membuat show more category, cara membuat show more categories'}}, {'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': 'Membuat Show More Categories di Blog', 'description': 'cara membuat show more, cara membuat show more category, cara membuat show more categories', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAJkiPEzqRcLei9UiJ7TBBlUzC3nnaNHw_JTaIjG92NYyykPfVB___3YQH8tuIEVV9i9DRFy88HTJnzbvAGdM3hVOcZUz3KnRymS9by7mlfdCedNQGNECREicA9Sa0klJx-BjBhpUBc0c/s1600/33.png', 'url': 'https://jejakseru.blogspot.com/2017/07/membuat-show-more-categories-di-blog.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 2999356588133798339}}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/599103511-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/1964470060-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML996', 'iklan-atas', document.getElementById('HTML996'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML997', 'iklan-tengah1', document.getElementById('HTML997'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML998', 'iklan-tengah2', document.getElementById('HTML998'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML999', 'iklan-bawah', document.getElementById('HTML999'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts1', 'sidebar', document.getElementById('PopularPosts1'), {}, 'displayModeFull'));
</script>
</body>-->