Rico Sihaloho

Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan

Minggu, 28 Maret 2021 Tutorial

Perbedaan Sitemap XML dan HTML

Perbedaan Sitemap XML dan HTML – Pada post kali ini saya akan membahas tentang perbedaan sitemap XML dan HTML pada Blog/Website.

Bagi seorang blogger, istilah “Sitemap” mungkin sudah akrab dan tidak asing lagi. Namun meskipun sudah mengerti sitemap, ternyata masih ada beberapa blogger yang tidak mengetahui perbedaan sitemap XML dan HTML pada blog/website.

Kronologinya : Saya pernah membaca sebuah argumen seorang blogger, sebut saja Ponijo. Si Ponijo ini nampaknya sudah khatam betul soal website. Tapi aneh! Menurut sang Ponijo, bahwa sitemap HTML itu nggak penting.

Tulisannya kurleb begindang :

“Mbah google kan butuhnya sitemap berekstensi XML, sedangkan membuat sitemap (daftar isi) di blog/website itu hasilnya berekstensi HTML. Kira-kira matching nggak, tuh?. Bagi saya sih sitemap kek gini nggak penting.. xixixi” , Tulis Ponijo.

Ahk jadi pengin saya sentil nih hidungnya si Ponijo.. 😁

Ini anggapan yang keliru ya. Saya punya pemahaman yang berseberangan dengan si Ponijo. Monmaap nih, dari argumennya bisa dipetakan kalau si Ponijo sepertinya belum mengerti perbedaan sitemap XML dan HTML pada blog/website.

Nah itu kejutan, menarik yekan untuk diobrolkan!

Jika ada yang masih bingung tentang perbedaan sitemap XML dan HTML seperti si Ponijo. Baca artikel ini sampai selesai ya. Sebab artikel ini akan membahas perbedaan sitemap XML dan HTML pada blog/website.

Seperti yang sudah kita ketahui, bahwa Sitemap (Peta situs) ada dua kategori, yaitu sitemap XML dan sitemap HTML.

Omong-omong sudah tahu kan, dari kedua sitemap ini yang harus di submit ke google webmaster?? Yaps, betul sitemap XML. Tapi bukan berarti sitemap HTML nggak penting lho Ponijo!

Memang jika ditelusuri secara rinci dan mendetail, sitemap XML dan sitemap HTML sangat jelas memiliki perbedaan, namun kedua sitemap tersebut sama-sama memegang peranan penting di dalam sebuah website.

Bisa dikatakan sitemap HTML dan XML ibarat dua sisi mata uang, saling terintegrasi dan tak bisa dipisahkan.

Jadi gini lho Ponijo! 😁

Kalau berbicara tentang dunia website, selalu ada dua sisi yang berbeda. Perhatikan!

Sisi pertama adalah sisi yang ditampilkan secara visual, atau seperti yang terlihat saat kita membuka sebuah website. Dan di sinilah dibutuhkan fungsi sitemap HTML dengan Cara membuat sitemap otomatis di blog/website.

Sedangkan sisi kedua adalah sisi yang berada di balik seluruh konten website yang tidak bisa dilihat oleh semua orang. Nah di sinilah dibutuhkan fungsi sitemap XML dengan Cara Submit Sitemap.xml ke Google Webmaster .

Sampai di sini sudah paham kan, Ponijo? Jika belum paham, ulangi baca dari atas. Bagi yang sudah paham mari kita lanjutkan karena kita belum masuk ke inti pembahasan.. hehh.

Apa perbedaan SiteMap XML dan HTML?

Sebelum melihat perbedaan sitemap XML dan sitemap HTML, sebaiknya kita pahami dulu dasar-nya (basic).

Perbedaan XML dan HTML adalah :

📍XML	📍HTML
XML singkatan Extensible Markup Language	HTML singkatan Hypertext Markup Language
XML menyediakan sebuah kerangka kerja (framework) untuk menentukan bahasa markup	HTML merupakan bahasa markup standar
XML merupakan tipe bahasa Case Sensitive atau peka terhadap besar dan kecil	HTML merupakan tipe bahasa Case insensitive atau tidak peka terhadap besar dan kecil kalimat
Informasi terstruktur	Informasi tidak terstruktur
XML spasi bisa dipertahankan	HTML tidak dapat mempertahankan spasi
XML harus menggunakan tag penutup	HTML tag penutup bisa diberikan atau tidak (optional)
Pada XML urutan (Nesting) harus dilakukan dengan benar	Pada HTML urutan (Nesting) tidak terlalu diperhitungkan
XML tidak boleh ada error	HTML Error kecil dapat diabaikan
XML untuk transfer data (informasi)	HTML menyajian data (informasi)

Setelah kita mengetahui perbedaan XML dan HTML, selanjutnya mari kita lihat perbedaan sitemap XML dan sitemap HTML pada blog/website.

Berikut perbedaan sitemap XML dan HTML pada blog/website. Silakan lihat tabel di bawah ini :

Sitemap XML	Sitemap HTML
📍Definisi Secara Umum
Sitemap XML adalah daftar isi blog yang digunakan oleh search engine atau mesin pencari seperti Google, Bing, Yandek, dll.	Sitemap HTML adalah daftar isi yang berfungsi menampilkan semua judul artikel pada blog yang nantinya dapat dilihat oleh pengunjung.
📍Ekstensi File
Sitemap XML berekstensi file.xml	Sitemap HTML berekstensi file.html
📍Kegunaan
Sitemap XML dibuat untuk Search Engine *** Sitemap XML biasanya berisi metadata sepeti kapan terakhir kali URL di-update, seberapa cepat perubahan berlangsung, alamat URL, sekumpulan link menuju halaman suatu website dsb.	Sitemap HTML dibuat untuk Website Users *** Sitemap HTML berisi link yang menuju ke halaman utama sebuah website seperti Contact Us atau Shoping Cart.
📍Fungsi
Sitemap XML berfungsi untuk mempercepat proses indexing.	Sitemap HTML berfungsi untuk mempermudah user membuka website.
📍Fokus
Sitemap XML fokus untuk optimasi di luar tampilan website, seperti SEO (Search Engine Optimization) dan crawling.	Sitemap HTML fokus untuk optimasi tampilan visual website.
📍Support
Sitemap XML disupport oleh konten.	Sitemap HTML disupport oleh format.
📍Mekanisme
Sitemap XML bekerja di balik layar	Sitemap HTML tampil di layar.

Dari tabel di atas, sebetulnya sudah cukup jelas perbedaan Sitemap XML dan HTML pada blog/website.

Jadi bisa ditarik kesimpulan bahwa Sitemap XML dibuat untuk mesin pencari (Search Engine) seperti Google. Sedangkan Sitemap HTML dibuat untuk pengunjung website.

Itulah perbedaan sitemap XML dan HTML yang “wajib” ada pada sebuah blog/website.

Dan agar saya juga tidak dianggap sok tahu, sama si Ponijo *haha*. Berikut ini saya lampirkan sebuah pernyataan dari Matt Cutts yang merupakan Kepala dari Tim Google Webspam.

