STRATEGY & CREATIVITY

Muhammad Syafi'i Tampubolon Creator.

HANYA SEBUAH KARYA

Bukanlah sebuah kenaifan dalam menggoreskan pena jika tidak engkau temukan yang engkau cari, tinggalkan dengan senyuman khasmu.

Mega menu sendiri adalah sebuah menu yang terdiri dari beberapa bagian-bagian sub menu, biasanya saat hendak kita klik atau dihover hanya menampilkan sebuah sub menu dari item kategori yang dipilih, tetapi apa bila banyak tentu sedikit menggangu dalam mencari bagian kategori yang dicari, maka dari itu jika dibuat mega menu tentu akan cukup membantu, untuk membuatnya cukup sederhana saya menggunakan bootstrap lalu tinggal ditambahkan code sedikit penyesuain ,dimana sahabat bisa dapatkan langsung pada website bootstrap. Oke jangan kemana-mana simak langkah-langkahnya. Dalam pembuatan mega menu ini bisa memakai class navbar yang tersedia di bootstrap , jadi pada dropdown kita tambahkan beberapa submenu terlebih dahulu atau sub menu kategori dropdownnya, dan ketika kita klik ke menu yang ada dropdown kategorinya, dia akan muncul mega menu yang dibuat, seperti itu, oke langsung saja perhatikan code berikut .

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<title>Membuat Mega Menu Dengan Bootstrap 4</title>
</head>

<body>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!doctype html>

<html>

<head>

<title>Membuat Mega Menu Dengan Bootstrap 4</title>

</head>

<body>

</body>

</html>

kita siapkan template dari bootstrap dahulu lalu selanjutnya copy class navbar Bootstrap seperti dibawah ini:

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link text-white" href="#">newsPopuler <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-white" href="#">newsFood</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          newsSports
        </a>
        <div class="dropdown-menu mega-menu" aria-labelledby="navbarDropdown">
            <div class="row">
            	<div class="col-md-3">
            		<img src="football2.jpg" alt="football" class="img-fluid">
            		<h4 style="color: orangered;text-align: center;">Football Boys</h4>
            		<p>Ultimatch Max Football</p>
            	</div>
            	<div class="col-md-3">
            		<p><strong class="sub-menu-heading">Jersey Football</strong></p>
            		<p><a href="#">Jersey Football Home</a></p>
            		<p><a href="#">Jersey Football Away</a></p>
            		<p><a href="#">Jersey Football 2nd</a></p>
            		<p><a href="#">Jersey Football 3rd</a></p>
            	</div>
              <div class="col-md-3">
                <p><strong class="sub-menu-heading">Games Items</strong></p>
                <p><a href="#">Item Game Boy</a></p>
                <p><a href="#">Item Game Girl</a></p>
                <p><a href="#">Item Game Sport</a></p>
                <p><a href="#">Item Game Adventure</a></p>
              </div>
              <div class="col-md-3">
                <p><strong class="sub-menu-heading">Football Seri</strong></p>
                <p><a href="#">Item Football Seri 1</a></p>
                <p><a href="#">Item Football Seri 2</a></p>
                <p><a href="#">Item Football Seri 3</a></p>
                <p><a href="#">Item Football Seri 4</a></p>
              </div>
            </div> 
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-warning my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>


<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="image-2.jpeg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="image-5.jpeg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="image-1.jpeg" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

<a class="nav-link text-white" href="#">newsPopuler <span class="sr-only">(current)</span></a>

</li>

<a class="nav-link text-white" href="#">newsFood</a>

</li>

newsSports

</a>

<h4 style="color: orangered;text-align: center;">Football Boys</h4>

<p>Ultimatch Max Football</p>

</div>

<p><strong class="sub-menu-heading">Jersey Football</strong></p>

<p><a href="#">Jersey Football Home</a></p>

<p><a href="#">Jersey Football Away</a></p>

<p><a href="#">Jersey Football 2nd</a></p>

<p><a href="#">Jersey Football 3rd</a></p>

</div>

