Koleksi beraneka gaya css siap pakai

DAFTAR ISIBUKATUTUP

Cara membuat slideshow / carousel (4 model)

Sudah sejak lama saya ingin menerapkan Slideshow ini ke blog tapi entah kenapa malas banget rasanya.

Di Blogger, slideshow ini dapat diterapkan ke Related Posts ataupun ke Popular Posts (untuk yang ingin mendapatkan tampilan berbeda dari keumumannya tentunya), saya sendiri terpikir untuk mengisinya dengan berbagai list video tapi saya urungkan karena ya itu tadi penyakit 5 huruf M.A.L.A.S, hihi.

Tapi kodenya tetap saya simpan dan koleksi dulu di post ini siapa tau suatu saat R.A.J.I.N jadi tinggal pasang saja.

Slideshow atau Carousel memiliki beberapa model/tipe.

1. Manual, yang jika ikon panahnya di tap akan bergeser manual kekanan dan balik lagi kekiri jika sudah mencapai batas.

Cara Membuat Slideshow / Carousel (4 Model)

2. Otomatis, yang akan bergeser otomatis dengan sendirinya memperlihatkan menu-menu yang ada.

3. Multiple, dua buah slideshow manual.

4. Lightbox (Modal Image Gallery), ini model seperti tampilan gallery di ponsel, cocoknya untuk dipasang di situs fotografi atau fotografer yang hobi berbagi foto hasil jepretannya.

Umumnya web biasanya cenderung memilih nomor 2 yaitu slideshow otomatis. Sebetulnya tidak hanya bisa dipasang di web seperti blog saja tapi juga pada pembuatan aplikasi smartphone.

Tapi kode yang saya simpan disini hanya model manual dan otomatis saja, bagi agan yang menginginkan model lainnya silakan ambil disitus resminya https://www.w3schools.com/howto/howto_js_slideshow.asp

Baiklah, berikut ini kode manual dan otomatis slideshow. Kode masih perawan sama persis dengan di web resminya. Kode terdiri dari Css, Html dan Javascript. Silakan sesuaikan, silakan ganti url gambarnya dengan yang aktif, dll.

Manual Slideshow

<style>

* {box-sizing: border-box}

body {font-family: Verdana, sans-serif; margin:0}

.mySlides {display: none}

img {vertical-align: middle;}

/* Slideshow container */

.slideshow-container {

max-width: 1000px;

position: relative;

margin: auto;

}

/* Next & previous buttons */

.prev, .next {

cursor: pointer;

position: absolute;

top: 50%;

width: auto;

padding: 16px;

margin-top: -22px;

color: white;

font-weight: bold;

font-size: 18px;

transition: 0.6s ease;

border-radius: 0 3px 3px 0;

user-select: none;

}

/* Position the "next button" to the right */

.next {

right: 0;

border-radius: 3px 0 0 3px;

}

/* On hover, add a black background color with a little bit see-through */

.prev:hover, .next:hover {

background-color: rgba(0,0,0,0.8);

}

/* Caption text */

.text {

color: #f2f2f2;

font-size: 15px;

padding: 8px 12px;

position: absolute;

bottom: 8px;

width: 100%;

text-align: center;

}

/* Number text (1/3 etc) */

.numbertext {

color: #f2f2f2;

font-size: 12px;

padding: 8px 12px;

position: absolute;

top: 0;

}

/* The dots/bullets/indicators */

.dot {

cursor: pointer;

height: 15px;

width: 15px;

margin: 0 2px;

background-color: #bbb;

border-radius: 50%;

display: inline-block;

transition: background-color 0.6s ease;

}

.active, .dot:hover {

background-color: #717171;

}

/* Fading animation */

.fade {

-webkit-animation-name: fade;

-webkit-animation-duration: 1.5s;

animation-name: fade;

animation-duration: 1.5s;

}

@-webkit-keyframes fade {

from {opacity: .4}

to {opacity: 1}

}