Ketika ditanya mana yang lebih penting antara Sitemap XML dan HTML?

Matt Cutts menjawab “Sitemap HTML”. Sitemap HTML membantu pengunjung website (pembaca) dan Search Engine untuk menelusuri sebuah website. Sitemap HTML adalah hal yang sangat berguna dan penting untuk memilikinya.

Jadi kalau masih ada blogger yang bilang sitemap HTML itu nggak penting, kemungkin dia nggak mengerti perbedaan sitemap XML dan HTML.

Perlu diketahui sebetulnya tujuan utama Sitemap XML bukanlah untuk mengoptimasi SEO, melainkan mempermudah penjelajahan di sebuah website.

Namun karena hal tersebut mempengaruhi SEO, maka keberadaan Sitemap XML memiliki pengaruh yang besar pada optimasi SEO website.

Intinya adalah sitemap XML dan HTML memang jelas berbeda, tapi posisinya sama-sama penting. Dalam sebuah website sudah pasti harus ada sitemap HTML dan XML dengan tujuan SEO (Eh SEO lagi, malas ahk ngomongin SEO.. haha).

Terlepas dari semua itu, menurut saya sih hal pertama dan paling utama dalam blog/website adalah konten. 😊

Namun sebagai usaha daya upaya ikhtiarnya atau apapun itu namanya.. hehe, kita sebagai pemilik blog/website perlu memahami perbedaan sitemap XML dan HTML.

Semoga artikel ini bisa bermanfaat, sekaligus menambah wawasan bagi sobat khususnya yang belum tahu.

Oh, jangan sungkan ya untuk memberikan komentar, kritik, uneg-uneg dan masukan. Dengan senang hati akan saya tampung sebagai bahan pelajaran untuk lebih baik. Terima kasih

Good luck, sobat!

Nite & GBU more. Bye..!!

Minggu, 21 Maret 2021 Tutorial

Cara Submit SiteMap ke Google Webmaster

Cara Submit SiteMap ke Google Webmaster – Kesempatan kali ini saya akan membagikan salah satu rahasia Blogspot, yaitu bagaimana cara submit sitemap ke Google Webmaster / Google Search Console.

Tutorial cara submit sitemap ke Google Webmaster ini sangat berguna khuususnya bagi sobat pemula. Yaps, agar artikel yang kita buat bisa cepat terindex di search engine.

Namun sebelum membahas lebih jauh tentang cara submit sitemap ke Google Webmaster, ada baiknya saya mengawali pembahasan dari dasar.

Sebagai pemilik blog/website, siapa sih nggak mau artikelnya bisa bertengger di pejwan alias halaman pertama google? Ehm, jangankan masuk di pejwan. Melihat tulisan bisa mejeng di search engine saja, saya sudah cukup bahagia sebetulnya.

But wait!! Jangan ngarep deh artikel bisa masuk di pejwan kalau belum men-submit sitemap ke google webmaster. Itu sih sama saja ngarepin kucing beranak kadal, mustahil. 😁

Logikanya gini, bagaimana caranya artikel kita bisa masuk ke halaman pertama google, sementara mbah google saja tidak mengenal situs kita kok. Lucu kan ya? Secara otomatis artikel kita akan susah terindeks.

Itulah alasan betapa pentingnya men-submit sitemap ke google webmaster, yang sedang kita obrolkan ini.

cara-submit-sitemap-ke-google-webmaster-terupdate

Perlu diketahui, di sini saya tidak membicarakan tentang teknik SEO (Search Engine Optimization) atau semacamnya. Tetapi saya akan mencoba mengulik kembali manfaat dari SiteMap atau peta situs itu sendiri.

Secara umum manfaat sitemap adalah untuk mempercepat index di mesin pencari google. Selain itu bisa meningkatkan “page views” dan mengurangi “bounce rate”. SiteMap juga bisa membantu dalam mendongkrak SEO (halah kok SEO muncul lagi.. hehh).

Mengingat betapa pentingnya SiteMap ini, maka kita pun (((wajib))) memasang SiteMap atau peta situs blog kita ke Google Webmaster. Untuk apa?? Ya itu tadi, sebagai salah satu langkah menuju SEO (aduhh SEO lagi, SEO lagi.. hehh).

Ini pengalaman saya dulu lho! Awalnya saya cuek sama si SiteMap. Karena saya pikir Blogspot itu kan produknya si Google, jadi tanpa kehadiran si SiteMap pun pastilah cepat dikenali dan diideks olehnya.

Masa iya mbah Google tega sih nggak mengenali URL di produknya sendiri? Walhasil, artikel yang saya buat tidak muncul di search engine. *dodolnya diriku!

Setelah membaca ulasan di berbagai artikel. Salah satu cara agar artikel yang kita buat bisa cepat terindeks oleh google, yaitu dengan cara submit sitemap ke Google Webmaster.

Ehm, antara “SiteMap” dan “Google Webmaster”!!

FYI, SiteMap (Peta Situs) ada dua kategori. Yaitu sitemap HTML dan sitemap XML. Kedua sitemap tersebut memiliki perbedaan. Silakan baca apa Perbedaan Sitemap XML dan HTML pada website.

Perbedaan utama dari kedua SiteMap tersebut adalah Sitemap HTML dibuat untuk pengunjung website. Sebagai gambaran, silakan baca Cara membuat sitemap otomatis di blog/website.

Sedangkan, sitemap XML dibuat untuk membantu mesin pencari google dalam proses indexing. Jadi dalam konteks ini sitemap XML lah yang perlu kita submit ke google webmaster.

Apa itu SiteMap XML?

SiteMap XML adalah sebuah file berekstensi .xml (bukan ekstensi .htlm) yang memuat daftar dari seluruh artikel sebuah blog/website. Strukturnya terdiri dari judul dan URL saja.

SiteMap XML inilah yang menjadi rujukan bagi search engine dalam melakukan crawling untuk mendeteksi konten sebuah blog/website. Dengan demikian, proses indeks menjadi lebih cepat dan tidak ada halaman URL yang terlewatkan oleh robot crawler (spiderbot).

Selain itu, SiteMap XML pula yang membuat Google bisa menampilkan halaman website ketika dicari oleh pengguna di internet.

Eh! Thanks to the internet barusan saya jadi tahu, saat menulis draft artikel ini saya juga googling dan menemukan informasi bahwa Sitemap diperkenalkan oleh Google pada tahun 2005 lho!

Saat ini Google, Yahoo, Ask, dan Bing bergabung untuk mendukung protokol sitemap berupa XML. Sehingga sitemap XML telah menjadi sebuah protokol standar mesin pencari pada setiap search engine.

Lalu, bagaimana cara membuat SiteMap XML?

Berikut cara membuat SiteMap XML yang bisa kita gunakan. URL utama sitemap XML untuk postingan, cukup menambahkan sitemap.xml di akhir URL blog.

