Membuat Seleksi Otomatis Pada Tag Blockquote dan Pre

Cara Membuat Seleksi Otomatis Pada Tag Blockquote dan Pre - Bagi sahabat yang suka berbagi tutorial, biasanya membagikan kode-kode yang suka dicopy. Standarnya penggunaan kode itu pada tag code atau tag pre. Akan tetapi setelah saya mengunjungi blog sahabat, tidak sedikit menggunakan blockquote untuk berbagi kode, itu dikarenakan blockquote lebih mudah digunakan dan tidak ribet, tinggal block > klik ikon "quote" mudah kan?, contoh penggunaan tag pre:

<pre>Sekarang aku makin sayang sama kamu</pre>

Untuk mempermudah mengcopy code yang dibagikan, sebaiknya menggunakan seleksi otomatis. Artinya, dengan hanya mengklik atau klik ganda (double click) kode tersebut akan terseleksi semua, tinggal melakukan Ctrl+C atau klik kanan kemudian Copy.

Untuk menerapkan seleksi otomatis pada tag blockquote:
1. Login ke Blogger
2. Dashboar > klik template > edit HTML
3. Simpan kode dibawah ini sebelum </body>

<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;blockquote&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

Untuk menerapkan seleksi otomatis pada tag pre:
Ikuti langkah ke-1, 2, dan 3 seperti di atas.

<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

Pada script di atas, saya menggunakan klik ganda (double click) untuk menerapkan satu kali klik langsung terseleksi, sobat tinggal mengganti dblclick menjadi click.

Cara Menambahkan jQuery Pada Template Blogger

Cara Menambahkan jQuery Pada Template Blogger - Mungkin sahabat sudah tidak asing lagi dengan istilah jQuery. Apa itu jQuery?  jQuery adalah sebuah Library Javascript yang cepat dan ringkas yang mana dapat menyederhakan document traversing, event handling, animating, dan AJAX interactions untuk pengembangan web secara cepat.

Secara sederhana, jQuery sangat diperlukan untuk membuat web dinamis. JQuery akan menampilkan efek, animasi, dan fungsi-fungsi yang sangat menarik lainnya. Banyak plugin / trik yang menggunakan jQuery dan tidak akan berjalan tanpa jQuery. Ukurang jQuery ini sangat kecil dan tidak membuat loading blog jadi berat cuman 100kb.

Untuk Menambahkan jQuery Pada Template Blogger ikuti langkah-langkah berikut ini:
1. Login ke Blogger
2. Dashboar > klik template > edit HTML
3. Tambahkan kode di bawah ini sebelum/di atas </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Pemasangan jQuery, hanya 1 dalam template. Tidak boleh ada 2 script atau lebih, karena akan mengakibatkan beberapa script tidak akan bekerja. Apabila ingin mengganti dengan yang terbaru, cukup ganti link-nya saja. Apabila ada tips, trik, atau tutorial yang menggunakan jQuery, sobat tidak perlu menambahkannya lagi.

4. Simpan template.
Sumber: http://blog.kangismet.net/2013/04/menambahkan-jquery-pada-template-blogger.html

Cara Membuat Widget Sticky di Sidebar Blog

Cara Membuat Widget Sticky di Sidebar Blog, Cara Membuat Widget Sticky di Menu Navigasi Blog, Cara Membuat Widget Sticky di Blog, Membuat Sticky di blog dengan mudah.

Halo sobat Blog Krizeer, di hari yang cukup cerah ini namun ujan, sekarang-sekarang ini saya mohon maaf jarang update, karena saya suka main games. Kali ini saya akan membahas Cara Membuat Widget Sticky di Sidebar Blog, sebetulnya widget sticky ini tidak hanya bisa digunakan di sidebar saja, tapi di ID manapun bisa, contohnya di menu navigasi. Mungkin sobat sudah mengetahui tujuan saya kali ini. Widget Sticky fungsinya ketika layar di scroll kebawah, widget tersebut akan menempel atau melayang di atas, meskipun di scroll kebawah.

• Demo widget sticky yang di sidebar, klik disini (coba scroll kebawah dan lihat iklan teks yang di sidebar menempel di atas).
• Demo widget sticky yang di menu navigasi, klik disini (coba scroll kebawah dan lihat menu navigasinya menempel di atas).

