Connect with us

Blogging

Cara Membuat Menu Scroll Ke Samping Simpel di Blog

Avatar

Published

on

cara membuat menu scroll ke samping

Cara Membuat Menu Scroll Ke Samping – albabbarrosa.com

Halo sobat blogger semua, ketemu lagi dengan albabbarrosa. Kali ini saya akan memberikan tutorial lagi yah, lagi hobi banget bikin tutorial. Kemarin kemarin saya sudah memberikan tutorial tentang Sticky Nav sama Meni navigasi Sidebar. Kali ini saya akan memberikan tutorial tentang menu lagi, yaitu cara membuat menu scroll ke samping atau horizontal’s Scroll Menu.
 
Menu dengan tampilan scroll ke samping banyak kita temui di website website toko online. Selain itu google juga menggunakan menu scroll ke samping loh, ga percaya? Cek aja sendiri. Untuk web berita banyak juga yang menggunakan menu dengan gaya seperti itu, salah satunya adalah website liputan6.
 
Nah, kebetulan saya memiliki script menu scroll kesamping yang saya dapatkan dari template textrim buatan Igniel. Saya tertarik untuk menempatkan menu tersebut disalah satu blog saya, dan ternyata bagus juga tampilannya. Bagi kamu yang ga mau repot repot edit script di template textrim, berikut saya buatkan tutorial pemasangan menu scroll ke samping di blog, dan caranya sangat simpel sekali.
 
Pertama masuk ke Pengaturan > Tema > Edit Html.
 
Pastekan kode berikutdi bagian paling bawah rentetan kode html header, tepatnya di bawah kode </div>. sebenarnya bisa ditaruh dimana saja sesuai keinginan kamu.

Rentetan kode html header biasanya di awali dengan <div class=’header-menu’>, atau kode lain yang hampir mirip. Dan ditutup dengan tag </div>.

    <div class=’textrimMenu’>

 

      <div class=’inner’>
        <ul>
          <li><a href=’https://textrim.blogspot.com’ title=’Download Template’>Download Template</a></li>
          <li><a href=’#’ title=’Menu 1′>Menu 1</a></li>
          <li><a href=’#’ title=’Menu 2′>Menu 2</a></li>
          <li><a href=’#’ title=’Menu 3′>Menu 3</a></li>
          <li><a href=’#’ title=’Menu 4′>Menu 4</a></li>
          <li><a href=’#’ title=’Menu 5′>Menu 5</a></li>
        </ul>
      </div>
    </div>

 

 
Kemudian paste kode dibawah tepat di atas kode ]]></b:skin>.
 

 

.textrimMenu{
position:sticky;
position:-webkit-sticky;
top:0px;
z-index:2;
background-color:#fffdf2;
font:$(fontBold);
font-size:12px;
color:#1b1b1b;
}
.textrimMenu .inner{
color:#1b1b1b;
max-width:calc($(width.all) + 40px); /* 40px dari padding (20px x 2) */;
margin:auto;
}
.textrimMenu a{
color:#1b1b1b;
white-space:nowrap;
display:block;
padding:15px 0px;
}
.textrimMenu ul, .textrimMenu li{
list-style:none;
list-style-type:none;
padding:0px;
margin:0px;
}
.textrimMenu ul{
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
flex-wrap:nowrap;
align-items:center;
overflow-x:auto;
}
.textrimMenu ul li{
padding:0px 20px;
cursor:pointer;
position:relative;
white-space:nowrap;
}
.textrimMenu ul li:hover{
background-color:rgba(0,0,0,.15);
}
.textrimMenu ul li ul{
background-color:#4d95ee;
position:absolute;
display:block;
top:45px;
left:0px;
min-width:100%;
 
 
}

 

 
Save dan coba lihat hasilnya.
 