@keyframes fade {

from {opacity: .4}

to {opacity: 1}

}

/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {

.prev, .next,.text {font-size: 11px}

}

</style>

<div class="text">Caption Text</div>

</div>

<div class="text">Caption Two</div>

</div>

<div class="text">Caption Three</div>

</div>

</div>

<br>

</div>

var slideIndex = 1;

showSlides(slideIndex);

function plusSlides(n) {

showSlides(slideIndex += n);

}

function currentSlide(n) {

showSlides(slideIndex = n);

}

function showSlides(n) {

var i;

var slides = document.getElementsByClassName("mySlides");

var dots = document.getElementsByClassName("dot");

if (n > slides.length) {slideIndex = 1}

if (n < 1) {slideIndex = slides.length}

for (i = 0; i < slides.length; i++) {

slides[i].style.display = "none";

}

for (i = 0; i < dots.length; i++) {

dots[i].className = dots[i].className.replace(" active", "");

}

slides[slideIndex-1].style.display = "block";

dots[slideIndex-1].className += " active";

}

</script>

Automatic Slideshow

<style>

* {box-sizing: border-box;}

body {font-family: Verdana, sans-serif;}

.mySlides {display: none;}

img {vertical-align: middle;}

/* Slideshow container */

.slideshow-container {

max-width: 1000px;

position: relative;

margin: auto;

}

/* Caption text */

.text {

color: #f2f2f2;

font-size: 15px;

padding: 8px 12px;

position: absolute;

bottom: 8px;

width: 100%;

text-align: center;

}

/* Number text (1/3 etc) */

.numbertext {

color: #f2f2f2;

font-size: 12px;

padding: 8px 12px;

position: absolute;

top: 0;

}

/* The dots/bullets/indicators */

.dot {

height: 15px;

width: 15px;

margin: 0 2px;

background-color: #bbb;

border-radius: 50%;

display: inline-block;

transition: background-color 0.6s ease;

}

.active {

background-color: #717171;

}

/* Fading animation */

.fade {

-webkit-animation-name: fade;

-webkit-animation-duration: 1.5s;

animation-name: fade;

animation-duration: 1.5s;

}

@-webkit-keyframes fade {

from {opacity: .4}

to {opacity: 1}

}

@keyframes fade {

from {opacity: .4}

to {opacity: 1}

}

/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {

.text {font-size: 11px}

}

</style>

<div class="text">Caption Text</div>

</div>

<div class="text">Caption Two</div>

</div>

<div class="text">Caption Three</div>

</div>

<br>

</div>

var slideIndex = 0;

showSlides();

function showSlides() {

var i;

var slides = document.getElementsByClassName("mySlides");

var dots = document.getElementsByClassName("dot");

for (i = 0; i < slides.length; i++) {

slides[i].style.display = "none";

}

slideIndex++;

if (slideIndex > slides.length) {slideIndex = 1}

for (i = 0; i < dots.length; i++) {

dots[i].className = dots[i].className.replace(" active", "");

}

slides[slideIndex-1].style.display = "block";

dots[slideIndex-1].className += " active";

setTimeout(showSlides, 2000); // Change image every 2 seconds

}

</script>

Cara membuat animasi gelombang dengan kode SVG dan CSS

Beberapa tahun lalu saya merasa takjub melihat Template buatan Master disana karena terdapat style gelombang pada bagian header template buatan dia.

"Keren, bagaimana cara dia membuatnya?" Pikir saya.

"Ah masa bodo lah, nanti juga ada yang share caranya!" Ucap saya dalam hati.

Wkwk sudah seperti Cerpen aja ya guys ada dialognya, hehe.

Dan benar saja, tak lama kemudian Sofyan berbagi kode serupa seperti yang dibuat Master tersebut.

Ya intinya, cukup pasang kode SVG dan CSS berikut ini maka jadilah style Animasi Bergelombang.

Kode ini aslinya sudah terkombinasikan dengan header tapi saya pisahkan dan mengambil bagian kode animasinya saja.

