Tampilkan postingan dengan label HTML. Tampilkan semua postingan
Tampilkan postingan dengan label HTML. 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 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.

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.