Cukup itu doang tutorialnya, mudah sekali bukan.
 
 
Menu dengan scroll ke samping biasanya diisi dengan sub label yang ada di blog kamu. Misalnya blog kamu membahas tentang blogging, maka menu scroll ke samping diisi dengan sub label blogging, misalnya : Tutorial Blogging, Tips n Trick, Tips Adsense, dan lain sebagainya.
 
Akan sangat bagus jika blog kamu mempunyai banyak sub label, jadi menunya bisa kelihatan sangat menarik dan tentunya bisa digeser geser, kalau Cuma kamu isi dengan 3 label saja ya tidak bisa digeser menunya.
 
Nah itulah tutorial yang sangat singkat sekali tentang cara membuat menu scroll ke samping di blog. Semoga bermanfaat sampai jumpa di tutorial berikutnya.

 

Continue Reading
Advertisement
Click to comment

Leave a Reply

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Blogging

Apakah Trafik Dari Fb Ads Aman? Berikut Pendapat Expert Blogger

Avatar

Published

on

Trafik Fb Ads

Trafik dari fb ads saat ini menjadi perbincangan hangat di group blogger – Mendapatkan trafik adalah sebuah keharusan bagi seorang blogger. Karena dengan begitu artikel yang mereka buat bisa dibaca oleh penguna internet. Trafik blog sendiri merupakan lalu lintas yang terjadi di sebuah blog. Trafik tersebut bisa berasal dari berbagai macam.

3 macam Sumber Trafik Blog

Secara umum trafik yang menuju ke sebuah blog dibagi menjadi 3 macam, antara lain :

Trafik dari Organic Search. Trafik dari organic search berarti sumber lalu lintas yang berasal dari search engine. Search engine atau mesin pencari sendiri ada berbagai macam, antara lain : Google, Yahoo, Bing, yandex, Duckduckgo, dan beberapa mesin telusur lainnya yang mungkin jarang digunakan di indonesia.

Trafik dari organic search dianggap lebih berkualitas oleh google. Apalagi bagi blog yang memasang iklan adsense. namun, untuk mendapatkan trafik dari organic search ternyata tidak mudah, karena kita bersaing dengan blog lainnya untuk mendapatkan posisi di mesin pencari.

Trafik Dari Redirect. Redirect adalah pengalihan dari sebuah url ke url tertentu. Yang berarti sebelum sampai ke url tujuan, pengunjung harus mengklik url pengalihan yang sudah disiapkan.

Contoh dari trafik redirect antara lain : Trafik dari shortlink,safelink, trafik yang diarahkan dari fb, twitter dan media sosial lainnya. Trafik tersebut tidak melanggar kebijakan adsense (bagi yang menayangkan iklan adsense)

Trafik dari Referal. Bagi kalian yang sudah menghubungkan blog ke google analityc tentu tidak asing dengan istilah ini. Referal traffic adalah sebuah kunjungan yang berasal dari yang dari luar search engine. Trafik tersebut bisa berasal dari backlink, hyperlink, dan link anchor yang mengarah ke blog kamu.

lalu lintas tersebut terbilang bagus, bahkan dapat menaikkan trusted dari domain blog kita, asalkan link referal ditaruh ditempat atau situs yang tidak melanggar kebijakan google, atau kebijakan internet international.

Apa Itu Trafik fb Ads

fb Ads atau Facebook Advertising adalah sebuah layanan yang diberikan facebook bagi penggunanya untuk mengiklankan produk mereka. Produk tersebut bisa berupa : Barang dagang, Fanspage, dan Situs web. Kita bisa melakukan transaksi berdasarkan iklan yang mau kita tayangkan. Harga yang paling rendah untuk mengiklan di facebook adalah 36.000.

Trafik yang dijanjikan oleh facebook ketika beriklan pun lumyan tinggi. dengan membayar 36.000 untuk satu hari kita bisa mendapatkan trafik antara 1-2k perhari yang mengarah ke situs web kita. Bagi blogger yang memasang iklan diblognya, tentu traffik tersebut lumayan tinggi karena sudah mendapatkan keuntungan.