Formatnya :

https://ricohaloho.blogspot.com/sitemap.xml

Selain itu, kita juga dapat membuat jenis sitemap tambahan, dengan cara menambahkan kode berikut di akhir URL blog. Seperti :

sitemap-page.xml
feeds/posts/default?orderby=updated
atom.xml

SiteMap XML untuk postingan halaman statis (page). Formatnya :

https://ricohaloho.blogspot.com/sitemap-pages.xml

Sitemap XML Feed (rss atau atom). Formatnya :

https://ricohaloho.blogspot.com/feeds/posts/default?orderby=updated

Sitemap Atom.xml Formatnya :

https://ricohaloho.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500

Sebagai catatan, sitemap ini berlaku hanya untuk 500 postingan pertama saja ya. Jika memiliki lebih 500 postingan, tambahkan lagi sitemap untuk postingan selanjutnya. Formatnya :

https://ricohaloho.blogspot.com/atom.xml?redirect=false&start-index=501&max-results=1000

Note : Silakan ganti ricohaloho.blogspot.com/ dengan alamat blog masing-masing.

Setelah kita membuat SiteMap XML blog kita selanjutnya silakan di submit ke Google Webmaster.

Bagaimana cara submit SiteMap ke Google Webmaster?

Cara submit sitemap ke google webmaster ini sangat mudah. Saking mudahnya banyak juga yang nggak tahu, termasuk saya. Tapi itu dulu.. :)

Berikut ini cara submit sitemap ke Google Webmaster :

Hal pertama yang harus dilakukan yaitu mendaftarkan blog terlebih dulu di Google Webmaster. Saya asumsikan sudah memiliki akun ya di Google Webmaster (kalau belum silakan daftar dulu). Selanjutnya :

➤ Login ke akun Google Webmaster/ Google Search Console

➤ Pada Dashboard bilah sebelah kiri, klik menu Sitemaps (Peta situs)

➤ Lalu akan ada kotak isian, masukan URL Sitemap XML sesuai format di atas.

➤ Klik tombol “Submit”. Lalu, refresh!

Jika ingin submit lebih dari satu jenis sitemap XML, lakukan dengan hal yang sama. Jika berhasil maka kita akan menerima pemberitahuan “Sitemap Submitted Successfully”.

➤ Done!

Sampai sini kita sudah berhasil submit sitemap ke Google Webmaster/Google Search Console. Gimana, gampang banget kan sob?

Tunggu!!!

Apakah URL sitemap di atas semuanya wajib di submit ke google webmaster? TIDAK. Kita cukup men-submit URL utama sitemap.xml saja. Jenis sitemap tambahan di atas hanya back-up untuk berjaga-jaga.

Jadi, jika URL utama sitemap.xml mengalami keterlambatan index maka sitemap tambahan tadi bisa digunakan sebagai penggantinya.

Namun ada juga pakar menyarankan lebih dari satu sitemap agar artikel lebih cepat terindeks. Terserah sih, menurut saya cukup satu jenis sitemap saja, yang penting tidak “error”. 😄

Sekian dulu pembahasan tentang cara submit Sitemap ke Google Webmaster. Semoga artikel ini bermanfaat. Selamat mencoba! Terima kasih

See you on top..

Nite & GBU more. Bye..!!

Minggu, 14 Maret 2021 Tutorial

Cara Membuat SiteMap Otomatis di Blog/Website

Cara Membuat SiteMap Otomatis di Blog/Website – Waktu luang kali ini saya akan berbagi, bagaimana cara membuat sitemap otomatis di blog/website.

Disclaimer : Artikel ini membahas cara membuat sitemap otomatis di blog/website pada platform Blogspot. So, jika platform blogging yang sobat gunakan adalah Blogspot, silakan baca sampai selesai ya! Karena ini penting banget.. L.O.L

Tutorial cara membuat sitemap otomatis di blog ini merupakan salah satu tips sederhana SEO (Search Engine Optimization) yang perlu diperhatikan secara serius oleh pemilik blog/website.

Oh iya, saya mau ngaku dosa dulu. Sebetulnya jika melihat ke diri sendiri, saya belum terlalu berani untuk speak up soal SEO. Karena saya masih merasa ilmu saya belum pantas untuk cuap-cuap apalagi sampai ~~menggurui~~ seperti ini.

Tapi di sisi lain, saya juga mau dong membuat tutorial di blog. Biar orang-orang pikir saya paham SEO. Iya, biar kelihatan jago kyak ada ilmunya gitu *haha*. Jadi, tolong hargai usaha saya. 🤭

OK then, let’s get started..

Apa itu SiteMap?

Menurut [ Wikipedia ], SiteMap adalah salah satu alat bantu untuk mempermudah dalam pengenalan peta situs di dalam website. Apabila diterjemahkan, SiteMap artinya peta situs.

Bisa dikatakan, SiteMap (peta situs) merupakan kumpulan link URL halaman posting suatu blog yang telah dikelompokkan berdasarkan labelnya/kategori. SiteMap disebut juga dengan daftar isi artikel di sebuah blog/website.

Platform Blogspot sendiri sudah menyediakan SiteMap, namun menurut saya SiteMap default Blogspot terlihat biasa saja dan kurang menarik. Karenanya perlu untuk didandani atau direkonstruksi dengan cara membuat sitemap otomatis di blog/website.

Apa manfaat membuat SiteMap di Blog/Website?

Manfaat membuat sitemap di blog/website :

Untuk mempercepat Indeks. Jadi, dengan cara membuat sitemap di blog/website, maka search engine akan lebih mudah mengidentifikasi data URL/isi dari situs atau blog kita. Sehingga, blog kita akan lebih cepat terindeks di mesin pencari Google.

Selain itu, manfaat SiteMap adalah untuk mendongkrak SEO di blog. Jadi, dengan cara membuat sitemap di blog/website. Maka blog akan dinilai lebih terstruktur dan bisa membuat situs atau blog lebih SEO friendly.

Tak hanya itu, dengan cara membuat sitemap di blog/website ini bisa meningkatkan “page views” dan mengurangi “bounce rate” dari situs atau blog kita.

Itu sih kata mereka yang ahli SEO, bukan kata saya lho. Kalo saya sih, nggak ngerti apa-apa.

Djujur! Tujuan awal saya membuat sitemap (daftar isi) otomatis di blog adalah tak lain dan tak bukan, sebagai navigasi untuk mempermudah user saat mencari artikel berdasarkan label (kategori) yang ada di situs atau blog saya ini.

Logikanya gini, SiteMap (peta situs) layaknya sebuah daftar isi dalam buku. Dengan cara membuat sitemap di blog/website, harapannya sih agar user dapat dengan mudah untuk menemukan artikel apa yang sedang mereka cari.

Sebagai contoh bisa kalian lihat SiteMap Blog ini (di atas foto profil/sebelah kanan) atau silakan klik tombol di bawah.

