Skip to main content

follow us


www.azid.web.id - Cara Membuat Megamenu Seperti Template Newspaper V9.6 Pada Blogger. Pada kesempatan kali ini saya akan membagikan tutorial kepada sobat tentang cara membuat megamenu seperti template newspaper pada platform blogger. Sebenarnya megamenu pada blogger sudah ada sejak lama, namun tampilannya menurut saya kurang menarik. Oleh karena itu, saya membagikan postingan ini agar sobat bisa membuat megamenu yang tentunya responsive dan menarik.

Script megamenu ini saya dapatkan dari template buatan milik Rian SEO yang diberinama viopaper. Template tersebut memang belum sepenuhnya buatan Rian SEO karena dasar template itu sendiri adalah template milik mas Sugeng yang kemudian di redisgn oleh Rian SEO. Template tersebut sangatlah menarik dan menurut saya hampir mirip 80% seperti template Newspaper for wordpress namun sayang template tersebut dari segi kecepatan sangat kurang.

Oleh karena itu, saya disini hanya akan membagikan script untuk megamenu saja. Sebenarnya setelah saya lihat ternyata megamenu yang digunakan oleh Rian SEO merupakan script dari kompiajaib yang pernah beliau publish pada blognya dan sudah digunakan pada template buatannya seperti template kompi magazine dan kompi males v6. Namun ada sedikit modifikasi dari Rian SEO, dan pada kali ini saya membagikannya juga terdapat modifikasi lagi.

Tutorial ini memang tidak sepenuhnya menampilkan tampilan megamenu baik di dekstop maupun pada versi mobile, akan tetapi hanya pada tampilan dekstop, adapun pada tampilan versi mobile menu navigasi megamenu menjadi menu navigasi dropdown. Hal ini sesuai dengan namanya, yaitu tampilan seperti template newspaper, akan tetapi pada buatan mas Rian SEO sedikit berat dan mengurangi kecepatan loading blog. Hal tersebut dikarenakan terdapat url gambar pada versi mobile dan menggunakan script eksternal. Untuk itu, agar kecepatan blog sobat normal alias tidak mengalami pengurangan dalam kecepatan blognya, akhirnya sedikit saya modifikasi tampilan pada versi mobile dan menjadikan javascript ekternal dari hosting pihak ketiga menjadi javascript internal.

Baik, untuk bisa membuat tampilan megamenu seperti template Newspaper sobat bisa mengikuti tutorial dibawah ini;

Pertama, langkah pertama yang perlu sobat lakukan adalah menuju menu edit HTML dan letakkan kode berikut ini tepat diatas kode </head> dan jangan lupa agar tidak bentrok kode cssnya maka sobat bisa menghapus cssmenu atau css navigasi pada blog sobat.


