Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

5 Cuplikan jQuery yang Sangat Berguna

Januari 21, 2017 Komentar
5 Cuplikan jQuery yang Sangat Berguna
Lima cuplikan  jQuery yang sangat berguna dan masih banyak digunakan hingga sekarang ini.
Bagi Anda seorang blogger atau webmaster pasti yang namanya jQuery tidak asing lagi bagi merekadan merupakan hal yang sering kita temui di hampir semua WebSite. sedikit tentang jQuery atau sering di sebut sebagai Library JavaScript merupakan alat yang memungkinkan pengembang web untuk menambah fungsionalitas tambahan ke situs Web mereka. Baca selengkapnya.....

Kembali ke pokok pembahasan yaitu lima cuplikan  jQuery yang sangat berguna dan masih banyak digunakan hingga sekarang ini.

1. Back to Top Button


Back to Top Button

$('a.top').click(function(){

$(document.body).animate({scrollTop : 0},800);

return false;
});


Back to Top Button merupakan hal yang sering kita temukan pada sebuah website, digunakan untuk membuat para pengunjung mudah untuk kembali atau melompat ke halaman atas website apabila sudah berada di bagian tengah maupun bawah website. Item yang lagi trendi ini cara pemasangannya sangat mudah sekali. Anda hanya perlu mengcopy kode diatas tadi dan menambah kode HTML pemanggil yang serupa (dengan <a class="top") untuk membuat tombol yang sebenarnya: <a class="top" href="#"> back to top </a> atau bisa juga menggunakan Logo maupun Icon.

2. Enabling/Disabling Input Fields
2. Enabling/Disabling Input Fields

$('input[type="submit"]').attr("disabled", true);