<p><strong class="sub-menu-heading">Games Items</strong></p>

<p><a href="#">Item Game Sport</a></p>

<p><a href="#">Item Game Adventure</a></p>

</div>

<p><strong class="sub-menu-heading">Football Seri</strong></p>

<p><a href="#">Item Football Seri 1</a></p>

<p><a href="#">Item Football Seri 2</a></p>

<p><a href="#">Item Football Seri 3</a></p>

<p><a href="#">Item Football Seri 4</a></p>

</div>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

<button class="btn btn-outline-warning my-2 my-sm-0" type="submit">Search</button>

</form>

</div>

</nav>

</ol>

</div>

</div>

</div>

<span class="sr-only">Previous</span>

</a>

</a>

</div>

Dan jangan lupa tambahkan style CSS untuk memerikan style pada bagian mega menu seperti code dibawah ini

.mega-menu{width: 900px; overflow: hidden; padding: 10px;}
.mega-menu a{text-decoration: none; color: cadetblue;}
.mega-menu .sub-menu-heading{ color: darkcyan;}
@media(max-width:500px){
	.mega-menu{width: 300px;}
}

1

2

3

4

5

6

.mega-menu{width: 900px; overflow: hidden; padding: 10px;}

.mega-menu a{text-decoration: none; color: cadetblue;}

.mega-menu .sub-menu-heading{ color: darkcyan;}

@media(max-width:500px){

.mega-menu{width: 300px;}

}

Jadi code diatas terdapat dropdown yang saya buat ada col-md-3 nah itu sebagai mega menu yang ditampilkan, untuk slider disini saya buat hanya sebagai tambahan saja, jika sahabat tidak ingin menggunakan tidak perlu dicantumkan. Baiklah jika sudah coba buka pada browser masing-masing apakah sudah seperti pada tampilan berikut ini.

Demikian saya rasa cukup sampai disini dalam belajar tentang Cara Membuat Mega Menu Dengan Bootstrap, sampai jumpa pada artikel berikutnya.

terimakasih.

Nah, kali ini Bapak Baasya akan memberikan sedikit tips belajar mengenal dan bahkan bisa menuliskannya serta menamainya, dan adapun metode ini biasanya bapak Syafii bapaknya Baasya gunakan untuk mengajari para Muallaf, karena para muallaf itu sebulan sudah bisa baca tulis Al Qur'an, jadi, Bapaknya Baasya posting juga, sebab suatu hari siapa tahu baasay memerlukannya, selama blog ini belum di hapus oleh Mbah Google.

Adapun fortmanya dalam bentuk PDF, insya Allah Bapaknya Baasya sudah menghalalkannya kepada orang-orang yang membutuhkannya dan tidak ada istilah tanpa terkecuali.

Bapaknya Baasya dulu belajar baca tulis Al Qur'an tidak ada gurunya, artinya otodidak.

Wah-wah, bapaknya Baasya hebat yah, ga juga sih, memang begitu perjalanannya, kebanyak dari hasil otodidak semua, baik itu ilmu komputer dan lain sebagianya.

Nah Link Dibawah ini dapat di download.

DOWNLOAD

Hey sobat Baasya, kali ini saya akan memberikan sebuah cara bagaimana caranya untuk membuat sebuah tab baru menjadi terbuka otomatis ketika kita atau orang lain membuka sebuah link di dalam blog yang kita miliki. Mungkin ini merupakan hal yang banyak di pertanyakan oleh para blogger karena untuk membuat sebuah link menuju dengan otomatis new tab dengan mudah biasanya di lakukan secara manual namun dengan cara ini seluruh link tujuan yang anda miliki pada blog anda bisa menjadi auto new tab alias buka tab baru secara otomatis.

Membuat one klik link one open new tab dapat menjadi sebuah solusi bagi anda yang merasa bahwa bounce rate pada blog anda sangat besar karena dengan cara ini anda bisa memiliki pengunjung yang tidak terlalu cepat meninggalkan blog anda terutama pada blog yang berhubungan dengan download. Oke bagi anda yang penasaran dengan cara bagaimana membuat automatis buka tab baru bisa simak pembahasan berikut ini.