Meskipun belum mencobanya tapi saya rasa kode ini dapat dipasang dimana saja. Dari sebelumnya menyatu dengan header, dengan memisahnya begini saya beranggapan mungkin pemasangannya akan lebih mudah alias tidak mempengaruhi kode lain dimana ia disandingkan nantinya. Ingin dipasang di header misalnya, maka pasang saja kode ini dibawah header maka headernya akan bergelombang, tapi tentu saja ini masih teori soalnya saya belum mencobanya.

Namun buat agan yang menginginkan kode aslinya silakan ambil di blog Sofyan DISINI

Kode CSS:

<style>

.gelombang {

color: white;

text-align: center;

background: linear-gradient(60deg, #186857 0%, #25a186 100%);

}

.waves {

position: relative;

width: 100%;

height: 5vh;

margin-bottom: -7px; /*Fix for safari gap*/

min-height: 150px; /*Tinggi ombak*/

max-height: 150px;

}

/* Animasinya */

.parallax > use {

animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;

}

.parallax > use:nth-child(1) {

animation-delay: -2s;

animation-duration: 7s;

}

.parallax > use:nth-child(2) {

animation-delay: -3s;

animation-duration: 10s;

}

.parallax > use:nth-child(3) {

animation-delay: -4s;

animation-duration: 13s;

}

.parallax > use:nth-child(4) {

animation-delay: -5s;

animation-duration: 20s;

}

@keyframes move-forever {

0% {

transform: translate3d(-90px,0,0);

}

100% {

transform: translate3d(85px,0,0);

}

}

</style>

Kode SVG:

<div class="gelombang">

<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">

<defs>

<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />

</defs>

<g class="parallax">

<use xlink:href="#gentle-wave" x="48" y="0" fill="#ff0000" />

<use xlink:href="#gentle-wave" x="48" y="3" fill="#0000ff" />

<use xlink:href="#gentle-wave" x="48" y="5" fill="#25a186" />

<use xlink:href="#gentle-wave" x="48" y="7" fill="#186857" />

</g>

</svg>

</div>

Hasilnya:

Warna ombaknya dapat diubah sesuai selera pada kode SVG bagian fill.

Bisa dengan kode warna HEX #ffffff atau gunakan kode warna RGB berurutan, ini kode warna putih rgb(255,255,255).

Dari RGB setelah ditambahi tingkat kecerahan 0.7 pada ujungnya maka akan menjadi RGBA, rgba(255,255,255, 0.7).

Tingkat kecerahan/transparancy paling gelap 0.1.

Gunakan kode warna berurutan untuk mendapatkan efek ombak yang halus.

rgba(255,255,255, 0.7)

rgba(255,255,255, 0.5)

rgba(255,255,255, 0.3)

Hasil menggunakan warna berurutan:

Tinggi gelombang 200 px Tinggi gelombang 30 px

Semoga bermanfaat!

Cara membuat style H3 bergaris tengah

Ada berbagai macam style heading terutama h3 title pada Template Blogger, mulai dari model kotak, dua warna, icon diujungnya dan yang bergaris tengah seperti yang akan saya bagikan ini. Model bergaris seperti ini bisa di bilang trend dikalangan Blogger tahun 2020 kemarin, termasuk disitus kompas juga menggunakan style model ini meskipun tahun 1945 juga mungkin sudah ada yang menggunakan ini, hehe.

Sekilas membuat style semacam ini lumayan mudah jika diterapkan pada situs pribadi tapi lain cerita jika dipasang di Template Blogger, percayalah lumayan rumit, bikin jadi keringat dingin, hehe.

Letak rumitnya karena Heading h3 pada Blogspot ibaratnya semacam sudah ditentukan tidak bisa ditambah atau dikurangi lagi kode HTMLnya namun memang harus ditambahi htmlnya agar style ini terwujud.

Secara default heading h3 pada setiap widget Blogger format htmlnya sebagai berikut.

<b:include name='widget-title'/>

Apanya yang mau di edit coba, Nah agar dapat ditambahi maka kodenya perlu dipecah/diurai atau membuat includable baru seperti berikut ini.

<b:includable id='widgetHeading'>

<b:include name='widget-title'/>

</div>

</b:includable>

Dari hasil pecahan/uraian diatas kita bisa mengapit 'widget-title' dengan element serta menyisipkan div class. Jadi kode diatas harus dimasukkan kedalam widget dan...

Kode defaulnya yang seperti berikut.

<b:include name='widget-title'/> diubah menjadi <b:include name='widgetHeading'/>

Namun yang 'widget-title' dalam 'widgetHeading' jangan diubah.

Dalam setiap widget kode seperti ini <b:include name='widget-title'/> hanya ada satu buah.

Karena kita menambahkan ini.

<b:includable id='widgetHeading'>

<b:include name='widget-title'/>

</div>

</b:includable>

Maka <b:include name='widget-title'/> menjadi dua buah yang satunya default/asli dan yang satunya yang sengaja kita tambahkan baru, Naaaaah.. yang satunya harus diubah menjadi <b:include name='widgetHeading'/>

Teks "widgetHeading" ini bisa diganti nama apapun, bebas.

***

Dalam kondisi tertentu tak jarang 'widget-title' menyatu dengan kode Sinppet. Ini lebih rumit lagi dan solusinya adalah.

Sebagai contoh berikut ini kode Titel yang menyatu dengan kode Snippet.

<b:with value='data:messages.popularPostsFromThisBlog' var='defaultTitle'>

<b:include name='super.main'/>

</b:with>

Agar tidak menyatu maka kode <b:include name='super.main'/> ubah saja menjadi <b:include name='snippetedPosts'/>

Cara diatas berlaku untuk semua widget, FeaturedPost, PopulerPosts, maupun yang lainnya.

***

Lupakan penjelasan diatas. Kesimpulannya adalah: Anggap saja kita ingin mengubah style heading FeaturedPost dengan style h3 bergaris tengah, jika anda mahir mengubah FeaturedPost ini maka anda juga akan mahir mengubah widget lainnya.

Yang perlu dilakukan hanyalah, pada default FeaturedPost bagian <b:include name='widget-title'/> ubah menjadi <b:include name='widgetHeading'/>

Lalu, tambahkan kode dibawah ini ke dalam widget FeaturedPost.

<b:includable id='widgetHeading'>

<b:include name='widget-title'/>

</div>

</b:includable>

Jika ingin selain FeaturedPost, misal ingin mengubah heading Related-posts maupun Comments, html headingnya juga harus diubah, hanya saja cara mengubahnya lebih mudah karena kodenya terbuka tidak terbungkus seperti FeaturedPost.

Contoh:

Pada <h3 class='title'>Comments</h3>.. misalnya.

Tinggal ubah saja menjadi.

<h3 class='title'>Commments</h3>

</div>

Selesai.

Selanjutnya pasang css berikut pada bagian skin dalam Template anda, khususnya Template Essensial, Contempo, maupun Notable.

.FeaturedPost .widget-heading h3.title, #comments. widget-heading h3.title, .Feed .widget-heading h3.title, .PopularPosts .widget-heading h3.title, .related-posts .widget-heading h3.title{

z-index:2;

background-color:$(posts.background.color);

display:inline-block;

font-size:$(posts.stream.title.font.size);

line-height:initial;

position:relative;

padding:0 15px 0 0

}