Strategi fb ads to adsense atau to site sudah lama digunakan oleh beberapa blogger yang mengandalkan pemasukan dari google adsense. Dengan trafik 2K sehari setidaknya dia sudah mendapatkan lebih dari 50rb perhari dari google adsense. Setidaknya mereka masih mendapatkan 14rb perhari

Apakah Trafik Fb Ads Aman?

pembahasan tentang fb ads to adsense pun sudah seringkali di bahas di group atau forum blogger. Di salah satu forum blogger, ada yang menyangakan tentang permasalahan tersebut.

” sekarangkan lagi banyak yang melakukan fb ads to blog adsense, apakah strategi model seperti itu aman? Kalau buat online shop memang bagus sih, tapi kalau untuk blog adsense gimana ya?” tanya salah satu anggota forum diskusi blogger. Berikut jawaban yang diberikan oleh beberapa blogger.

Expert di adsense forum mengatakn bahwa trafik dari fb ads merupakan salah satu sumber invalid klik. dan banyak akun adsense yang terkena banned karena invalid klik. Atau mungkin ada cara untuk mengakali hal tersebut?

Jawab seorang anggota forum. Invalid klik saat ini sedang kerap-kerapnya menimpa publisher adsense. Baca : Penyebab dan cara mengatasi pembatasan iklan adsense.

Kalau mau trafik dari facebook share artikel di group atau di fabspage biar lebih aman. Kalau dari fb ads ada kemungkinan terkena invalid trafik dan invalid klik.

Sementara anggota forum lainnya memberikan jawaban yang cukup lengkap.

Mengiklan di Facebook untuk apadulu mas? kalau diarahkan ke blog adsense, saya sudah dua kali kena invalid karena memsanag fb ads to adsense blog. dan 3 kali share ke fanspage dan group facebook masih aman-aman saja. Mungkin mastah lainnya punya metode tersendiri agar tidak terkena invalid kil. Google sendiri juga kurang spesifik dalam memberikan informasi tentang permasalahan tersebut.

Sementara anggota yang pro dengan fb ads mengatakan,” hal tersebut aman, teman saya sendiri pay Out sebesar 30juta perbulan dari satu acount hanya dengan fb ads 80%.”

Bukannya invalid klik itu terjadi karena pengunjung mengklik iklan tapi tidak ada action, atau hanya sebentar membuka iklan terus menutupnya?

Seperti itulah pembahasan mengenai fb ads to blog adsense. Pro dan kontra pasti selalu ada, tinggal bagaimana kita mengambillangkah yang lebih baik dan aman tentunya.

Setiap usaha pasti ada resikonya bukan? semakin besar usahamu semakin besar pula resiko yang ada. Jadi kita harus bisa bersikap ketika kita mendapatkan resiko tersebut. terimakasih sudah membaca, sampai jumpa di artikel berikutnya. – albabbarrosa

Sumber Gambar : Image by William Iven from Pixabay

Continue Reading

Blogging

3 Cara Membuat Daftar Isi Atau Table of Content

Avatar

Published

on

cara membuat table of content
Cara Membuat Daftar Isi / Table Of Content – Albabbarrosa.com

 SEO Off Page menjadi salah satu langkah seorang blogger agar blog atau website mereka bisa bersaing di halaman pertaman google, salah satu dari SEO Off Page adalah dengan membuat artikel berkualitas. Artikel berkualitas secara tidak langsung akan membantu menaikkan peringkat blog atau website di mesin pencari dalam jangka panjang. Bagaimana ciri-ciri artikel berkualitas? Secara lengkap kamu bisa membaca di artikel saya tentang Artikel Berkualitas.

 
Secara umum artikel berkualitas adalah artikel yang dibuat dengan terstruktur. Terdapat point-point utama pembahasan dan ditulis secara rapi. Agar pembaca mudah melihat point utama yang ada, maka kamu perlu menambahkan Daftar Isi di sebuah artikel. Yang bertujuan agar pembaca bisa melihat daftar isi dari point utama pembahasan.
 