Mengingat betapa pentingnya SiteMap ini. Timbul lah niat menulis thread dengan judul “Cara membuat sitemap otomatis di Blog/Website”, yang sedang kita obrolkan ini.

Menariknya, SiteMap yang akan saya bagikan kali ini memiliki fitur yang sangat komplit. Jadi ketika kita memposting artikel terbaru, SiteMap secara otomatis akan terupdate menampilkan judul postingan sesuai dengan label yang ada.

Postingan terbaru akan secara otomatis masuk dalam daftar isi, jadi kita tidak perlu repot memasukkan satu persatu. Sehingga dapat memberikan ruang informasi kepada user untuk mengetahui postingan terbaru di blog kita.

Secara otomatis hal ini juga akan menginformasikan ke search engine bahwa blog kita masih dikelola dengan baik dan masih terus memberikan manfaat kepada banyak orang.

Multifungsi yah! Artinya selain tampilan visual blog kita udah keren, kredibel blog kita juga diakui sama mbah google, wow!!

Lalu jika saya ditanya, apakah SiteMap penting dan harus ada di sebuah blog/website?

Kalo saya sih, YES!! Tahu deh yang lain. Tergantung yang punya situs atau blog lah. Buat sebagian orang mungkin nggak penting, tapi buat saya penting. Apalagi setelah saya mengetahui manfaat membuat sitemap di blog/website, ahh penting banget woii! 🤣

Tapi ya, terserah sih mau pakai sitemap apa nggak (bodo amat.. haha), yang penting saya udah ngasih kode lho di sini.

Nah bagi adik-adik yang tertarik dan peka sama kodenya abang *haha*. Berikut ini, ada tiga versi SiteMap otomatis di blog/website yang recommended bagi sobat pengguna Blogspot. Check it out :

SiteMap otomatis di blog/website Versi-1 :

Sitemap ini menampilkan sebuah susunan label blog, jika label di-klik maka akan muncul semua artikel yang ada pada label tersebut. Ini sih keren, asli!

Script :

.tabbed-toc {margin:0 auto;background-color:#2f77bd;box-shadow: 0 0 7px rgba(5, 5, 5, 0.34);overflow:hidden;

position:relative;color:#333;border: 1px solid #9C9C9C;}

.tabbed-toc .loading {display:block;padding:10px 12px;font:normal bold 12px/normal Helmet,FreeSans,Sans-Serif;

color:white;}

.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li {margin:0;padding:0;list-style:none;}

.tabbed-toc .toc-tabs {width:20%;float:left;}

.tabbed-toc .toc-tabs li a {display:block;font:normal bold 12px/28px Helmet,Freesans,Sans-Serif;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;

padding:7px 15px;cursor:pointer;box-shadow: 0px 1px 1px rgb(255, 255, 255);}

.tabbed-toc .toc-tabs li a:hover {background-color:#4086E0;color:white;box-shadow: 0 0 7px rgba(0,0,0,.7);}

.tabbed-toc .toc-tabs li a.active-tab {background-color:#FFF;color:black;box-shadow: 0 0 7px rgba(0,0,0,.7);

z-index:5;margin:0 -1px 0 0;/* cursor:text; */}

.tabbed-toc .toc-content,.tabbed-toc .toc-line {width:80%;float:right;background-color:white;border-left:5px solid #1E84BC;box-sizing:border-box;}

.tabbed-toc .toc-line {float:none;display:block;position:absolute;top:0;right:0;bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);}

.tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px/normal Helmet,FreeSans,Sans-Serif;}

.tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:12px;color:#000;line-height:20px;padding: 10px 12px;

text-decoration:none;outline:none;overflow:hidden;}

.tabbed-toc .panel li time {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}

.tabbed-toc .panel li .summary {display:block;padding:10px 12px 10px;font-style:italic;

border-bottom:4px solid #275827;overflow:hidden;}

.tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;padding:4px;

width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}

.tabbed-toc .panel li:nth-child(even) {background-color:#66A9FF}

.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li a:hover time,.tabbed-toc .panel li.bold a {

background-color:#333;color:white;outline:none;}

.tabbed-toc .panel li.bold a:hover,

.tabbed-toc .panel li.bold a:hover time {background-color:#222}

@media (max-width:700px) {

.tabbed-toc {border:2px solid #333}

.tabbed-toc .toc-tabs,.tabbed-toc .toc-content {overflow:hidden;width:auto;float:none;display:block;}

.tabbed-toc .toc-tabs li {display:inline;float:left;}

.tabbed-toc .toc-tabs li a,.tabbed-toc .toc-tabs li a.active-tab {background-color:#2f77bd;box-shadow:2px 0 7px rgba(0,0,0,.4);}

.tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}

.tabbed-toc .toc-content {border:none}

.tabbed-toc .toc-line,

.tabbed-toc .panel li time {display:none}

.tabbed-toc .panel li a{height: auto;}

</style>

<span class="loading">Memuat…</span></div>

var tabbedTOC = {

blogUrl: "hhttps://ricohaloho.blogspot.com/", // Blog URL

containerId: "tabbed-toc", // Container ID

activeTab: 1, // The default active tab index (default: the first tab)

showDates: false, // `true` to show the post date

showSummaries: false, // `true` to show the posts summaries

numChars: 200, // Number of summary chars

showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)

thumbSize: 40, // Thumbnail size

noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL

monthNames: [ // Array of month names

"Januari",

"Februari",

"Maret",

"April",

"Mei",

"Juni",

"Juli",

"Agustus",

"September",

"Oktober",

"November",

"Desember"

newTabLink: true, // Open link in new window?

maxResults: 99999, // Maximum post results

preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")

sortAlphabetically: true, // `false` to sort posts by published date

showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked

newText: ' – <em style="color:red;">New!</em>' // HTML for the "New!" text

};

</script>

Screenshot :

Tampilan sitemap versi-1 (Desktop) :

Tampilan Sitemap Versi-1 (Mobile)

SiteMap otomatis di blog/website Versi-2 :

Berbeda dengan sitemap versi-1, Sitemap ini langsung menampilkan label blog dan semua artikel yang ada pada label tersebut. Artikel akan tersusun rapi sesuai label.

Script :

#toc{

width:99%;

margin:5px auto;

border:1px solid #2D96DF;

-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

}

.labl{

color:#FF5F00;

font-weight:bold;

margin:0 -5px;

padding:1px 0 2px 11px;

background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);

background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));

border:1px solid #2D96DF;

border-radius:4px;-moz-border-radius:4px;

-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;

-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;

}

.labl a{

color:#fff;

}

.labl:first-letter{text-transform:uppercase;

}

.new{

color:#FF5F00;

font-weight:bold;

font-style:italic;

}

.postname{

font-weight:normal;

background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);

background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));

}

.postname li{

border-bottom: #ddd 1px dotted;

margin-right:5px

}

</style>

<br />

</script></div>

Screenshot :

Tampilan SiteMap Versi-2 :

SiteMap otomatis di blog/website Versi-3 :

Script :