.FeaturedPost .widget-heading, #comments .widget-heading, .PopularPosts .widget-heading, .Feed .widget-heading, .related-posts .widget-heading {

z-index:1;

font:$(posts.stream.title.font);

font-size:$(posts.stream.title.font.size);

line-height:initial;

position:relative;

display:block

}

.FeaturedPost .widget-heading::before, #comments .widget-heading::before, .PopularPosts .widget-heading::before, .Feed .widget-heading::before, .related-posts .widget-heading::before{

content:'';

z-index:1;

position:absolute;

font-size:$(posts.stream.title.font.size);

line-height:initial;

top:0;

right:0;

bottom:$(posts.stream.title.font.size / 2);

left:0;

display:block;

border-bottom:1px solid $(posts.boxshadow.color)

}

Keterangan:

1. Ubah dan sesuaikan variabel nama warna background, border, font dengan Template anda.

2. Font-size harus sama tinggi dengan bottom.

3. Bottom harus setengah tinggi ukuran font atau font-size.

4. Font-size titel harus sama tinggi dengan widget-heading dan font. Ini penting mengingat kadang font-size tampilan desktop berbeda dengan mobile, jadi font-size harus ditentukan ukurannya.

5. Warna background titel harus sama dengan warna dimana dia diletakkan. Misal: background titel dari FeaturedPost harus sama dengan background di FeaturedPost.