$(‘input[type="submit"]').removeAttr("disabled”);

Kode diatas berguna untuk tidak ingin pengguna untuk dapat masukan pada bidang tertentu atau pada bagian isi formulir (mengblock, mengblock setelah mengisi beberapa info prasyarat). Baris atas kode akan menonaktifkan elemen input, dan garis bawah akan memungkinkan elemen imput.

3. Zebra Striping
 Zebra Striping


$('li:odd').css('background', ‘#e7e7e7’);

Zebra striping adalah pilihan gaya umum yang sering terlihat di daftar nama atau tabel. Kode di atas akan menambah zebra striping untuk daftar.

4. Prevent Link Functionality
Prevent Link Functionality


$(“a.disable").on("click", function(e){

  e.preventDefault();

});
Potongan kode di atas adalah untuk mengintrol fungsi dari clik. yang akan Anda nonaktifkan dan tidak akan bekerja sama sekali ketika pengguna mengklik itu. Pastikan Anda menentukan atau menghubungkan sebuah link dengan hati-hati, jika tidak, bisa-bisa  menonaktifkan semua link Anda.

5. Toggle Classes
Toggle Classes

$(“.main”).toggleClass(“selected”);

Potongan kode ini sangat berguna untuk mengubah gaya, penampilan, dan bahkan mungkin fungsi dari elemen HTML dengan menambahkan atau menghapus tag tertentu, Oleh karna itu besar kemungkinan sebagai hasil dari pemicu klik viewer.





Demikian yang dapat saya sampaikan mengenai 5 Cuplikan jQuery yang Sangat Berguna, semoga bermanfaat. Pastikan Anda terus mengunjungi jQueryINDO untuk mendapatan informasi panduan blogger serta SEO. Jika anda tidak ingin ketinggalan artikel yang akan saya posting pada kesempatan berikutnya, silahkan berlangganan artikel via email melalui form berlangganan pada bagian bawah Blog ini, dan sebelum Anda beranjak dari halaman ini, saya sangat senang sekali jika Anda bersedia memberi Like, Share serta memberi G+1 pada artikel ini agar sahabat blogger lainnya juga mengetahui informasi ini. Saya ucapkan terimakasih sebelumnya, semoga bermanfaat dan sukses selalu untuk Anda.

Memasang Data Struktur WebSite Schema Kedalam Template

Januari 20, 2017 Komentar
Memasang Data Stuktur WebSite Kedalam Template
Pada Kesempatan Kaliini saya akan membahas tentang Struktur Schema WebSite, cara serta manfaatnya. Saat bicara soal Struktur Data Web (baik HTML ataupun Schema) bukan berarti hanya dengan menerapkannya dengan benar Web kalian bisa langsung di posisi teratas. Penerapan struktur data hanya untuk membantu Google mempermudah melakukan Crawl ke situs kita. Jadi soal content dan link itu di bagian (part) yang berbeda dari serial SEO.

Sebelum memulai sebaiknya Anda check terlebih dahulu apakah Blog Anda telah disertakan Scrip Struktur WebSite ini dengan cara menuju ke link : https://search.google.com/structured-data/testing-tool  Masukan URL blog Anda  Jalankan Pengujian. Pada bagian yang akan muncul silahkan anda lihat pada bagian kanan apakah terdeteksi Stuktur WebSite, gambar seperti dibawah ini.
Data Stuktur WebSite Schema
Jika ada berarti Anda tidak perlu memasangnya lagi, jika tidak ada silahkan simak baik-baik tatacara memasang Schema WebSite pada temlate.

Langkah Pemasangan
1. Buka:  Blogger⇒Template⇒ Edit HTML. Letakkan Kode dibawah ini tepat diatas  <Meta Conten
<script type='application/ld+json'>{ "@context": "http://schema.org", "@type": "WebSite", "url": "https://jqueryindo.blogspot.com/", "potentialAction": { "@type": "SearchAction", "target": "https://jqueryindo.blogspot.com/?q={search_term}", "query-input": "required name=search_term" } }</script>

Perhatikan Gambar dibawah ini bagi yabg kurang mengerti.
Data Stuktur WebSite Schema


Ganti Url https://jqueryindo.blogspot.com/ dengan Url Blog kalian.
Sekarang silahkan buka https://search.google.com/structured-data/testing-tool kembali dan lihat hasilnya.

Demikian yang dapat saya sampaikan mengenai Memasang Data Stuktur WebSite Kedalam Template, semoga bermanfaat. Pastikan Anda terus mengunjungi jQueryINDO untuk mendapatan informasi panduan blogger serta SEO. Jika anda tidak ingin ketinggalan artikel yang akan saya posting pada kesempatan berikutnya, silahkan berlangganan artikel via email melalui form berlangganan pada bagian bawah Blog ini, dan sebelum Anda beranjak dari halaman ini, saya sangat senang sekali jika Anda bersedia memberi Like, Share serta memberi G+1 pada artikel ini agar sahabat blogger lainnya juga mengetahui informasi ini. Saya ucapkan terimakasih sebelumnya, semoga bermanfaat dan sukses selalu untuk Anda.

Memasang Share Button Premium SumoMe Pada Blog

Januari 19, 2017 Komentar
Memasang Share Button Premium SumoMe Pada Blog

Share Buttot atau tombol berbagi merupakan salah satu hal penting yang harus dimiliki pada sebuah Blog atau para media pencipta konten. Fitur share ini menjadi cara untuk berbagi hal-hal dengan teman-teman Anda dengan mudah dan sekaligus dapat menjadi cara terbaik untuk menggandakan lalu lintas situs.

Dengan dengan adanya Share Button, hal tersebut bisa kita manfaatkan juga untuk menambah traffic sebuah situs website maupun blog. Dalam artikel ini, saya akan menunjukkan bagaimana cara untuk menambahkan tombol Share Share Button Premium SumoMe Pada Blog.

Untuk menambahkan tombol share di situs Blogger Anda, hal pertama yang perlu Anda lakukan adalah dengan mengbackup seluruh data template terlebih dahulu agar dapat menghindari hal yang tidak diinginkan, Kemudian Anda perlu mengunjungi Situs » https://sumome.com » Singup » untuk melakukan mengkonfigurasi plugin.

Singup
Cara Singup sangat mudah Anda hanya perlu mengisi beberapa data seperti URL blog, Email, dan Password. Lihat seperti gambar di bawah ini.
Memasang Share Button Premium SumoMe Pada Blog

Pemasangan
Setelah melewati langkah diatas maka akan Anda akan diberikan Sebuah Kode Scrip yang harus dipasang kedalam HTML Template, namun Anda tidk perlu mengambilnya, karna saya akan membagikan Kode Premium Sumemo Share Button yang saya gunakan.
Untuk pemasangan Anda perlu mengunjungi  Blogger » Template » Edit HTML. Letakan Kode Premium Share Button dibawah ini diatas </head>

Kode untuk Tampilah diluar dan didalam Postingan
<script async='async' data-sumo-site-id='a36755e2a6737d72245ec434822f0017d433681d43ba03f2304df8fde1b871fe' src='//load.sumome.com/'/>

Kode untuk tampilan didalam postingan saja seperti yang saya gunakan
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script async='async' data-sumo-site-id='a36755e2a6737d72245ec434822f0017d433681d43ba03f2304df8fde1b871fe' src='//load.sumome.com/'/>
</b:if>

Simpan Template Anda dan lihat hasilnya.

Demikian yang dapat saya sampaikan mengenai Memasang Share Button Premium SumoMe Pada Blog, semoga bermanfaat. Pastikan Anda terus mengunjungi jQueryINDO untuk mendapatan informasi panduan blogger serta SEO. Jika anda tidak ingin ketinggalan artikel yang akan saya posting pada kesempatan berikutnya, silahkan berlangganan artikel via email melalui form berlangganan pada bagian bawah Blog ini, dan sebelum Anda beranjak dari halaman ini, saya sangat senang sekali jika Anda bersedia memberi Like, Share serta memberi G+1 pada artikel ini agar sahabat blogger lainnya juga mengetahui informasi ini. Saya ucapkan terimakasih sebelumnya, semoga bermanfaat dan sukses selalu untuk Anda.

Submit Blog dengan Backlink Generator Gratis

Januari 16, 2017 Komentar
Pada kesempatan kali ini saya akan membahas tentang cara mengirim Backlink otomatis mengunakan Backlink Generator.
Backlink Generator merupakan alat untuk mengirim Link yang ada pada Blog atau Website Anda ke Website - website tertentu secara gratis maupun berbayar.
Backlink sangat bermanfaat seaki bagi sebuah Blog atau Website karena Backlink akan menambah trafik serta seo Website Anda.

Cara menambah ribuan Backlink

  1. Buka situs penyedia layanan Backlink Generator http://www.backlinkr.net
  2. Copy alamat Ulr Blog Anda 
  3. Pastekan ke kolom yang telah disediakan oleh situs Backlink tadi 
  4. Klik Submit dan tunggu sampai selesai.
  5. Jika telah selesai maka akan muncul seperti ini 
Nah itulah cara Sumit Blog dengan Backlink Generator, sangat mudah bukan.
Silahkan berkomentar jika anda yang ingin disampaikan.

Menambahkan Label Pada Postingan Blog

Januari 16, 2017 Komentar

Pada kesempatan kali ini kita akan membahas bagai mana cara menambahkan Label postingan atau category suatu postingan, oke kita akan langsung ke inti masalah.

Cara Menambah Label Postingan pada Blog

  1. Login/Masuk kedalam blog dan buat sebuah postingan.
  2. Pada bagian kanan ada Setelan Entri.
  3. Klik Label dan pilih label yang sudah ada atau tuliskan label yang baru
  4. Jika telah memilih atau menuluskan label silahkan anda klik selesai.
Nah begitulah cara menambah Label postingan pada Blog. Sangat mudah bukan.

Cara Membuat Pop Up Info Keren Pada Blog

Januari 15, 2017 Komentar
Cara Membuat Pop Up Info Keren Pada Blog
Contoh Pop Up Info

Cara Membuat Pop Up Info About Us. Seperti yang sudah kita ketahui sebuah pop up adalah halaman yang muncul secara otomatis di sebuah blog atua lainnya. Namun pop up yang akan saya buatkan tutorialnya kali ini adalah merupakan sebuah pop up info about us tentang author atau bisa yang lainnya, yang berbeda dari pop up ini adalah mungkin biasanya pop itu muncul secara otomatis tapi kali ini saya akan buat tutorial memasang pop up yang muncul menggunakan perintah klik icon.

Pop up ini saya ambil tutorialnya dari blog arlina design atau mungkin anda pernah melihat icon klik info pada blog arlina yang menampilkan info tentang blog atau anda bisa mengganti dengan info yang lainnya, oke sobat blogger bagi anda yang ingin menerapkan pop up info about us tersebut bisa dipasang di blog anda, silahkan ikuti tutorialnya.



Cara Membuat Pop Up Info About Us

1. Buka akun blogger anda.
2. Pilih menu template dan klik edit HTML.
3. Pertama, pasang link font awesome di atas kode </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>


4. Selanjutnya letakan kode css dibawah ini tepat diatas kode  ]]></b:skin> atau </style>


