Membuat Slider yang Elegan dan Simple di Blogspot

Oleh Wisa Rahardi - March 04, 2015 45 Comments

Slider atau yang juga sering disebut slideshow adalah informasi yang berjalan atau sliding di blog atau website. Slider pada dasarnya untuk menampilkan informasi utama yang tertuang dalam sebuah konten blog.

Karena untuk kenyamanan pengunjung, tampilan slider juga menjadi penting diperhatikan. Jika menampilkan slider dengan asal-alasan bukan tidak mungkin akan merusak estetika sebuah website. Olehnya, dibutuhkan tema slider yang sesuai dengan template yang digunakan.

Pada tutorial kali ini, bloGoooblok ~ akan memaparkan cara membuat slider yang elegan dan simple untuk blogspot. Lihat contohnya pada demo dibawah ini:

• Lihat Demo

Slideshow ini menggunakan JavaScript yang merupakan salah satu cara terbaik untuk menampilkan banyak informasi halaman artikel dalam ruang yang relatif kecil dengan menambahkan fungsi yang bagus.

(Baca Juga: Membuat Popular Post di Blogspot Lebih Ramping)

Slider ini memiliki fitur menampilkan gambar otomatis dengan efek geser dilengkapi judul dan deskripsi / keterangan, juga memiliki navigasi menggunakan persegi / titik untuk memberikan pada pengunjung agar dapat memilih konten lebih mudah dengan melompat langsung untuk setiap slide.

Slider Geser akan berhenti secara otomatis ketika mouse hover dan ini dikonfigurasi dalam kode Script.

Cara Membuat Slider yang Elegan dan Simple di Blogspot

Slider ini dibuat dari beberapa baris HTML sederhana dan jika Anda memiliki pengetahuan dasar CSS, maka Anda dapat menyesuaikan atau memodifikasi seperti yang Anda inginkan, dan memang benar-benar dapat dimodifikasi sehingga terlihat lebih bagus.

Jika tertarik untuk membuatnya, maka ikuti langkah-langkah berikut ini:

• Pertama-tama masuk ke dasboard blogspot Anda, lalu pilih Template, Edit HTML. Cari kode ]]></b:skin> atau </style>  di bagian head template. Setelah ketemu (gunakan Ctrl F) copy lalu paste script berikut tepat diatasnya.

.easyslider-wrapper { 
    width: auto; 
    float: left; 
    position: relative; 
    padding-right: 2%; 
    padding-top: 10px; 
    }
.easyslider { 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
    height: 350px; 
    background: #eee; 
    }
.image_reel { 
    position: absolute; 
    top: 0; 
    left: 0; 
    }
.image_reel img { 
    float: left; 
    width: 20%; 
    height: 350px;
    }
.paging { 
    background: none; 
    position: absolute; 
    bottom: 15px; 
    right: 20px; 
    padding:4px 0 2px; 
    z-index: 100; 
    display: none; 
    }
.paging a { 
    margin: 3px; 
    background: #fff; 
    width: 10px; 
    height:10px; 
    display: inline-block; 
    border: none; 
    outline: none;
    }
.paging a.active { 
    background: #15E3FF; 
    border: 1px solid #15E3FF; 
    }
.paging a:hover { }
.easytitledes { 
    width:70%; 
    display: none; 
    position: absolute; 
    bottom: 20px; 
    left: 20px; 
    z-index: 101; 
    background: #000A3F;
    background: rgba(2, 0, 51, 0.6); 
    padding: 10px 15px; 
    }
.easytitledes a { 
    color: #15E3FF; 
    font: 14px sans-serif; 
    text-transform: uppercase; 
    font-weight: bold; 
    }
.easytitledes a:hover { 
    color:#29FF00 
    }
.easytitledes p { 
    color: #fff; 
    font: 12px Arial; 
    }

• Masih disekitar head, masukan kode Jquery berikut ini tepat diatas </head>. Namun jika template Anda sudah pernah memasang Jquery dalam versi yang lain, baik itu versi lama, lupakan saja langkah ini. Langsung ke langkah selanjutnya

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

• Masih tetap di bagian head,  masukan kode JavaScript berikut diatas </head>.