#toc{width:99%;margin:5px auto;border:1px solid #df772d;

-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}

.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;

padding:1px 0 2px 11px;background: #08484f;

border:1px solid #2D96DF;

border-radius:4px;-moz-border-radius:4px;

-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;

-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}

.labl a{color:#fff;}

.labl:first-letter{text-transform:uppercase;}

.new{color:#FF5F00;font-weight:bold;font-style:italic;}

.postname{font-weight:normal;background:#fff;margin-left: 35px;}

.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}

</style>

<br />

</script></div>

Screenshot :

Tampilan SiteMap Versi-3 :

Udah ahk! 3 script itu saya rasa sudah cukup ya sebagai referensi. Semuanya sudah saya coba dan SiteMap -nya berhasil tampil di blog ini.

Gimana sob, keren nggak? Ehm, apa cuma saya yang lihat ini keren. 😆

Bagaimana cara membuat SiteMap otomatis di Blog/Website?

Berikut cara membuat sitemap otomatis di Blog/Website :

➤ Masuk ke Dashboard Blogspot

➤ Pilih “Halaman/Laman”

➤ Klik “Halaman baru” (ingat bukan postingan lho!)

➤ Tulis Judul “SiteMap” , “Peta Situs” atau “Daftar Isi”. Dan buat kalimat seperlunya (Opsional)

➤ Ganti mode penulisan dari “Compose” menjadi “HTML”

➤ Copy salah satu script SiteMap yang kalian suka, dan Paste -kan Script tersebut pada halaman kerja kalian di mode HTML.

➤ Simpan dan langsung publikasikan tanpa pratinjau.

➤ Selesai

Demikian pembahasan tentang cara membuat SiteMap otomatis di Blog/Website.

Dan agar saya tidak dianggap sok tahu, perlu kalian ketahui bahwa script code di atas saya ambil dari berbagai sumber di internet.

Silakan dicoba ya sob! Konon dengan cara membuat sitemap di blog/website, bisa membuat blog kita akan lebih baik dari sebelum-sebelumnya.

Tunggu! Apakah membuat sitemap di blog/website dengan model di atas benar-benar bisa membuat blog kita jadi lebih SEO Friendly?

Hadeuhh, pertanyaannya serius banget yah! Kan tadi udah saya bilang kalo saya ini bukan jago SEO.. hihi.

Sebelum saya membuat SiteMap di blog ini, visitor -nya sangat sedikit (paling juga 1, 2. Eh 3 deng biar lebih banyakan). Puji Tuhan, setelah membuat SiteMap, visitor blog saya tetap segitu. 😄

Jadi silakan disimpulkan sendiri ya Ronaldo!

Oh iya, kalau belum paham nggak perlu dibaca berulang-ulang juga, apalagi sampai menghafal script -nya (kecuali ya, kalau kalian mau diet sehat.. haha)

Pisssttt..! 😉 Habis baca ini jangan lupa cek postingan Cara Submit Sitemap ke Google Webmaster juga yah!

Sampai di sini dulu cuap-cuap kita malam ini. Terima kasih

See you next time..

Nite & GBU more. Bye..!!

Minggu, 07 Maret 2021 Tutorial

Cara Membuat Tombol Spoiler di Blog/Website

Cara Membuat Tombol Spoiler di Blog/Website – Waktu luang kali ini saya akan berbagi bagaimana cara membuat tombol spoiler atau tombol buka tutup (show/hide) di blog/website.

Tutorial cara membuat tombol spoiler di blog/website ini penting khususnya sobat newbie, agar tampilan blognya lebih menarik gitu.

Namun sebelum membahas lebih jauh tentang cara membuat tombol spoiler di blog/website. Sebaiknya kita pahami dulu pengertian “spoiler”. Mengingat istilah ini banyak bertebaran di media sosial.

So, bagi yang belum tahu silahkan disimak agar tidak keliru (yang sudah tahu, CMIIW ya!).

OK then, let's get started.. :)

Apa itu Spoiler?

Menurut [ Wikipedia ], Spoiler adalah tulisan atau keterangan mengenai suatu cerita, yang membeberkan jalan cerita tersebut. Bahasa Indonesianya adalah “beberan/bocoran”.

Namun jika kita telusuri secara mendetail, kata “Spoiler” berasal dari bahasa Inggris yaitu “Spoil” yang artinya merusak atau mengganggu. Maka, Spoiler artinya perusak atau pengganggu.

Setelah mengetahui definisi “Spoiler”, mungkin bagi pembaca yang awam akan sedikit mengerutkan kening dan bertanya-tanya. Apa sih arti spoiler yang sebenarnya? (Beberan atau Perusak?)

Ehh, udah kayak pilihan berganda ya. Cuma kali ini jawabannya, semua benar! 😁

Jadi gini, sebetulnya istilah “spoiler” ini memiliki makna yang beragam sih, tergantung dari sudut mana kita mengartikannya.

Pengertian spoiler dari segi media, silahkan tekan tombol spoiler di bawah ini!

Arti SPOILER dari segi Media :

Itu pengertian spoiler dari segi media, namun waktu luang kali ini saya akan membahas tentang spoiler dari sudut yang berbeda, yaitu dari segi Informasi Teknologi atau lebih spesifik di dunia blogging/website.

Bicara tentang spoiler dari segi Informasi Teknologi, bukan berarti menceritakan film yang udah kita tonton ke teman-teman (Oalah kagak danta!).

Dari segi Informasi Teknologi, Spoiler adalah sebuah fitur dimana kita bisa menyimpan atau menyembunyikan sebagian konten di sebuah artikel.

Bisa dikatakan, tombol spoiler adalah sebuah tombol buka dan tutup (show & hide) yang dapat menyembunyikan suatu konten berupa teks, script, gambar atau video.

Konten akan muncul jika pembaca artikel (user) meng-klik tombol spoiler tersebut. Sebaliknya, konten akan tersembunyi jika pembaca artikel (user) meng-klik ulang tombol spoiler tersebut.

Itulah menariknya topik yang sedang kita obrolkan ini. Unik ya kan!

Berikut contoh tombol spoiler atau tombol buka tutup di blog/website. Artinya ketika kita klik tombol “lihat spoiler”, maka teks akan muncul.

Silahkan klik tombol spoiler di bawah ini!

FYI, Penggunaan spoiler pada awalnya dipopulerkan di situs forum seperti Kaskus, Indowebster, dan forum online yang menggunakan Vbulletin lainnya.

Di sana disediakan fitur yang bisa kita gunakan dengan hanya menekan tombol “Add Spoiler” yang tersedia pada menu panel posting.

Namun seiring dengan merambaknya kepopuleran dunia blogging, penggunaan spoiler juga seringkali diterapkan oleh pemilik blog/website di postingan artikel, termasuk saya.

Bagi sobat Kaskuser misalnya, pasti tidak asing lagi dengan yang namanya spoiler ini ya kan?

Saya sendiri terinspirasi dari fitur spoiler yang ada di Kaskus. Meskipun saya tak pernah membuat thread di sana (Kaskus), tapi saya merasa tertantang dengan fitur spoiler ini. Sepertinya layak untuk dicoba, keren.

And than.. saya pun tertarik untuk mengaplikasikannya di blog saya ini. SKIP!!

*Silahkan sembunyikan lagi konten dengan meng-klik ulang tombol spoiler.

Lalu, mungkin akan timbul pertanyaan baru, apa sih gunanya spoiler? Ngapain sih harus pakai spoiler?

Baik, akan saya coba jawab.

Apa fungsi Spoiler?

Fungsi spoiler adalah :

✔️ Untuk menyembunyikan sebagian konten yang terlalu panjang/lebar agar terlihat rapi.

✔️ Untuk menghemat space artikel agar lebih praktis dan keren.

✔️ Untuk menghemat kuota pembaca.

✔️ Untuk mempercepat proses loading page, terutama konten yang bandwith killer (ukuran besar) seperti gambar atau video.

✔️ Untuk membagikan kejutan kepada pengunjung blog kita berupa teks, gambar, atau hal menarik lainya.

✔️ Atau bahkan spoiler bisa juga digunakan untuk menipu (jangan yah!). Misalnya, disebutkan Ariel dan Cut Tari lagi “anu”, eh.. pas di-klik ternyata Dinar Candy lagi ngegosip, misalnya ya misal. *Mau dong digosipin sama Dinar Candy 🤣

Banyak kan manfaat tombol spoiler di blog/website. Makanya kalo sekiranya artikel yang saya tulis sudah kepanjangan, artikelnya akan saya bonsai (diceperin), ya diakalin gitu dengan cara membuat tombol spoiler di Blog/Website.

Nah yang jadi masalahnya, platform blog seperti Blogger dan Wordpress tidak menyediakan fitur spoiler seperti yang ada di Kaskus. Untuk bisa membuat tombol spoiler pada posting blog, harus digunakan kode-kode khusus, yang cukup panjang.

Jadi, gimana udah jago main kode-kodean? Baguslah!

Kalo sudah jago main kode-kodean sih, menariknya tombol spoiler ini bisa dimodifikasi dan dikreasikan sesuka hati agar postingan semakin menarik.

Untuk mendapatkan pemahaman yang lebih baik. Langsung saja yuk meluncur ke TKP!

Cara membuat tombol spoiler sederhana

Script :

<div id="spoiler"><div><input style="font-size: 11px; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Tampilkan Konten'; }" name="button" type="button" value="Tampilkan Konten" /></div><div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">CARA MEMBUAT TOMBOL SPOILER ATAU TOMBOL BUKA TUTUP (SHOW/HIDE) DI BLOG/WEBSITE – Rico Sihaloho</div><div id="hide"></div></div>

Preview :

Cara membuat tombol spoiler berupa teks

Script :

<a id="show_id" onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';"><b>[Tampilkan Konten]</b></a><span id="spoiler_id" style="display: none;"><a class="link" onclick="document.getElementById('spoiler_id').style.display='none'; document.getElementById('show_id').style.display='';"><b>[Sembunyikan Konten]</b></a><br /> <br/>CARA MEMBUAT TOMBOL SPOILER ATAU TOMBOL BUKA TUTUP (SHOW/HIDE) DI BLOG/WEBSITE – Rico Sihaloho </span>

Preview :

[Tampilkan Konten]

Cara membuat tombol spoiler tanpa judul

Script :

<div style="margin-bottom: 5px;"> <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 80px;" type="button" value="Munculkan" /></div> <div style="border: 1px inset; margin: 0px; padding: 6px;"> <div style="display: none;"> CARA MEMBUAT TOMBOL SPOILER ATAU TOMBOL BUKA TUTUP (SHOW/HIDE) DI BLOG/WEBSITE – Rico Sihaloho </div> </div>

Preview :

Cara membuat tombol spoiler dengan judul

Script :

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">CARA MEMBUAT TOMBOL SPOILER ATAU TOMBOL BUKA TUTUP (SHOW/HIDE) DI BLOG/WEBSITE – Rico Sihaloho</div></div>

Preview :

Judul Spoiler:

Cara membuat tombol spoiler berisi gambar

Script :

Preview :

Cara membuat tombol spoiler berisi video

Script :

Preview :

Cara membuat spoiler dengan kotak bingkai (frame box)

Script :

<div style="margin-bottom: 2px;"><div style="margin-top: 5px; text-align: left;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup Konten'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan Konten'; }" style="font-size: 15px; margin-top: 5px; width: 150px;" type="button" value="Tampilkan Konten" /> </div><div style="background-color: no; border-bottom: 2px solid #00008B; border-left: 20px solid #00008B; border-right: 2px solid #00008B; border-top: 2px solid #00008B; margin: 0px; padding: 6px;"><div style="display: none;"><span style="color: black; font-style: regular;"><span style="color: black; font-family: Verdana, sans-serif;">CARA MEMBUAT TOMBOL SPOILER ATAU TOMBOL BUKA TUTUP (SHOW/HIDE) DI BLOG/WEBSITE – Rico Sihaloho</span></span></div></div></div>

Preview :

Dan masih banyak lagi, silahkan berkreasi sendiri. Misalnya bagaimana cara membuat tombol spoiler berisi link. Klik tombol spoiler di bawah ini!

NEXT..

Bagaimana cara membuat tombol spoiler di blog/website?

Untuk membuat tombol spoiler atau tombol buka tutup (show/hide) di postingan Blog/Website. Silahkan kalian gunakan daftar listing code di atas dan pasang kode tersebut kedalam artikel blog kalian.

Edit tulisan "CARA MEMBUAT TOMBOL SPOILER ATAU TOMBOL BUKA TUTUP (SHOW/HIDE) DI BLOG/WEBSITE – Rico Sihaloho" yang ada pada script, dan ganti dengan konten kalian.

Ingat! Cara pemasangan kode ini kalian harus menyimpannya di bagian mode “HTML” bukan di “Compose” yah.

Oh iya, perlu dipertimbangkan ada beberapa kelemahan jika menggunakan spoiler ini. Silahkan klik tombol di bawah ini !

Sampai di sini dulu pembahasan tentang cara membuat tombol spoiler di Blog/Website. Kalo ada masukan, kritikan, unek-unek silahkan berkomentar yah!

Semoga tutorial cara membuat tombol spoiler ini bisa bermanfaat bagi siapapun yang ingin mempercantik blog-nya. Thanks!

See you on top..

Nite & GBU more. Bye..!!!

Minggu, 12 Juli 2020 Tutorial

Cara Membuat Huruf Besar (Drop Cap) di Awal Postingan Blog/Website

Ngopi sadayana! 😎

Pembahasan kali ini masih seputar cara mempercantik tampilan blog. Saya akan berbagi aksesoris yang cukup menarik, yaitu bagaimana cara membuat huruf besar (drop cap) di awal postingan blog/website.

OK! Jika saya ditanya soal tips tentang cara mempercantik tampilan blog atau website, maka saya akan selalu mengatakan jika kualitas grafis merupakan suatu keharusan.

Saya tidak bilang bahwa tampilan blog saya ini sudah bagus, dan saya tidak tahu opini pembaca. Tapi kalau boleh jujur, saya suka ketika blog yang saya kunjungi memiliki keunikan tersendiri terutama soal layout –nya.

Sehingga sering membuat saya betah berlama–lama di blog tersebut dan ingin sekali mencobanya. Termasuk cara membuat huruf besar (drop cap) di awal postingan Blog yang sedang kita obrolkan ini.

Cara membuat huruf besar (drop cap) di awal postingan blog. Maksud saya di sini, huruf pertama di awal postingan ukurannya “BESAR”. Jadi selain jenis hurufnya huruf BESAR (Kapital), ukuran hurufnya juga “BESAR”. Wew!!

Daripada ambigu, lihat saja artikel ini. Huruf pertamanya ‘P’. BESAR kan? Nah itu dia, huruf besar di awal postingan lebih dikenal dengan istilah “Drop cap”.

Apa itu Drop cap?

Drop cap adalah sentuhan dekoratif berupa huruf kapital yang ukurannya besar dan mecolok, yang digunakan sebagai huruf awal paragraf pertama dari sebuah postingan artikel.

Fungsi drop cap adalah untuk mempercantik tampilan artikel yang kita tulis, sehingga akan memberikan kesan ekslusif dan menarik perhatian pembaca.

Biasanya drop cap ini sering kita temukan di media daring virtual. Selain itu drop cap juga sering digunakan di media cetak seperti koran, majalah, buku dan novel. Yang jelas drop cap ini nggak ada di aplikasi “foto editor” , apalagi “Tik Tok” 😄

Platform blog sendiri, tidak menyediakan fitur seperti drop cap. Kita harus menambahkan sedikit kode script CSS di dalam template blog-nya.

Kalau sobat tertarik mau mencobanya, baca dan simak artikel ini dengan benar yah! Cara ini bisa dicoba untuk menambah kreasi di blog sebagai daya tarik visual agar tidak membosankan gitu.

So, sudah jago main kode–kodean? Sekarang mari kita oprek-oprek template blog-nya.

OK then, let's get started.. :)

Bagaimana cara membuat huruf besar (drop cap) di awal postingan Blog??

Cara membuat huruf besar (drop cap) di awal postingan Blog sangatlah mudah. Silahkan ikuti dua langkah yang ada di bawah ini.

Langkah Pertama :

Meletakkan kode script CSS di dalam mode edit HTML pada template blog.

Caranya :

1. Masuk ke Dashboard

2. Pada menu sisi kiri, Pilih "Template"

3. Klik "Edit Template"

4. Cari kode ]]></b:skin> (Gunakan CTRL+F untuk memudahkan pencarian kode tersebut)

