Membuat Related Post Hari Tanggal Jam Sosmed Di Atas Header

Di catatan kali ini saya ingin menulis tentang bagaimana membuat sebuah menu widget yang beraada diatas header dimana terdapat Related Post atau Breakingnews, Hari, Bulan, Tanggal, Jam Dan sebuah widget Sosial Media.

Kebetulan untuk hal ini pada waktu itu saya menemukan inspirasi dari sebuah web template blog QuickMag dan SureMag yang di mana di atas header nya mempunyai tampilan tersebut, Lalu coba saya memodifikasi sedikit untuk kode xml nya agar sesuai dengan template blog saya. Jika kalian mau membuatnya silakan ikuti langkah berikut:

Pertama, Silakan kalian login ke halaman beranda blogger > Pilih Tema > Edit HTML.

Note: Ada baiknya sebelum melakukan edit html silakan kalian download terlebih dahulu template blog kalian dengan klik menu Cadangkan, agar punya backup jika terjadi error dan sebagainya.

Kedua, Silakan kalian cari di kode ]]></b:skin> dengan cara tekan ctrl+F, setelah ketemu silakan kalian copy paste kode di bawa ini tepat di atas kode tersebut.

/*--- Menu Atas --- */
#top-nav{height:30px;background-color:#f0f0f0;font-size:13px;font-weight:500;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
#top-nav ul{float:right;line-height:35px;margin:0}
#top-nav li{position:relative;float:left;display:block;margin:0}
#top-nav a{display:block;height:35px;padding:0 10px;border-right:0px solid #fff;color:#666;font-size: 13px; font-weight: 600;}
#top-nav a:hover{color:#555}
#top-nav ul li ul{display:none;position:absolute;left:-1px;top:30px;z-index:100;background-color:#fff;border:1px solid #fff}
#top-nav .sub-menu li{border-left:none}
#top-nav .sub-menu li:last-child{border-right:none}
#top-nav ul li:hover > ul,#top-nav ul li ul:hover{display:block}
#top-nav ul li ul a{min-width:180px;height:36px;padding:0 13px;transition:all .3s}
#top-nav ul li ul a,#top-nav ul ul .current-menu-item a{border:none;color:#C5C5C5;margin-top:0}
#top-nav ul li ul li{float:none;height:auto;clear:both;margin-left:0;line-height:36px;border-bottom:1px solid #fff}
#top-nav ul li ul li:last-child{border-bottom:none}
.blog-date {float: left; line-height: 35px; margin: 0; font-size:13px;font-weight:600;color: #000;}
.wrapper{width:100%;margin:0 auto}
.blog-date {margin-left:200px;}
#breakingnews {margin-right:15px;height:30px;line-height:30px;overflow:hidden;width:40%;float:left;}
#adbreakingnews li a {color:#54a8d0;transition:all 0.5s ease-in-out;font-weight:600;}
#adbreakingnews {float:left;margin-left:100px;font-weight:600;}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0;line-height:35px;}
#breakingnews .breakhead {position: absolute; display: block; float: left; font-size: 13px; font-weight:600; background:$(main.color); color: black; padding: 2.5px 10px;}
#breakingnews .breakhead:after { content: close-quote; position: absolute; width: 0px; top: 11px; right: -12px; border-bottom: 6px solid rgba(0, 0, 0, 0); border-left: 6px solid $(main.color); border-top: 6px solid rgba(0, 0, 0, 0); border-right: 6px solid rgba(0, 0, 0, 0); }
/*--- End Menu Atas --- */{codeBox}

Ketiga, Agar Tampilan nya menjadi responsive ketika di gunakan di setiap ukuran layar silakan kalian copy paste kode di bawah ini, taruh tepat di atas kode </style>

@media only screen and (max-width:1024px){
#top-nav .wrapper{position:relative}
#top-menu-icon{width:40px;height:30px;float:right;border-right:1px solid #ECECEC;border-left:1px solid #ECECEC;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz-8H_2pGYPhZ13CxlKRfPObUQ7c-4PK8ygkMgjSN6QV4uZoOK32XlCl-TqoTdttHJY_7zliayYGcJO-ghy8sdLb7No50jK1Qf4UaaG6TnJd2FVwwfjKqKEnenehIjnQtn9u3DuyFqvYyU/s1600/top-menu-icon.png) no-repeat;cursor:pointer;background:all .3s}
#top-menu-icon:hover{background-color:#fff}
#top-nav ul{position:absolute;right:0;top:30px;display:none;height:auto;padding:10px 0;background-color:#FCFCFC;border:1px solid #f2f2f2;z-index:1000}
#top-nav li{float:none;clear:both;line-height:26px}
#top-nav li a{height:auto;padding:0 12px;border-right:none}
#top-nav .menu li ul{position:static;float:none;display:block!important;background-color:transparent;border:none;padding:0 0 0 10px}
#top-nav .menu li ul li{border:none;line-height:26px}
#top-nav ul li ul a{height:auto}
}
@media only screen and (max-width:768px){
#breakingnews, .header17, .viewall, .banner160 {display:none;}
.blog-date {margin-left:10px;}
}
@media only screen and (max-width:480px){
#breakingnews, .header17, .viewall, .banner160 {display:none;}
.blog-date {margin-left:10px;}
}
@media only screen and (max-width:320px){
#breakingnews, .header17, .viewall, .banner160 {display:none;}
.blog-date {margin-left:10px;}
}{codeBox}

Keempat, Silakan cari kode <body> biasanya berbarengan ada di bawah kode </head>, jika sudah ketemu silakan copy paste kode di bawa ini tempat di bawah kode <body> atau bisa juga di atas kode <div class='row' id='header-wrappers'> cari yang mirip:

<nav id='top-nav'>
<div class='wrapper'>
<div class='animated bounceInLeft' id='breakingnews'><span class='breakhead'><i class='fa fa-refresh fa-spin'/> Related Post :</span>
<div id='adbreakingnews'>Loading...</div></div>
<div class='blog-date'>
<script language='Javascript'>
var dayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");

var monName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

var now = new Date();

document.write("Today is " + dayName[now.getDay()] + ", " + monName[now.getMonth()] + " " + now.getDate() + ".");
</script> | <script>
atoj = new Date();

atoj1 = atoj.getHours();

atoj2 = atoj.getMinutes();

atoj3 = atoj.getSeconds();

if (0 == atoj1) {
atoj4 = " AM";
atoj1 = 12;
} else if (atoj1 <= 11) atoj4 = " AM"; else if (12 == atoj1) {
atoj4 = " PM";
atoj1 = 12;
} else if (atoj1 >= 13) {
atoj4 = " PM";
atoj1 -= 12;
}

if (atoj2 <= 9) atoj2 = "0" + atoj2;

document.write("" + atoj1 + ":" + atoj2 + ":" + atoj3 + atoj4);
</script>
</div>
<div class='menu-top-menu-container'>
<ul class='menu' id='menu-top-menu'>
<li class='social-icon'><a href='#' target='_blank'><i class='fa fa-facebook'/></a></li>
<li class='social-icon'><a href='#' target='_blank'><i class='fa fa-twitter'/></a></li>
<li class='social-icon'><a href='#' target='_blank'><i class='fa fa-youtube-play'/></a></li>
<li class='social-icon'><a href='#' target='_blank'><i class='fa fa-instagram'/></a></li>
<li class='social-icon'><a href='#' target='_blank'><i class='fa fa-rss'/></a></li>
<li class='social-icon'><a href='#' target='_blank'><i class=' fa fa-envelope'/></a></li>
</ul></div>
</div>
</nav>{codeBox}

Kelima, Untuk melengkapi semua kode di atas kita tambahkan beberapa kode javascript di bawah ini untuk mengatur tampilan Related Post atau Breakingnews, Hari, Bulan, Tanggal, Jam Dan sebuah widget Sosial Media copy paste kode di bawah taruh tepat di atas </body>

<script type='text/javascript'>
//<![CDATA[

jQuery(document).ready(function($){

"use strict";

// Attach + To Top Menu
$('#top-nav .social-icon-has-children > a, #main-nav ul li ul .social-icon-has-children > a').append(' +');

// Attach Arrow To Main Menu
$('#main-nav .social-icon-has-children > a').append('<span class="menu-arrow"></span>');

// Prepend Menu Icons
$('#logo').after('<div id="menu-icon"></div>');

$('#top-nav .wrapper').append('<div id="top-menu-icon"></div>');

// Toggle Nav
$('#menu-icon').on('click', function(){
$('#main-nav').slideToggle(250);
$(this).toggleClass('active');
});

$(window).resize(function(){
var w = $(window).width();
var navDisplay = $('#main-nav');
if(w > 1000 && navDisplay.is(':hidden')) {
navDisplay.removeAttr('style');
}
});

$('#top-menu-icon').on('click', function(){
$('#top-nav ul').slideToggle(250);
$(this).toggleClass('active');
});

$(window).resize(function(){
var w = $(window).width();
var navDisplay = $('#top-nav ul');
if(w > 1000 && navDisplay.is(':hidden')) {
navDisplay.removeAttr('style');
}
});

});
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>No result!</span>")},error:function(){$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>{codeBox}