<script type="text/javascript">
$(document).ready(function() {
    $(".paging").show(); 
    $(".paging a:first").addClass("active");

var imageWidth = $(".easyslider").width(); 
var imageSum = $(".image_reel img").size(); 
var imageReelWidth = imageWidth * imageSum;

    $(".image_reel").css({'width' : imageReelWidth});

rotate = function(){ var triggerID = $active.attr("rel") - 1; 

var image_reelPosition = triggerID * imageWidth;

    $(".paging a").removeClass('active');
        $active.addClass('active');

    $(".easytitledes").stop(true,true).slideUp('slow');
    $(".easytitledes").eq( 
    $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); 
    $(".image_reel").animate({left: -image_reelPosition}, 400 );
    };

rotateSwitch = function(){
    $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");

play = setInterval(function(){
    $active = $('.paging a.active').next();

if ( $active.length === 0) {
    $active = $('.paging a:first'); } rotate(); }, 4000); };

rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() {
    clearInterval(play); }, function() { rotateSwitch();
    });
    $(".paging a").click(function() { $active = $(this);
    clearInterval(play); rotate(); rotateSwitch();  return false;
    });
});
</script>

• Untuk memasang kode HTML slider, ada cara yang bisa ditempuh. Secara manual atau otomatis. Manual artinya, isi slider nantinya akan diisi sendiri, sedangkan secara manual, isi slider akan ikut berdasarkan postingan terbaru.

(Baca Juga: Cara Membuat dan Memasang Google Custom Search Engine)

• Menggunakan Slider Secara Manual

Masukan kode berikut di bagian dalam HTML body blog Anda, contoh setelah atau dibawah kode <div class="main-wrapper" > atau <div id="main-wrapper" > atau baris kode yang sejenis atau mirip, karena struktur setiap Blog memiliki nama yang berbeda-beda.

Karena saya menggunakan template standar dari blogspot yang terbaru, kode itu saya tempatkan dibawah kode <div class='blog-posts hfeed'>. Itu karena saya ingin slider tersebut sejajar dengan kolom postingan. Jika Anda tertarik melakukan hal yang sama, letakkan kode berikut dibawah  <div class='blog-posts hfeed'> yang pertama.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='easyslider'>
   <div class='image_reel'>
<a href="#"><img src="...image1.jpg" /></a>
<a href="#"><img src="...image2.jpg" /></a>
<a href="#"><img src="...image3.jpg" /></a>
<a href="#"><img src="...image4.jpg" /></a>
<a href="#"><img src="...image5.jpg" /></a>
   </div>
   <div class='descriptionslider'>
<div class="easytitledes"><a href='...post-link1.html'>Post-Title 1</a><p>Description / Caption 1</p></div>
<div class="easytitledes"><a href='...post-link2.html'>Post-Title 2</a><p>Description / Caption 2</p></div>
<div class="easytitledes"><a href='...post-link3.html'>Post-Title 3</a><p>Description / Caption 3</p></div>
<div class="easytitledes"><a href='...post-link4.html'>Post-Title 4</a><p>Description / Caption 4</p></div>
<div class="easytitledes"><a href='...post-link5.html'>Post-Title 5</a><p>Description / Caption 5</p></div>
   </div>
   <div class='paging'>
<a class='' href='#' rel='1'/>
<a class='' href='#' rel='2'/>
<a class='' href='#' rel='3'/>
<a class='' href='#' rel='4'/>
<a class='' href='#' rel='5'/>
   </div>
</div>
</b:if>

Catatan: 
Kode berwarna merah adalah untuk link image atau gambar, Biru untuk link Url posting atau artikel, Wanah hijau untuk Title atau Judul, dan Orange untuk deskripsi. Semuanya dimasukan satu persatu ke dalam baris kode HTML.

• Menggunakan Slider dengan Otomatis Publish Artikel Terbaru

Jika Anda ingin menggunakan slider tanpa harus susah-susah mengisi link dan artikelnya secara manual, maka ikuti langkah-langkah memasang slider secara otomatis berikut ini:

Pertama-tama, tambahan kode JavaScript berikut ini sebelum atau diatas kode </head> , kode inilah yang akan untuk menampilkan artikel terbaru secara otomatis.

<script type='text/javascript'>//<![CDATA[
imgr = new Array();imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqjW5DDx-76n8GY_l1I4IfPA0Jq_NNqxpcPvjamlWf-_3EU_ZTqwPriGTdW_2oAbsfqpyy6n5XhG4-_t0vPuGiWYje__94PP3LOn-S4_4jHNz4ZHdfZ4QAvxhEBx2UzNfkNC7ME-gIMLc/s1600/no+image.jpg";showRandomImg = true;aBold = true;summaryPost1 = 150;summaryTitle = 20;numposts1 = 5;
function removeHtmlTag(strx,chop){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}s =  s.join("");s = s.substring(0,chop-1);return s;}
function showrecentposts1(json) {j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img  = new Array(); for (var i = 0; i < numposts1; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href; break; }}
for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {pcm = entry.link[k].title.split(" ")[0]; break; }} if ("content" in entry) {var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var trtd = '<div class="easytitledes"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>'; document.write(trtd); j++;}}
function showrecentposts2(json) { j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img  = new Array(); for (var i = 0; i < numposts1 ; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href;  break; }}for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') { pcm = entry.link[k].title.split(" ")[0]; break; }} if ("content" in entry) {var postcontent = entry.content.$t;}; if(j>imgr.length-1) j=0; img[i] = imgr[j]; s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d; var trtd = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>'; document.write(trtd); j++;}}
//]]></script>

Catatan: 
Kode warna Merah adalah link image/gambar yang tampil jika dalam suatu artikel tidak ada gambarnya, sebaiknya anda mengganti link ini dengan link image anda sendiri, supaya pemakaian tidak terbagi-bagi dengan orang lain.

Masukan kode berikut disuatu bagian dalam body template, contoh sesudah/dibawah <div class="main-wrapper" > atau yang sejenis. Seperti diatas, saya memasang kode ini dibawah kode <div class='blog-posts hfeed'> yang pertama agar slider sejajar dengan postingan.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='easyslider'>
   <div class='image_reel'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
   </div>
   <div class='descriptionslider'>
<script>         
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
   </div>
   <div class='paging'>
<a class='' href='#' rel='1'/>
<a class='' href='#' rel='2'/>
<a class='' href='#' rel='3'/>
<a class='' href='#' rel='4'/>
<a class='' href='#' rel='5'/>
   </div>
</div>
</b:if>

Kode yang diberi warna merah adalah baris kode pembuka dan penutup untuk menampilkan slider hanya di homepage saja. Jadi slider tidak akan tampil disemua halaman blog. Hanya ketika seseorang melihat homepage atau beranda, slider ini tampil

• Setelah yakin dengan hasilnya (preview terlebih dahulu) selanjutnya, Simpan Template.

(Baca Juga: Mengenal dan Cara Membuat Layanan Subscribe)

Begini aturan volume pengeras suara masjid di 6 negara, termasuk Indonesia

Jumat, 24 Agustus 2018 06:48 Reporter : Merdeka

  10 masjid raksasa. ©Reuters

Merdeka.com - Seorang ibu di Medan bernama Meiliana, pada 22 Agustus 2018 mendapat vonis penjara 18 bulan dari Pengadilan Tinggi Sumatera Utara atas pasal penistaan terhadap agama lantaran mengeluhkan volume suara azan yang dianggapnya terlalu keras.

BERITA TERKAIT

Kasus yang menjerat Meiliana sebenarnya telah terjadi pada 2016. Saat itu, ia meminta pengurus Masjid di sekitar tempat tinggalnya untuk mengecilkan volume pengeras suara. Ia mengaku terganggu dengan intensitas suaranya.

Pernyataan Meiliana itu ternyata memicu kemarahan warga dan menyulut kerusuhan yang menyebabkan sekelompok orang membakar serta merusak vihara dan klenteng di Tanjung Balai.

MUI Sumatera Utara kemudian mengeluarkan pernyataan yang mengatakan Meiliana telah melakukan penistaan agama.

Kasus ini memasuki ranah hukum setelah jaksa menetapkan Meiliana sebagai tersangka penistaan agama pada 30 Mei 2018 dan mendakwanya dengan Pasal 156 dan 156a KUHP tentang penistaan agama.

Pada akhir persidangan, majelis hakim sependapat dengan dakwaan jaksa dan menjatuhi hukuman 1 tahun 6 bulan penjara kepada Meiliana sesuai tuntutan jaksa.

Apa yang menimpa Meiliana tak hanya menjadi sorotan di dalam negeri, namun juga menarik perhatian media internasional.

Sejumlah media, kantor berita, dan surat kabar, seperti Al Jazeera dari Qatar, Sky News dan The Independent dari Inggris, Deutsche-Welle dari Jerman, Newsweek dari Amerika Serikat, ABC News Australia, The Strait Times Singapura, dan NDTV India beramai-ramai memberitakan kasus tersebut.

The Independent misalnya, mengutip pernyataan Usman Hamid, direktur eksekutif Amnesty International Indonesia, menyerukan Pengadilan Tinggi Sumatra Utara untuk membatalkan vonis terhadap Meiliana tersebut.

