Hallo, Kali ini saya akan membagikan Cara Mendapatkan Domain Gratis Freenom Untuk Blogspot. Berikut ini merupakan cara mudah setting domain Freenom ke Blogspot anda, Dalam memasang domain Freenom ini, Anda hanya memerlukan beberapa menit untuk mengatur sedikit settingan nameserver pada Freenom dan juga beberapa settingan dari Blogspot.
Baiklah langsung saja, Bagi sobat yang ingin mendapatkan domain gratis dari Freenom ikuti langkah-langkah berikut ini. Sebelumnya, untuk tutorial yang saya berikan terdapat dua tahap, Yang pertama adalah Tahap untuk mendaftarkan dan mendapatkan domain dari Freenom. Kemudian tahap yang ke dua adalah Tahap untuk menghubungkan domain dari Freenom dengan Blogger.
Kini sistem komentar Disqus telah banyak digunakan Blogger baik pengguna Blogspot maupun Wordpress. Fitur dan pengelolaan komentar yang user friendly membuat banyak Blogger kepincut menggunakan Disqus.
Namun masih banyak pengguna baik moderator maupun komentator yang belum mengetahui cara menggunakan style text ketika berkomentar seperti cara membuat tulisan bold, italic, underline, strike, atau memasukan kode-kode html pada kolom komentar. Khususnya untuk blog-blog tutorial Blogger, fitur syntax ini sangat berguna untuk memperindah input kode. Namun sayang, masih banyak pengguna yang belum memahami cara memasukan kode ke dalam komentar Disqus.
Untuk itu, sebagai pemilik blog, saya rasa perlu untuk memberikan pesan komentar tentang cara menggunakan style text. Dan untuk blog tutorial Blogger, sangat diperlukan tool code parser agar kode yang dimasukan tidak error, seperti pada gambar animasi gif di atas tadi.
Bagaimana ? Anda tertarik untuk mencobanya? Silahkan copy kode-kode di bawah ini. Kode di bawah ini sudah valid html5 dan responsive.
Kode CSS Simpan di atas kode]]></b:skin>atau</style>
<b:if cond='data:blog.pageType == "item"'>
<div class='pesan-komentar'>
<b>Cara style text di komentar Disqus:</b><br/>
<ul>
<li>Untuk menulis huruf <b>bold</b> silahkan gunakan <code>&lt;strong&gt;&lt;/strong&gt;</code> atau <code>&lt;b&gt;&lt;/b&gt;</code>.</li>
<li>Untuk menulis huruf <i>italic</i> silahkan gunakan <code>&lt;em&gt;&lt;/em&gt;</code> atau <code>&lt;i&gt;&lt;/i&gt;</code>.</li>
<li>Untuk menulis huruf <u>underline</u> silahkan gunakan <code>&lt;u&gt;&lt;/u&gt;</code>.</li>
<li>Untuk menulis huruf <span class='strike'>strikethrought</span> silahkan gunakan <code>&lt;strike&gt;&lt;/strike&gt;</code>.</li>
<li>Untuk menulis kode HTML silahkan gunakan <code>&lt;code&gt;&lt;/code&gt;</code> atau <code>&lt;pre&gt;&lt;/pre&gt;</code> atau <code>&lt;pre&gt;&lt;code&gt;&lt;/code&gt;&lt;/pre&gt;</code>, dan silahkan <b>parse</b> dulu kodenya pada kotak parser di bawah ini.</li>
</ul>
<div class='parser'><i class='fa fa-code'/></div>
<div class='clear'/>
<div id='parser'>
<table><tbody>
<tr> <td><textarea id='somewhere'/><br/>
<input class='button-parse' contenteditable='true' onclick='convert();' type='button' value='Parse Script'/></td> </tr>
</tbody></table>
</div>
</div>
</b:if>
Dan pastikan Anda sudah menyimpan Jquery Library dan Font Awesome di blog Anda.
Sumber : http://www.kompiajaib.com/2015/05/pesan-komentar-dan-code-parser-untuk.html.
Favicon adalah logo yang ditampilkan di sebelah kiri domain url maupun di tab browser. Pengguna blogspot tentu saja memiliki favicon default bawaan dari blogger. Hal ini tidak sama dengan wordpress dimana favicon secara otomatis dapat digenerasikandi ubahsuaikan. Favicon menjadi identitas dari suatu blog karena merupakan ciri khas dan bisa dibilang sebagai brand. Gambar yang digunakan sebagai favicon berformat .ico seperti halnya format icon-icon yang biasa kita temui sebagai icon file ataupun folder di dalam PC. Format ini unik karena dimanapun dia ditampilkan, gambar aslinya akan langsung terlihat tanpa membuka filenya (dan ini bukan preview seperti yang kita lihat di format lain misalnya jpg, tif, dan lain-lain ketika ditampilkan di dalam folder). Untuk animated favicon anda dapat menggunakan file gambar berformat gif. Berikut langkah-langkah pembuatannya :
Siapkan gambar yang hendak anda jadikan favicon, atau anda dapat mencarinya di situs-situs yang menyediakan gambar icon gratis. Anda dapat pula mencari gambar favicon maupun animated favicon gratis. Gunakan keyword "free favicon/animated favicon image" di Google.
Untuk membuat file ico, anda dapat menggunakan photoshop atau gunakan jasa situs generator ico gratis seperti: www.favicon.cc, www.favicongenerator.com, atau www.favicon.co.uk. Untuk animated favicon anda (gif) anda dapat membuat animasinya di situs www.animatedfavicon.com. Upload file anda ke situs-situs tersebut, ikuti beberapa langkahnya, dan download file hasilnya.
Upload file favicon anda ke situs hosting gambar yang mensupport gambar ico karena Blogger tidak mensupport upload gambar berformat ico. Lihat list situs terbaik untuk hosting gambar ico dan gif ini untuk mengupload favicon anda.
Copy terlebih dahulu direct link dari gambar yang telah diupload.
Kemudian masukkan url-nya ke script tag berikut ke bagian antara <head> dan </head> di template HTML anda. Saya sarankan untuk dimasukkan setelah meta tag agar cepat termuat oleh browser namun tidak mengganggu meta.
Untuk favicon file ico :
<link href='url gambar .ico anda' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
Untuk animated favicon file gif :
<link href='url gambar gif anda' rel='icon' type='image/gif'/>
Untuk menggunakan kedua-duanya dan berjaga apabila file gif gagal dimuat oleh koneksi yang sangat lambat, gunakan kedua file ico dan gif anda. Masukkan kedua tag dengan urutan sebagai berikut :
<link href='url gambar .ico anda' rel='shortcut icon' type='image/vnd.microsoft.icon'/> <link href='url gambar gif anda' rel='icon' type='image/gif'/>
Ini adalah versi mentah dari plugin spoiler pada CMS Mecha. Anda bisa menerapkannya di Blogger atau di web mana saja dengan cara mengikuti langkah-langkah berikut.
Masuklah ke halaman editor HTML Template Anda. Pertama-tama salin kode di bawah ini dan letakkan di atas kode</head>:
Terakhir, salin kode JavaScript ini dan letakkan di atas </body>:
<script> //<![CDATA[
// http://www.dte.web.id
(function(w, d){ var panel = d.getElementsByClassName('spoiler'); if (!panel) return; for (var i = 0, len = panel.length; i < len; ++i) { if (!panel[i].id) panel[i].id = 'spoiler-' + (i + 1); } functiontoggleSpoiler(elem, index){ var toggle = d.createElement('a'), toggleText = (elem[index].getAttribute('data-toggle-text') || ' ').split(' | '), togglePlacement = elem[index].getAttribute('data-toggle-placement') && elem[index].getAttribute('data-toggle-placement') !== 'bottom' ? elem[index].getAttribute('data-toggle-placement') : 'bottom'; toggleText.push(toggleText[0]); toggle.className = 'spoiler-toggle'; toggle.href = '#' + elem[index].id; toggle.innerHTML = toggleText[/(^| )spoiler-state-collapsed( |$)/.test(elem[index].className) ? 0 : 1]; toggle.onclick = function(){ var target = this.parentNode, isExpanded = /(^| )spoiler-state-expanded( |$)/.test(target.className), isConnected = target.getAttribute('data-connection'); if (/(^| )spoiler-state-disabled( |$)/.test(target.className)) returnfalse; target.className = isExpanded ? target.className.replace(/(^| )spoiler-state-expanded( |$)/, '$1spoiler-state-collapsed$2') : target.className.replace(/(^| )spoiler-state-collapsed( |$)/, '$1spoiler-state-expanded$2'); this.innerHTML = toggleText[isExpanded ? 0 : 1]; if (isConnected) { for (var i = 0, len = elem.length; i < len; ++i) { var isConnectedTo = elem[i].getAttribute('data-connection'), toggleTextSibling = (elem[i].getAttribute('data-toggle-text') || ' ').split(' | '), togglePlacementSibling = elem[i].getAttribute('data-toggle-placement') && elem[i].getAttribute('data-toggle-placement') !== 'bottom' ? elem[i].getAttribute('data-toggle-placement') : 'bottom'; if (isConnectedTo && isConnected === isConnectedTo && target.id !== elem[i].id) { elem[i].className = elem[i].className.replace(/(^| )spoiler-state-expanded( |$)/, '$1spoiler-state-collapsed$2'); elem[i].children[togglePlacementSibling === 'bottom' ? 1 : 0].innerHTML = toggleTextSibling[0]; } } } returnfalse; }; toggle.onmousedown = false; elem[index].insertBefore(toggle, togglePlacement == 'bottom' ? null : elem[index].firstChild); } for (var i = 0, len = panel.length; i < len; ++i) { toggleSpoiler(panel, i); } })(window, document); //]]> </script>
Klik tombol Simpan Templat.
Penggunaan
Semua konfigurasi hanya didasarkan pada atribut-atribut di dalam HTML spoiler.
Dasar
Sebuah spoiler sederhana dapat dibuat dengan menyisipkan kode HTML ini ke dalam posting. Pastikan Anda sedang berada pada mode HTML, dan bukannya berada pada mode Tulis:
<divclass="spoiler spoiler-state-collapsed"data-toggle-text="Spoiler"> <divclass="spoiler-content">Konten di sini…</div> </div>
Terbuka secara Default
Ganti kelas spoiler-state-collapsed menjadi spoiler-state-expanded untuk membuat spoiler menjadi terbuka secara default:
<divclass="spoiler spoiler-state-expanded"data-toggle-text="Spoiler"> <divclass="spoiler-content">Konten di sini…</div> </div>
Modifikasi Teks pada Tombol Toggle
Tambahkan atribut data-toggle-text untuk menambahkan teks pada tombol. Pisahkan teks tombol menjadi dua bagian dengan sebuah “ | ” untuk membuat tombol berubah status secara bergantian ketika panel spoiler terbuka dan tertutup:
<divclass="spoiler spoiler-state-collapsed"data-toggle-text="Buka Spoiler | Tutup Spoiler"> <divclass="spoiler-content">Konten di sini…</div> </div>
Mengubah Posisi Tombol
Secara normal, tombol toggle akan ditempatkan setelah panel. Anda bisa mengubah posisinya menjadi sebelum panel dengan cara menambahkan atribut data-toggle-placement dengan nilai sebagai top:
<divclass="spoiler spoiler-state-collapsed"data-toggle-placement="top"> <divclass="spoiler-content">Konten di sini…</div> </div>
<divclass="spoiler spoiler-default spoiler-state-collapsed"data-toggle-text="Default"> <divclass="spoiler-content">Konten di sini…</div> </div>
<divclass="spoiler spoiler-primary spoiler-state-collapsed"> <divclass="spoiler-content">Konten di sini…</div> </div>
<divclass="spoiler spoiler-success spoiler-state-collapsed"> <divclass="spoiler-content">Konten di sini…</div> </div>
<divclass="spoiler spoiler-info spoiler-state-collapsed"> <divclass="spoiler-content">Konten di sini…</div> </div>
<divclass="spoiler spoiler-warning spoiler-state-collapsed"> <divclass="spoiler-content">Konten di sini…</div> </div>
<divclass="spoiler spoiler-danger spoiler-state-collapsed"> <divclass="spoiler-content">Konten di sini…</div> </div>
Efek Akordion
Tambahkan atribut data-connection untuk mengaitkan antara panel yang satu dengan panel yang lainnya yang juga memiliki atribut data-connection dengan nilai yang sama. Nilai bisa berupa apa saja:
Pengguaan spoiler ini kelihatannya memang sedikit rumit jika dilihat dari segi penulisan markup HTML. Mungkin beberapa dari kalian lebih menginginkan markup yang sederhana seperti sebuah elemen <div> dengan ID spoiler-1dan sebuah tombol dengan atribut onclick bernilai toggleSpoiler('spoiler-1'). Tapi ini adalah resiko yang akan selalu muncul pada semua alat, widget dan plugin dengan fitur yang cukup banyak. Terdapat arsitektur dan pola tersendiri di dalamnya yang tidak bisa dilepaskan maupun disederhanakan begitu saja.