Membuat daftar isi di sebuah artikel tidaklah sulit, kamu hanya perlu membuat sebuah daftar pembahasan, dan menaruh link agar menuju ke Sub pembahasan. Misalnya kamu membuat artikel dengan Sub Pembahasan :
 
Cara Membuat Jus Jambu
Manfaat Jus jambu
 
Maka kamu tinggal membuat daftar isi yang mengarahkan ke sub pembahasan tersebut (cara membuat jus jambu dan manfaat jus jambu).
 
Bagi kalian yang masih bingung dengan cara membuat daftar isi di artikel. Berikut saya berikan 3 cara membuat daftar isi atau table of content di artikel.

Cara Pertama Membuat Daftar Isi atau Table Of Content

Ini merupakan cara termudah dalam membuat daftar isi atau table of content. Sebelumnya, pastikan bahwa artikelmu terdapat beberapa sub pembahasan atau sub heading. Kalau tidak ada sub menunya daftar isi apa yang akan kamu sajikan.
  • Masuk ke setting > Edit Html
  • Cari kode ]]></b:skin>
  • Pastekan kode dibawah sebelum kode atau tepat di atas kode  ]]></b:skin>
 .dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}
  • Stelah itu, simpan template.
  • Selanjutnya, Edit artikel yang ingin ditambahkan daftar isi
  • Edit artikel > Ubah tampilan compose menjadi Html
  • Pastekan kode dibawah dibagian paling atas artikel kamu, atau dimanapun, tapi yang terbaik adalah dibagian paling atas artikel.
 Kode
<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
  • Ganti Link1, Link2, link 3 dan seterusnya dengan Sub Pembahasan artikel kamu. Ganti juga # dengan #subhead1 dan seterusnya. Jika di artikel terdapat lebih dari 3 sub pembahasan, tinggal tambahkan kode    <a href=”#”>Link 4</a>  dan seterusnya.
  • Masih di tampilan html. Cari Sub Pembahasan kamu atau Subheading kamu. Dan tambahkan kode id=”subhead1”setelah kode <span dan seterusnya pada setiap sub pembahasan kamu.
  • Klik pratinjau, setelah oke, baru klik perbarui.
DEMO

Cara Kedua Membuat Daftar Isi atau Table Of Content

Cara yang kedua ini dibilang hampir sama dengan cara yang pertama, hanya saja memiliki tampilan yang lebih bagu dan lebih variatif.
  • Pertama, Masuk ke Setelan Html Blogger Kamu > Pilih edit Html
  • Pastekan kode berikut sebelum kode </head> atau Sebelum kode ]]></b:skin>
 /* Versi Kedua */
.daftarisi {
    width:100%;
    border:1px solid #d3d3d3;
}
.daftarisi div {
    width:100%;
}
.daftarisi .daftar {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.daftarisi .content {
    display: none;
    padding : 5px;
}
    • Kemudian Pastekan kode berikut sebelum kode </body>
 <script>
$(".daftar").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Tutup" : "Daftar Isi";
        });
    });

});
</script>
  • Klik Simpan Template.
  • Selanjutnya, edit artikel yang ingin dikasih Tombol Daftar Isi
  • Ubah tampilan Compose menjadi html
  • Pastekan kode berikut dibagian paling atas artikelmu
 <div class="daftarisi">
    <div class="daftar"><span>Daftar Isi</span>

    </div>
    <div class="content">
        <ul>
            <li><a href="#subhead1">This is just some random content.</a></li>
            <li><a href="#subhead2">This is just some random content.</a></li>
        </ul>
    </div>
</div>
  • Jangan Lupa, ganti “This is random content” dengan Daftar pembahasan kamu
  • Masih di tampilan html. Cari Sub Pembahasan kamu atau Subheading kamu. Dan tambahkan kodeid=”subhead1” setelah kode <span dan seterusnya pada setiap sub pembahasan kamu.
  • Klik pratinjau, setelah oke, baru klik perbarui.