1. Buka blog yang anda miliki.

2. Lalu anda masuk pada menu "Template" dan klik "Edit HTML"

3. Cari kode "</head>" (gunakan ctrl+f untuk mempermudah pencarian).

4. Jika sudah ketemu maka anda bisa letakan kode yang ada di bawah ini tepat berada di Atas kode </head> tadi.

5. Terakhir Simpan.

Sebenarnya ada cara lain untuk membuat new tab pada klik link tertentu yaitu dengan cara manual, caranya anda bisa tambahkan kode (terget="_blank") pada sebuah coding hyperlink pada blog anda Contohnya.

Link awal : <a href="blogsejutaumat.com">Blog Sejuta Umat</a>

Dengan New Tab : <a href="blogsejutaumat.com" target="_blank">Blog Sejuta Umat</a>

Oke mungkin itu saja yang bisa saya berikan mengenai artikel ini, semoga dengan apa yang sudah saya berikan ini dapat bermanfaat bagi Anda. Jangan lupa untuk like dan follow akun kami untuk mendapatkan info serta update terbaru dari kami. Jika ada Kesalahan atau ada Pertanyaan serta Tambahan bisa isi pada kolom komentar anda. Terimakasih.

Apa itu daftar isi atau table of content?

Daftar Isi atau Table of Content (TOC) adalah gambaran umum isi tulisan berupa link subjudul (subheading) yang ada di artikel dalam bentuk sebuah tabel.

Karenanya, TOC ini hanya bisa diterapkan di postingan panjang (long post), minimal ada dua subjudul dengan heading tags H3.

Lebih jelasnya, lihat demo daftar isi postingan blog.

Berikut ini screen shot-nya.

Di blog selfhosted WordPress, untuk memasang daftar isi ini sangat mudah. Kita tinggal memasang plugin, misalnya Table of Content Plus.

Plugin ini akan otomatis menampilkan daftar isi, diambil dari subjudul atau heading tags (h2/h3) yang ada dalam tulisan. Contohnya di postingan Jenis-Jenis Opini di Media Massa. Berikut ini tangkapan layarnya:

Cukup jelas ya, apa itu Daftar Isi atau Table of Content (TOC) yang dimaksud dalam postingan ini. Live demonya juga ada di postingan ini. Lihat lagi tuh, ada di atas.

Fungsi Daftar Isi

Buat apa memasang Daftar Isi atau TOC di postingan blog?

Daftar Isi akan membuat postingan lebih ramah pengguna (user friendly). TOC ini melibatkan pembaca lebih banyak dengan menyediakan lebih banyak aksesibilitas dan navigasi yang lebih baik.

Menurut Pro Blogger Tips, Google lebih menyukai konten berkualitas tinggi yang terorganisir dan diformat dengan baik. Menambahkan elemen seperti tabel, bagian bernomor, dan daftar isi atau TOC adalah bagian dari upaya untuk mendapatkan peringkat tinggi di halaman hasil pencarian (SERP).

Muncul tepat di atas awal posting an atau di bagian ata stulisan, daftar bisa langsung menuju bagian yang mereka butuhkan, tanpa perlu membaca seluruh posting. Oleh karena itu, Daftar Isi yang terencana dengan baik dapat membantu dalam:

Memberikan tampilan profesional pada postingan atau artikel Anda.
Mengatur poin dari posting atau artikel Anda secara sistematis.
Mengelola harapan audiens Anda, karena memberikan tampilan tingkat tinggi dari posting atau artikel Anda.
Menyediakan peta jalan bagi audiens Anda untuk dengan mudah menavigasi seluruh posting atau artikel Anda.

TOC bisa meningkatkan pengalaman pengguna (user experience). Pengalaman pengguna adalah bagian penting dari posting atau artikel blog, yang tidak dianggap serius oleh banyak blogger saat ini.