Berikut langkah-langkah membuat Widget Sticky di Sidebar :
1. Login ke Blogger
2. Dashboar > Klik Template > Edit HTML
3. Tambahkan kode dibawah ini di atas </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

4. Tambahkan kode CSS di bawah ini di atas ]]></b:skin>

.sticky {
position:fixed;
top:5px;/* jarak dari atas*/
z-index: 100;
}

5. Letakan kode java script dibawah ini di atas </body>

<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML1').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#HTML1').addClass('sticky');
} else {
$('#HTML1').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script>

6. Simpan Template

Tips :
Ganti #HTML1 dengan ID widget yang akan dibuat sticky. ID #HTML1 itu bukan hanya berupa ID, Class pun juga bisa.

Source : http://ahmadsuyadi.blogspot.com/2013/11/cara-membuat-widget-sticky-di-sidebar.html

Cara Membuat Sidebar Akordion dengan jQuery

Cara Membuat Sidebar Akordion dengan JQuery di Blog | Sidebar akordion memang sangat menarik untuk di pasang di blogger, keunikannya widget-widgetnya yang muncul hanya 1, maksudnya widget paling atas muncul pertama kali saat blog di buka, widget yang ke 2 ke 3 ke 4 dan seterusnya, disembunyikan, maksudnya yang muncul hanya judul-judulnya saja, jika kurang jelas lihat gambar di bawah ini.

Sebelum mencoba artikel ini ada baiknya template sobat di back up dulu, untuk memasang sidebar akordion sobat harus mengenal ID sidebar dan ID sidebar h2 masing-masing, untuk lebih jelasnya lihatlah gambar dibawah ini :

ID #sidebar :

ID #sidebar h2 ( judul widget di sidebar ) :

Langkah-Langkah Membuat Sidebar Akordion :

• Pertama-tama masuklah ke halaman editor HTML template Anda, lalu temukan kode </head> (kode javascript ini dengan ID #sidebar-wrapper :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    // Sembunyikan semua tubuh widget (tutup semua panel)
    $('#sidebar-wrapper .widget-content').hide();
    // Tambahkan class 'active' pada elemen <h2> pertama
    // kemudian tampilkan elemen berikutnya dengan efek .slideDown(), sehingga panel akordion paling atas akan tampak terbuka
    $('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
    // Saat elemen <h2> yang berada di dalam elemen #sidebar-wrapper diklik...
    $('#sidebar-wrapper h2').click(function() {
        if($(this).next().is(':hidden')) {
            // Sembunyikan semua panel yang terbuka dengan efek .slideUp()
            $('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
            // Lalu buka panel yang berada di bawah elemen ini (elemen <h2> yang diklik) dengan efek .slideDown()
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
//]]>
</script>

Demo : http://dte-dummy.blogspot.com/

Jika mau bisa dibuka lalu ditutup lagi pakai kode ini :

<!-- Sidebar Akordion dengan JQuery dari Blog Krizeer (www.yoga-tc.blogspot.com) -->
<script type='text/javascript'>
//<![CDATA[
// sidebar
$(function(){$('#sidebar-wrapper .widget-content').hide();$('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');$('#sidebar-wrapper h2').css('cursor','pointer').click(function(){$('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');if($(this).next().is(':hidden')){$(this).addClass('active').next().slideDown('slow')}else{$(this).removeClass('active').next().slideUp('slow')}})});
//]]>
</script>

Demo : http://demo-anak-layangan.blogspot.com/

Jika di template sobat sudah memasang jQuery, jangan copy kode di atas, karena satu template hanya memasang satu jQuery, jika lebih beberapa widget tidak akan berfungsi.

Tidak berhasil?
Oke, mungkin Anda mempunyai sidebar dengan ID yang berbeda. Coba periksa kembali template Anda dan temukan baris kode yang menggambarkan deretan widget sidebar blog Anda. Kurang lebih tampilannya seperti ini:

<div id='sidebar-wrapper-2'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
        <b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
        <b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
        <b:widget id='Stats1' locked='false' title='Statistik' type='Stats'/>
        <b:widget id='HTML2' locked='false' title='Komunitas' type='HTML'/>
        <b:widget id='HTML4' locked='false' title='Facebook Suka' type='HTML'/>
    </b:section>
</div>

Atau seperti ini dengan memakai ID #sidebar

 <div id='sidebar'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
        <b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
        <b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
        <b:widget id='Stats1' locked='false' title='Statistik' type='Stats'/>
        <b:widget id='HTML2' locked='false' title='Komunitas' type='HTML'/>
        <b:widget id='HTML4' locked='false' title='Facebook Suka' type='HTML'/>
    </b:section>
</div>

Saya rasa artikel ini sudah cukup jelas, jika ada yang mau ditanyakan, silahkan berkomentar dibawah, klo saya tau, pasti saya jawab, klo saya gk tau saya alihkan pertanyaan sobat pada DTE. Source : DTE

Awas jangan copas sembarangan, apalagi tanpa link sumber ke blog ini, bisa-bisa blog sobat di banned oleh google, karena semua artikel blog ini dilindungi oleh DMCA

Cara Membuat Smooth Back to Top dengan jQuery di Blog

Smooth Back to Top dengan Jquery. itulah yang akan saya share pada kesempatan kali ini, fungsi dari tombol back to top ini adalah sebagai pintasan dari bawah naik keatas, apabila halaman terlalu tinggi saat discroll kebawah dan kita ingin kembali keatas, kita hanya tinggal mengklik tombol back to top tersebut maka dengan otomatis halaman akan kembali keatas. Sebetulnya tutorial kali ini banyak yang sudah memposkan, saya juga dapat kode-kode aneh ini dari teman saya MDF Blog, dan saya hanya memodifikasinya sedikit tadinya berbentuk seperempat bulat, dan saya modifikasi sedikit dan bentuknya menjadi atas kanan dan kiri menjadi agak bulat sedikit, dan kebawahnya lurus, demonya bisa dilihat diblog ini dipojok kanan bawah.

Untuk memasang tombol Back to Top Smooth dengan Jquery ikuti langkah-langkah berikut:
1. Login akun Blogger anda.
2. Pada Dashboard pilih Template » Edit HTML
3. Letakkan kode dibawah ini tepat di atas kode ]]></b:skin>

/* Smooth Back to Top dengan jQuery */
#backtop { cursor:pointer; position:fixed !important; position:absolute; left:96%; bottom:-70px; z-index:999; background-color:#ff0000; border:1px solid #333; -webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333; -moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333; box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333; width:30px; height:45px; overflow:hidden; text-indent:-999px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; border-top-left-radius:5px; border-top-right-radius:5px }
#backtop::after { content:" " ; position:absolute; top:3px; left:8px; width:0; height:0; border-width:12px 7px; border-style:solid; border-color:transparent transparent #f7f7f7 transparent }

4. Kemudian letakkan kode berikut ini diatas kode </body>

<!-- Smooth Back to Top dengan jQuery -->
<div id='backtop'>Back to Top</div>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100){$("#backtop").removeAttr("href");$("#backtop").stop().animate({bottom:"-3",right:"0"},{duration:800,queue:false})}else{$("#backtop").stop().animate({bottom:"-54",right:"0"},{duration:1000,queue:false})}});$(function(){$("#backtop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})});
//]]>
</script>

5. Simpan Template
Silahkan anda sesuaikan sendiri dan edit-edit. Semoga Bermanfaat.

Source : MDF Blog

Cara Membuat Emoticon pada Komentar Blogger

Cara Membuat Emoticon pada Komentar Blogger - Emoticon yang merupakan gabungan kata dari "emotion" dan "icon" yang berarti icon yang digunakan untuk mengekspresikan emosi sebuah pernyataan tertulis, dengan memasang emoticon di blog, maka blog akan lebih terlihat berwarna dan juga hidup, kenapa hidup ?, karena ikon gambarnya bukan berformat JPG, melainkan Gif (gambar gerak), tutorial kali ini mungkin sudah banyak mengetahuinya, namun ada pula yang hanya bisa menggunakannya saja, dan tidak bisa memasangnya, oke langsung saja tutorialnya.

• Masuk ke Blogger.com
• Masuk ke Template -> klik edit HTML
• Salin kode di bawah ini, kemudian letakkan tepat sebelum/di atas kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="https://ivyth.googlecode.com/svn/js/emoticon.min.js" type="text/javascript"></script>

Perhatikan kode yang bercetak tebal dan ada garis bawah, Karena manipulasi ini menggunakan jQuery maka setidaknya ditemplate anda harus ada jQuery library [baris-1]. Jika sudah ada jQuery library di template anda maka kode pada baris-1 jangan disalin[dicopy].

• Salin kode di bawah ini, kemudian letakkan tepat sebelum/di atas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Klik untuk melihat code!",
emoMessage:"Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon."
})
});
//]]>
</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Klik untuk melihat code!",
emoMessage:"Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon."
})
});
//]]>
</script>
</b:if>