Jika masih gagal juga alias garis tidak mau ketengah, kemungkinan ada kode css yang bertabrakan dalam Template anda yang mengendalikan heading h3.titel ini. Jika ada maka harus dihapus karena cukup kode css diatas saja yang bekerja. Atau ditentukan, misal yang mengganggu adalah heading dari h3.titel yang ada di Sidebar, maka ubah heading tersebut bekerja hanya untuk sidebar saja agar tidak mengganggu kode css diatas.

Jika berhasil pada tampilan mobile tapi pada tampilan desktop tidak, maka coba cara ini. Tambahkan css ini.

@media screen and (max-width:800px){

.widget.FeaturedPost .widget-heading{

margin:auto

}

.widget.FeaturedPost h3.title{

margin:auto

}

***

Jika tidak ingin repot mungkin bisa juga menggunakan gambar garis, cukup di float kekanan maka akan langsung jadi tanpa melakukan semua hal diatas. Misalnya.

.FeaturedPost h3.title{

display:block

}

.FeaturedPost h3.title::after{

content:'isi-dengan-url-gambar-garis';

float:right

}

<h3 class='title'>Commments</h3>

Selamat mencoba!

Cara membuat huruf jadi jungkir balik

Cara membuat teks jungkir balik dengan CSS, seperti yang digunakan Google pada gaya huruf E di judul situs mesin pencarinya, unik.

Keterangan singkat:
* Webkit transform rotasi untuk mengatur tingkat kemiringan atau memutar huruf hingga 150 derajat. Tanda plus (+50deg) miring kekanan dan tanda min (-30deg) miring kekiri.
* Left -1px untuk mengatur spasi antara satu huruf dengan huruf lainnya.

<style>
.koprol{
-webkit-transform:rotate(-30deg);
position:relative;
font-size:100px;
left:-1px;
display:inline-block
}
.salto{
-webkit-transform:rotate(+50deg);
position:relative;
font-size:200px;
right:-1px;
display:inline-block
}
</style>
<span style="display:block;text-align:center;">
<span class="koprol">J</span>
<span class="salto">A</span>
</span>

Contoh hasilnya:

J A

Cara membuat CSS menu geser kekiri kekanan (Horizontal scrolling)

Cara membuat style menu situs yang dapat di geser kekiri dan kekanan dengan menggunakan css. Langsung saja berikut ini contoh hasilnya. Pada tampilan desktop mungkin semua menu akan terlihat jadi tidak perlu digeser lagi sedangkan pada smartphone menu akan ditampilkan sebagian sehingga kita bisa menggesernya kekiri untuk melihat sebagian yang lain.

Silakan download kode style-nya: https://drive.google.com/file/d/1HHKPIq8HQXgMNu-qsyAJmZVhXZcJdMH9/view?usp=drivesdk

Contoh hasilnya dibawah ini:

Geser Menu1 Menu2 Menu3 Menu4 Menu5 Menu6

Semua

Cara membuat tabs menu tanpa JavaScript

Cara membuat Tabs Menu tanpa menggunakan JavaScript dan sebagai gantinya menggunakan CSS metode HTML Radio Checked. Berawal dari tertarik ingin memiliki style seperti ini di blog saya dan kebetulan ada scriptnya di salah satu template gratis yang saya koleksi, namun sayangnya itu menggunakan JS, jadi saya cari di Google cek satu2 baca posting orang ketemulah ini. Berikut ini contohnya.

<style>
.container-wrapper {
margin:0;
width: 100%;
position: relative;
overflow: hidden;
}
input.tab-menu-radio {
display: none;
}
label.tab-menu {
white-space: nowrap;
text-transform: uppercase;
display: inline-block;
float: left;
padding:10px 20px;
cursor: pointer;
z-index: 99;
}
.tab-content {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
word-break: break-word;
clear: both;
padding:20px;
background-color: #f7f7f7;
border-top:7px solid #333;
}
.tab-menu-radio:checked + label {
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s;
background-color: #333;
color: #fff;
}
.tab-content .tab {
height: 0;
opacity: 0;
}
#tab-menu1:checked ~ .tab-content .tab-1,
#tab-menu2:checked ~ .tab-content .tab-2,
#tab-menu3:checked ~ .tab-content .tab-3 {
-webkit-transition:opacity 1s;
-moz-transition:opacity 1s;
transition:opacity 1s;
height: auto;
opacity: 1;
}
</style>
<div class="container-wrapper">
<div class="tab-container">
<input type="radio" name="tab-menu" class="tab-menu-radio" id="tab-menu1" checked/>
<label for="tab-menu1" class="tab-menu">Downlad</label>
<input type="radio" name="tab-menu" class="tab-menu-radio" id="tab-menu2"/>
<label for="tab-menu2" class="tab-menu">Credit</label>
<input type="radio" name="tab-menu" class="tab-menu-radio" id="tab-menu3"/>
<label for="tab-menu3" class="tab-menu">Licence</label>
<div class="tab-content">
<div class="tab tab-1">
<div class="santuy">Content 1</div>
</div>
<div class="tab tab-2">
<div class="santuy">Content 2</div>
</div>
<div class="tab tab-3">
<div class="santuy">Content 3</div>
</div>
</div>
</div>
</div>

Contoh hasilnya:

Mohon maaf sebelumnya kalau linknya tidak aktif, silakan salin saja linknya ke browser, soalnya takut jadi brokenlink kalau diaktifkan.

https://drive.google.com/file/d/1J7FpHZu4rpPOhZGHoBn0SAfcGNngyfNH/view?usp=drivesdk

Author : Muhammad Syakirurohman
URL : http://www.syakirurohman.net
Source : http://www.syakirurohman.net/2015/02/tutorial-membuat-tab-menu-css.html

Lisensi :

Anda bebas menggunakan, memperbanyak, and membagikan bundle ini baik untuk dipakai, diedit ulang, belajar, pelengkap atau digunakan pada proyek komersial. Namun anda tidak berhak menjual bundle ini tanpa izin! Jika ingin re-share, harap sertakan file ini dan jangan dirubah..

Hargailah kerja keras orang lain. Terima kasih

Licence :

You are free to use, copy/duplicate, and share this bundle for usage, modifying, learning purpose, and complement of comercial project. But, you are not allowed to sell this template. If you want to re-share, please include this file and do not modified.

Respect Other people work. Thanks

Comments

Jingga Satria12 October, 2021

Waaduuuhhh Huu.... Ngelihat kodenyanya saja gue udah pusing Huu....😳😳🥴🥴

Mending lihat pinggul janda sebelah Huu..Pusing jadi hilang.🤣🤣🤣🤣🤣🤣🤣
Agus Warteg12 October, 2021
Kodenya ditaruhnya di bagian apa suhu, apakah di bagian head atau body atau bagian lain? 🤔