5. Copy kode script di bawah ini, dan Paste -kan tepat di atas kode ]]></b:skin> tadi.

Jika sobat ingin mengedit, berikut ini adalah keterangan dari kode script di atas :

float : posisi drop cap di dalam kalimat
font-family : jenis font yang akan digunakan, sobat cukup memasukan nama fontnya.
font-size : ukuran font dropcap (jangan hapus "px")
line-height : ketinggian garis font. bisa dikatakan tinggi font (jangan hapus "px")
margin : 5px 5px 0px 0px; - Posisi font. diawali jarak dari atas, lalu kanan, terus bawah dan kiri.
text-shadow : 2px 2px 2px red ; Bayangan 2 pixel ke kanan, 2 pixel ke bawah, blur 2 pixel dan warnanya merah.

6. Silahkan “SAVE” template blog. Sampai di sini kita sudah selesai langkah pertama.

Langkah Kedua :

Ini penting! Untuk menerapkan drop cap itu sendiri pada postingan atau artikel di dalam mode Edit HTML. Kita harus meletakkan kode ini diantara huruf pertama dalam artikel atau postingan. Formatnya :

<span class="ricosihaloho"> Huruf awal </span>

Caranya :

1. Buat Posting/New Entry

2. Tulis konten seperti biasa sampai selesai

3. Ganti mode penulisan dari “Compose” menjadi “HTML”

4. Cari huruf awal paragraf pertama yang akan kita buat drop cap, dan gunakan formatnya.

<span class="ricosihaloho"> Huruf awal </span>

ganti menjadi seperti ini

Untuk lebih jelasnya sobat bisa melihat contoh di bawah ini :

<span class="ricosihaloho">C</span>ara mempercantik tampilan blog. Salah satunya dengan cara membuat huruf besar (drop cap) di postingan blog atau website.. dst.

Dalam contoh di atas, berarti huruf yang akan di - drop cap yaitu huruf ‘C’.

Maka, lihat hasilnya! *Jrenjenjreng..

Cara mempercantik tampilan blog. Salah satunya dengan cara membuat huruf besar (drop cap) di awal postingan blog/website. Sehingga artikel akan tampil lebih responsive dan lebik menarik perhatian pembaca.

Kira–kira seperti itu cara membuat huruf besar (drop cap) di postingan blog/website.

Gimana sob, sangat mudah bukan? Silahkan sobat berkreasi sendiri dengan proferti di tag CSS-nya. Selamat mencoba!

Sekian pembahasan tentang cara membuat huruf besar (drop cap) di postingan blog/website. Kalau ada yang kurang paham, silahkan sobat bertanya di kolom komentar di bawah ini. Terima kasih

See you on top.. :)

Nite & GBU more. Bye..!!

Minggu, 05 Juli 2020 Tutorial

Cara Membuat Galeri Foto Scroll di Blog/Website

Ngopi sadayana! 😎

Sebelumnya saya sudah posting “Cara Membuat Galeri Foto dengan Style Grid”. Sekarang saya akan berbagi bagaimana cara membuat galeri foto dengan fitur scroll di Blog/website. Tips–nya hampir sama, namun dengan tampilan yang berbeda.

Jadi ya! Menulis di blog itu tidak sebatas menulis, apalagi hanya copy paste. Kadang pemilik blog juga perlu berkreasi untuk optimasi pada website. Seperti halnya membuat galeri foto scroll di Blog.

Meskipun konten artikel kita biasa-biasa saja, namun jika kita sajikan dengan memperhatikan tampilan publikasinya. Misalnya dengan cara membuat galeri foto scroll di Blog. Setidaknya halaman postingan akan terlihat tertata rapi dan simple.

Anyway.. penataan foto atau gambar di artikel blog memang merupakan salah satu poin penting. Itu sudah pasti karena gambar dapat menjelaskan topik yang ada dalam artikel.

Namun seperti yang sudah dibahas di posting sebelumnya, jika kita meng–upload foto lewat fitur “insert image” bawaan theme platform blog. Maka penataan gambar tampak masih sangat sederhana, yang mana gambar akan tampil satu per satu tiap bidangnya. Gambarnya ikut–ikutan social distancing deng!

