Membuat Menu Navigation Bersuara di Blogger

Unknown

16px

Ukuran Teks

1

0

Cara Membuat Menu Navigation Bersuara Dengan HTML5 Audio Responsive Di Blog ~ Hello sobat blogger, ketemu lagi dengan saya, kali ini saya akan share tutorial agar menu navigation bisa bersuara. Hebat bukan ? hehe iya dong, zaman serba canggih seperti sekarang ini apa yang tidak bisa dilakukan, termasuk dengan membuat blog yang lebih interaktif. Mulai dari tulisan yang beragam bentuk, berbagai animasi, hingga sound dan video bisa di sematkan ke dalam blog.

Kali ini saya akan membagikan tips keren ini kepada kalian yaitu membuat menu navigation yang ada di blog Anda bisa bersuara ketika cursor atau pointer bersentuhan dengan menu navigation, gimana sih demonya ? demo saat ini belum saya buat dikarenakan kesibukan saya yang begitu banyaknya, langsung saja ke tutorialnya.

Membuat Navigation Menu Bersuara Dengan HTML5 Audio

Langkah pertama :
LogIn ke blog Anda > Template > Edit HTML jika sudah, copy kode dibawah ini tepat di atas kode </body>

<script src='https://googledrive.com/host/0B7HzsuNNkuC_dTJqd0xHRE9Pdm8/sound.js' type='text/javascript'/>

INFO :
- Anda dapat mengganti suaranya dengan suara yang Anda inginkan, dengan cara mengganti kode bewarna dengan kode suara yang Anda inginkan.
- Upload kode atau script suara yang Anda buat ke Google Drive atau media penyimpanan lainnya.
- Kode atau script harus menggunakan format .ogg.

Langkah kedua :
Cari menu navigation yang ada di blog Anda, setelah ketemu letakkan kode dibawah ini kedalam menu navigation. Jika Anda belum ngerti silakan lihat gambar dibawah ini.

onmouseover='mouseoversound.playclip()'

Langkah selanjutnya adalah Save. Dan lihat hasilnya, jika tutorial ini tidak bekerja dengan baik, silakan Anda mengganti script tersebut dengan script punya Anda. Demikian tutorial yang bisa saya berikan hari ini, semoga bermanfaat bagi sobat semua. Jangan lupa untuk Like dan Share artikel ini agar sobat-sobat yang lain bisa juga untuk menerapkan tutorial ini kepada blog masing-masing. Dan jangan lupa untuk Anda masukkan Email Anda ke kolom yang sudah disediakan di bagian footer atau bawah.

← Newer Older →

Fitur Lagu

<head>
<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=7399491861106262727&zx=255cbcd5-5536-46e7-8cfb-518777dc7bef' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=7399491861106262727&zx=255cbcd5-5536-46e7-8cfb-518777dc7bef' 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/344097953-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'APlU3lzRv0Y4JJ3NS0XK10PpBNl9:1775894814605';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7399491861106262727','//lostcips.blogspot.com/2017/02/membuat-menu-navigation-bersuara-di.html','7399491861106262727');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '7399491861106262727', 'title': 'Lostcips Official', 'url': 'https://lostcips.blogspot.com/2017/02/membuat-menu-navigation-bersuara-di.html', 'canonicalUrl': 'https://lostcips.blogspot.com/2017/02/membuat-menu-navigation-bersuara-di.html', 'homepageUrl': 'https://lostcips.blogspot.com/', 'searchUrl': 'https://lostcips.blogspot.com/search', 'canonicalHomepageUrl': 'https://lostcips.blogspot.com/', 'blogspotFaviconUrl': 'https://lostcips.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'UA-86203916-2', 'encoding': 'UTF-8', 'locale': 'id', 'localeUnderscoreDelimited': 'id', '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\x22Lostcips Official - Atom\x22 href\x3d\x22https://lostcips.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Lostcips Official - RSS\x22 href\x3d\x22https://lostcips.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Lostcips Official - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/7399491861106262727/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Lostcips Official - Atom\x22 href\x3d\x22https://lostcips.blogspot.com/feeds/8131209918213434943/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/5ddb33369fcd32d1', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Dapatkan link', 'key': 'link', 'shareMessage': 'Dapatkan link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Bagikan ke Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Bagikan ke X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Bagikan ke 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: \x27id\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': true, 'jumpLinkMessage': 'Read more \xbb', 'pageType': 'item', 'postId': '8131209918213434943', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO95CVqLhBJZJAXG0O1QFmt25RVD3E8_PXJsbJJcPhgIRlj-0DGrT7UyHlJpeYZuPPF9-ikxRs837JCgcDSew4QscoNvdEj_YhO9J6_qUT5d66s3MMmJlAj3x7P2Kss9kThadgFY6fsmDl/s72-c/menu+responsive+blogger+multilevel.JPG', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO95CVqLhBJZJAXG0O1QFmt25RVD3E8_PXJsbJJcPhgIRlj-0DGrT7UyHlJpeYZuPPF9-ikxRs837JCgcDSew4QscoNvdEj_YhO9J6_qUT5d66s3MMmJlAj3x7P2Kss9kThadgFY6fsmDl/s1600/menu+responsive+blogger+multilevel.JPG', 'pageName': 'Membuat Menu Navigation Bersuara di Blogger', 'pageTitle': 'Lostcips Official: Membuat Menu Navigation Bersuara di Blogger', 'metaDescription': ''}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Tautan disalin ke papan klip!', 'ok': 'Oke', 'postLink': 'Tautan Pos'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Khusus', '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 Menu Navigation Bersuara di Blogger', 'description': 'blog yang membagikan tutorial Game, Cheat Game Online, Widget Blog, Template SEO, Komputer, Internet, Tips Nge-Blog.', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO95CVqLhBJZJAXG0O1QFmt25RVD3E8_PXJsbJJcPhgIRlj-0DGrT7UyHlJpeYZuPPF9-ikxRs837JCgcDSew4QscoNvdEj_YhO9J6_qUT5d66s3MMmJlAj3x7P2Kss9kThadgFY6fsmDl/s1600/menu+responsive+blogger+multilevel.JPG', 'url': 'https://lostcips.blogspot.com/2017/02/membuat-menu-navigation-bersuara-di.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 8131209918213434943}}, {'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': 'Postingan Blog', 'type': 'Blog', 'sectionId': 'main_content_area', 'id': 'Blog1', 'posts': [{'id': '8131209918213434943', 'title': 'Membuat Menu Navigation Bersuara di Blogger', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO95CVqLhBJZJAXG0O1QFmt25RVD3E8_PXJsbJJcPhgIRlj-0DGrT7UyHlJpeYZuPPF9-ikxRs837JCgcDSew4QscoNvdEj_YhO9J6_qUT5d66s3MMmJlAj3x7P2Kss9kThadgFY6fsmDl/s1600/menu+responsive+blogger+multilevel.JPG', '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/2626028960-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle.css'}, 'displayModeFull'));
</script>
</body>