• Jika sudah selesai, klik Simpan Template dan lihat hasilnya.

Ingat sebelum memasang/melakukan pengeditan pada template sebaiknya dibackup terlebih dahulu. Selamat mencoba.
Source : MKR-Site

Cara Membuat Lightbox dengan Jquery di Blog

Selamat sore sobat Blog Krizeer, sekarang "Smart Education" sudah ganti judul blog :D, pada kali ini Blog Krizeer mau berbagi "Cara Membuat Lightbox dengan Jquery di Blog". Lightbox itu lho ketika gambar di klik di dalam postingan akan muncul gambar dengan ukuran originalnya di artikel tersebut, dan tidak usah menuju ke link gambarnya terlebih dahulu. Mungkin banyak yang sudah mengetahui tutorial saya kali ini, dan ada juga yang belumtau sama-sekali, Sebetulnya tutorial ini sudah dijelaskan oleh Blog Johanes, saya akan share lagi. Berikut screen shootnya, sobat bisa lihat sendiri gambar dibawah ini sebagai contohnya:

Sudah tau kan maksud saya ?, yaudah kalo sudah tau, simaklah tutorial berikut:

1. Buka Blogger -> edit HTML
2. Cari kode ]]></b:skin> dengan menekan tombol CTRL + F (supaya mempercepat proses pencarian, dari pada di liatin kodenya satu-satu, entar lebaran duluan deh :D)
3. Copy paste kode dibawah ini tepat di atas kode ]]></b:skin>