<style>
/* NAV MENU */
.mega_menu{float:left;margin:0;padding:0;}
.megamenu *{margin:0;padding:0;font-family:inherit;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
ul.megamenu{list-style:none;line-height:1;overflow:visible!important}
ul.megamenu:after{margin:0;padding:0;content:"";display:block;height:0;clear:both}
ul.megamenu li{float:left;display:inline;padding:0;}
ul.megamenu li a.menu-target:after{content: "";font-family: FontAwesome;font-style: normal;font-weight: 800;text-decoration: inherit;line-height: 0;top: 30px;position: absolute;}
ul.megamenu li a{display:block;padding: 0 14px;font: 700 13px Open Sans, Arial, sans-serif;line-height: 60px;text-decoration: none;text-transform: uppercase;color: #fff;}
ul.megamenu li a:hover,ul.megamenu li a.hover-menu{color:#4db2ec}
ul.megamenu ul{position:absolute;display:none;top:100%}
ul.megamenu li a.hover-menu>ul{display:block}
ul.megamenu ul.leftmenulist li{z-index:72;width:100%;float:none;position:relative;}
ul.megamenu ul.rightmenulist li{z-index:72;width:25%;float:none;}
ul.megamenu ul li a{text-transform:none;font-weight:400}
ul.megamenu ul li a:hover,ul.megamenuid ul li a.hover{background:#fff;border-top: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;;color:#4db2ec}
ul.megamenu ul ul{display:none;left:100%;top:0}
ul.megamenuid li div.megasubmenu{background:#fff;position:absolute;width:100%;z-index:90;left:0;top:66%;overflow:hidden;min-height:150px;visibility:hidden;opacity:0;color:#888;box-shadow:0 10px 7px -7px rgba(0,0,0,.1);transition:all .3s ease-in-out;display:none}
ul.megamenuid li a.hover-menu~div.megasubmenu{visibility:visible;opacity:1;display:block;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:.7s;animation-duration:.7s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
ul.megamenuid ul,ul.megamenuid ul li{display:block!important;border:0!important;margin:0!important;padding:0!important}
ul.megamenuid ul li{background:0 0!important;float:left!important}
ul.megamenuid ul.leftmenulist{position:absolute;width:15%;left:0;top:0;bottom:0;background:#fafafa}
ul.megamenuid ul.leftmenulist a{display: block;font: 600 13px Open Sans, Arial, sans-serif;line-height: 24px;color: #333;padding: 5px 22px;vertical-align: middle;border-top: 1px solid transparent;border-bottom: 1px solid transparent;}
ul.megamenuid ul.rightmenulist{position:relative;display:block;width:85%;float:right;margin:0!important;background:0 0}
ul.megamenuid ul.rightmenulist li{display:block;overflow:hidden;position:relative;height:100%;padding:20px 20px 20px 0!important}
ul.megamenuid ul.rightmenulist li .thumb-container{width:100%;height:100%;position:relative;overflow:hidden;font-size:0;display:inline}
ul.megamenuid ul.rightmenulist li .thumb-container img{width:100%;height:130px;margin-bottom:10px}
ul.megamenuid ul.rightmenulist li a{display:block;border-left:none!important;padding:0!important;font-family: roboto,sans-serif;font-weight: 500;font-size: 13px;line-height: 18px;color: #111}
ul.megamenu li.has-submenu .leftmenulist {background:#fff;box-shadow: 1px 1px 4px rgba(0,0,0,.15);}
ul.megamenuid ul.rightmenulist li a:hover{background:#fff;color:#4db2ec;border:none!important;}
ul.megamenu li.has-submenu,ul.megamenu li.has-sub a{position:relative;}
ul.megamenu li.has-submenu .rightmenulist,ul.megamenu li.mega-label .leftmenulist,ul.megamenu li.has-submenu .menu-icon{display:none!important;}
ul.megamenu li.has-submenu .leftmenulist,ul.megamenu li.mega-label .rightmenulist{width:100%;}
ul.megamenu li.has-submenu .megasubmenu{top:100%;min-width:180px;min-height:100%;overflow:visible;}
ul.megamenu li.has-submenu>a,ul.megamenu li.has-sub>a{padding:0 25px 0 20px;}
ul.megamenu li.has-submenu>a:after,ul.megamenu li.has-sub>a:after{content: "";font-family: FontAwesome;font-style: normal;font-weight: 800;text-decoration: inherit;margin-left: 5px;}
ul.megamenu li.has-submenu>a:hover:after,ul.megamenu li.has-submenu>a.hover-menu:after,ul.megamenu li.has-sub>a:hover:after,ul.megamenu li.has-sub>a.hover-menu:after{border-top-color:#111;}
ul.megamenu li.has-submenu .leftmenulist li{background:#fff!important;}
ul.megamenu li.has-submenu .leftmenulist li a {background-image: linear-gradient(90deg,#111 12%,rgba(0,0,0,0.4)250%);box-shadow:0 2px 6px 0 rgba(0,0,0,0.2);padding:7px 30px;font: 500 12px Open Sans, Arial, sans-serif;line-height: 20px;border:0;color:#fff}
ul.megamenu li.has-submenu .leftmenulist li a:hover {color:#4db2ec;}
ul.megamenu li.has-submenu .leftmenulist li .loading-icon{display:none}
ul.megamenu li.mega-label .megasubmenu{padding:0 0 0 20px!important}
ul.megamenu li.mega-label ul.rightmenulist li .thumb-container img{height:160px}
ul.megamenu li.mega-label ul.rightmenulist li a{font-size:14px}
ul.megamenuid .loading-icon{background:url(//2.bp.blogspot.com/-N9HNU11nhiA/Va-NLcGF0lI/AAAAAAAALW4/HzSlCK7PGeY/s1600/wait.gif) no-repeat;background-size:16px 16px;width:16px;height:16px;position:absolute;top:50%;margin-top:-8px;right:20px}
ul.megamenuid .menu-icon{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #777;display:block;height:0;margin-top:-4px;position:absolute;right:20px;top:50%;width:0}
#megamenuid h5:after,#megamenuid h5:before{content:"";position:absolute;left:50%;border-left:2px solid #888;border-right:2px solid #888}
#megamenuid{margin:0;padding:0;}
#megamenuid h5{font-size:16px;margin-top:70px;text-align:center}
#megamenuid h5:before{top:50px;width:5px;height:2px;margin-left:-4px}
#megamenuid h5:after{top:55px;width:10px;height:5px;margin-left:-7px;border-top:2px solid #888;border-radius:8px 8px 0 0}
.menupage_mobile_icon,.menu_mobile_burger,#search-label3,#mega_menu h2,.cssmenu>ul>li.home{display:none}
@media screen and (max-width:800px){
/* CSS mobile Menu */
.menu_mobile_burger,.menupage_mobile_icon{position:absolute;top:0;width:64px;text-align:right;padding:0;color:#fff;font-size:27px;font-weight:500;line-height:54px;cursor:pointer;z-index:990;display:block}
.menu_mobile_burger{right:0px;top:5px;}
.menupage_mobile_icon{right:0}
.menupage_mobile_icon svg,.menu_mobile_burger svg,#search-label3 svg{width:31px;height:32px;vertical-align:-5%}
.menupage_mobile_icon svg path,.menu_mobile_burger svg path,#search-label3 svg path{fill:#fff}
ul.megamenu li.has-sub>a.hover-menu:after,ul.megamenu li.has-sub>a:hover:after,ul.megamenu li.has-submenu>a.hover-menu:after,ul.megamenu li.has-submenu>a:hover:after{border-top-color:transparent}
ul.megamenu li.has-submenu>a, ul.megamenu li.has-sub>a{padding:12px 30px 12px 12px;}
#css-menu,.cssmenu{width: 100%;height: 113%;}
#css-menu{position:fixed;top:0;right:100%;z-index:999;background-image: linear-gradient(90deg,#111 12%,rgba(0,0,0,0.4)250%);box-shadow:0 2px 6px 0 rgba(0,0,0,0.2);background-repeat: no-repeat;background-size: cover;background-position: center top;transition:all .4s ease-in-out;display:block}
.cssmenu,.cssmenu a,.cssmenu li,.cssmenu ul{margin:0;padding:0;border:0;list-style:none;font-weight:400;text-decoration:none;line-height:1;font-size:16px;position:relative;display:block;float:none}
.cssmenu{overflow-x:hidden;overflow-y:visible}
.cssmenu a{line-height:1.3;padding:12px 15px}
.cssmenu>ul>li{cursor:pointer;display:block;float:none;padding: 20px 20px 0;}
.cssmenu>ul>li:first-child{border:none;text-align:center;height:65px;padding-left:0;cursor:default}
.cssmenu>ul>li:first-child a{display:inline-block;background:#fff!important;padding-right:0;line-height:65px}
.cssmenu>ul>li:last-child{border:0}
ul.megamenu:after{border:0}
.cssmenu>ul>li:last-child.active{border:0}
.cssmenu>ul>li:last-child>a{border:0}
.cssmenu>ul>li>a{font-size:20px;font-weight:700;display:block;color:#fff;line-height:21px;padding:12px 30px 12px 12px;text-transform: none;}
.cssmenu>ul>li>a:hover{text-decoration:none;color:#4db2ec;border:0}
.cssmenu>ul>li.active{font-weight:700}
.cssmenu>ul>li.search_icon{display:none;}
.cssmenu>ul>li.home{display:block;}
.cssmenu>ul>li.home .close-menu, #searchfs .close {color:#fff;font-size:50px;font-weight:300;padding:0 15px;line-height:25px;display:inline-block;float:right;cursor:pointer;margin-right:-30px}
.cssmenu>ul>li.has-sub>a:after,.cssmenu>ul>li.has-submenu>a:after{content:">";font-family: FontAwesome;font-style: normal;font-weight: 800;position:absolute;top:15px;right:15px;}
.cssmenu>ul>li.has-sub.active>a:after,.cssmenu>ul>li.has-submenu.active>a:after{content:"<";right:15px;top:17px;}
.cssmenu ul ul{position:relative;top:0;}
.cssmenu ul ul a{display:block;color:#fff;font-size:16px;font-weight:400;line-height:19px;padding:9px 26px 9px 36px!important;}
.cssmenu ul ul a:hover{color:#4db2ec!important}
.cssmenu ul ul li{border:0;display:block;float:none}
.cssmenu ul ul li a:hover{color:#4db2ec!important;border:none}
.cssmenu ul ul li.even a{background:0 0}
.cssmenu ul ul li.odd a{background:0 0;border:0}
.cssmenu ul ul li:last-child{border:none}
.flow{overflow:hidden;position:relative}
.cssmenu>ul>li.home .title_blog{margin:0;display:inline-block;vertical-align:middle;line-height:65px}
.cssmenu>ul>li.home .title_blog img{width:auto;height:auto;display:block;max-height:64px;}
}
</style>

Kedua, setelah meletakkan kode cssnya langkah selanjutnya adalah hapus kode <nav ....> sampai </nav> dan ganti dengan kode berikut dan jangan lupa ganti url labelnya dengan url blog sobat.


<nav id='cssmenu'>
<div id='head-mobile'/>
<div class='button' id='menu-button'/>
<!-- menu navigasi header start -->
<div class='mega_menu' id='mega_menu'>
<div class='menu_mobile_burger' title='Menu'>
<svg viewbox='0 0 24 24'>
    <path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' fill='#000000'/>
</svg>
</div>

<div class='cssmenu' id='css-menu'>
<ul class='megamenu' id='megamenuid'>
  <li class='home'><span class='close-menu' title='Close'>&amp;times;</span></li>
  <li class='has-sub'><a class='menu-target' href='javascript:viod(0)'>Pendidikan</a>
    <ul>
      <li><a href='https://www.azid45.web.id/search/label/Pendidikan' onclick='addURL(this)'>Pendidikan Umum</a></li>
      <li><a href='https://www.azid45.web.id/search/label/Pendidikan%20Karakter' onclick='addURL(this)'>Pendidikan Karakter</a></li>
      <li class='last'><a href='https://www.azid45.web.id/search/label/Penelitian' onclick='addURL(this)'>Pendidikan Penelitian</a></li>
    </ul>
  </li>
  <li class='has-sub'><a class='menu-target' href='javascript:viod(0)'>Islam</a>
    <ul>
      <li><a href='https://www.azid45.web.id/search/label/Filsafat%20Islam'>Filsafat Islam</a></li>
      <li><a href='https://www.azid45.web.id/search/label/Seputar%20Islam'>Seputar Islam</a></li>
      <li class='last'><a href='https://www.azid45.web.id/search/label/Tokoh%20Muslim'>Tokoh Muslim</a></li>
    </ul>
  </li>
  <li class='mega-label has-sub'><a href='javascript:viod(0)'>Download</a>
    <ul>
      <li><a href='https://www.azid45.web.id/search/label/Download'>Download</a></li>
    </ul>
  </li>
  <li class='has-submenu'><a class='menu-target' href='javascript:viod(0)'>More</a>
    <ul>
      <li><a href='https://www.azid45.web.id/search/label/Ilmu'>Ilmu</a></li>
      <li><a href='https://www.azid45.web.id/search/label/Kepemimpinan'>Kepemimpinan</a></li>
      <li><a href='https://www.azid45.web.id/search/label/Tutorial'>Tutorial</a></li>
    </ul>
  </li>
<li><a href='https://www.azid45.web.id/p/cdata-document.html'>Sitemap</a></li>
</ul>
</div>
</div>
<!-- menu navigasi header end -->
</nav>

Ketiga, setelah meletakkan kode diatas langkah selanjutnya adalah meletakkan javascript berikut tepat diatas kode </body>


<script type='text/javascript'>//<![CDATA[
var mql = window.matchMedia('screen and (min-width: 801px)');if (mql.matches){
$(document).ready(function(){var a=$(".mega_menu").offset().top,e=function(){var e=$(window).scrollTop();e>a?$(".mega_menu").addClass(" fixed-nav"):a>e&&$(".mega_menu").addClass("relative-nav").removeClass("fixed-nav")};e(),$(window).scroll(function(){e()})});
(function(e){var t=function(e,t){this.elem=e;this.settings=t;this.megaMenuHtml();this.ajaxcall=null;this.menulist=this.elem.find(".leftmenulist li a");this.menuHelper(this.elem);this.addEvents()};t.prototype={regex:{islabel:new RegExp("/search/label/","g"),issearch:new RegExp("[?&]q=","g"),labelsearch:new RegExp("(//[^/]+)/search/label/([^/?&]+).*[?&]q=([^$&]+)(?:[^$]+)?","g"),label:new RegExp("(//[^/]+)/search/label/([^/?&$]+)","g"),search:new RegExp("(//[^/]+)/search/?[?&]q=(.*)","g")},addEvents:function(){var t=this;this.menulist.hover(function(){if(e(this).data("menuloaded")!=="true"){t.li=e(this);t.url=t.li.attr("href");t.container=t.li.closest("ul").siblings("ul");t.hoverOver()}},function(){t.hoverOut()})},hoverOver:function(){var t=this;this.getAJAXUrl();if(!this.ajaxUrl)return;this.ajaxcall=e.ajax({type:"GET",url:t.ajaxUrl,dataType:"jsonp",data:t.ajaxData,beforeSend:function(){t.showLoader()},success:function(e){t.hideLoader();t.addArrow();t.showPosts(e)},error:function(e){t.showError(e)}})},hoverOut:function(){this.ajaxcall.abort();this.hideLoader()},getAJAXUrl:function(){if(this.url){var e=this;this.ajaxData={alt:"json","max-results":this.settings.postsNumber};this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.labelsearch,function(t,n,r,i){e.ajaxData.q=i;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)===-1?this.ajaxUrl=this.url.replace(this.regex.label,function(t,n,r){delete e.ajaxData.q;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)===-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.search,function(t,n,r){e.ajaxData.q=r;return[n,"/feeds/posts/default"].join("")}):this.ajaxUrl=!1}else this.ajaxUrl=!1},showLoader:function(){e("<span></span>",{"class":"loading-icon"}).appendTo(this.li.closest("li"))},hideLoader:function(){this.li.closest("li").find("span.loading-icon").remove()},showPosts:function(t){var n=this,r=[],i,s,o;t.feed.openSearch$totalResults.$t>0?e.each(t.feed.entry,function(t,u){i=u.title.$t;e.each(u.link,function(e,t){t.rel==="alternate"?s=t.href:s="#"});o=u.media$thumbnail?u.media$thumbnail.url.replace(/.*?:\/\//g , "//").replace(/\/s72\-c\//,"/s202/"):n.settings.noThumbnail;r.push('<li><span class="thumb-container"><a title="',i,'" href="',s,'"><img alt="',i,'" src="',o,'" width="202" height="202"/><br />',i,"</a></span></li>")}):r.push("<h5>","No posts available.","</h5>");this.container.html(r.join(""));this.menulist.removeData("menuloaded");this.li.data("menuloaded","true")},showError:function(e){if(e.statusText==="error"){this.hideLoader();this.addArrow();this.container.html("<h5>Oops... Could not fetch the blog posts.</h5>")}},addArrow:function(){this.menulist.closest("li").find("span").remove();this.menulist.removeClass("hover-menu");this.li.addClass("hover-menu");e("<span></span>",{"class":"menu-icon"}).appendTo(this.li.closest("li"))},menuHelper:function(t){var n=this;t.find(">li").hover(function(){var t=e(this);t.find("a:first").addClass("hover-menu");var r=e(this).find("ul.leftmenulist li").height()*e(this).find("ul.leftmenulist li").length;t.find("ul.rightmenulist").css({"min-height":r+"px"});n.requestFirstAjax(t)},function(){e(this).find("a:first").removeClass("hover-menu")})},megaMenuHtml:function(){this.elem.find("ul ul").remove();this.elem.addClass("megamenuid").find(">li").find("ul:first").addClass("leftmenulist").wrap(e("<div></div>",{"class":this.settings.divClass}));e("ul.leftmenulist").after(e("<ul></ul>",{"class":"rightmenulist"}))},requestFirstAjax:function(e){e=e.find(".leftmenulist li:first-child a");this.url=e.attr("href");this.container=e.closest("ul").siblings("ul");this.li=e;this.hoverOver()}};e.fn.megaBloggerMenu=function(n){var r={postsNumber:4,divClass:"megasubmenu",postsClass:"rightmenulist",noThumbnail:"/default.png"},i=e.extend({},r,n);return this.each(function(){var n=new t(e(this),i)})}})(jQuery);
jQuery(document).ready(function(e){e("#megamenuid").megaBloggerMenu({postsNumber:4,noThumbnail:"https://2.bp.blogspot.com/-Z7jG9iO9OTg/Vazz6YJnFQI/AAAAAAAALVs/wlSvXPgdDAo/s1600/no_image_available.png"})});
function addURL(n){$(n).attr("href",function(){return this.href+"?&max-results=7"})};
};
if (window.matchMedia("(max-width:800px)").matches){
$(".cssmenu ul ul li:odd").addClass("odd"),$(".cssmenu ul ul li:even").addClass("even"),$(".cssmenu > ul > li > a").click(function(){$(".cssmenu li").removeClass("active"),$(this).closest("li").addClass("active");var s=$(this).next();return s.is("ul")&&s.is(":visible")&&($(this).closest("li").removeClass("active"),s.slideUp("normal")),s.is("ul")&&!s.is(":visible")&&($(".cssmenu ul ul:visible").slideUp("normal"),s.slideDown("normal")),0==$(this).closest("li").find("ul").children().length}),$(function(){$(".menu_mobile_burger").click(function(){$("#css-menu").css({right:"0"});var s=document.body;s.classList.toggle("flow")}),$(".close-menu").click(function(){$("#css-menu").css({right:"100%"});var s=document.body;s.classList.toggle("flow")})});
};
//]]>
</script>

<script type='text/javascript'>//<![CDATA[
// nav menu
!function(s){s.fn.menumaker=function(n){var e=s(this),o=s.extend({format:"dropdown",sticky:!1},n);return this.each(function(){s(this).find(".button").on("click",function(){s(this).toggleClass("menu-opened");var n=s(this).next("ul");n.hasClass("open")?n.slideToggle(150).removeClass("open"):(n.slideToggle(150).addClass("open"),"dropdown"===o.format&&n.find("ul").show())}),e.find("li ul").parent().addClass("has-sub"),multiTg=function(){e.find(".has-sub").prepend('<span class="submenu-button"></span>'),e.find(".submenu-button").on("click",function(){s(this).toggleClass("submenu-opened"),s(this).siblings("ul").hasClass("open")?s(this).siblings("ul").removeClass("open").slideToggle(150):s(this).siblings("ul").addClass("open").slideToggle(150)})},"multitoggle"===o.format?multiTg():e.addClass("dropdown"),!0===o.sticky&&e.css("position","fixed")})}}(jQuery),function(s){s(document).ready(function(){s("#cssmenu").menumaker({format:"multitoggle"})})}(jQuery);
//]]>
</script>

Keempat, pastikan pada blog sobat sudah terdapat script JQuery versi berapapun. Namun jika belum teradapat JQuery pada blog sobat, sobat bisa download kode script JQuery internal dibawah ini dan letakkan diatas kode </head> dan setalah itu SAVE TEMPLATE Sobat. 


Demikianlah artikel saya tentang Cara Membuat Megamenu Seperti Template Newspaper V9.6 Pada Blogger. Semoga artikel ini bermanfaat. Amin

KETERANGAN: jika sobat mengalami kesalahan "&" dalam menyimpan script javascript maka langkah yang sobat lakukan adalah mengubah & menjadi ;&amp
PERHATIAN!: setiap link template pada blog ini di direct 5 -7 kali jadi harap bersabar.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar