Free Download KompAja AMP Blogger Template

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRsXXoMJdMW08Xpc_t4ah-tFCFuHZzDS2F4oW1hfYYyE7yIaBdX10CCyVlgLyv-s2dAfE37Uj8fES7ma2fiwI6hyimFinWfriABd-SQRDR-vtfrxP32-qqJ4h72qpBCsckgsRvIJPTtvg/s1600/Kompi-ajaib-amp.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="390" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRsXXoMJdMW08Xpc_t4ah-tFCFuHZzDS2F4oW1hfYYyE7yIaBdX10CCyVlgLyv-s2dAfE37Uj8fES7ma2fiwI6hyimFinWfriABd-SQRDR-vtfrxP32-qqJ4h72qpBCsckgsRvIJPTtvg/s640/Kompi-ajaib-amp.jpg" width="640" /></a></div><br /><div class="justify">KompAja With Google AMP Blogger Template is A Perfect Stylish blogger template. This template is ready for the future by being fully compliant with Google AMP HTML standards, Bootstrap standards, Responsive Design and support HTTPS protocol. KompAja is equipped with a Grid masonry on the homepage. KompAja comes out of the box with fully valid html 5 and css amp code, print ready and HCard author ready. Feature this template are Build With Accelerated Mobile Pages (AMP) HTML, AMP Ready All Pages, Mobile Friendly, Fully Responsive Design, Validated Structured Data, SEO Ready, Homepage Custom Post with Grid masonry, Build with HTML5, Build with CSS3, Support SSL/HTTPS, Fast loading, Custom Popular Post Widget with Thumbnail, Search Column Responsive valid AMP, Valid Schema.org, Custom Error 404 Page, Compatible with major browsers (IE8+,Mozilla,Chrome,Safari) </div><br /><div class="awb"><table class="tg"> <tbody><tr><td class="tg-26t4">Flatform Type</td><td class="tg-9itl">: Blogger</td></tr><tr><td class="tg-26t4">Template Name</td><td class="tg-9itl">: KompAja</td></tr><tr><td class="tg-26t4">Author Name</td><td class="tg-9itl">: Noname</td></tr><tr><td class="tg-26t4">Intructions</td><td class="tg-9itl">: <a href="http://awtemplates.blogspot.co.id/p/how-to-instal-blogger-template.html">How to instal template</a></td></tr></tbody></table></div><br /><b>Demo</b><br /><input class="form-control input-sm" onclick="this.select();" type="text" value="http://dwnapk.blogspot.com/" /> <br /><br /><b>Download</b><br /><input class="form-control input-sm" onclick="this.select();" type="text" value="To download this template please add your email in comment form or contact me, I will send you link download" />

Diposting oleh Mr Xiulung

Free Download KangIs Amp Blogger Template

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfhhOLO7PIJjUyax-GnnQ3iCwXLUci979xqZbZfAzglPmSDpMVqUT6JzkjWlrnCnwwcX1G-qMRM5pKsIR-OC2OB6sUmiajihrH932qalntEodNFfwpGBW6uwWy3Z42a8I0ysV9K1CDYrg/s1600/kang+ismet.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfhhOLO7PIJjUyax-GnnQ3iCwXLUci979xqZbZfAzglPmSDpMVqUT6JzkjWlrnCnwwcX1G-qMRM5pKsIR-OC2OB6sUmiajihrH932qalntEodNFfwpGBW6uwWy3Z42a8I0ysV9K1CDYrg/s640/kang+ismet.PNG" width="640" /></a></div><br /><div class="justify">KangIs Amp Blogger Template is elegant blogger template with many feature. Its layout is simple but beautiful and practical. With this AMP template also beginners can design an astounding and fast AMP valid website. Get ready to become an overnight AMP expert, as AMP Blogger Template is very user-friendly. This template is completely responsive and can be used for business website, personal, portfolio or any other website that you need to get AMP ready. For those who wish to learn more about AMP HTML and this template in specific, a detailed customization guide has been added below. Features this template are valid amp, SEO friendly, Share Buttons, Related Post, Disqus comment system and more... </div><br /><div class="awb"><table class="tg"> <tbody><tr><td class="tg-26t4">Flatform Type</td><td class="tg-9itl">: Blogger</td></tr><tr><td class="tg-26t4">Template Name</td><td class="tg-9itl">: KangIs Amp</td></tr><tr><td class="tg-26t4">Author Name</td><td class="tg-9itl">: Noname</td></tr><tr><td class="tg-26t4">Intructions</td><td class="tg-9itl">: <a href="http://awtemplates.blogspot.co.id/p/how-to-instal-blogger-template.html">How to instal template</a></td></tr></tbody></table></div><br /><b>Demo</b><br /><input class="form-control input-sm" onclick="this.select();" type="text" value="https://awandeys.blogspot.com" /><br /><br /><b>Download</b><br /><input class="form-control input-sm" onclick="this.select();" type="text" value="To download this template please add your email in comment form or contact me, I will send you link download" />

Diposting oleh Mr Xiulung

Cara Mudah Membuat Featured Post di Blogger, Responsive!

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi8U7gDsLVM0OpBzsFAQ46qwEkQ3lrmkk6fKTUYIO-NIobqKC7BjwMZxgT4E8MHSFsLP0FwpBBZhaTwoGuBVOOHJE13aGDTxqgRVJxot6IexDcp23p5LxphA7QX5vFUNAqyjoERpA8oGA/s1600/2.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="163" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi8U7gDsLVM0OpBzsFAQ46qwEkQ3lrmkk6fKTUYIO-NIobqKC7BjwMZxgT4E8MHSFsLP0FwpBBZhaTwoGuBVOOHJE13aGDTxqgRVJxot6IexDcp23p5LxphA7QX5vFUNAqyjoERpA8oGA/s400/2.jpg" width="400" /></a></div>Kemaren malam saya posting <b>cara membuat menu navigasi plus media sosial dibagian kiri</b>. Sekarang, pagi ini saya akan mempostingkan Cara mudah Membuat Featured Post di Blogger, dan Resposive. Kenapa Responsive? Jika ketika membuka blogger anda, maka Featured Post ini tidak berantakan, itulah yang disebut Responsive dia akan menyesuaikan layar dengan sendirinya. Featured Post adalah merupakan sebuah fitur yang berisi konten terbaik yang ditaruh diatas postingan. Biasanya berisi tampilan gambar thumbnail beserta keterangan teks disampingnya, lihatlah seperti gambar diatas yang dikotak merah. Jika blogger anda ingin menerapkan seperti Blogger MayCyber-Download, ikuti langkah-langkah berikut ini<br /><br />    Blogger ini selalu mengingatkan, karena kami selalu memberikan artikel yang berkualitas tidak ada asal-asalan, jadi saya sarankan Backup dulu Template anda, misalnya Copy Script HTML ke Notepad. Karena jika tidak sesuai dengan keinginan anda <b>Featured Post</b> nya maka dengan mudah membalikan seperti semula. <br /><br />Cara pertama :<br /><br />1. Masuk <a href="http://blogger.com/" rel="nofollow" target="_blank">Blogger </a>-> Login.<br />2. Template -> Edit HTML.<br />3. Temukan kode <b></head></b><br />4. Copy - Paste kode dibawah ini, dan letakkan diatas kode<b> </head> </b>.<br /><pre data-codetype="Javascript" title="Javascript"><code class="language-javascript"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/><br /><script src='http://yourjavascript.com/221222113215/jquery.innerfade.js' type='text/javascript'/><br /><script src='http://yourjavascript.com/122111125120/cycle.js' type='text/javascript'/><br /><script type='text/javascript'><br />//<![CDATA[<br />imgr = new Array();<br />imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLhxqxHkgoDoAqHc9HcqlHHF71Nfj4GiB1DVd9r1LB00Q0R5-85aBdbRVNaxNSDWXGcq0L6Aqn50I0C9e1nTibpLWYWjTSyUMn_tpmQPoE-Gj40mgQqP5wrF9qeEoRr_MVbA2MsmzqL9g/s1600/no+image.jpg";<br />showRandomImg = true;<br />aBold = true;<br />summaryPost = 300;<br />summaryTitle = 25;<br />numposts = 1;<br /><br />function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}<br /><br />function showrecentposts(json) {<br /> j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;<br /> img = new Array();<br /> document.write('<div class="slides">')<br /> if (numposts <= json.feed.entry.length) {<br /> maxpost = numposts;<br /> }<br /> else<br /> {<br /> maxpost=json.feed.entry.length;<br /> }<br /> for (var i = 0; i < maxpost; i++) {<br /> var entry = json.feed.entry[i];<br /> var posttitle = entry.title.$t;<br /> var pcm;<br /> var posturl;<br /> if (i == json.feed.entry.length) break;<br /> for (var k = 0; k < entry.link.length; k++) {<br /> if (entry.link[k].rel == 'alternate') {<br /> posturl = entry.link[k].href;<br /> break;<br /> }<br /> }<br /><br /> for (var k = 0; k < entry.link.length; k++) {<br /> if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {<br /> pcm = entry.link[k].title.split(" ")[0];<br /> break;<br /> }<br /> }<br /><br /> if ("content" in entry) {<br /> var postcontent = entry.content.$t;}<br /> else<br /> if ("summary" in entry) {<br /> var postcontent = entry.summary.$t;}<br /> else var postcontent = "";<br /><br /> postdate = entry.published.$t;<br /><br /> if(j>imgr.length-1) j=0;<br /> img[i] = imgr[j];<br /><br /> s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);<br /><br /> if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;<br /> //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';<br /><br /> var month = [1,2,3,4,5,6,7,8,9,10,11,12];<br /> var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];<br /><br /> var day = postdate.split("-")[2].substring(0,2);<br /> var m = postdate.split("-")[1];<br /> var y = postdate.split("-")[0];<br /><br /> for(var u2=0;u2<month.length;u2++){<br /> if(parseInt(m)==month[u2]) {<br /> m = month2[u2] ; break;<br /> }<br /> }<br /><br /> var trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="290" height="180" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p></div>';<br /> document.write(trtd);<br /><br /> j++;<br />}<br /> document.write('</div>')<br />}<br /><br />//]]><br /></script></code></pre>Keterangan : Kode yang berwarna <span style="color: red;">merah <span style="color: black;">adalah gambar Default, jika anda mempostingkan tidak menggunakan gambar sama sekali maka tidak akan tampil gambar. Anda bisa mengganti dengan image anda sendiri. </span></span><br /><br />5. Kemudian, Temukan lagi kode <b><div class='main-wrapper'> </b>dan letakan dibawah ini tepat bawahnya.<br /><b></b><br />Catatan : Blogger saya tidak ada kode <b><span style="color: red;"><div class='main-wrapper'></span> </b>Jika anda mempunyai keluhan yang sama? Temukan saja kode <b><b:section class='main' id='main' name='Main' showaddelement='no'> </b>atau kode <b><b:widget id='Blog1' locked='<span style="color: red;">false</span>' title='Blog Posts' type='Blog' version='1' visible='true'</b><br />Note : <span style="color: red;">False </span>bisa diganti dengan <span style="color: red;">True </span>ketika mencari kode menggunakan Ctrl + F .<br /><b> </b><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvc6NfR8XpPEw6o4P4dN9b2QsK7KuMTmX6PqH8YgM4l8ZVVmBSGYk3A3JGHXDk71WeRfH-DYlaPOwIezu9udIjbJGF5ua_wMq6ZFUF4tsYrVkbfZsl1GE67slzmYsY_2acV90u-vLzvi0/s1600/3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvc6NfR8XpPEw6o4P4dN9b2QsK7KuMTmX6PqH8YgM4l8ZVVmBSGYk3A3JGHXDk71WeRfH-DYlaPOwIezu9udIjbJGF5ua_wMq6ZFUF4tsYrVkbfZsl1GE67slzmYsY_2acV90u-vLzvi0/s640/3.jpg" width="640" /></a></div><b><br /></b><span style="color: blue;">!--Lihat gambar biar ngerti dan faham --! </span><br /><br />Saya menaruhnya kodenya dibagian <b><div class='columns-inner'> </b>tepat dibawah nya. karena saya tidak ada kode<b> <div class='main-wrapper'></b> . Itu kalo saya, karena setiap template berbeda-beda.<br /><br />6. Copy - Paste kode berikut ini, keterangan diatas ya kalo soal menaruh kode diatas atau dibawah.<br /><pre data-codetype="HTML" title="HTML"><code class="language-markup"><b:if cond='data:blog.pageType != &quot;item&quot;'><br /><b:if cond='data:blog.url == data:blog.homepageUrl'><br /><div id='featuredpost'><br /><div class='container'><br /><script><br />document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);<br /></script><br /></div><br /><!--end .container--><br /></div></b:if><br /></b:if></code></pre>7. Terakhir, Temukan kode <b>]]></b:skin></b><br />8. Copy-Paste kode berikut ini, dan letakkan kode dibawah ini tepat diatas kode <b>]]></b:skin> .</b><br /><pre data-codetype="CSS" title="CSS"><code class="language-css">#featuredpost {background:#000;float:left;margin:10px 10px 20px 10px; padding:0 0 10px;width:97%; position:relative;color:#eee;}<br />#featuredpost .featured-thumb {float:left; margin:15px; padding:0px;}<br />#featuredpost .container {height:205px; margin:0 10px 0 0;overflow:hidden; position:relative;font-family: Arial;font-size: 13px;font-style: normal;font-variant: normal;font-weight: normal;line-height: 1.3em;}<br />.featuredTitle{padding-top:15px;font:17px Oswald;}<br />.featuredTitle a{color:#f5ff88}<br />.featuredTitle a:hover{color:#c00}</code></pre><br />Keterangan : Background bisa diubah dengan kode warna " <a href="https://maycyber-download.blogspot.co.id/2016/07/kode-warna.html">Klik Disini</a> "<br />background:#000; : Background Featured Post<br />{height:205px; : Ketingian Featured Post<br />width:97% : Lebar Featured Post<br /><br />8. Save Templated!<br />9. Silakan Pratinjau atau bisa langsung lihat Blogger anda^.^<br /><br />Demikian Tips Blogger kali ini, Selamat mencoba dan Terima kasih Telah berkunjung dan membaca Artikel ini. <b>Semoga Bermanfaat!</b><br /><b> </b><br /><b> </b><br /><b> </b><br /><b> </b><br /><b> </b><br /><b> </b><br /><b> </b><br /><b> </b><br /><b> </b></div><b><b></b></b></div>