/* Kode pop up About Us */
.boxinner{z-index:99;width:100%;height:575px;position:absolute;left:50%;margin-left:-310px;top:70px}
.contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}
headbanger{background:#ff675c;height:70px;width:100%;position:inherit}
#textlogo{background:rgba(0,0,0,0.1);color:#fff;line-height:70px;text-align:center;font-size:200%;position:inherit;width:68.5%;box-sizing:initial}
#left{background:#fff;color:#666;top:70px;bottom:0;right:0;padding:20px 0 0 0;width:200px;position:inherit}
#left a{color:#888;transition:initial;}#left a:hover{color:#fff;}
#left i {margin:0 10px 0 0}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6,.taber7{cursor:pointer;padding:15px;color:#888;}
.taber1:hover{background:#ff6733;color:#fff}.taber2:hover{background:#e74c3c;color:#fff}.taber3:hover{background:#2980b9;color:#fff}.taber4:hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0;color:#fff}
.taber6:hover{background:#383838;color:#fff}.taber7:hover{background:#f39c12;color:#fff}
#left .taber1:hover a,#left .taber2:hover a,#left .taber3:hover a,#left .taber4:hover a,#left .taber5:hover a,#left .taber6:hover a,#left .taber7:hover a{color:#fff}
#aboutus{background:#fafafa;width:62.2%;padding:20px 20px 40px 20px;color:#444;text-align:left;position:inherit;float:left;line-height:normal}
#aboutus img{margin:10px auto 0 auto;display:table;border-radius:100%;max-width:140px;box-shadow:0 0 0 5px rgba(0,0,0,.03)}
.scrollbarbox{overflow:hidden;text-align:justify;margin:55px 0 0 0}
.scrollbarbox .innerone{height:480px;overflow:auto}
#popup{display:none;opacity:0;visibility:hidden;transform:scale(1.1);-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s}
#popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;opacity:1;visibility:visible;margin:auto;transform:scale(1.0);}
.popup-container{position:relative;margin:0 auto;padding:20px}
a.popup-close{position:absolute;border-radius:50px;right:20px;line-height:50px;margin:0 auto;font-size:16px;text-decoration:none;color:rgba(0,0,0,0.2);font-family:fontawesome}
a.popup-close:hover{color:rgba(0,0,0,0.6);}
.totalposts{margin:auto;display:table;text-align:center}
.totalposts .totalnumber{display:inline;font-weight:700;font-size:300%;color:#aaa}
.totalposts .totallabel{display:block;color:#aaa;font-weight:700}
li.infolee{border:0;}
li.infolee a{background:#ff675c;color:#fff;display:block;margin:16px 0;padding:4px 8px;border-radius:3px;font-size:90%;font-weight:700;transition:background-color .3s}
li.infolee a:hover{background:#e4554b;color:#fff;}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}


5. Selanjutnya letakan kode dibawah ini tepat dibawah kode <body>

<div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='contentbox'>
<headbanger><span id='textlogo'>JQUERYINDO</span>
<a class='popup-close' href='#closed' title='Close'><i class='fa fa-times'/></a>
</headbanger>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img alt='Paman Teuku' height='140' src='4.bp.blogspot.com/-XBkFb9eIzdA/VxDx3TyeQMI/AAAAAAAAEG0/sXwQXdndL70cBrsnAinoPZAnKM_dPCHTACLcB/s1600/okta.png' title='Paman Teuku' width='140'/><br/>
<script src='http://www.oktavialie.web.id/feeds/posts/default?alt=json-in-script&amp;callback=getposts'/><br/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor, quam et elementum mattis, ex nibh sagittis arcu..<br/><br/>
a finibus erat diam non tellus. Nulla feugiat at enim ac tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.. Terima kasih.
</div></div></div>
<div id='left'>
<div class='taber1'><a href='#' target='_blank' title='Soundcloud'><i class='fa fa-soundcloud fa-fw'/> Soundcloud</a></div>
<div class='taber2'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Google Plus'><i class='fa fa-google-plus fa-fw'/> Google Plus</a></div>
<div class='taber3'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Facebook'><i class='fa fa-facebook fa-fw'/> Facebook</a></div>
<div class='taber4'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Twitter'><i class='fa fa-twitter fa-fw'/> Twitter</a> </div>
<div class='taber6'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Codepen'><i class='fa fa-codepen fa-fw'/> Codepen</a></div>
<div class='taber7'><a href='https://www.blogger.com/follow-blog.g?blogID=7342017194742683056' rel='nofollow' target='_blank' title='Join this blog'><i class='fa fa-users fa-fw'/> Join this blog</a></div>
</div></div></div></div></div>


<img alt='Paman Teuku height='140' src='4.bp.blogspot.com/-XBkFb9eIzdA/VxDx3TyeQMI/AAAAAAAAEG0/sXwQXdndL70cBrsnAinoPZAnKM_dPCHTACLcB/s1600/gambar.png' title='Paman Teuku' width='140'/>

  1. Url berwarna merah, ganti mengunakan Url gambar profil Sobat.
  2. Paman Teuku ubah dengan nama sobat

<script src='http://www.websitesobat.com/feeds/posts/default?alt=json-in-script&amp;callback=getposts'/><br/><br/>

6. Sekarang letakan kode dibawah ini tepat diatas kode </head>

<script type='text/javascript'>
//<![CDATA[
// Total Posts
function getposts(json){var totalposts=json.feed.openSearch$totalResults.$t;document.write('<div class="totalposts"><span class="totalnumber">'+totalposts+'</span><span class="totallabel">Artikel yang di Publish</span></div>');}
//]]>
</script>


7. Selanjutnya sekarang anda simpan kode icon tombol pop up tersebut dimana saja anda ingin meletakanyya.

<li class='infolee'><a class='popup-link' href='#popup'>Info</a></li>


8. Lalu save template anda.

Oke sobat blogger saya rasa sudah cukup untuk tutorial "Cara Membuat Pop Up Info Keren " lebih dan kurangnya saya mohon maaf, semoga sukses.

Cara Paling Mudah Daftar Feedburner Pada Blogger

Januari 15, 2017 Komentar
Cara Paling Mudah Daftar Feedburner Pada Blogger

Cara mendaftar Feedburner, Membuat Akun Feedburner

Membuat Akun Feedburner
FeedBurner merupakan layanan manajemen umpan web (web feed), yang terdiri dari RSS feed dan alat pengelola (management tools) untuk blogger dan podcaster, dan aplikasi publikasi lain yang berbasis web. Layanan ini menyediakan analisis lalu lintas pengunjung situs dan sistem periklanan yang dapat dipilih

  1. Buka dan login ke akun Blogger Anda.
  2. Pilih Blogger yang ingin Anda tautkan ke Feedburner.
  3. Klik pada Tataletak.
    Klik pada Tataletak
  4. Tambahkan Gadget 
    Tambahkan Gadget
  5. Scrole krusol kebawah dan temukan Widget Ikuti Lewat Email
    Widget Ikuti Lewat Email
  6. Nah sekarang Feedburner anda telah dibuat dan Copy Link Feedburner Anda dan letakan pada lokasi yang anda inginkan. 
    Link Feedburner
Itulah Tutorial Cara Paling Mudah Daftar Feedburner Pada Blogger, jika Artikel diatas bermanfaat silahkan sobat tuliskan komentar dibawah ya.