Menurut penelitian, pengalaman pengguna (UX) adalah kunci untuk mendapatkan peringkat yang lebih tinggi di SERP. Untuk meningkatkan pengalaman pengguna blog Anda, Daftar Isi akan membantu.

Menurut penelitian, lebih dari 80% dari total pembaca web hanya membaca poin-poin penting dari sebuah posting blog atau artikel.

Seseorang harus menerapkan TOC hanya ketika artikel atau panjang posting cukup baik dan artikel atau posting memiliki lebih dari 3 judul.

Apakah Daftar Isi Meningkatkan SEO?

Tentu saja, Daftar Isi juga dapat membantu dalam SEO. Simak alasannya: ketika Anda menulis posting atau artikel yang panjang dan membuat daftar isi, konten Anda akan dibagi menjadi sub-bagian, masing-masing dengan aspek yang berbeda pada topik yang sama.

Jadi, dengan posting blog atau artikel yang lebih panjang, blog Anda kemungkinan akan mendapat peringkat yang lebih baik di mesin pencari. Google menganggap posting yang lebih panjang sebagai faktor peringkat.

Cara Membuat Daftar Isi Subjudul Postingan Blog

Berikut ini cara memasang atau membuat daftar isi (table of content) otomatis postingan blog. Kodenya saya dapatkan dari My Blogger Tricks. Kode-kode ini harus dipasang dalam template blog dan di postingan.

1. Klik Tema > Edit HTML

2. Copas kode CSS Daftar Isi untuk Blogger ini di atas kode ]]</b:skin>

.mbtTOC {background-color: #eee;color: #707037;line-height: normal;margin: 10px 0;padding: 10px 0;width: auto;}
.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}
.mbtTOC ul { list-style:none; } .mbtTOC ol li,.mbtTOC ul li { padding:15px 0 0; margin:0 0 0 30px; font-size:15px; }
.mbtTOC a{ color:#c00; text-decoration:none; } .mbtTOC a:hover{ text-decoration:underline; } .mbtTOC button{ background:#eee;font-size:16px;position:relative; outline:none; cursor:pointer; border:none; color:#707037; padding:0 0 0 15px;font-weight:700} .mbtTOC button:after{content: "\f03a"; font-family:FontAwesome;position:relative;left:5px;font-size:14px;font-weight: 300;}

3. Copas kode JS TOC for Blogger berikut ini di atas kode </head>

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
function mbtTOC() {var mbtTOC=i=headlength=gethead=0; headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++) {gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}
//]]>
</script>
</b:if>

4. Pastikan ada Link Font Awesome di template blog Anda. Jika belum, ada tambahkan pula kode berikut ini di atas kode </head>

Font Awesome digunakan untuk memunculkan icon dalam Daftar Isi.

5. Cari dan ganti kode kode <data:post.body/> posting (biasanya kode kedua) dengan kode ini:

6. Save! Simpan Template.

Pemasangan kode daftar isi sudah selesai di template. Kini cara memunculkan Daftar Isi atau TOC dalam postingan.

Memunculkan Daftar Isi Di Halaman Posting

Pastikan postingan Anda memiliki minimal dua subjudul (subheading) dengan heading tags H3. Bisa juga dipasang di artikel yang suda ada, asalkan itu tadi... minimal ada dua subjudul.

Selesai menulis postingan, atau saat mengedit postingan, klik Mode HTML, lalu pasang dua kode ini:

1. Copas kode berikut ini di bawah alinea pertama atau sebelum subjudul pertama:

<div class="mbtTOC">
<button onclick="mbtToggle()">Daftar Isi</button>
<ol id="mbtTOC"></ol>
</div>

Anda bisa ganti tulisan Daftar Isi dengan Table of Content.

2. Copas pula kode berikut ini di bagian akhir postingan:

Demikian Cara Membuat Daftar Isi Postingan Blog, Table of Content untuk Blogger.

Code dibawah ini jangan di copy, karna hanya code untuk Script dalam Postingan

<div style="background-color: white; border: 3px double rgb(23, 128, 221); padding: 10px; text-align: left;"> Kode Script Sobat Disini</div>