/* Lightbox by www.yoga-tc.blogspot.com */
#jquery-overlay{position:absolute;
top:0;left:0;z-index:90;
width:100%;height:500px}
#jquery-lightbox
{position:absolute;top:0;left:0;width:100%;
z-index:100;text-align:center;line-height:0}
#jquery-lightbox a,#jquery-lightbox a:hover
{border:none}
#jquery-lightbox a img{border:none}
#lightbox-container-image-box
{position:relative;background-color:#fff;border-radius: 5px 5px 0px 0px;
width:250px;height:250px;margin:0 auto}
#lightbox-container-image{padding:10px}
#lightbox-loading{position:absolute;top:40%;left:0%;
height:25%;width:100%;text-align:center;
line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;
height:100%;width:100%;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext
{width:49%;height:100%;zoom:1;display:block}
#lightbox-nav-btnPrev{left:0;float:left}
#lightbox-nav-btnNext{right:0;float:right}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;
background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;
width:100%;padding:0 10px 0;border-radius: 0px 0px 5px 5px;}
#lightbox-container-image-data
{padding:0 10px;color:#666}
#lightbox-container-image-data
#lightbox-image-details
{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:bold}
#lightbox-image-details-currentNumber
{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;
padding-bottom:0.7em}
/* End Lightbox by www.yoga-tc.blogspot.com */

Setelah itu letakan Jquery dibawah ini tepat diatas kode </body>

<script src='http://lightbox-blogger.googlecode.com/files/jquery.min.js' type='text/javascript'/>
<script src='http://lightbox-blogger.googlecode.com/files/lightbox.min.js' type='text/javascript'/>

Setelah itu simpan template dan lihat hasilnya dengan klik gambar pada postingan anda. Semoga bermanfaat :D
Source dari : http://djogzs.blogspot.com/2013/07/lightbox-blogger-dengan-jquery.html