12/20/16

Membuat Sticky Widget dan Dropdown Menu Pada Widget Page List Default Blogspot/Bogger

Apakah mungkin membuat Sticky Widget Pada Widget Page List / Widget Laman default blogger/blogspot tanpa javascript ?

Kenapa saya di awal sudah membuka dengan pertanyaan seperti itu ? Karena saya menemukan cara baru bagaimana membuat Sticky Widget pada Widget Page List atau Widget Laman default blogspot tanpa menggunakan kode Javascript, hanya menggunakan Kode CSS saja, tapi bukan hanya itu saja, Widget Page List atau widget Laman-nya juga berpindah tempat menjadi berada di atas judul tanpa kalian mengubah posisi-nya, plus juga ada Dropdown menu-nya. Untuk lebih jelasnya silahkan Anda cek demo-nya di sini.




Saya dipostingan ini tidak akan menggunakana gambar petunjuk, jadi buat Anda yang ingin coba memasang-nya silahkan baca postingan saya sebelumnya karena cara pemasangan yang sekarang sama dengan tutorial kemarin. yang membedakan-nya hanya kodenya saja.

Terkait :  Dropdown Menu Pada Widget Page List atau Widget Laman Default Blogger .

Baiklah gak perlu banyak basa-basi lagi, mari kita simak tutorialnya dibawah ini.

1. Pertama Anda tentunya login terlebih dahulu ke blogger melalui akun Anda.
2. Backup terlebih dahulu template blog Anda.
3. Tambahkan Widget Page List atau kalau dalam bahasa Indonesia Widget Laman pada Tata Letak. Cek gambar di bawah.


4. Kemudian Setelah menambahkan widget diatas Anda klik Template dan Klik Edit HTML, cari kode CSS seperti di bawah ini. Kemudian setelah Anda menemukannya hapus semua kode tersebut persis seperti yang ada pada kotak script di bawah.

/* Tabs

----------------------------------------------- */
.tabs-inner .section:first-child {

  border-top: $(header.bottom.border.size) solid $(tabs.border.color);

}

.tabs-inner .section:first-child ul {

  margin-top: -$(header.border.size);

  border-top: $(header.border.size) solid $(tabs.border.color);

  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);

  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);

}

.tabs-inner .widget ul {

  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;

  _background-image: none;

  border-bottom: $(tabs.border.width) solid $(tabs.border.color);

  margin-top: $(tabs.margin.top);

  margin-left: -$(tabs.margin.side);

  margin-right: -$(tabs.margin.side);

}

.tabs-inner .widget li a {

  display: inline-block;

  padding: .6em 1em;

  font: $(tabs.font);

  color: $(tabs.text.color);

  border-$startSide: $(tabs.border.width) solid $(content.background.color);

  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);

}

.tabs-inner .widget li:first-child a {

  border-$startSide: none;

}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {

  color: $(tabs.selected.text.color);

  background-color: $(tabs.selected.background.color);

  text-decoration: none;

}
Biasanya kode CSS pada template default blogger atau blogspot terletak di antara tag <b:skin><![CDATA[/* dan ]]></b:skin> 

5. Setelah menghapus-nya kemudian Anda copy paste-kan kode CSS di bawah ini dan simpan di tempat tadi Anda menghapus kode di atas.

/* Tabs

----------------------------------------------- */

.tabs-inner .section:first-child ul {

margin-top: -0;

}

.PageList {

padding: 7px;

position: fixed;

top: 0px;

background-color: #2e2e2e;

width: 100%;

opacity: 0.9;

left: 0px;

z-index: 9999 !important;

}

.tabs-inner .widget ul {

text-align:center;

margin: 0;

padding: 0;

list-style: none;

position: relative;

}

.tabs-inner .widget li a, .tabs-inner .widget li {

display: inline-block;

cursor: pointer;

padding: .6em 1.3em .6em;

font-family: 'Oswald', sans-serif;

font-weight: 700;

letter-spacing:4px;

text-transform:uppercase;

color: #fff;

}

.tabs-inner .widget li:first-child a {

border-left: none;

}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {

color: #c4996c;

background-color: transparent;

text-decoration: none;

}

.tabs-inner .widget li ul li {

display:none !important;

}

.tabs-inner .widget li:hover ul li {

display:block !important;

}

.tabs-inner .widget li ul {

z-index:9999 !important;

padding: 0;

float:right;

position: fixed;

top: 32px;

right:20%;

-webkit-box-shadow: none;

-moz-box-shadow: none;

box-shadow: none;

transition: max-height 0.3s ease-in;

background-repeat: no-repeat;

background-position: top left;

padding-top:10px;

}

.tabs-inner .widget li ul li {

width:210px;

padding:7px;

font-family: Playfair Display;

text-align:left;

border-top:2px solid #fafafa;

text-transform:uppercase !important;

font-size:12px;

cursor: pointer;

background: #2e2e2e;

text-shadow:0px 0px transparent !important;

opacity:1.0 !important;

}

.tabs-inner .widget li ul li:hover {

background-color:#bcb6b0;

color:#fff;

transition: all 0.5s ease;

}

.tabs-inner .widget li ul li a:hover {

color:#fff;

transition: all 0.5s ease;

}

.PageList {

text-align:center !important;

}

.PageList li {

display:inline !important;

float:none !important;

}

5. Untuk membuat Dropdown Menu-nya Anda cari Pagelist1 dan copy pastekan kode HTML di bawah ini tepat di antara tag </b:loop> dan </ul> yang berada di dalam menu PageList1.
<!-- dropdown menu -->
<li>Template &#9660;

          <ul>

            <li><a href='https://anditoblog.blogspot.com/p/disclaimer.html'>Disclaimer</a></li>

         <li><a href='https://anditoblog.blogspot.com/p/contact-us.html'>Contact Form</a></li>

         <li><a href='https://anditoblog.blogspot.com/'>Responsive</a></li>

        </ul>

       </li>

Silahkan ganti tulisan yang ditandai warna merah dengan kode url yang ingin anda tambahkan.
Dan ganti tulisan yang di tandai warna biru dengan keterangan dari url yang anda masukan.
6. Klik Simpan.

Mungkin itulah yang bisa saya berikan mengenai updatean terbaru dari Widget PageList atau Widget Laman yang bisa dijadikan sticky widget dan dropdown menu. Semoga postingan ini bisa bermanfaat bagi Anda.

Klik share jika postingan ini membantu. hehehe jika ada pertanyaan silahkan Anda tinggalkan komentar di bawah atau bisa menghubung saya via Contact Form.

You might also enjoy reading

Subscribe

Daftarkan email Anda untuk mendapatkan Artikel terbaru pilihan dari Andito Blog

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Silahkan berkomentar sesuai dengan topik.