DEMO

Continue Reading

Blogging

Cara Membuat Menu Navigasi Sidebar Keren di Blog

Avatar

Published

on

membuat menu navigasi sidebar
Halo sobat blogger semua, setelah kemarin saya memberikan tutorial cara membuat sticky nav, kali ini saya akan memberikan tutorial tentang menu navigasi lagi. Tapi bukan sticky nav ya, melainkan cara membuat menu navigasi sidebar.
 
Menu navigasi sidebar adalah salah satu jenis tampilan untuk menu navigasi yang ada di blog. Sidebar menu biasanya hanya terlihat saat mode mobile saja. Letak sidebar menu biasanya ada yang muncul di kanan, muncul di kiri dan juga muncul rata kanan kiri.
 
Perbedaan sidebar menu dengan menu dropdown biasa adalah pada bagian bentuk menu tersebut dan bagaimana menu tersebut muncul ketika tombol menunya diklik. Menu biasa akan muncul tepat dibawah tombol menunya, sedang sidebar menu muncul dari sisi kanan atau sisi kiri dengan ukuran yang beragam.
 
Sidebar menu atau menu navigasi sidebar kebanyakan dipakai pada template wordpress yang premium atau berbayar, untuk template blogspot jarang sekali yang menggunakan menu navigasi sidebar, kebanyakan menggunakan menu dropdown biasa.
 
Bagi kamu yang blognya tidak menggunakan sidebar menu dan kamu  ingin memiliki tampilan sidebar menu, jangan kawatir! karena albabbarrosa punya solusinya. Simak tutorial cara membuat menu navigasi sidebar di blog berikut ini.
 
Masuk ke pengaturan > pilih edit html. Dan pastekan kode dibawah ini tepat di atas kode ]]> </b:skin>
 /* Sidebar Menu */
 .mline1, .mline2, .mline3 {
  position: absolute;
  right: 0px;
  display: block;
  height: 3px;
  width: 22px;
  background: #111;
  content:'';
  border-radius: 5px;
  transition: all 0.2s;
 }
 .mline1 {
  top: 0;
  width : 13px;
 }
 .mline2 {
        height:15px;
  top: 7px;
 }
 .mline3 {
  top: 14px;
 }
