Cara Membuat Menu Tab View Otomatis tanpa Edit HTML

Kadek

16px

Ukuran Teks

1

0

– Menu Tab View tanpa Edit HTML. Tentu sudah tahu kan yang dinamakan menu tab view? Widget pada sidebar yang berupa beberapa widget berbentuk menu menyamping. Menu tab view biasanya digunakan untuk menghemat ruang pada sidebar. Disini Blogger bulshitman akan menjelaskan bagaimana cara membuat menu tab view otomatis dengan jquery.
Keunggulan menu tabview dengan JQuery sendiri yakni lebih simple dan praktis, selain tanpa edit html/ templates serta pengisiannya masing-masing menu tabview menggunakan 1 widget. Sangat mudah sekali dalam pengeditan isi menu tab view dan cocok untuk orang awam sekalipun seperti saya

Jadi anda cukup menambahkan widget html, dan meng copy kode menu tabview. Nantinya 3 widget dibawah widget tabview tersebut akan menjadi isi dari menu tabview. Logikanya seperti gambar berikut.

Cara Membuat Menu Tab View Otomatis tanpa Edit HTML

1. Login ke akun blogger
2. masuk menu Tata letak
3. tambahkan gadget > HTML/JavaScript
4. Copy kode berikut

4. Simpan tanpa diberi judul
Untuk jumlah tab bisa disesuaikan, ganti angka yang berwarna merah dan untuk style nya silahkan sesuaikan dengan keinginan anda. Ok selamat mencoba Membuat Menu Tab View Otomatis

Kata kunci pencarian terakhir:

cara mengaktifkan tab menu view
mengaktifkan tab menu view dengan cara
Mengaktifkan tab view

Advertisement

← Newer Older →

Fitur Lagu

<head>
<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=4290982982529449959&zx=e1c3d90c-7993-48da-a5ce-a9ccc1c7ce3b' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=4290982982529449959&zx=e1c3d90c-7993-48da-a5ce-a9ccc1c7ce3b' 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>
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/432983155-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY49eDdxD2avd6yVtPorv5ozzCL6Mw:1772793640243';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4290982982529449959','//bulshitman.blogspot.com/2016/02/cara-membuat-menu-tab-view-otomatis.html','4290982982529449959');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '4290982982529449959', 'title': 'BulshitMan', 'url': 'https://bulshitman.blogspot.com/2016/02/cara-membuat-menu-tab-view-otomatis.html', 'canonicalUrl': 'https://bulshitman.blogspot.com/2016/02/cara-membuat-menu-tab-view-otomatis.html', 'homepageUrl': 'https://bulshitman.blogspot.com/', 'searchUrl': 'https://bulshitman.blogspot.com/search', 'canonicalHomepageUrl': 'https://bulshitman.blogspot.com/', 'blogspotFaviconUrl': 'https://bulshitman.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'UA-75988145-1', '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\x22BulshitMan - Atom\x22 href\x3d\x22https://bulshitman.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22BulshitMan - RSS\x22 href\x3d\x22https://bulshitman.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22BulshitMan - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/4290982982529449959/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22BulshitMan - Atom\x22 href\x3d\x22https://bulshitman.blogspot.com/feeds/57808626976075025/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-5276079497297713', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'isGoogleEverywhereLinkTooltipEnabled': true, 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/b4ec9ed16a3249cf', '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': true, 'jumpLinkMessage': 'Lihat Lebih Lengkap', 'pageType': 'item', 'postId': '57808626976075025', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiNMVNGzL8vLUCWu-Cy-3g1ZDyP0oQsjiDHjYOf1Mt0ogDdNyd_JOtOYdD5ovdNZK3Gh6mlsLY_F8qrhvgpT_MYp7KBZNHaI-kFLjVvbOAWQgoXPaIZvVXpV8Yc1yfRdzHPXouhQ0KgqOE/s72-c/xxxxxxxxxxxx.png', 'postImageUrl': 'http://s.w.org/images/core/emoji/72x72/1f600.png', 'pageName': 'Cara Membuat Menu Tab View Otomatis tanpa Edit HTML', 'pageTitle': 'BulshitMan: Cara Membuat Menu Tab View Otomatis tanpa Edit HTML', 'metaDescription': 'Tutorial Blog, Template Blog, Seo friendly, Responsive, Mobile friendly, Free, Premium Blogger Template, Cara membuat, Cara pasang, Cara menambah, Cara di Blog, Tips and Trik Blog, Widget Blogger,'}}, {'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 Menu Tab View Otomatis tanpa Edit HTML', 'description': 'Tutorial Blog, Template Blog, Seo friendly, Responsive, Mobile friendly, Free, Premium Blogger Template, Cara membuat, Cara pasang, Cara menambah, Cara di Blog, Tips and Trik Blog, Widget Blogger,', 'featuredImage': 'https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tOzhV6dpE7NYXM-LVkzT8AXWB_cNj-QpJQhA1GHlQb75cVHF4alE9M0C3gur4zk8roVZN_PezlM8EdZbgNSmhr59g6fdIS5Y1XLa-Ngg50AxCjIQ', 'url': 'https://bulshitman.blogspot.com/2016/02/cara-membuat-menu-tab-view-otomatis.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 57808626976075025}}, {'name': 'widgets', 'data': [{'title': 'Header Utama', 'type': 'HTML', 'sectionId': 'header-top-section', 'id': 'HTML98'}, {'title': 'Menu Navigasi', 'type': 'LinkList', 'sectionId': 'header-nav-section', 'id': 'LinkList1'}, {'title': 'Hero', 'type': 'HTML', 'sectionId': 'hero', 'id': 'HTML99'}, {'title': 'Kategori', 'type': 'Label', 'sectionId': 'sidebar-left', 'id': 'Label1'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'main_content_area', 'id': 'Blog1', 'posts': [{'id': '57808626976075025', 'title': 'Cara Membuat Menu Tab View Otomatis tanpa Edit HTML', 'featuredImage': 'https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tOzhV6dpE7NYXM-LVkzT8AXWB_cNj-QpJQhA1GHlQb75cVHF4alE9M0C3gur4zk8roVZN_PezlM8EdZbgNSmhr59g6fdIS5Y1XLa-Ngg50AxCjIQ', 'showInlineAds': false}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': 'Posted'}, {'name': 'timestamp', 'label': 'Upload'}, {'name': 'comments', 'label': '$type\x3d{blogger}'}, {'name': 'share', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'Recommendation for you'}]}], 'allBylineItems': [{'name': 'author', 'label': 'Posted'}, {'name': 'timestamp', 'label': 'Upload'}, {'name': 'comments', 'label': '$type\x3d{blogger}'}, {'name': 'share', 'label': ''}, {'name': 'labels', 'label': 'Recommendation for you'}]}]}]);
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML98', 'header-top-section', document.getElementById('HTML98'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList1', 'header-nav-section', document.getElementById('LinkList1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML99', 'hero', document.getElementById('HTML99'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label1', 'sidebar-left', document.getElementById('Label1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main_content_area', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/482998109-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle.css'}, 'displayModeFull'));
</script>
</body>