Diposting oleh Mr Xiulung

Cara Membuat Menu Navigasi Plus Media Sosial, Responsive!

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSO2lbZJdZxrxdhs-4TKFQ3-EcHdmhVEAfaJl01M-NoLvNMcqgqpZzcRiNMrY1_z-Kx8ujGaM8Wu3F9Ha0VmgQORfdSRRq06MivKIUz3wNZJWbxPXeKZDSiR5LWYPBiNraCs3jtn0PJ8Y/s1600/4.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="181" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSO2lbZJdZxrxdhs-4TKFQ3-EcHdmhVEAfaJl01M-NoLvNMcqgqpZzcRiNMrY1_z-Kx8ujGaM8Wu3F9Ha0VmgQORfdSRRq06MivKIUz3wNZJWbxPXeKZDSiR5LWYPBiNraCs3jtn0PJ8Y/s320/4.jpg" width="320" /></a></div>Oke Sobat <a href="http://maycyber-download.blogspot.com/">MayCber-Download</a> . Kemaren lalu saya pernah mempostingkan <a href="https://maycyber-download.blogspot.co.id/2016/07/cara-membuat-menu-navigasi-drop-down.html"><b>Cara membuat menu Navigasi diatas Header Dropdown dan Berbasis Plus Media Sosial</b>.</a> Tapi kalini berbeda, tidak ada menu Dropdownn nya hanya plus media sosial saja. Ini sangat Responsive sekali? Kenapa Responsive? Menu Navigasi ini tidak akan hancur atau berantakan ketika anda sedang melihatnya di smartphone atau tablet. Bisa disebut juga menu navigasi yang akan diposting ini User Freandly. Biasanya menu ini digunakan dipara blogger untuk kolom About, Contact Us, Disclaimer. Menu navigasi ini dapat menyesuaikan pada tampilan desktop atau ditampilan di komputer atau laptop sobat, bisa juga smartphone sobat. Lalu bagaimana cara membuatnya? gampang ikuti tahap-tahap berikut ini.<br /><br />Saya selalu mengingatkan, karena blogger m<a href="http://maycyber-download.blogspot.com/">aycyber-download</a> selalu berikan yang berkualitas. Saya sarankan backup dulu Template anda, karena jika tidak sesuai keinginan menu navigasi ini maka mudah membalikan seperti semula, anda bisa menggunakan Notepad.<br /><br /><b>Cara Pertama :</b><br /><br />1. Masuk ke Blogger - Login.<br />2. Template -> Edit HTML.<br />3. Temukan kode <b><div class='header-wrapper'></b> . Dan letakkan kode dibawah ini tepat dibawah kode <b><div class='header-wrapper'></b> .<br /><span style="color: red;"><b><br /></b></span><span style="color: red;"><b>Catatan : </b><span style="color: black;">Jika kode </span></span><b><div class='header-wrapper'> </b>susah ditemukan, cara Alternatif nya adalah anda temukan dulu kode <b></head> </b>dan letakkan kode dibawah ini tepat dibawah kode<b> </head></b> .<b></b><br />Karena saya kesulitan mencari kode<b> </b><b><div class='header-wrapper'> </b>ketika itu, jadi saya gunakan cara alternatif. <br /><pre data-codetype="HTML" title="HTML"><code class="language-markup"><nav id='menutop'><br /><input type='checkbox'/><br /><label/><br /><ul><br /><li><a href='your-link'>About</a></li><br /><li><a href='your-link'>Contact</a></li><br /><li><a href='your-link'>Sitemap</a></li><br /><li class='sorting-01 facebook'><a href='your-link'><i class='fa fa-facebook fa-lg'/><span class='inv'/></a></li><br /><li class='sorting-02 twitter'><a href='your-link'><i class='fa fa-twitter fa-lg'/><span class='inv'/></a></li><br /><li class='sorting-03 googleplus'><a href='your-link'><i class='fa fa-google-plus fa-lg'/><span class='inv'/></a></li><br /><li class='sorting-06 rss-square'><a href='your-link'><i class='fa fa-rss-square fa-lg'/><span class='inv'/></a></li><br /><li class='sorting-04 youtube'><a href='your-link'><i class='fa fa-youtube fa-lg'/><span class='inv'/></a></li><br /></ul><br /></nav></code></pre>Silakan ganti tulisan Your-Link dengan Link kepunyaan anda<br /><br />4. Copy - Paste kode berikut ini, dan letakkan diatas kode <b></head></b><br /><pre data-codetype="CSS" title="CSS"><code class="language-css"><style><br />#menutop{width:100%;margin:0 auto;height:40px;background:#fff;border-bottom:1px solid #e9e9e9;}<br />#menutop ul,#menutop li{margin:0;padding:0;list-style:none;}<br />#menutop ul{height:40px}<br />#menutop li{float:left;display:inline;position:relative;font-family:&#39;trebuchet MS&#39;;font-size:13px;<br />font-weight:bold;}<br />#menutop a{display:block;line-height:40px;padding:0 14px;text-decoration:none;color:#919392;}<br />#menutop ul li:hover a{color:#666;}<br />#menutop input{display:none;margin:0 0;padding:0 0;width:100%;height:40px;opacity:0;cursor:pointer}<br />#menutop label{font-family:&#39;trebuchet MS&#39;;font-size:30px;font-weight:400;display:none;width:35px;height:40px;line-height:45px;text-align:center;}<br />#menutop label span{font-size:13px;position:absolute;left:35px}<br />#menutop ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#919392}<br />#menutop ul li ul li a{color:#919392;height:40px;line-height:40px;background:#fff;width:100%;}<br />#menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#919392;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;}<br />#menutop li:hover &gt; ul.menux{visibility:visible;opacity:1;top:45px;}<br />#menutop a.dutt{padding:0 27px 0 14px}<br />#menutop a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}<br />#menutop a.dutt:hover::after,#menutop ul li:hover a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}<br />#menutop ul.menux li a{background:#fff;color:#919392;}<br />#menutop ul li ul li a:hover{background:#fcfcfc;color:#8493a0;}<br />#menutop li.facebook {padding:0 5px;}<br />#menutop li.rss-square,#menutop li.facebook,#menutop li.twitter,#menutop li.youtube,#menutop li.googleplus,#menutop li.linkedin{background:#fff;text-align:center;color:#666;float:right;transition:all 0.2s ease-in-out;}<br />#menutop li a.rss-square:hover,#menutop li a.facebook:hover,#menutop li a.twitter:hover,#menutop li a.youtube:hover,#menutop li a.googleplus:hover,#menutop li a.linkedin:hover{color:#8493a0;}<br />#menutop li.rss-square .fa.fa-rss-square,#menutop li.facebook .fa.fa-facebook,#menutop li.twitter .fa.fa-twitter,#menutop li.youtube .fa.fa-youtube,#menutop li.googleplus .fa.fa-google-plus,#menutop li.linkedin .fa.fa-linkedin{color:#919392;transition:all 0.2s ease-in-out;}<br />#menutop li.rss-square:hover,#menutop li.facebook:hover,#menutop li.twitter:hover,#menutop li.youtube:hover,<br />#menutop li.googleplus:hover,#menutop li.linkedin:hover{background:#fcfcfc;color:#8493a0;}<br />#menutop li.rss-square:hover .fa.fa-rss-square{color:#CC6600}<br />#menutop li.facebook:hover .fa.fa-facebook{color:#000099}<br />#menutop li.twitter:hover .fa.fa-twitter{color:#0099FF}<br />#menutop li.youtube:hover .fa.fa-youtube{color:#B00000}<br />#menutop li.googleplus:hover .fa.fa-google-plus{color:#990000}<br />#menutop li.linkedin:hover .fa.fa-linkedin{color:#0066FF}<br />@media screen and (max-width:960px) {<br />#menutop li:hover &gt; ul.menux{display:block;}<br />#menutop ul{border:none;border-bottom:4px solid #e9e9e9;}<br />#menutop{position:relative;border:none;border-bottom:4px solid #e9e9e9;}<br />#menutop ul{background:#fff;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}<br />#menutop ul.menux{width:100%;position:static;border:none}<br />#menutop li{display:block;float:none;width:auto;text-align:left}<br />#menutop li a{color:#666}<br />#menutop li a:hover{background:#f1f1f1;color:#f9f9f9}<br />#menutop li:hover{background:#8493a0;color:#fff;}<br />#menutop a.dutt{font-weight: bold;}<br />#menutop li:hover &gt; a.dutt,#menutop a.dutt:hover{background:#b1b1b1;color:#fff;}<br />#menutop input,#menutop label{display:inline-block;position:absolute;right:0;top:0;}<br />#menutop input:after,#menutop label:after {content:&quot;\f0c9&quot;;font-family:FontAwesome;<br />font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#666;<br />display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;}<br />#menutop input{z-index:4;}<br />#menutop input:checked + label{color:#fff;font-weight:700}<br />#menutop input:checked ~ ul{display:block}<br />#menutop ul li ul li a{width:100%;color:#666;}<br />#menutop ul li ul li a:hover{background:#8493a0;color:#fff;}<br />#menutop ul.menux a{background:#fff;color:#666;}<br />#menutop ul.menux a:hover{background:#8493a0;color:#fff;}<br />#menutop ul.menux li{background:#fff;color:#666;}<br />#menutop ul.menux li:hover{background:#8493a0;color:#fff;}<br />#menutop ul.menux li a{background:#fff;color:#666;}<br />#menutop ul.menux li a:hover{background:#f1f1f1;color:#8493a0;}<br /></style></code></pre>5. Jika sudah, kita masih di kode <b></head></b> . Copy - Paste kode dibawah ini, dan letakkan diatas kode <b></head> . </b><br /><pre data-codetype="Javascript" title="Javascript"><code class="language-javascript"><script type='text/javascript'><br />//<![CDATA[<br />var cb=function(){var e=document.createElement('link');<br />e.rel='stylesheet',e.href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css';<br />var t=document.getElementsByTagName('head')[0];<br />t.parentNode.insertBefore(e,t)},raf=requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame;raf?raf(cb):window.addEventListener('load',cb);<br />//]]></script></code></pre>6. Selesai!<br />7. Silakan lihat Home Page Blogger anda.<br /><br />Intinya begini, ketika saya sedang proses editing coding. Saya kesulitan mencari kode <b><div class='header-wrapper'> . </b>Sampai akhirnya berpikir, kalo menu navigasi kan diatas header blogger, maka kode alternatifnya adalah dibagian<b> </head> . </b>Jika saya meletakan kode yang pertama dibagian<b> </body> </b>maka itu ada dibagian bawah tepatnya dibagian footer dibagian CopyRight, jadi saya pasang kode itu dibagian <b></head></b> Semuaaanya, Alhasilnya berhasil^.^ - <b>Semoga Faham...</b><br /><br />Bagaimana? Mudah bukan, Jika terjadi kesalahan silakan komentar dibawah^.^ <b>Semoga Bermanfaat!</b></div>

Diposting oleh Mr Xiulung