"Mengajukan keluhan tentang kebisingan bukanlah pelanggaran pidana. Keputusan yang menggelikan ini merupakan pelanggaran mencolok dari kebebasan berekspresi," kata Usman seperti dikutip The Independent, Kamis 23 Agustus 2018 dalam artikel berjudul "Woman who complained about noisy mosque jailed for blasphemy".

Ketika seorang warga minoritas di Indonesia, seperti Meiliana, dipenjara lantaran mengeluhkan volume suara adzan, di sejumlah negara muslim lain pemerintah bersama ulama mewajibkan pengurus masjid menghargai ketenangan umum.

Berikut, aturan volume toa masjid di 7 negara muslim, termasuk Indonesia, seperti Liputan6.com kutip dari DW Indonesia, Kamis (23/8).

1. Arab Saudi

Sejak 2015 silam Kementerian Agama Islam di Arab Saudi melarang masjid menggunakan pengeras suara di bagian luar, kecuali untuk azan, salat Jumat, salat Idul Fitri dan Idul Adha, serta salat minta hujan.

Kebijakan ini diambil menyusul maraknya keluhan warga ihwal volume pengeras suara yang terlalu besar. Arab News melaporkan, tahun lalu masjid-masjid diperintahkan mencabut toa dari menara.

2. Mesir

Keputusan pemerintah Mesir melarang pengeras suara masjid digunakan untuk selain azan juga didukung oleh Universitas al-Azhar.

Larangan ini terutama mulai diawasi sejak bulan Ramadan 2018 lalu. Al-Azhar mengatakan, pengeras suara bisa mengganggu pasien di rumah sakit atau manula dan oleh karenanya, bertentangan dengan ajaran Islam.

3. Bahrain

Belum lama ini Kementerian Agama Islam di Bahrain memperpanjang larangan penggunaan pengeras suara di masjid selain untuk azan.

Lantaran banyak keluhan, pemerintah juga meminta masjid menurunkan volume pengeras suara.

"Islam adalah soal toleransi, bukan mempersulit kehidupan orang lain dengan mengganggu lewat pengeras suara," kata Abdallah al-Moaily, seorang pejabat lokal kepada GulfInsider.

4. Malaysia

Di Malaysia, aturan ihwal pengeras suara masjid bergantung pada negara bagian masing-masing.

Penang, Perlis dan Selangor termasuk negara bagian yang melarang pengeras suara digunakan selain untuk azan.

Dalam fatwanya, mufti Perlis, Datuk Asri Zainul Abidin, menegaskan larangan tersebut sudah sesuai dengan ajaran Nabi Muhammad untuk tidak mengganggu ketertiban umum.

5. Uni Emirat Arab

Pemerintah setempat tidak menerbitkan ketentuan khusus mengenai pengeras suara masjid. Namun, penduduk didorong untuk menyampaikan keluhan jika volume pengeras suara terlalu tinggi.

Uni Emirat Arab menggariskan suara azan tidak boleh melebihi batas 85 desibel di kawasan pemukiman agar tidak mengganggu aktivitas warga setempat.

6. India

Pemerintah mengawasi penggunaan pengeras suara yang tak berizin di masjid-masjid.

Aturan nasional antara lain membatasi volume pengeras suara di ruang publik menjadi maksimal 10 desibel di atas volume derau di sekitar atau 5dB di atas volume bunyi-bunyian di ruang pribadi.

Aturan yang juga didukung ulama Islam India ini diterbitkan untuk menjamin ketertiban umum.

7. Indonesia

Kementerian Agama RI tidak membatasi volume pengeras suara masjid, melainkan hanya mengatur penggunaan toa untuk keperluan ibadah.

Dalam instruksi Direktur Jendral Bimbingan Masyarakat Islam Kemenag RI, masjid diperkenankan menggunakan pengeras suara untuk adzan dan pembacaan ayat Alquran maksimal 15 menit sebelum waktu salat.

Selama salat masjid hanya boleh menggunakan pengeras suara di bagian dalam.

Pengertian Tiket

Pengertian Tiket

Tiket adalah suatu dokumen perjalanan yang dikeluarkan oleh suatu perusahaan yang berisi rute, tanggal, harga,data penumpang yang digunakan untuk melakukan suatu perjalanan.

 http://nyontekkk.blogspot.com/2012/11/tiket-adalah-suatu-dokumen-perjalanan.html

NamTag