#css-menu{position:fixed;top:0px;width:200PX;left:0;z-index:9999;
background:#fff;height:100%;transition:all .4s ease-in-out;box-shadow:0 2px 5px 0 rgba(0,0,0,.12),0 2px 10px 0 rgba(0,0,0,.09)}
a.blanter-back{position:inherit!important;width:20px;height:20px;padding:13px;z-index:99}
#cssmenu,#cssmenu ul{margin:0;padding:0;border:0;list-style:none;font-weight:400;text-decoration:none;line-height:1;
font-family:'Roboto',sans-serif;font-size:14px;position:relative;text-align:left}
#cssmenu a{line-height:1.3;padding:12px 15px}#cssmenu ul li{cursor:pointer;background:#fff}
#cssmenu ul li a{font-size:13.5px;display:block;color:#777;background:#fff;padding:12px 15px;margin:3px 10px 3px 0;
font-weight:500;border-top-right-radius:20px;border-bottom-right-radius:20px}
#cssmenu ul li a:hover{text-decoration:none;background:#eee}
#cssmenu ul li.active,#cssmenu ul li.active a{background:#eee}#cssmenu ul li.home a:hover{background:#fff}
#sidebar-css h2:hover{color:#039be5}#cssmenu ul li.home{background:#fff;overflow:hidden;color:#444;font-size:18px;font-weight:700;padding:0;
display:block;border-bottom:1px solid #eee}
#cssmenu ul li.has-sub > a:after{content:'f105';font-family:FontAwesome;float:right}
#cssmenu ul li.has-sub.active > a:after{content:'f107';font-family:FontAwesome;float:right}
#cssmenu ul ul{padding:0;display:none;background:#eee}
#cssmenu ul ul li a{color:#777;margin:0;border-radius:0;font-weight:400;padding:10px 10px 10px 48px;background:#eee}
#cssmenu ul ul li a:hover{background:#ddd}#css-menu.slide{left:-340px}#content-wrapper.slide{padding-left:0}
#css-menu.disable{left:0!important}#css-menu h3,#css-menu p{padding:0;margin:0}
#css-menu .profilemenu{padding:20px 15px 10px;height:105px;
background:#eee url(https://2.bp.blogspot.com/-mSuNfO8orf4/WVT7CZ7s18I/AAAAAAAAGj0/sBqJmU0AQnovb-wtAO_ImWRN3dY45A50ACLcBGAs/s1600/MasignAlphaSteelcoders.png)repeat;color:#444;
line-height:1.9;z-index:10;background-size:100%}
#css-menu h3{font-size:13px;font-weight:700;color:#222}#css-menu p{font-size:12px}
#css-menu img{width:50px;height:50px;border-radius:100%}#info2{float:right;border-radius:100%;padding:5px!important;
height:24px;margin-top:-3px;color:#666}
transition:all .7s ease-in-out;z-index:9;overflow:hidden;left:-200px;opacity:0}
#navmenu2 li i{float:left;margin-right:10px;font-size:18px}
#navmenu2{transition:all .4s ease-in-out}#nav-menu1.shows{visibility:visible;height:auto;left:0;opacity:1}
#navmenu2.shows{visibility:hidden;margin-left:-20px;opacity:0}
/* End Sidebar Menu */
Setelah itu, paste kode dibawah ini tepat di bawah kode </head> atau di atas kode <body>
<div id='css-menu' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<div id='cssmenu'>
<div class='profilemenu'>
<img expr:alt='data:blog.title' expr:title='data:blog.title' src='gambar'/>
<h3><data:blog.title/></h3>
<a class='ripple' href='javascript:;' id='info2'></a>
<p>JUSTRYWOY.</p>
</div>
<ul id='navmenu2'>
<li><a  href='/' itemprop='url' title='Home'><span itemprop='name'>Home</span></a></li>
<li class='has-sub'><a href='#' title='Apps'><span itemprop='name'>Apps</span></a>
<ul>
<li><a  href='#' title='Themes'><span itemprop='name'>Themes</span></a></li>
<li><a  href='#' title='Layout'><span itemprop='name'>Layout</span></a></li>
<li><a  href='#' title='Settings'><span itemprop='name'>Settings</span></a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class='clear'/>


Sampai disitu, sidebar menu sudah bisa muncul di blog kamu hanya saja tidak bisa disembunyikan dan tidak bisa ditampilkan lagi. Untuk itu kita perlu tombol menunya.
 
Paste kode di bawah ini, di bagian kode header menu kamu, atau kamu bisa letakkan dimana saja, namun saya sarankan di bagian header kamu.

<div class='button'>
<span class='mline1' onclick='sidebarbutton()'/>
<span class='mline2' onclick='sidebarbutton()'/>
<span class='mline3' onclick='sidebarbutton()'/>
</div>

Punya saya, saya taruh di atas kode search, yang berada di rentetan kode hedaer menu. agar tombol menu bisa berada di bagian header menu blog.

Terakhir, pastekan kode javascript dibawah tepat di atas kode </body>
<script type='text/javascript'>
function sidebarbutton() {  var x = document.getElementById("css-menu");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>

Coba preview blog kamu, jika menu sidebar sudah muncul save dan lihat hasilnya, pakah tombol menunya berfungsi atau tidak.

Nah itulah sedikit cara membuat menu sidebar yang keren dan responsive di blog. Semoga tutorialnya mudah dipahami dan semoga bermanfaat.
Continue Reading

Trending