Dewa Blogger: Hasil penelusuran untuk cara-kerja-dan-fungsi-dari-http

Halaman

    Social Items

Home / Hasil penelusuran untuk cara-kerja-dan-fungsi-dari-http
Pengguna internet tentunya sering melihat alamat website yang sering kali di awali dengan HTTP. Yang menjadi pertanyaan apa itu HTTP? Untuk itulah perlu dipahami mengenai pengertian HTTP, cara kerja beserta fungsinya. Ditinjau dari definisinya HTTP (Hyper Text Transfer Protocol) merupakan protokol yang dipakai untuk meminta dan menjawab antara client dan server.

Pengguna internet tentunya sering melihat alamat website yang sering kali di awali dengan Cara kerja dan Fungsi dari HTTP

Cara Kerja HTTP


Yang berperan sebagai client yakni browser atau perangkat yang dipakai untuk menampilkan konten web. Web browser tersebut akan memulai seruan dengan menciptakan korelasi TCP /IP ke suatu port, kemudian server HTTP akan mendengarkan diport tertentu dan menunggu client mengirim isyarat seruan yang akan meminta halaman yang sudah ditentukan.

Tindakan tersebut akan diikuti dengan pesan MIME. Dimana pesan tersebut mempunyai beberapa info isyarat kepala yang dapat menjelaskan aspek seruan tersebut. Proses transfer dan penerimaan data dari HTTP client ke web server, begitu juga sebaliknya terjadi sangat singkat. Namun proses tersebut juga dipengaruhi oleh tinggi rendahnya koneksi internet.

Fungsi HTTP


HTTP tentunya mempunyai peranan tersendiri, dimana HTTP berperan dalam menetapkan prosedur standar untuk pertukaran ditingkat aplikasi pesan antara perangkat di web. Dengan kata lain semua layanan web dijalankan melalui protokol ini. Di sisi lain HTTP berfungsi untuk mengambil interlink dokumen teks yang dilayani oleh web. Tidak hanya itu HTTP juga dipakai untuk mengakses sumber daya melalui web dengan memakai unifor resource locator (url). Nah itulah klarifikasi singkat mengenai apa itu HTTP beserta cara kerja dan fungsinya.

Cara Kerja Dan Fungsi Dari Http

jikalau Anda masih kesulitan untuk memahami bagaimana cara kerja dan cara membuatnya Membangun Layout Paralaks dengan JQuery

Membuat layout paralaks, jikalau Anda masih kesulitan untuk memahami bagaimana cara kerja dan cara membuatnya, di sini Saya akan menjelaskannya dengan rinci mengenai bagaimana layout tersebut tercipta. Pada dasarnya, sebuah layout paralaks hanyalah elemen HTML dengan beberapa tumpukan layer di dalamnya, dimana setiap layer tersebut akan dianimasikan posisinya dengan kecepatan yang sama namun dengan jarak yang berbeda untuk membuat pengaruh tiga dimensi dikala layer-layer tersebut bergerak.

Membuat Latar Paralaks

Kita mulai dengan elemen HTML menyerupai ini:

<div id="parallax-wrapper" class="parallax-wrapper">     <div class="layer layer-1"></div>     <div class="layer layer-2"></div>     <div class="layer layer-3"></div>     ...     ... </div>

Saya membuat sebuah elemen HTML sebagai kontainer dengan beberapa layer di dalamnya. Elemen utamanya ialah #parallax-wrapper. Elemen ini berfungsi sebagai wadah dari semua elemen paralaks di dalamnya. Sedangkan elemen-elemen .layer nantinya akan kita gunakan sebagai penampil latar. Kita akan memposisikan layer-layer tersebut menjadi bertumpukan layaknya tumpukan kaca. Makara kita memerlukan ini untuk mengatur dimensi paralaks yang kita buat:

.parallax-wrapper {   border:1px solid black;   height:200px; /* Tentukan tinggi area paralaks, ukuran lebar tidak begitu penting */   position:relative; /* Penting! Posisi otoriter pada elemen induk */   overflow:hidden; }  /* Buat semua layer paralaks sebagai elemen absolut,    sehingga tampilannya akan bertumpuk satu sama lainnya */ .parallax-wrapper .layer {   position:absolute;   top:0;   right:0;   bottom:0;   left:0;   /* set beberapa pengaturan latar di sini,      sebelum kita mendefinisikan latar gambar secara sepihak      pada masing-masing layer */   background-position:0 0;   background-color:transparent;   background-repeat:repeat-x; }

Setelah itu, gambar-gambar sanggup diterapkan pada masing-masing layer:

.parallax-wrapper .layer-1 {background-image:url('img/parallax-bg-1.png')} .parallax-wrapper .layer-2 {background-image:url('img/parallax-bg-2.png')} .parallax-wrapper .layer-3 {background-image:url('img/parallax-bg-3.png')}

Navigasi Paralaks

Navigasi ini dipakai untuk menggerakkan latar paralaks —dan konten di dalamnya tentunya, biar paralaks tidak hanya berfungsi sebagai hiasan. Navigasi terdiri dari elemen <span> dengan beberapa tautan di dalamnya. Anda sanggup membuatnya memakai elemen apa saja, tapi di sini Saya mencoba untuk membuatnya seminimalis mungkin:

<span id="parallax-navigation" class="parallax-navigation">     <a href="#1">1</a>     <a href="#2">2</a>     <a href="#3">3</a>     <a href="#4">4</a>     ...     ... </span>

CSS untuk navigasinya:

.parallax-navigation {   display:block;   height:30px;   line-height:30px;   position:relative;   text-align:right;   font-size:11px;   font-weight:bold; }  .parallax-navigation a {   text-decoration:none;   color:black;   background-color:#eee;   padding:5px 10px; }  /* set latar dan warna yang berbeda untuk item navigasi yang sedang aktif */ .parallax-navigation a.active {   background-color:#529834;   color:white; }

Selesai hingga di sini, kini kita akan mengerjakan fungsi dasar untuk menggerakkan layer:

Lihat Demo

Efek Paralaks

Beberapa mungkin akan membuat pengaruh paralaks dengan cara menganimasikan properti left pada elemen relatif untuk menggerakkan elemen ke kiri atau ke kanan. Tapi kekurangannya adalah, mengubah jarak left terlalu jauh akan membuat posisi layer berubah dan pada hasilnya akan menghilang dari pandangan jikalau jaraknya sudah terlalu jauh. Di sini Saya lebih menyarankan untuk menganimasikan posisi latar dibandingkan posisi layer itu sendiri, sehingga layer tidak akan bergerak, hanya latarnya saja yang bergerak.

Namun tidak mendukung properti animasi background-position dengan baik, jadi kita membutuhkan sebuah plugin untuk itu. Anda akan menemukan begitu banyak plugin jQuery yang berfungsi untuk menganimasikan posisi latar jikalau Anda mencarinya, dan Saya menentukan untuk memakai plugin animasi posisi latar dari Keith Wood. Saya tidak kenal dengan orang itu, tapi pluginnya elok ⇒ http://keith-wood.name/backgroundPos.html

<!-- Muat jQuery di awal --> <script src="js/jquery.js"></script> <!-- Sertakan plugin jQuery BackgroundPos --> <script src="js/jquery.backgroundpos.min.js"></script> <script>   // Pekerjaan kita di sini... </script>

Definisikan beberapa variabel untuk mempermudah kita dalam menyeleksi elemen dan sekaligus juga memperbaiki performa. Seperti biasa:

var $parallax = $('#parallax-wrapper'),     $layer = $parallax.find('.layer'),     $nav = $('#parallax-navigation');

Setelah itu kita kumpulkan semua item navigasi dan layer di dalam paralaks. Kita akan cenderung memakai jQuery .each() di sini, alasannya ialah ini ialah cara yang paling gampang untuk mendapat indeks/urutan masing-masing elemen. Kita akan menganimasikan elemen dengan parameter dari indeks elemen (urutan elemen):

$nav.find('a').each(function() {     // Saat pengguna mengeklik item navigasi...     $(this).on("click", function() {         var step = $(this).index(); // Dapatkan indeks dari setiap item navigasi         // Kumpulkan layer...         $layer.each(function() {             // Definisikan jarak animasi latar pada setiap layer menurut indeksnya             var distance = ($(this).index()+1) * 200; // Kalikan dengan 200         });         return false;     }); }).first().addClass('active'); // Tambahkan kelas `active` pada item navigasi pertama sebagai awalan

Setelah itu, buat fungsi untuk menambah dan melepas kelas active pada setiap item navigasi. Dulu Saya sudah pernah menuliskan kodenya di sini

$nav.find('a').each(function() {     // Saat pengguna mengeklik item navigasi...     $(this).on("click", function() {         var step = $(this).index(); // Dapatkan indeks dari setiap item navigasi         $nav.find('.active').removeClass('active'); // Singkirkan kelas `active` pada item navigasi         $(this).addClass('active'); // Tambahkan kelas `active` pada item navigasi yang diklik         // Kumpulkan layer...         $layer.each(function() {             // Definisikan jarak animasi latar pada setiap layer menurut indeksnya             var distance = ($(this).index()+1) * 200; // Kalikan dengan 200         });         return false;     }); }).first().addClass('active'); // Tambahkan kelas `active` pada item navigasi pertama sebagai awalan

Animasikan posisi latar pada masing-masing layer dengan parameter berupa urutan layer, sehingga jarak perubahan posisi akan berbeda-beda pada masing-masing layer (lebih tepatnya: jarak animasi akan meningkat menurut urutan layer):

$nav.find('a').each(function() {     // Saat pengguna mengeklik item navigasi...     $(this).on("click", function() {         var step = $(this).index(); // Dapatkan indeks dari setiap item navigasi         $nav.find('.active').removeClass('active'); // Singkirkan kelas `active` pada item navigasi         $(this).addClass('active'); // Tambahkan kelas `active` pada item navigasi yang diklik         // Kumpulkan layer...         $layer.each(function() {             // Definisikan jarak animasi latar pada setiap layer menurut indeksnya             var distance = ($(this).index()+1) * 200; // Kalikan dengan 200             // Animasikan posisi latar             $(this).stop().animate({backgroundPosition: '-' + (step*distance) + 'px 0px'}, 1500);         });         return false;     }); }).first().addClass('active'); // Tambahkan kelas `active` pada item navigasi pertama sebagai awalan

Dan beginilah hasil final sementara kita. Baru latarnya saja yang dianimasikan, belum ada konten:

Lihat Demo

Langkah Akhir: Menambahkan Konten

Animasi paralaks sudah berhasil dibuat, kini tinggal membuat konten paralaks saja. Setiap konten merupakan item yang sanggup Anda isi dengan goresan pena dan/atau gambar layaknya slideshow:

HTML

<div id="parallax-wrapper" class="parallax-wrapper">     <div class="layer layer-1"></div>     <div class="layer layer-2"></div>     <div class="layer layer-3"></div>     <div class="box-item-wrapper">         <div class="box-item"> ... </div>         <div class="box-item"> ... </div>         <div class="box-item"> ... </div>         <div class="box-item"> ... </div>         ...         ...     </div> </div>

CSS

.box-item-wrapper {   position:relative;   overflow:hidden; }  .box-item-wrapper .box-item {   float:left; /* posisikan `.box-item` sebagai layout mendatar */   width:100%;   margin:7em 0;   padding:1.5em 2em; }

Fungsi selanjutnya ditujukan untuk mengeset ukuran kontainer item dan lebar item, serta menganimasikan kontainer item menuju ke kiri dengan jarak tertentu menurut indeks item navigasi. Pertama-tama kita atur ukuran lebar .box-item-wrapper dan .box-item:

var $window = $(window),     $wrap = $parallax.find('.box-item-wrapper'),     width, totalWidth; // Variabel kosong  $window.on("resize", function() {      width = $parallax.width(); // Mendapatkan lebar `#parallax-wrapper`     totalWidth = width * $wrap.find('.box-item').length; // Lebar total = lebar `#parallax-wrapper` dikalikan jumlah `.box-item`      // Set lebar `.box-item-wrapper` selebar `totalWidth`     $wrap.width(totalWidth)         // Set lebar `.box-item` selebar `#parallax-wrapper`         .find('.box-item').width(width);  }).trigger("resize");

Saya menuliskan variabel width dan totalWidth kosong, kemudian menyatakan nilainya di dalam $window.on("resize", function() {}) biar lebar elemen sanggup diperbaharui setiap kali ukuran layar diubah. Saya juga menyatakan lebar elemen di dalam event tersebut.

Terakhir, gabungkan animasi properti left di dalam event klik item navigasi untuk menganimasikan posisi .box-item-wrapper:

$nav.find('a').each(function() {     // Saat pengguna mengeklik item navigasi...     $(this).on("click", function() {         var step = $(this).index(); // Dapatkan indeks dari setiap item navigasi         $nav.find('.active').removeClass('active'); // Singkirkan kelas `active` pada item navigasi         $(this).addClass('active'); // Tambahkan kelas `active` pada item navigasi yang diklik         // Kumpulkan layer...         $layer.each(function() {             // Definisikan jarak animasi latar pada setiap layer menurut indeksnya             var distance = ($(this).index()+1) * 200; // Kalikan dengan 200             // Animasikan posisi latar             $(this).stop().animate({backgroundPosition: '-' + (step*distance) + 'px 0px'}, 1500);         });         // Animasikan `.box-item-wrapper` ke kiri untuk menggerakkan `.box-item`         $wrap.stop().animate({'left': -(step*width)}, 1500);         return false;     }); }).first().addClass('active'); // Tambahkan kelas `active` pada item navigasi pertama sebagai awalan

Produk Final

HTML

<div id="parallax-wrapper" class="parallax-wrapper">     <div class="layer layer-1"></div>     <div class="layer layer-2"></div>     <div class="layer layer-3"></div>     <div class="box-item-wrapper">         <div class="box-item"> ... </div>         <div class="box-item"> ... </div>         <div class="box-item"> ... </div>         <div class="box-item"> ... </div>     </div> </div>  <span id="parallax-navigation" class="parallax-navigation">     <a href="#1">1</a>     <a href="#2">2</a>     <a href="#3">3</a>     <a href="#4">4</a> </span>

CSS

.parallax-wrapper {   border:1px solid black;   height:200px;   position:relative;   overflow:hidden; }  .parallax-wrapper .layer {   position:absolute;   top:0;   right:0;   bottom:0;   left:0;   background-position:0 0;   background-color:transparent;   background-repeat:repeat-x; }  .parallax-wrapper .layer-1 {background-image:url('img/parallax-bg-1.png')} .parallax-wrapper .layer-2 {background-image:url('img/parallax-bg-2.png')} .parallax-wrapper .layer-3 {background-image:url('img/parallax-bg-3.png')}  .box-item-wrapper {   position:relative;   overflow:hidden; }  .box-item-wrapper .box-item {   float:left;   width:100%;   margin:5em 0 0;   padding:1.5em 2em; }  .parallax-navigation {   display:block;   height:30px;   line-height:30px;   position:relative;   text-align:right;   font-size:11px;   font-weight:bold; }  .parallax-navigation a {   text-decoration:none;   color:black;   background-color:#eee;   padding:5px 10px; }  .parallax-navigation a.active {   background-color:#529834;   color:white; }

jQuery

(function($) {      // Cache some elements     var $window = $(window),         $parallax = $('#parallax-wrapper'),         $layer = $parallax.find('.layer'),         $wrap = $parallax.find('.box-item-wrapper'),         $nav = $('#parallax-navigation'), width, totalWidth;      // Set the parallax content & item width in window resize ...     // ... so we can be sure that when the window is resized, the size of the elements will be updated too     $window.on("resize", function() {         width = $parallax.width(); // get the parallax wrapper width         totalWidth = width * $wrap.find('.box-item').length; // total width = (parallax wrapper width * box item length)         $wrap.width(totalWidth).find('.box-item').outerWidth(width);     }).trigger("resize");      // Collect all navigation item inside parallax navigation, then get their index to set the animation distance     $nav.find('a').each(function() {         // when user click on the navigation item         $(this).on("click", function() {             var step = $(this).index(); // get the index (0, 1, 2, 3, ...)             $nav.find('.active').removeClass('active'); // remove the active class from navigation item             $(this).addClass('active'); // add the active class to the clicked navigation item             $layer.each(function() {                 // set the background-position per-animation distance of each layer ...                 // ... based on its index                 var distance = ($(this).index()+1) * 200; // multiplied by 200                 $(this).stop().animate({backgroundPosition: '-' + (step*distance) + 'px 0px'}, 1500); // (jQuery background position plugin required)             });             // also, animate the `.box-item-wrapper` to the left to move the `.box-item`             $wrap.stop().animate({'left': -(step*width)}, 1500);             return false;         });     }).first().addClass('active'); // add active class to the first navigation item on initiation  })(jQuery);

Demo

Lihat Demo Unduh Semua Demo Bonus: Paralaks Orientasi Vertikal


Sumber https://www.dte.web.id/

Membangun Layout Paralaks Dengan Jquery

Saya harus menyampaikan bahwa random post itu sangat jelek dalam hal performa. Kerja mereka sangat lambat dan membuang-buang tenaga, alasannya mereka bekerja dengan cara memanggil feed posting berukuran sangat besar! Kemudian mereka hanya akan menampilkannya sebagian saja secara acak:

<script src='/feeds/posts/default?alt=json-in-script&max-results=99999&callback=randomPosts'></script>

Bagi Anda para pemakai mungkin tidak pernah tahu mengenai ini, tetapi sesungguhnya setiap pemakai widget random post —termasuk juga — tanpa sadar telah mendapatkan beban begitu besar. Ketika Anda membuka halaman tunggal dimana terdapat widget random post di dalamnya, pada dikala yang bersamaan Anda juga sesungguhnya sedang membuka semua posting yang telah Anda terbitkan dalam satu waktu. Mengapa? Karena parameter max-results pada feed menunjukkan angka 99999 yang artinya bahwa semua feed posting akan “diusahakan” untuk dipanggil (diusahakan, alasannya jumlah posting yang kita terbitkan mustahil mencapai angka sebesar itu).

Mengacak Indeks Permulaan

Saya menyadari terdapat sebuah peluang untuk membuat widget random post yang lebih ringan dan cepat dimuat. Dibandingkan memuat semua posting dan memilah beberapa posting secara acak untuk ditampilkan, akan lebih baik jikalau kita mengacak nilai start-index pada feed sehingga kita sanggup memuat posting dari urutan sembarang:

function randomPosts(json) {     // Ubah JSON menjadi HTML... }  var startIndex = Math.round(Math.random() * 9999); // Membuat angka acak document.write('<scr' + 'ipt src="/feeds/posts/summary?alt=json-in-script&start-index=' + startIndex + '&max-results=7&callback=randomPosts"></scr' + 'ipt>');

Ada satu persoalan kecil yang mungkin akan mengganggu. Jika angka acak yang tercipta nilainya lebih besar dari total posting blog Anda dikala ini, maka widget random post ini tidak akan bekerja. Oleh alasannya itu kita harus membatasi angka acak yang tercipta, yaitu dilarang kurang dari 1 dan dilarang lebih dari “total posting dikurangi jumlah posting yang ingin ditampilkan”.

Untuk mendapatkan jumlah posting secara keseluruhan kita sanggup mengambilnya melalui objek json.feed.openSearch$totalResults.$t:

// Konfigurasi var homePage = 'http://nama_blog.blogspot.com',     maxResults = 7;  // Fungsi untuk menggenerasikan angka acak dengan batasan minimal dan maksimal function getRandomInt(min, max) {     return Math.floor(Math.random() * (max - min + 1)) + min; }  // Mendapatkan indeks pemulai yang kondusif untuk memanggil feed utama function createRandomPostsStartIndex(json) {     // Buat angka acak dengan nilai dilarang kurang dari `1` dan dilarang lebih dari `total posting - posting yang ingin ditampilkan`     var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));    // Tampilkan pesan log     console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults)); }  document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');

Muat ulang widget Anda berkali-kali. Seharusnya Anda akan melihat pesan log indeks pemanggilan posting yang berubah-ubah menyerupai ini:

Kerja mereka sangat lambat dan membuang Performa Widget Random Post
Angka acak yang Saya tandai akan kita manfaatkan untuk memanggil indeks feed secara acak.

Kita akan memakai angka acak itu sebagai angka pemulai pada parameter start-index menyerupai ini:

function createRandomPostsStartIndex(json) {     var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));     document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>'); }

Pada bab simpulan URL feed terdapat parameter callback=randomPosts. randomPosts di sini merupakan fungsi utama yang akan kita buat untuk mengubah JSON Blogger menjadi widget:

function randomPosts(json) {     var link, ct = document.getElementById('random-post-container'),         entry = json.feed.entry,         skeleton = "<ul>";     for (var i = 0, len = entry.length; i < len; i++) {         for (var j = 0, jen = entry[i].link.length; j < jen; j++) {             if (entry[i].link[j].rel == "alternate") {                 link = entry[i].link[j].href;             }         }         skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';     }     ct.innerHTML = skeleton + '</ul>'; }

Sentuhan akhir, acak urutan posting yang ditampilkan memakai fungsi ini sehingga daftar posting yang ditampilkan nantinya akan semakin acak urutannya:

// Fungsi untuk mengacak array function shuffleArray(arr) {     var i = arr.length, j, temp;     if (i === 0) return false;     while (--i) {         j = Math.floor(Math.random() * (i + 1));         temp = arr[i];         arr[i] = arr[j];         arr[j] = temp;     }     return arr; }  // Widget function randomPosts(json) {     var link, ct = document.getElementById('random-post-container'),         entry = shuffleArray(json.feed.entry),         skeleton = "<ul>";     for (var i = 0, len = entry.length; i < len; i++) {         for (var j = 0, jen = entry[i].link.length; j < jen; j++) {             if (entry[i].link[j].rel == "alternate") {                 link = entry[i].link[j].href;             }         }         skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';     }     ct.innerHTML = skeleton + '</ul>'; }

Hasil Akhir

<div id='random-post-container'>Memuat...</div>  <script> //<![CDATA[ // Feed configuration var homePage = 'http://nama_blog.blogspot.com',     maxResults = 7,     containerId = 'random-post-container'; // Function to generate random number limited from `min` to `max` // Used to create a valid and safe random feed `start-index` function getRandomInt(min, max) {     return Math.floor(Math.random() * (max - min + 1)) + min; } // Function to shuffle arrays // Used to randomize order of the generated JSON feed function shuffleArray(arr) {     var i = arr.length, j, temp;     if (i === 0) return false;     while (--i) {         j = Math.floor(Math.random() * (i + 1));         temp = arr[i];         arr[i] = arr[j];         arr[j] = temp;     }     return arr; } // Get a random start index function createRandomPostsStartIndex(json) {     var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));     // console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));     document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>'); } // Widget's main function function randomPosts(json) {     var link, ct = document.getElementById(containerId),         entry = shuffleArray(json.feed.entry),         skeleton = "<ul>";     for (var i = 0, len = entry.length; i < len; i++) {         for (var j = 0, jen = entry[i].link.length; j < jen; j++) {             if (entry[i].link[j].rel == "alternate") {                 link = entry[i].link[j].href;             }         }         skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';     }     ct.innerHTML = skeleton + '</ul>'; } document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>'); //]]> </script>

Lihat Demo Demo dengan Thumbnail dan Deskripsi

Ketika Posting Acak Dikirim Secara Langsung oleh Server

Dalam sebuah forum Saya pernah menemukan seseorang yang mencoba menyarankan Blogger untuk menyertakakan parameter orderby gres berupa random dan popular. Saya pikir ini yakni wangsit yang bagus. Karena menurut dokumentasi, kalau tidak salah hanya ada dua macam nilai untuk parameter orderby, yaitu published dan updated:

http://nama_blog.blogspot.com/feeds/posts/summary?orderby=published http://nama_blog.blogspot.com/feeds/posts/summary?orderby=updated

Jika suatu dikala Blogger merealisasikan masukan dari pengguna ini, maka kita tidak perlu lagi menerapkan hack semacam ini. Cukup dengan membuat widget recent post biasa, kita sanggup mengubah parameter URL feed dari orderby=published menjadi orderby=random untuk membuat widget random post atau orderby=popular untuk membuat widget posting populer. Tapi perkara ini masih dalam tahap “seandainya”.


Sumber https://www.dte.web.id/

Performa Widget Random Post

Sistem akordion pada JQuery gotong royong hanyalah konsep penggabungan beberapa slide panel sederhana, yaitu berupa baris-baris tombol panel dan panel-panel itu sendiri dengan jumlah lebih dari satu. Hanya bedanya, di sini kita bermain dengan peraturan bahwa: Saat sebuah panel terbuka, maka panel lain akan tertutup. Tidak boleh hingga terjadi pembukaan panel lebih dari satu.
Peraturan ini tentunya akan memakasa kita untuk membuat sebuah sistem yang sanggup membuka sebuah panel, dan dalam waktu yang bersamaan juga sanggup menutup panel lainnya yang masih terbuka:

Sistem akordion pada JQuery gotong royong hanyalah konsep penggabungan beberapa Memahami Konsep JQuery Akordion Sederhana



Langkah Pertama: Buat Elemen dan Desain Tampilan

Di sini Saya membuat kerangka akordion dari elemen <h2> dan <div class='panel-akordion'> yang Saya letakkan di dalam wilayah kekuasaan <div id='akordion'> ... </div> ibarat ini:

<div id='akordion'>       <h2>Tombol Akordion</h2>      <div class='panel-akordion'>           KONTEN DI SINI      </div>       <h2>Tombol Akordion</h2>      <div class='panel-akordion'>           KONTEN DI SINI      </div>       <h2>Tombol Akordion</h2>      <div class='panel-akordion'>           KONTEN DI SINI      </div>       <h2>Tombol Akordion</h2>      <div class='panel-akordion'>           KONTEN DI SINI      </div>       <h2>Tombol Akordion</h2>      <div class='panel-akordion'>           KONTEN DI SINI      </div>  </div>


Kemudian Saya deklarasikan konsep-konsep tampilan sederhana pada kerangka akordion di atas ibarat dukungan warna hijau pada latar belakang, warna putih pada teks dan sebagainya:

#akordion {   padding:0; }  #akordion h2 {   cursor:pointer;   margin:0;   padding:10px 20px;   background:#344317;   color:#fff;   font:bold 10px Georgia,Serif;   text-transform:uppercase; }  .panel-akordion {   background:#88AE27;   color:#fff;   padding:10px; }


Langkah ke Dua: Pemanggilan JQuery

Kamu sanggup menggunakan versi JQuery apa saja, namun Saya sarankan untuk menggunakan JQuery minimal versi 1.3.2 ibarat ini:

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


Langkah ke Tiga: Deklarasikan Cara Kerja

Buat sebuah sistem ibarat peraturan yang telah Saya katakan di atas:

<script type='text/javascript'> $(document).ready(function() {      $('.panel-akordion').hide();      $('#akordion h2').click(function() {           $('.panel-akordion').slideUp(500);           $(this).next().slideDown(500);      }); }); </script>


Susun semua instruksi tersebut pada templatemu kemudian simpan. Jika kau sudah terbiasa membedakan instruksi CSS, JavaScript dan Elemen niscaya tahu tempat-tempat yang umum untuk meletakkan kode-kode tersebut.


Pemahaman Lebih Lanjut

Seperti halnya ketika membuat slide panel, di sini akan selalu ada dua faktor penting, yaitu memilih elemen pemicu dan elemen terpicu/elemen yang akan bereaksi. Elemen pemicu Saya buat dari instruksi <h2>Tombol Akordion</h2>, sedangkan elemen terpicu (elemen yang akan bereaksi sehabis sebuah elemen dikenai perintah) Saya buat dari instruksi <div class='panel-akordion'>KONTEN DI SINI</div>

Sekarang fokuslah pada instruksi ini:

$(document).ready(function() {           $('.panel-akordion').hide();      $('#akordion h2').click(function() {           $('.panel-akordion').slideUp(500);           $(this).next().slideDown(500);      }); });

  • Kode $('.panel-akordion').hide(); maksudnya yaitu semua elemen <div class='panel-akordion'>KONTEN DI SINI</div> akan disembunyikan. Perintah ini sangat umum dinyatakan ketika kita membangun fungsi dengan JQuery. Selain menggunakan perintah .hide(), menyembunyikan elemen juga sanggup dilakukan dengan mendeklarasikan display:none; dalam instruksi CSS ibarat ini:

    Metode Penghilangan Elemen dengan JQueryMetode Penghilangan Elemen dengan CSS
    $('.panel-akordion').hide();.panel-akordion {
    display:none;
    }

  • Kode $('#akordion h2') maksudnya yaitu JQuery akan menyeleksi elemen <h2> yang berada di dalam wilayah kekuasaan <div id='akordion'> ... </div>. Elemen inilah yang Saya maksud sebagai elemen pemicu.
    Di depan instruksi tersebut terdapat perintah .click() yang maksudnya bahwa #akordion h2 akan membuat "sesuatu" menjadi bereaksi sehabis #akordion h2 diklik ("sesuatu" yang dimaksud di sini yaitu .panel-akordion).
  • $('.panel-akordion').slideUp(500); maksudnya bahwa sehabis #akordion h2 diklik, maka .panel-akordion yang sedang terbuka akan menutup ke atas (.slideUp) dengan kecepatan 500 milidetik (500). Dan dalam waktu yang bersamaan juga akan membuka panel berikutnya yang masih tertutup. Perintah ini dinyatakan dalam instruksi $(this).next().slideDown(500);.
    Elemen this yang dimaksud di sini yaitu #akordion h2.

Sumber https://www.dte.web.id/

Memahami Konsep Jquery Akordion Sederhana

Salam Blogger, kali ini akan menyebarkan tutorial cara menawarkan notifikasi adblocker adsense dikala pengguna mengakses blog dan mengaktifkan ekstensi adblock di browser.

akan menyebarkan tutorial cara menawarkan notifikasi adblocker adsense dikala pengguna mengakse Notifikasi Adblocker Adsense Ala Kompi Ajaib

Tutorial ini aku sanggup dari blog Kompi Ajaib yang dikelola oleh admin Menambahkan Notifikasi Adblocker Adsense di dalam blog teman sanggup mengunjungi sumbernya di https://sangdewablogger.blogspot.com//search?q=notifikasi-adblocker-adsense-ala-kompi-ajaib

Dalam tutorial ini, aku hanya memodifikasi tampilan notifikasi dari sumber yang sudah aku sebutkan di atas. Tampilan notifikasi Adblocker Adsense akan muncul bila teman mengaktifkan ekstensi adblock di browsernya akan terlihat menyerupai gambar di bawah ini

akan menyebarkan tutorial cara menawarkan notifikasi adblocker adsense dikala pengguna mengakse Notifikasi Adblocker Adsense Ala Kompi Ajaib

Membuat Notifikasi Adblocker Adsense Ala Kompi Ajaib


Di sini aku menawarkan 2 style yang berbeda menyerupai gambar di bawah ini

Style 1

akan menyebarkan tutorial cara menawarkan notifikasi adblocker adsense dikala pengguna mengakse Notifikasi Adblocker Adsense Ala Kompi Ajaib

Style 2

akan menyebarkan tutorial cara menawarkan notifikasi adblocker adsense dikala pengguna mengakse Notifikasi Adblocker Adsense Ala Kompi Ajaib

Pertama, buka Blogger > Template > Klik Edit HTML > Tambahkan CSS berikut sebelum arahan ]]></b:skin> atau </style>

/* Notifikasi Adblocker Adsense */ #keep-ads{padding:0;position:fixed;bottom:0;opacity:0;height:auto;transition:all .6s cubic-bezier(.25,.8,.25,1);-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;transition:all .2s ease-in-out,visibility 0s;transform-origin:bottom center;} .keep-adsme{background:#e74c3c;color:#fff;position:absolute;text-align:center;padding:0 30px 30px 30px;margin:auto;top:30%;left:0;right:0;font-size:1.5rem;line-height:1.5;font-family:monospace;max-width:930px;box-shadow:0 20px 10px -10px rgba(0,0,0,0.15);transition:all .6s cubic-bezier(.25,.8,.25,1);border:15px solid rgba(0,0,0,.07);overflow:hidden;} .keep-adsme:hover{box-shadow:0 20px 10px -10px rgba(0,0,0,0.2);} .keep-adsme h4{display:inline-block;background:rgba(0,0,0,.07);padding:5px 25px 15px 25px;font-size:2.2rem;margin:0 auto} #keep-ads p{margin:0} #keep-ads a{color:#ffe88b;}#keep-ads a:hover{color:#ffe88b;text-decoration:underline} #keep-ads.show{left:0;top:0;right:0;z-index:1000;pointer-events:auto;opacity:1;visibility:visible;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);animation:wobble .7s;opacity:1;} .close-keep-ads{visibility:hidden;opacity:0;color:#ffe88b;text-align:center;position:absolute;bottom:10px;right:10px;font-size:42px;cursor:pointer;width:30px;height:30px;line-height:30px;border-radius:100%;transition:all .6s cubic-bezier(.25,.8,.25,1);transform:translate(0,50px);} .close-keep-ads:hover{color:#fff;transform:scale(1.0);} .keep-adsme:hover .close-keep-ads{visibility:visible;opacity:1;color:#ffe88b;transform:translate(0,0);} #keep-ads p span {font-family:fontawesome;font-size:5rem;} @keyframes wobble{0%{transform:scale(0) rotate(-54deg) translatey(40px)}45%{transform:scale(1.1) rotate(20deg) translatey(0px)}60%{transform:scale(1) rotate(-15deg) translatey(0px)}77%{transform:scale(1) rotate(10deg) translatey(0px)}100%{transform:translatey(0)}}

/* Notifikasi Adblocker Adsense */ #keep-ads{padding:0;position:fixed;bottom:0;opacity:0;height:auto;transition:all .6s cubic-bezier(.25,.8,.25,1);-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;transition:all .2s ease-in-out,visibility 0s;transform-origin:bottom center;} .keep-adsme{background:#e74c3c;color:#fff;position:absolute;text-align:center;padding:0;margin:auto;top:30%;left:0;right:0;font-size:1.2rem;line-height:1.5;max-width:930px;box-shadow:0 0 50px rgba(0,0,0,0.25);transition:all .6s cubic-bezier(.25,.8,.25,1);overflow:hidden} .keep-adsme:hover{box-shadow:0 0 20px rgba(0,0,0,0.15);} .keep-adsme h4{background:#d04537;color:#fff;padding:15px 25px;font-size:2.2rem;margin:0 auto;border-bottom:1px solid rgba(0,0,0,0.1);} .keep-me{border-top:1px solid rgba(255,255,255,0.1);padding:10px 30px 50px 30px} #keep-ads p{margin:0} #keep-ads a{color:#ffe88b;}#keep-ads a:hover{color:#ffe88b;text-decoration:underline} #keep-ads.show{left:0;top:0;right:0;z-index:1000;pointer-events:auto;opacity:1;visibility:visible;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);animation:wobble .7s;opacity:1;} .close-keep-ads{visibility:hidden;opacity:0;color:#ffe88b;text-align:center;position:absolute;bottom:10px;right:10px;font-size:32px;cursor:pointer;width:30px;height:30px;line-height:30px;border-radius:100%;transition:all .6s cubic-bezier(.25,.8,.25,1);transform:translate(0,50px);} .close-keep-ads:hover{color:#fff;transform:scale(1.0);} .keep-adsme:hover .close-keep-ads{visibility:visible;opacity:1;color:#ffe88b;transform:translate(0,0);} #keep-ads p span {font-family:fontawesome;font-size:5rem;} @keyframes wobble{0%{transform:scale(0) rotate(-54deg) translatey(40px)}45%{transform:scale(1.1) rotate(20deg) translatey(0px)}60%{transform:scale(1) rotate(-15deg) translatey(0px)}77%{transform:scale(1) rotate(10deg) translatey(0px)}100%{transform:translatey(0)}}

Tambahkan juga CSS di bawah ini (Khusus tampilan smartphone)

<b:if cond='data:blog.isMobileRequest == "true"'> <style type='text/css'> .keep-adsme{top:0;padding:15px;border:0;font-size:1.1rem;opacity:.99;bottom:0;font-family:arial;} .keep-adsme h4{background:transparent;font-size:1.5rem;margin:40px auto 0 auto;} .close-keep-ads{text-align:center;visibility:visible;opacity:1;color:#fff;bottom:20px;right:20px;padding:0;font-size:32px;width:38px;height:38px;line-height:32px;border-radius:100%;border:2px solid #fff;transform:translate(0,0);} .close-keep-ads:hover,.keep-adsme:hover .close-keep-ads{background:#fff;color:#e74c3c;} </style> </b:if>

Kemudian tambahkan Javascript di bawah ini sebelum arahan </body>

<script type='text/javascript'> //<![CDATA[ // Notifikasi Adblocker Adsense function hidekeep(){document.getElementById("keep-ads").style.display="none"}setTimeout(function(){var e=document.getElementById("keep-ads"),t=document.querySelectorAll("ins.adsbygoogle");0===$(t).height()&&(e.className="show")},2e3); //]]> </script>

Selanjutnya, tambahkan HTML di bawah ini bebas di dalam arahan <body> dan </body>

<div id='keep-ads'> <div class='keep-adsme'>   <p><h4>Adblock Detected</h4></p>   <p><span><i aria-hidden='true' class='fa fa-exclamation-triangle'/></span></p>   <p>Like this blog? Keep us running by whitelisting this blog in your ad blocker</p>   <p>This is <a href='http://www.arlinadzgn.com/p/whitelisting-arlina-design.html' target='_blank' title='Show me how'>how to whitelisting</a> this blog in your ad blocker</p>   <p>Thank you</p> <div class='close-keep-ads' onclick='hidekeep()'>&#215;</div> </div> </div>

<div id='keep-ads'> <div class='keep-adsme'>   <p><h4>Adblock Detected</h4></p> <div class='keep-me'>   <p><span><i aria-hidden='true' class='fa fa-exclamation-triangle'/></span></p>   <p>Like this blog? Keep us running by whitelisting this blog in your ad blocker</p>   <p>This is <a href='http://www.arlinadzgn.com/p/whitelisting-arlina-design.html' target='_blank' title='Show me how'>how to whitelisting</a> this blog in your ad blocker</p>   <p>Thank you</p> </div> <div class='close-keep-ads' onclick='hidekeep()'>&#215;</div> </div> </div>

Di sini aku menambahkan ikon fontawesome dan pastikan di blog teman sudah menambahkan library css fontawesome. Jika tidak, teman sanggup hapus pada arahan yang ditandai.

Edit arahan yang ditandai ganti link dengan url tujuan. Contoh goresan pena yang ada dalam link tersebut aku dapatkan dari blog Kompi Ajaib.

Jika teman ingin menyembunyikan arahan di atas dari smartphone dan halaman statis, teman sanggup membungkus arahan tersebut dengan tag kondisional menyerupai tumpuan di bawah ini

Pastikan tidak memakai cara ini bila ingin memunculkan notifikasi pada smartphone

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <div id='keep-ads'> <div class='keep-adsme'>   <p><h4>Adblock Detected</h4></p>   <p><span><i aria-hidden='true' class='fa fa-exclamation-triangle'/></span></p>   <p>Like this blog? Keep us running by whitelisting this blog in your ad blocker</p>   <p>This is <a href='http://www.arlinadzgn.com/p/whitelisting-arlina-design.html' target='_blank' title='Show me how'>how to whitelisting</a> this blog in your ad blocker</p>   <p>Thank you</p> <div class='close-keep-ads' onclick='hidekeep()'>&#215;</div> </div> </div> </b:if> </b:if>

Selesai! Simpan template dan lihat hasilnya.

Cara Menyembunyikan Konten Blog Jika Javascript Dinonaktifkan


akan menyebarkan tutorial cara menawarkan notifikasi adblocker adsense dikala pengguna mengakse Notifikasi Adblocker Adsense Ala Kompi Ajaib

Trik Tambahan, tumpuan menyerupai pada gambar di atas

Berikut yaitu trik embel-embel bila pengguna menonaktifkan / block Javascript alamat situs tertentu di pengaturan browser, biasanya ini terjadi dikala pengguna ingin menonaktifkan fungsi tertentu pada situs yang ia block. Cara kerja trik ini yaitu menyembunyikan isi konten blog dengan tampilan notifikasi menyerupai pada tutorial di atas. Di sini aku memanfaatkan kondisi noscript dikala halaman web dimuat, di bawah ini tumpuan gambar situs yang di block

akan menyebarkan tutorial cara menawarkan notifikasi adblocker adsense dikala pengguna mengakse Notifikasi Adblocker Adsense Ala Kompi Ajaib

Berikut Cara Menyembunyikan Konten Blog Jika Javascript Dinonaktifkan, tambahkan arahan berikut sebelum </head>

<noscript> <style type='text/css'> /* No Script */ body,html{overflow:hidden} .noscript{background:#e74c3c;color:#fff;padding:8% 0 0 0;position:fixed;bottom:0;left:0;top:0;right:0;z-index:1000;height:auto;-webkit-transform:translateZ(0);transform:translateZ(0);overflow:hidden} .noscript p{margin:0;text-align:center;padding:0 20px 10px 20px;margin:auto;font-size:3rem;line-height:1.5;font-family:monospace;max-width:1010px;text-transform:uppercase;font-weight:700} .noscript p span{color:#ffe88b;font-size:10rem;line-height:normal;font-weight:normal} </style> </noscript>

Kemudian tambahkan arahan berikut sempurna di bawah <body>

<noscript> <div class='noscript'>   <p><span>&#9888;</span></p>   <p>Please Enable Javascript to view our site content</p>   <p>Thank you</p> </div> </noscript>

Terakhir, simpan template.

Demikian tutorial singkat wacana Cara Membuat Notifikasi Adblocker Adsense Ala Kompi Ajaib. Semoga bermanfaat bagi teman semua, terima kasih.

Notifikasi Adblocker Adsense Ala Kompi Ajaib

Untuk membuatnya kita hanya membutuhkan empat langkah sederhana Prinsip dasar Pembuatan Slide Panel dengan JQuery

Sederhananya, beginilah tampilan awal sebuah slide panel (lihat demo) JQuery. Untuk membuatnya kita hanya membutuhkan empat langkah sederhana:
Pertama, carilah script yang kurang lebih tampak menyerupai ini dalam baris arahan HTML templatemu:

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

Jika template blogmu ternyata sudah disertai dengan script ini, kau tidak perlu menambahkannya dan dapat pribadi mengarah ke langkah berikutnya. Tapi bila belum ada, salinlah dulu script di atas, lalu letakkan di atas arahan </head>.

Ke dua, salinlah script pengaturan efek, kecepatan imbas dan objek-objek yang diseleksi ini sempurna di bawah arahan tadi:

<script type='text/javascript'> $(document).ready(function() {     $('.btn-slide').click(function() {         $('#panel').slideToggle('slow');     }); }); </script>

Ke tiga, salinlah arahan pemodel ini, lalu letakkan di atas arahan </style> atau ]]></b:skin>

#panel {   background:#754c24;   max-height:200px;   padding:10px;   color:#ddd;   overflow:auto;   display:none; }  .slide {   margin:0;   padding:0;   border-top:4px solid #422410; }  .btn-slide {   cursor:pointer;   text-align:center;   padding:10px;   margin:0 auto;   display:block;   font:bold 120%/100% Arial,Helvetica,sans-serif;   color:#fff;   background-color:#FF8C00; }

Terakhir, kau tinggal meletakkan kerangka objeknya saja di daerah yang kau inginkan:

<div id='panel'>     KONTEN SLIDE PANEL DI SINI </div> <div class='slide'><span class='btn-slide'>Tombol Slide Panel di Sini</span></div>

Sebagai contoh, letakkan arahan tersebut di bawah <div id='sidebar-wrapper'> maka kau akan menemukan panel tersebut di sidebar.
Klik Simpan Template dan lihat hasilnya.

Namun tentu saja, balasannya tidak akan sama persis dengan gambar di atas, alasannya ialah di sini Saya lebih menekankan kepada cara kerja objek ini, bukan pada bentuknya:


Untuk memahami cara kerjanya kita masuki tahap pemahaman lebih lanjut.

Pemahaman Lebih Lanjut:

Perhatikan arahan ini:

<script type='text/javascript'> $(document).ready(function() {     $('.btn-slide').click(function(){         $('#panel').slideToggle('slow');     }); }); </script>

Fokuslah pada arahan $('.btn-slide') dan $('#panel').
Kode $('.btn-slide') menawarkan bahwa fungsi ini diterapkan untuk sebuah elemen objek yang mempunyai class "btn-slide" (dalam hal ini ialah elemen <span class="btn-slide">Tombol Slide Panel di Sini</span>).
.click ialah event mouse yang diterapkan pada objek ".btn-slide".

#panel dapat dibilang ialah elemen yang akan dikenai imbas JQuery menurut event yang diberikan pada objek <span class="btn-slide">Tombol Slide Panel di Sini</span>.
Dalam hal ini, elemen yang dimaksud adalah:

<div id="panel">     KONTEN SLIDE PANEL DI SINI </div>

Intinya, .btn-slide ialah tombolnya dan #panel ialah pintunya. Ketika .btn-slide ditekan, maka #panel akan bereaksi sesuai dengan jenis aksinya (dalam hal ini ialah .slideToggle).

Satu lagi, cobalah untuk sekali-kali mengganti nilai slow dengan normal atau fast dalam arahan .slideToggle('slow'); dan lihat perbedaan kecepatan pembukaan panelnya. ^_^



Begitulah kira-kira cara kerjanya. Sedangkan untuk pembuatan model-model objek atau yang lainnya dapat kau sesuaikan dengan mengutak-atik CSSnya biar tampilannya dapat sesuai dengan template blogmu menyerupai ini:

Untuk membuatnya kita hanya membutuhkan empat langkah sederhana Prinsip dasar Pembuatan Slide Panel dengan JQuerySemuanya tergantung dari kreativitas kalian.
Sumber https://www.dte.web.id/

Prinsip Dasar Pembuatan Slide Panel Dengan Jquery

Memanfaatkan jQuery untuk Mengizinkan Elemen Terlarang Masuk ke dalam Kometar Blogger Memanfaatkan JQuery untuk Mengizinkan Elemen Terlarang Masuk ke dalam Kometar Blogger
Elemen pengisi komentar yang lebih beragam

Saya terinspirasi dari posting ini: Adding Images and More Text Formats to the Body of the Comments

Bukankah itu sangat luar biasa? Kita dapat menyisipkan elemen-elemen yang tidak lazim ke dalam komentar Blogger hanya dengan memanfaatkan cara kerja JavaScript .replace(). Pada intinya, kita menyisipkan kode-kode yang dapat dimasukkan ke dalam komentar menyerupai [im]. Kode tersebut bukanlah arahan yang dapat mempengaruhi file HTML dan hanya merupakan teks biasa yang dibuat-buat, namun dengan sedikit trik, Anda dapat memanfaatkan peraturan yang Anda buat sendiri untuk mengontrol fungsi .replace()

Di sini Saya akan menawarkan alternatif lain yang lebih kondusif dan tampak rapi, yaitu memakai jQuery untuk memanipulasi dua jenis tag yang diperbolehkan masuk ke dalam komentar Blogger yaitu <b> dan <i>. Kita akan memakai atribut rel sebagai pengontrol. Dan ini ialah sebuah trik untuk mengubah tag-tag tersebut menjadi tag lain dengan jQuery ⇒ http://stackoverflow.com/questions/7093417/using-jquery-to-replace-one-tag-with-another

Katakanlah kita ingin memposting arahan di dalam tag <pre> untuk diterbitkan ke dalam komentar postingan, namun menyerupai yang kita tahu, Blogger tidak mengizinkan tag <pre> masuk ke dalam posting komentar. Kaprikornus kita dapat memakai arahan ini sebagai penanda:

<i rel='pre'>Kode di sini...</i>

Untuk mengubah tag <i rel='pre'> menjadi <pre> kita dapat memakai fungsi ini:

// Seleksi elemen `p` di dalam `#comments` $('#comments p').each(function() {     // Ubah semua tag `<i rel="pre">` dengan `<pre>`     $('i[rel="pre"]', this).replaceWith(function() {         return $('<pre></pre>').append($(this).contents());     }); });

Selektor $('#comments p') tidak mutlak. Terkadang ada juga kerangka komentar yang terdiri dari elemen <dd>, bahkan mungkin juga dengan ID komentar yang berbeda sehingga selektor tersebut juga dapat diubah menjadi $('#comments dd') atau $('#commentsbox dd')

Cukup pastikan bahwa tema Anda sudah dilengkapi dengan jQuery, kemudian letakkan arahan tersebut di atas </body>. Dan coba terbitkan sebuah komentar berupa teks di dalam <i rel='pre'></i>

Lebih Lengkap

Untuk tingkat manpulasi yang lebih lengkap, Anda dapat memakai baris arahan ini. Salin arahan ini kemudian sisipkan di atas </body>:

<script> //<![CDATA[ $('#comments p, #comments dd').each(function() {     // Singkirkan semua tag `<br>` di sebelah tag `<b rel^="h">`     // (semua elemen `<b>` dengan nilai atrubut `rel` yang diawali dengan "h")     $('b[rel^="h"]', this).nextAll().filter('br').remove();     // Menyisipkan tag `<pre>`     $('i[rel="pre"]', this).replaceWith(function() {         return $('<pre></pre>').append($(this).contents());     });     // Menyisipkan gambar     $('i[rel="image"]', this).replaceWith(function() {         return $('<img />').attr('src', $(this).text());     });     // Menyisipkan tag `<h3>`     $('b[rel="h3"]', this).replaceWith(function() {         return $('<h3></h3>').append($(this).contents());     });     // Menyisipkan kuota/catatan     $('b[rel="quote"]', this).replaceWith(function() {         return $('<blockquote></blockquote>').append($(this).contents());     });     // Menyisipkan tag `<code>`     $('i[rel="code"]', this).contents().unwrap().wrap('<code></code>'); }); //]]> </script>

Klik Simpan Tema. Setelah itu Anda tinggal menuliskan pesan untuk para komentator di atas formulir komentar menyerupai ini:

Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA DI SINI...</i> atau <i rel="pre">KODE ANDA DI SINI...</i>Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>Untuk membuat imbas tebal gunakan tag <b>TEKS ANDA DI SINI...</b>Untuk membuat imbas abjad miring gunakan tag <i>TEKS ANDA DI SINI...</i>


Sumber https://www.dte.web.id/

Memanfaatkan Jquery Untuk Mengizinkan Elemen Terlarang Masuk Ke Dalam Kometar Blogger

Langganan: Postingan (Atom)