thumbnail

Cara Membuat Menu Responsive di Atas Header Blog plus Media Sosial

Cara Membuat Menu Responsive di Atas Header Blog plus Media Sosial
Cara Membuat Menu Responsive di Atas Header Blog plus Media Sosial

NAVIGASI menu blog umumnya hanya satu, yaitu di bawah header/logo blog.

Kita bisa menambahnya dengan memasang navigasi menu di atas header (top navbar) plus link dan icon media sosial.

Berikut ini Cara Membuat Menu Responsive di Atas Header Blog plus Media Sosial. Lihat Demo.

1. Template > Edit HTML
2. Copas kode CSS topmenu berikut ini di atas kode ]]></b:skin>

/*Topmenu plus Social Icon */
.menu-wrapper {background:#fff;position:relative;z-index:96;overflow:hidden;margin:0 auto;padding:5px;border-bottom:1px dashed #eee}
.top-menu {display:block;margin:0 auto;float:left;padding:0;width:100%;background:transparent;border:none;}
.top-menu ul {width:100%;padding:0;margin:0;text-align:left;}
.top-menu li {list-style-type:none;float:left;padding:0;margin:0;}
.top-menu li a {position:relative;font-size:14px;font-weight:400;background-color:transparent;color:#666;display:block;margin:0;padding:8px 12px 8px 0;line-height:100%;transition:color 0.3s;}
.top-menu ul li a:active, .top-menu ul li.highlight a {line-height:100%;text-decoration:none;}
.top-menu ul li a:hover {background:#ef4824;color:#fff;text-decoration:none;}
.top-menu li.socialwrap {float:right;}
.top-menu li.socialwrap a i{text-align:center;color:##666;transition:initial;}
.top-menu li.socialwrap a:hover{background:#ef4824;color:#fff;}
.top-menu li.socialwrap.pinterest {border-right:0;}
.top-menu a#pull {display:none;}
.top-menu li .fa {font-size:16px;}
@media only screen and (max-width:768px) {
.menu-top li ul {background:#222; border:none; box-shadow:none; }
.menu-wrapper {margin:0;border:1px solid #e6e6e6;background:#fff;}
.top-menu {display:block;width:100%;padding:0}
.top-menu ul {text-align:center;}
.top-menu ul {display:none;height:auto;}
.top-menu a#pull{color:#c00;display:inline-block;font-size:14px;font-weight:700;padding:10px;position:relative;text-align:left;width:100%}
.top-menu a#pull:before{content:"\f03a";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;font-size:20px;color:#c00;display:inline-block;position:absolute;right:15px;top:5%;margin-right:10px;line-height:30px;}
.top-menu a#pull:hover{background:transparent}
.top-menu li {display:block;width:50%;text-align:left;border-right:none;}
.top-menu li a {padding:15px 20px;display:block;color:#616161}
.top-menu li a:hover, nav a:active {background:#f0f0f0;border:none;color:#666;}
.top-menu ul li a:hover {background:#ef4824;color:#fff;}
.top-menu li.socialwrap {float:left;}
.top-menu li.socialwrap.twitter {border-left:0;}
.active {display:block;}
}
@media only screen and (max-width:640px) {
.menu-wrapper {margin:0 auto 20px auto;}
}
@media only screen and (max-width:480px) {
.top-menu li {display:block;width:100%;text-align:left;border-right:none;}
}
3. Copas kode JavaScript navigasi menu di atas header blog ini di atas kode </head> atau </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var str=location.href.toLowerCase();$('.top-menu ul li a').each(function(){if(str.indexOf(this.href.toLowerCase())>-1){$("li.highlight").removeClass("highlight");$(this).parent().addClass("highlight")}})})
$(function(){var pull=$('#pull');menu=$('.top-menu ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&&menu.is(':hidden')){menu.removeAttr('style')}})});
//]]>
</script>

4. Copas kode HTML topbar menu blogger berikut ini di bawah kode <body> atau di atas kode <div id='header'> atau <div clas='header'>

<div class='menu-wrapper'>
<nav class='top-menu'>
<ul>
     <li><a href='/p/about.html' title='About Us'>About</a></li>
     <li><a href='/p/sitemap.html' title='Our Sitemap'>Sitemap</a></li>
     <li><a href='/p/kontak.html' title='Contact us'>Contact</a></li>
     <li><a href='/p/disclaimer' title='Disclaimer'>Disclaimer</a></li>
<li class='socialwrap pinterest'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-pinterest fa-fw'/></a></li>
<li class='socialwrap youtube'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-youtube fa-fw'/></a></li>
<li class='socialwrap rss'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-rss fa-fw'/></a></li>
<li class='socialwrap google'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus fa-fw'/></a></li>
<li class='socialwrap twitter'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter fa-fw'/></a></li>
<li class='socialwrap facebook'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook fa-fw'/></a></li>
            </ul>
         <a href='#' id='pull'>MENU</a>
          </nav></div>

5. Save!

Jangan lupa isi link menu dan url medsosnya. Demikian Cara Membuat Menu Responsive di Atas Header Blog plus Media Sosial.*


CB Blogger
New Johny WussUpdated: November 20, 2016
thumbnail

Lorenzo Juara MotoGP Valencia Spanyol 2016

Lorenzo Juara MotoGP Valencia Spanyol 2016
JORGE Lorenzo Juara MotoGP Valencia Spanyol 2016. 

Dalam race GP Valencia Minggu (13/11/2016), Lorenzo yang start di posisi terdepan tampil prima.

Pebalap Movistar Yamaha yang musim depan memperkuat Ducati Team ini langsung memimpin balapan tanpa pernah disalip pebalap lain hingga finis.

Valentino Rossi finis keempat. Ia kalah cepat dari Marc Marquez dan Andrea Iannone yang finisi di posisi dua dan tiga.

Hasil MotoGP Valencia Spanyol 2016
1. Jorge Lorenzo ESP Movistar Yamaha MotoGP (YZR-M1) 45m 54.228s
2. Marc Marquez ESP Repsol Honda Team (RC213V) 45m 55.413s
3. Andrea Iannone ITA Ducati Team (Desmosedici GP) 46m 0.831s
4. Valentino Rossi ITA Movistar Yamaha MotoGP (YZR-M1) 46m 1.896s
5. Maverick Viñales ESP Team Suzuki Ecstar (GSX-RR) 46m 4.838s
6. Pol Espargaro ESP Monster Yamaha Tech 3 (YZR-M1) 46m 12.606s
7. Andrea Dovizioso ITA Ducati Team (Desmosedici GP) 46m 12.645s
8. Aleix Espargaro ESP Team Suzuki Ecstar (GSX-RR) 46m 12.906s
9. Bradley Smith GBR Monster Yamaha Tech 3 (YZR-M1) 46m 20.221s
10. Alvaro Bautista ESP Factory Aprilia Gresini (RS-GP) 46m 29.293s
11. Hector Barbera ESP Avintia Racing (Desmosedici GP14.2) 46m 30.653s
12. Danilo Petrucci ITA Octo Pramac Yakhnich (Desmosedici GP15) 46m 36.643s
13. Stefan Bradl GER Factory Aprilia Gresini (RS-GP) 46m 44.051s
14. Scott Redding GBR Octo Pramac Yakhnich (Desmosedici GP15) 46m 46.263s
15. Jack Miller AUS Estrella Galicia 0,0 Marc VDS (RC213V) 46m 49.853s
16. Eugene Laverty IRL Aspar MotoGP Team (Desmosedici GP14.2) 46m 52.482s
17. Tito Rabat ESP Estrella Galicia 0,0 Marc VDS (RC213V)* 46m 52.783s
18. Loris Baz FRA Avintia Racing (Desmosedici GP14.2) 47m 0.392s

Gagal FinisMika Kallio FIN Red Bull KTM Factory Racing (RC16) DNF
Cal Crutchlow GBR LCR Honda (RC213V) DNF
Dani Pedrosa ESP Repsol Honda Team (RC213V) DNF
Yonny Hernandez COL Aspar MotoGP Team (Desmosedici GP14.2) DNF

crash.net
CB Blogger
New Johny WussUpdated: November 13, 2016
thumbnail

Swansea City vs Manchester United 1-3 Video Gol & Full Match Highlights

Swansea City vs Manchester United 1-3 Video Gol & Full Match Highlights
Swansea City vs Manchester United 1-3 Video Gol & Full Match Highlights.

Manchester United kembali ke jalur kemenangan di Liga Inggris. Bertanding di kandang Swansea City, Liberty Stadium, Minggu (6/11/2016), MU menang 3-1.

Tiga gol kemenangan United dicetak Paul Pogba (15') dan Zlatan Ibrahimovic (21', 33').

Gol balasan Swansea City diciptakan Mike van der Hoorn (69'). 

Dengan kemenangan ini MU naik ke posisi enam klasemen sementara di bawah Liverpool, Chelsea, Manchester City, Arsenal, dan Tottenham Hotspur.

Swansea City vs Manchester United 1-3 Video Gol & Full Match Highlights.



Susunan Pemain
Swansea City:
Fabianski; Rangel, Van der Hoorn, Mawson, Kingsley; Routledge (Modou Barrow 46'), Ki, Britton (Leroy Fer 70'), Sigurdsson; Borja, Llorente (Jefferson Montero 46').

Manchester United: David De Gea; Ashley Young, Phil Jones, Marcos Rojo, Matteo Darmian; Michael Carrick, Marouane Fellaini; Juan Mata (Jesse Lingard 81'), Paul Pogba (Fosu-Mensah 90'), Wayne Rooney (Morgan Schneiderlin 89'); Zlatan Ibrahimovic.


CB Blogger
New Johny WussUpdated: November 06, 2016
thumbnail

Melihat Foto Selfie di Media Sosial Pengaruhi Kebahagiaan Diri Sendiri

Melihat Foto Selfie di Media Sosial Pengaruhi Kebahagiaan Diri Sendiri
JANGAN terlalu sering melihat foto selfie (swafoto) orang lain di media sosial karena akan mempengaruhi kebahagiaan diri sendiri.

Studi baru menemukan, swafoto tak hanya memberi dampak psikologis untuk pelakunya, tetapi juga terhadap teman-temannya di media sosial yang mengikuti postingnya.

Menurut peneliti dari Penn State University, terlalu sering melihat selfie orang lain di media sosiaknya berhubungan dengan penghargaan diri dan kepuasan hidup lebih rendah.

Survei dilakukan terhadap 225 pengguna media sosial dengan usia rata-rata 33,80 dari yang aktif di Facebook. Mereka juga menggunakan Instagram, Twitter, Snapchat, Tumblr, dan Tinder.

"Kita cenderung membandingkan diri kita dengan orang lain ketika melihat foto-foto yang sering diedit dengan teliti itu," kata para peneliti sebagaimana dikutip The Science Explorer.

"Hal ini dapat menimbulkan perasaan kesepian, terkecualikan atau kecewa terhadap hidup diri sendiri."

Peneliti tidak menemukan hubungan antara frekuensi pengunggahan dan penghargaan dan kepuasan diri. Riset lain menemukan, upaya membuat foto sempurna dapat merusak kebahagiaan di kehidupan nyata.

Dikemukakan, semakin banyak orang melihat selfie orang lain, maka semakin rendah kadar penghargaan diri dan kepuasan hidup mereka.

"Orang biasanya mengunggah selfie ketika mereka bahagia atau bersenang-senang," kata salah satu peneliti, Ruoxu Wang.

"Hal ini mudah membuat orang lain melihat foto-foto itu dan berpikir hidupnya tak sebahagia orang lain," katanya.

Foto Selfie
Hasil penelitian yang diterbitkan di Journal of Telematics and Informatics ini juga menemukan perbedaan antara "selfie" dan "groupie" (gaya selfie yang menampilkan lebih dari satu orang alias foto rame-rame).

Rata-rata melihat foto group tampaknya mendongkrak penghargaan diri dan kepuasan para pesertanya.

Itu mungkin karena pemirsanya mungkin termasuk dalam kelompok ini dan memperkuat rasa komunitas dan kebersamaan.

Hasil penelitian ini pun menemukan, hanya dengan menonton unggahan orang lain di media sosial, tak memencet tombol like atau mengunggah di akun diri sendiri, berdampak nyata bagaimana kita memandang diri sendiri.

Baca juga: 95% Konten Media Sosial adalah Sampah

CB Blogger
New Johny WussUpdated: November 03, 2016
thumbnail

95 Persen Konten Media Sosial adalah Sampah

95 Persen Content Media Sosial adalah Sampah
ISI media sosial 95% sampah. Konten media sosial adalah informasi yang belum dapat dikategorikan sebagai berita, sehingga menyebarluaskannya dibutuhkan sebuah kehati-hatian. 

Demikian dikemukakan President of Southeast Asian Press Alliance (SEAPA), Eko Maryadi, dalam seminar Peningkatan Profesionalisme Media Massa dalam Meliput Isu Terorisme di Ambon, Maluku, Kamis (3/11).

Melalui siaran pers yang dikutip Antara, Eko mendorong awak media dan masyarakat untuk lebih berhati-hati dalam menjadikan content media sosial sebagai bahan pemberitaan.

"Bisa saya katakan 95 persen content media sosial adalah sampah," tegasnya.

"Menjadi persoalan karena kebiasaan masyarakat kita begitu menerima broadcast di Whatsapp, menganggapnya menarik dan menyebarluaskan. Padahal itu informasi yang mentah yang belum terverifikasi kebenarannya," tegasnya.

Eko meminta awak media melakukan verifikasi ketat etika akan menjadikan konten media sosial sebagai bahan pemberitaan. 

"Chek dan rechek mutlak dilakukan secara ketat. Jangan karena alasan suka dan percaya yang mengirimkan orang tenar, kita (wartawan) langsung memberitakannya," tandas Eko. 

Mantan jurnalis di beberapa media asing tersebut juga mengatakan, media sosial saat ini paling banyak diakses masyarakat,  bahkan mengalahkan media massa pers. 

"Nyaris semua masyarakat menggunakan gadget yang di dalamnya ada aplikasi sosial media. Sekali lagi, hati-hati menyikapi dan menyebarluaskan content yang ada di media sosial," jelas Eko.

Baca Juga: Melihat Foto Selfie di Media Sosial Pengaruhi Kebahagiaan

CB Blogger
New Johny WussUpdated: November 03, 2016
thumbnail

Race MotoGP Malaysia: Dovizioso Start Terdepan, Rossi Kedua

Race MotoGP Malaysia: Dovizioso Start Terdepan, Rossi Kedua
Dovizioso Pole Position Race MotoGP Malaysia.*
Velentino Rossi Start di Posisi Kedua dalam Race MotoGP Malaysia. Dovizioso Pole Position.

MotoGP -- Pebalap Ducari, Andrea Dovizioso, start terdepan dalam race MotoGP Malaysia di Sirkuit Sepang, Minggu (30/10/2016) Pkl. 14.00 WIB.

Di sesi kualifikasi Sabtu (29/10/2016), Dovizioso menjadi pebalap tercepat dengan catatan waktu 2 menit 11.485 detik yang mengantarkannya meraih pole position.

Dovizioso berhasil mengungguli duo Yahama, Valentino Rossi dan Jorge Lorenzo, yang menempati posisi start kedua dan ketiga. Juara dunia Marc Marquez di posisi keempat.

Cal Crutchlow (LCR Honda) yang sempat memimpin di kualifikasi pertama (Q1), tidak bisa mempertahankan posisinya setelah terjatuh pada babak kualifikasi kedua (Q2). Ia pun harus puas start dari posisi kelima.

Hasil Kualifikasi MotoGP Sepang: Posis Start Balapan Minggu 30/10/2016

1. Andrea Dovizioso ITA Ducati Team (Desmosedici GP) 2m 11.485s
2. Valentino Rossi ITA Movistar Yamaha MotoGP (YZR-M1) 2m 11.731s +0.246s
3. Jorge Lorenzo ESP Movistar Yamaha MotoGP (YZR-M1) 2m 11.787s +0.302s
4. Marc Marquez ESP Repsol Honda Team (RC213V) 2m 11.874s +0.389s
5. Cal Crutchlow GBR LCR Honda (RC213V) 2m 12.558s +1.073s
6. Andrea Iannone ITA Ducati Team (Desmosedici GP) 2m 12.598s +1.113s
7. Aleix Espargaro ESP Team Suzuki Ecstar (GSX-RR) 2m 12.869s +1.384s
8. Maverick Viñales ESP Team Suzuki Ecstar (GSX-RR) 2m 12.981s +1.496s
9. Alvaro Bautista ESP Factory Aprilia Gresini (RS-GP) 2m 13.325s +1.840s
10. Loris Baz FRA Avintia Racing (Desmosedici GP14.2)2m 13.452s +1.967s
11. Pol Espargaro ESP Monster Yamaha Tech 3 (YZR-M1) 2m 13.707s +2.222s
12. Hector Barbera ESP Ducati Team (Desmosedici GP) 2m 13.973s +2.488s 
13. Bradley Smith GBR Monster Yamaha Tech 3 (YZR-M1) 2m 12.898s 303km/h
14. Jack Miller AUS Estrella Galicia 0,0 Marc VDS (RC213V) 2m 12.907s 302km/h
15. Danilo Petrucci ITA Octo Pramac Yakhnich (Desmosedici GP15)2m 13.776s 297km/h
16. Stefan Bradl GER Factory Aprilia Gresini (RS-GP) 2m 13.850s 292km/h
17. Hiroshi Aoyama JPN Repsol Honda Team (RC213V) 2m 14.179s 291km/h
18. Scott Redding GBR Octo Pramac Yakhnich (Desmosedici GP15)2m 14.433s 295km/h
19. Eugene Laverty IRL Aspar MotoGP Team (Desmosedici GP14.2) 2m 14.769s 282km/h
20. Yonny Hernandez COL Aspar MotoGP Team (Desmosedici GP14.2) 2m 14.786s 292km/h
21. Tito Rabat ESP Estrella Galicia 0,0 Marc VDS (RC213V)* 2m 15.894s 290km/h

Crash

CB Blogger
New Johny WussUpdated: October 29, 2016
thumbnail

Manchester United vs Manchester City 1-0 Video Gol & Highlights

Manchester United vs Manchester City 1–0 Video Gol Highlights & Full Match

MANCHESTER United menyingkirkan Manchester City di ajang Piala Liga Inggris. Dalam pertandingan babak 16 besar di Old Trafford, Rabu (26/10/2016), MU menang 1-0 lewat gol tunggal Juan Mata.


Manchester United vs Manchester City Highlights and Full MatchCompetition: League Cup
Date: 26 October 2016
Stadium: Old Trafford (Manchester)

Susunan Pemain
Manchester United:
De Gea; Valencia, Rojo, Blind, Shaw; Carrick, Herrera; Mata (Schneiderlin 72'), Pogba, Rashford (Lingard 81'); Ibrahimovic.

Manchester City: Caballero; Maffeo, Otamendi, Kompany (Kolarov 46'), Clichy; Serrano, Fernando, Nolito (Aguero 70'), Navas; Sane (Sterling 63'), Iheanacho.*

CB Blogger
New Johny WussUpdated: October 26, 2016
thumbnail

Tiga Media Sosial Terpopuler di Indonesia: Facebook, Twitter, Instagram

Tiga Media Sosial Terpopuler di Indonesia: Facebook, Twitter, Instagram
Tiga Media Sosial Terpopuler di Indonesia: Facebook, Twitter, Instagram

ADA tiga media sosial paling banyak digunakan di Indonesia, yaitu Facebook, Twitter, dan Instagram. Ini artinya, jangan sampai kita tidak memiliki akun ketiga medsos ini biar "gaul" di dunia maya.

Menurut hasil survei terbaru Penyelenggara Jasa Internet Indonesia (APJII) dan Lembaga Polling Indonesia (LPI), Facebook, Instagram, dan YouTube menjadi tiga media sosial favorit pengguna Indonesia dengan rincian masing-masing Facebook 71,6 juta pengguna, Instagram 19,9 juta pengguna, dan Twitter 14,5 juta pengguna.
 
Hasil survei juga menunjukkan, jumlah total pengguna Internet di Indonesia mencapai 132,7 juta. Saat ini total penduduk di Indonesia sebanyak 256,2 juta orang.

Jumlah pengguna Internet di Indonesia naik 51,8 persen dibanding 2014. Tahun 2014, baru ada 88,1 juta pengguna yang terhubung ke Internet. 

Peningkatan jumlah pengguna Internet disebabkan oleh pembangunan infrastruktur yang merata dan penetrasi perangkat mobile yang banyak dan terjangkau.

Sebanyak 31,3 juta pengguna Internet di Indonesia menggunakan Internet untuk mendapatkan update informasi dan 27,6 juta lainnya menggunakan Internet untuk mendukung aktivitas pekerjaan, 17,9 juta untuk mengisi waktu luang, 13,6 juta untuk bersosialisasi, dan 12,2 juta untuk pendidikan.

Hasil survei juga menunjukkan, rata-rata pengakses Internet di Indonesia menggunakan perangkat genggam (mobile devuces/smartphone). 

Hasil survei terakhir itu menunjukkan pentingnya blog atau situs dengan desain responsive alias mobile friendly. (detik/merdeka).*

CB Blogger
New Johny WussUpdated: October 24, 2016

Follow & Get Update by Email

CB