Terlebih lagi apabila gambar yang di–upload banyak. Nggak resep rasanya kalau melihat tampilan blog seperti itu, yang gambarnya “kaku” kyak tentara Kor-Ut. 😁

Selain merepotkan pengunjung, hal ini tentu saja membuat area postingan jadi banyak yang terbuang. Terdapat ruang kosong yang sebenarnya bisa kita optimalkan untuk informasi lainnya.

And you know that.. kasus seperti itu masih kerap saya temukan ketika sedang melakukan tour blog walking.

Tapi jika blog sobat termasuk seperti yang barusan saya nyinyirin, jangan langsung prustasi. Masih banyak jalan menuju Roma. Yepz! Masih ada tips bagaimana cara agar bisa upload foto dengan jumlah banyak sekaligus namun blog tetap terlihat unik dan ketjehh.

Masalah tersebut bisa diatasi dengan cara menggunakan kode script HTML fitur scrolling yang biasa dipakai untuk “Membuat Kotak Scroll di Blog”. Sehingga foto di dalam kotak bisa di–scroll vertikal dan horizontal (bisa diatur).

Contoh, di sini saya membuat galeri foto scroll vertikal dengan mengisi beberapa capture “Destinasi Wisata Danau Toba”.

*Silahkan scroll gambar naik turun (Atas – Bawah)

Destinasi Wisata Danau Toba

Welcome to Lake Toba

Parapat

Danau Toba Cottage

Simarjarunjung

Geosite Sipinsur

Pusuk Buhit

Paropo

Siadtaratas - Dairi

Bukit Holbung

Menara Pandang Tele - Samosir

Air Terjun Efrata

Sungai Situmurun (Binanga LOM)

Binanga LOM

Air terjun Situmurun

Bukit Gajah Bobok

Tutorial cara membuat galeri foto scroll di blog/website ini, recommended bagi sobat yang menjadikan situsnya sebagai tempat untuk membagi hasil karya gambar berupa kumpulan foto. Seperti foto dokumentasi acara seremonial, kuliner, fashion atau travelling.

Kumpulan foto tersebut dapat dijadikan untuk menarik perhatian pengunjung. Nilai-nilai estetika pada gambar tersebut tentu saja akan memberikan nilai lebih kepada pemilik blog.

Dengan cara membuat galeri foto scroll di Blog, kita bisa memilih dan menggabungkan beberapa gambar yang berhubungan di dalam satu tempat/kotak. Sehingga lebih menarik untuk dipandang.

Contoh lain, di sini saya membuat galeri foto scroll horizontal dengan mengisi beberapa gambar “Masakan Favorit Khas Batak Toba”

*Silahkan scroll gambar ke samping (Kiri – Kanan)

Keunikan membuat galeri foto scroll di Blog yaitu artikel akan lebih simple dan berisi (tidak boros area postingan), tidak membosankan, tentu saja Blog akan tampil beda.

Kita juga bisa lebih leluasa menulis konten tanpa terganggu dengan foto-foto di artikel blog, maka akan membuat para pengunjung blog kita ikut lebih meresapi dan bisa mem-visualisasikan perjalanan saat travelling dan suasana tempat yang kita kunjungi.

So, seandainya sobat kurang tertarik dengan galeri foto dengan style grid. Mungkin sobat bisa mencoba cara membuat galeri foto scroll di Blog/website.

OK then, let's get started.. :)

Bagaimana cara membuat galeri foto dengan fitur scroll di Blog/Website?

Berikut ini cara membuat galeri foto dengan fitur scroll di Blog. Silahkan ikuti step by step –nya :

1. Masuk ke Dashboard

2. Buat Posting/New Entry

3. Ganti mode penulisan dari “Compose” menjadi “HTML”

4. Copy script code di bawah ini, dan Paste -kan di laman kerja sobat (masih di mode HTML lho)

Script code –nya :

<div style="text-align: center;">
<a href="Link Anda" target="_blank">
<span style="font-size: x-small;"> My Galery </span></a>
</div>
<br /><div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: #1780dd; border: 5px solid gold; height: 150px; overflow: auto; padding: 10px; text-align: center; width: auto;"> Upload gambar anda di sini..! </div></div>

Keterangan script code di atas :

background-color : warna kotak galeri, silahkan diganti dengan warna kesukaan sobat (boleh pakai nama warna, kode warna/ hexadesimal, atau RGB / red-green-blue)
height : tinggi kotak galeri (bisa diatur)
width : lebar kotak galeri (bisa diatur), upayakan jangan melebihi lebar area konten
border : garis border kotak galeri (warna dan ketebalan bisa diatur).

Dan kalau sudah di terapkan kode script –nya pada mode HTML, Selanjutnya...!

5. Kembali ganti mode penulisan dari “HTML” menjadi "Compose", maka dari kode script yang telah terpasang tadi, akan tampil kotak galeri foto scroll kurang lebih hasilnya seperti ini :

My Galery

Upload gambar anda di sini..!

6. Edit tulisan “Upload gambar anda di sini..!”, ganti dengan meng-upload beberapa foto sobat yang mau dimasukan dalam kotak galeri (pastikan sobat meng–upload foto di dalam kotak).

Sampai disini selesai dalam pembuatan galery foto scrolling. Sebelum di publish, silahkan klik “Pratinjau”. Kalau hasilnya sudah sesuai dengan keinginan sobat. Silahkan dipublikasikan. DONE

Saya yakin caranya mudah dan pasti berhasil dalam membuat galeri foto dengan fitur scroll di blog/website. Selamat mencoba!

Demikian pembahasan mengenai cara membuat galeri foto dengan fitur scroll di Blog/Website. Semoga bermanfaat bagi sobat khususnya newbie. Terima kasih

See you on top.. :)

Nite & GBU more. Bye..!!

Rico Sihaloho

Perbedaan Sitemap XML dan HTML

Apa perbedaan SiteMap XML dan HTML?

Cara Submit SiteMap ke Google Webmaster

Apa itu SiteMap XML?

Bagaimana cara submit SiteMap ke Google Webmaster?

Cara Membuat SiteMap Otomatis di Blog/Website

Apa itu SiteMap?

Apa manfaat membuat SiteMap di Blog/Website?

Bagaimana cara membuat SiteMap otomatis di Blog/Website?

Cara Membuat Tombol Spoiler di Blog/Website

Apa itu Spoiler?

Apa fungsi Spoiler?

Bagaimana cara membuat tombol spoiler di blog/website?

Cara Membuat Huruf Besar (Drop Cap) di Awal Postingan Blog/Website

Apa itu Drop cap?

Bagaimana cara membuat huruf besar (drop cap) di awal postingan Blog??

Cara Membuat Galeri Foto Scroll di Blog/Website

Bagaimana cara membuat galeri foto dengan fitur scroll di Blog/Website?

========== PROFIL ==========

Home

Blog archive

Popular Posts

Cari Blog Ini

Latest Tweets