Cara membuat tombol DEMO dan DOWNLOAD stylish di blogger

Tombol ini berguna buat halaman blog yang ingin mendemokan hasil tutorial. Tombol ini juga termasuk sederhana dan walaupun demikian ia tampak cantik atraktif karena ia juga memiliki efek animasi. 

Namun hanya di buat dengan material svg dan dengan CSS.

Tentu saja tombol ini telah kami modifikasi. 

OK, Langsung cara pemasangan:

1. Masuk ke pengaturan blogger
2. Pilih Tema
3. Pilih Edit HTMl

Letakan kode CSS berikut di atas kode </head>:

<style>#btn-cakep {margin: 10px auto;

text-align: center;}

#btn-cakep br {display: none;}

.btn-cakep1, .btn-cakep2, .btn-cakep3 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 50px;background: #fff;border: 2px solid #FF00FF;margin: 10px;transition: .5s}

.btn-cakep2 {border: 2px solid #FF00FF;}

.btn-cakep3 {border: 2px solid #9900FF;}

.btn-cakep1:hover {background-color: #CC00FF;}

.btn-cakep2:hover {background-color: #3f51b5;}

.btn-cakep3:hover {background-color: #d83500;}

.btn-cakep1:hover span.circle, .btn-cakep2:hover span.circle2, .btn-cakep3:hover span.circle3 {left: 100%;margin-left: -45px;background-color: #fdfdfd;}

.btn-cakep1:hover span.circle{color: #009688;}

.btn-cakep2:hover span.circle2 {color: #3f51b5;}

.btn-cakep3:hover span.circle3 {color: #d83500;}

.btn-cakep1:hover span.title, .btn-cakep2:hover span.title2, .btn-cakep3:hover span.title3 {left: 40px;opacity: 0;}

.btn-cakep1:hover span.title-hover, .btn-cakep2:hover span.title-hover2, .btn-cakep3:hover span.title-hover3 {opacity: 1;left: 40px;}

.btn-cakep1 span.circle, .btn-cakep2 span.circle2, .btn-cakep3 span.circle3 {display: block;background-color: #009688;color: #fff;position: absolute;float: left;margin: 5px;line-height: 42px;height: 40px;width: 40px;top: 0;left: 0;transition: .5s;border-radius: 50%;}

.btn-cakep2 span.circle2 {background-color: #3f51b5;}

.btn-cakep3 span.circle3 {background-color: #d83500;}

.btn-cakep1 span.title,.btn-cakep1 span.title-hover, .btn-cakep2 span.title2,.btn-cakep2 span.title-hover2,.btn-cakep3 span.title3, .btn-cakep3 span.title-hover3 {position: absolute;left: 90px;text-align: center;margin: 0 auto;font-size: 16px;font-weight: bold;color: #009688;transition: .5s;}

.btn-cakep2 span.title2,.btn-cakep2 span.title-hover2 {color: #3f51b5;left: 80px;}

.btn-cakep3 span.title3,.btn-cakep3 span.title-hover3 {color: #d83500;left: 80px;}

.btn-cakep1 span.title-hover, .btn-cakep2 span.title-hover2, .btn-cakep3 span.title-hover3 {left: 80px;opacity: 0;}

.btn-cakep1 span.title-hover, .btn-cakep2 span.title-hover2, .btn-cakep3 span.title-hover3 {

color: #fff;

}

#isi{margin:10 10 12px;font-size:16px;}</style>

Save template.

Pemasangan kode HTML/XML berikut adalah pada saat kalian menuliskan postingan dengan konten DEMO jadi letakan kode berikut dan letakan di bawah gambar, konten atau apa saja yang
ingin di demokan. Meletakannya harus dalam opsi penulisan 'tampilan HTML', bukan 'tampilan Menulis', perhatikan gambar:

Tampilan menulis HTML ini memang beda dengan menulis normal (tampilan Menulis) selain harus cermat, HTML adalah mode penulisan koding yang tidak diperuntukan untuk orang awam. Karena kalian mau menampilkan tombol demo dan download, jadi abaikan dulu opsi 'tampilan Menulis', percayalah alah bisa karena biasa. Artinya kalian akan terbiasa...

Jadi berikut kodenya:

<div id="btn-cakep"><a class="btn-cakep2" href="Letakan Link atau URL Demo disini" target="_blank">
<span class="circle2"><svg style="height: 22px; width: 24px;" viewbox="0 0 24 16">
<path d="M23,11H18A1,1 0 0,0 17,12V21A1,1 0 0,0 18,22H23A1,1 0 0,0 24,21V12A1,1 0 0,0 23,11M23,20H18V13H23V20M20,2H2C0.89,2 0,2.89 0,4V16A2,2 0 0,0 2,18H9V20H7V22H15V20H13V18H15V16H2V4H20V9H22V4C22,2.89 21.1,2 20,2Z" fill="currentColor"></path></svg></span>
<span class="title2">DEMO</span>
<span class="title-hover2">Klik Sini</span>
</a>
<a class="btn-cakep3" href="Letakan Link atau URL konten disini" target="_blank">
<span class="circle3"><svg style="height: 22px; width: 24px;" viewbox="0 0 24 16">
<path d="M8 17V15H16V17H8M16 10L12 14L8 10H10.5V6H13.5V10H16M12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4Z" fill="currentColor">
</path></svg></span>
<span class="title3">UNDUH</span>
<span class="title-hover3">Klik sini</span>
</a>
</div>
<div class='isi'>

Perhatikan Tulisan warna merah silahkan diganti dengan link atau URL sesuai kebutuhan dan hajat kalian sendiri.

Jika sudah selesai SAVE. 

Lihat DEMO DISINI

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

SHARE YA:

Download tema mobile editblogtema cool white

Varian terbaru template editblog adalah template HTML klasik simpel, dengan tampilan dan material bersih. Update yang unik pada varian template putih ini adalah:

1. dominasi dasar warna putih
2. tombol hamburger menu yang benar benar unik menggunakan ikon kue hamburger, LaughOeverLaugh!
3. Memperbaiki nilai h1 yang tadinya 4.5 karena penggantian Judul blog menjadi image menjadi 9.3

Namun yang penting memiliki semua fitur dari serial template varian lainnya (lime, dark, hotpink) .

DEMO

DOWNLOAD

Jadi kalau soal desain memang harus kreatif ya..sekalipun template yang kita pergunakan adalah default (bawaan) jika di kustomisasi maka bukan hanya tampilannya bahkan performanya juga akan meningkat...

Tampilan untuk keseluruhan perangkat dengan ukuran yang berbeda beda:

Jadi jangan kuatir dengan tampilan pada saat di buka melalui PC desktop, laptop dan tablet.

Untuk petunjuk penggunaan ikuti Link berikut:

DOWNLOAD TEMPLATE MOBILE

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

SHARE YA:

Download 3 varian serial template mobile editblog, keren!

Sebagai Alternatif kurangnya variasi template bawaan blogger terutama yang klasik HTML mobile, kami memberikan kesempatan dan opsi mendownload templaste alternatif yang telah kami 'anyam' untuk di pergunakan dengan bebas.

Template template ini di buat berdasarkan desain mobile maklum kita blogging dan edit HTML hanya menggunakan hape dan tablet Android, namun walau demikian di jamin 100% tetap enak untuk tampilan PC desktop dan laptop.

Eh, sebabnya mobile diutamakan karena mengikuti trend terbaru bahwa Google di tahun 2021 yang akan fokus mengindeks halaman mobile dan halaman desktop akan segera di tinggalkan.

Template ini memiliki 3 varian yang di bedakan dari warna warninya. Baiklah kita mulai dari yang Girly.

1. theme_9editblog_hotpink

Template ini memiliki tampilan indah dan memiliki kehangatan sentuhan lembut. Fiturnya sama dengan template yang sedang kami pakai sekarang. Silahkan lihat Demo dan jika sudah pas, silahkan download pada tombol yang telah saya sediakan

DEMO

DOWNLOAD

Namun jangan kuatir, tampilannya di segala ukuran layar tetap indah kok. Terutama untuk tampilan PC laptop, desktop dan tablet.

2. theme_9editblog_lime

Template ini memiliki tampilan warna lime, ringan namun berkesan dalam. Fiturnya sama dengan template yang hotpink. Silahkan lihat Demo dan jika sudah pas, silahkan download pada tombol yang telah saya sediakan.

DEMO

DOWNLOAD

Namun jangan kuatir, tampilannya di segala ukuran layar tetap indah kok. Terutama untuk tampilan PC laptop, desktop dan tablet.

3. theme_9editblog_dark

Template ini memiliki tampilan serius, elegan dan konsisten. Fiturnya sama dengan template yang lime. Silahkan lihat Demo dan jika sudah pas, silahkan download pada tombol yang telah saya sediakan.

DEMO

DOWNLOAD

Namun jangan kuatir, tampilannya di segala ukuran layar tetap indah kok. Terutama untuk tampilan PC laptop, desktop dan tablet.

Demikian 3 varian dari template editblogtema 'the theme_9editblog_series'. Silahkan di pergunakan dengan sebaik baiknya. Adapun petunjuk penggunaan telah kami sajikan pada postingan sebelumnya.

Baca petunjuknya di:  DOWNLOAD TEMPLATE MOBILE EDITBLOGTEMA

Apa fitur fiturnya?

• Font Style: IM Fell English
• Navigation : Double navigation both sidenav and topnav. Topnav navigation is sliding.
• Breadcrumb: double Jason-LD, schema.org.
• Related posts: original editblogtema relatedposts.
• Sitelink: YA.
• Read more: auto.
• Style: 'Iregular chaos' (trend 2020-2021)
• Share Button: Ya.
• Page Pager: Ya.
• High resolution image: Ya.
• X-Frame: Ya.
• Photo profile penulis di atas setiap postingan.
• Back to top: Ya

Mohon maaf jika penamaannya agak ribet, akan tetapi hal itu sangat berguna bagi kami dalam melakukan penyimpanan sekaligus mencocokan nama dengan kode kode tertentu di dalam template. Yang penting halaman jadi keren.

Semoga bermanfaat bagi yang membutuhkannya.

Salam Admin.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

SHARE YA:

Download template mobile editblogtema Lime style

DEMO

DOWNLOAD

Hai teman teman blogger!

Hari ini saya kembali ingin berbagi varian terbaru template editblogtema yang saya sebut sebagai LimeTheme. Template ini di buat berdasarkan desain mobile maklum kita blogging dan edit HTML hanya menggunakan hape dan tablet Android, namun walau demikian di jamin 100% tetap enak untuk tampilan PC desktop dan laptop.

Eh, sebabnya mobile diutamakan karena mengikuti trend terbaru bahwa Google akan fokus mengindeks halaman mobile dan halaman desktop akan segera di tinggalkan.

Basis template ini sama saja: EdiTemplate fast loading, tetap tidak di buat dengan pengaturan otomatis, jika kalian ingin melakukan pengaturan pada bagian navigasi menunya maka kalian harus masuk ke mode edit HTML, letaknya di dalam template adalah di bagian bawah tag penutup </header>.

Cara mencarinya:

• Masuk kepengaturan blogger
• Pilih tema
• Pilih Edit html
• Seperti berikut:

Theme preview is currently unavailable.

My theme

custom (Modified)

CUSTOMISE

Klik mata panah menghadap ke bawah di kanan 'CUSTOMISE' lalu pilih edit HTML.

Pada bawah kode </header> cari daftar kode berikut:

<a href='#' title='Link1'>1. Link1</a>

    <a href='#' title='Link2'>2. Link2</a>

<a href='#' title='Link3'>3. Link3</a>

  <a href='#' title='Link4'>4. Link4</a>

<a href='#' title='Link5'>5. Link5</a>

Ganti setiap tanda pagar (#) dengan alamat url terkait judul menu dan ganti Link1,2,3..dst menjadi judul menu.

Contoh:

<a href='www.editblogtema.com/...' title='perihal kami'>1. Perihal kami</a>

Tampilan template di semua perangkat

Spesifications (will up to date silencely by author):

• Font Style: IM Fell English
• Navigation : Double navigation both sidenav and topnav. Topnav navigation is sliding.
• Breadcrumb: double Jason-LD, schema.org.
• Related posts: original editblogtema relatedposts.
• Sitelink: YA.
• Read more: auto.
• Style: 'Iregular chaos' (trend 2020-2021)
• Share Button: Ya.
• Page Pager: Ya.
• High resolution image: Ya.
• X-Frame: Ya.

Pembaharuan terbaru:

• Back to top sederhana dan ringan
• Header style yang dapat di rombak menjadi wave style dengan teknik background SVG.

Peringatan. Tolong dibaca panduannya ya....

Catatan dan Panduan:

• Menulis Judul postingan lebih baik menggunakan huruf kecil pada template editblogtema ini, karena tampilannya sudah otomatis akan menjadi huruf besar (Capital Letter). Penulisan dengan huruf besar (Capital Letter) akan mendorong sidebar menjadi menyempit.
• Jangan terlalu banyak menyelipkan tag, karena tag kepanjangan tidak baik untuk SEO dan bisa dianggap spam.
• Pengaturan ukuran gambar postingan adalah X-large, hindarkan 'Original Size' karena akan memberikan efek yang sama.
• Template akan kami update secara diam diam, Anda dapat memeriksa artikel ini dalam periode tertentu karena link downloadnya akan kami ganti dengan link template update terbaru sesuai kode: Contoh:theme-5blogger.xml, theme-6blogger.xml, theme-7blogger.xml, DST. Semakin tinggi angkanya berarti semakin mutakhir templatenya.

Template fast loading editblogtema adalah template yang bagus, ringan dan cepat jika dipergunakan dengan tepat. Misalnya pemasangan konten gambar dengan format dan ukuran yang tepat, membatasi jumlah widget pada halaman blog dst.

Anda tidak menyukai warna topnav dan warna sidenav? Lalukan langkah berikut:

a. Merubah warna sidenav:

Di dalam halaman editor HTML cari kode CSS berikut: (tuliskan .sidenav ke dalam kotak pencarian dengan cara menekan tombol CTRL+F)

.sidenav {

  height: 100%;

  width: 0;

  position: fixed;

  z-index: 1;

  top: 0;

  left: 0;

  background-color:#330000;

Dan ganti kode warna merah (kode warna CSS) Cari kode warnanya dengan cara mengklik 'kode warna' pada topnav editblog bagian atas navigasi halaman blog ini.

Contoh jika mengingikan warna hijau ganti #330000; dengan #339900; dst

b. Merobah warna topnav:

Di dalam halaman editor HTML cari kode CSS berikut: (tuliskan .menu{position ke dalam kotak pencarian dengan cara menekan tombol CTRL+F)

Kodenya sedikit panjang karena melibatkan kode warna gradient infinity tapi jangan kuatir saya tandai dengan warna merah:

.Menu{position:sticky;position:-webkit-sticky;top:0;z-index:2;background: linear-gradient(-50deg, #660099, #330000, #330000, #660099);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 11s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}};font:$(Unifraktur Maguntia);font-size:17px;color:#fff;text-transform:uppercase}

Anda dapat mengganti seluruh kode warna berwarna merah di atas dengan bermacam macam campuran kode warna sehingga menampilkan warna warni pelangi yang indah!

c. Pengaturan CSS untuk merobah ukuran LOGO pada tampilan mobile

Mungkin sebagian Anda tidak suka dengan ukuran LOGO header yang sangat kecil pada tampilan mobile (hape) pada saat merubah Judul blog dengan image. Maka cari kode CSS berikut:

#header .description{display:block;font-size:11px;margin-bottom: -20px;}

#header img{max-height:10px;max-width:100px;vertical-align:middle}

.Menu{font-size:10px}

#header{width:100%;margin-right:0;margin-bottom:-10px;text-align:center}

Silahkan robah nilai warna merah dengan 100 dan nilai warna biru dengan 1000 (artinya 10 kali lipat) atau copy saja kode di atas dan letakan di atas kode </style> atau di atas kode ]]></b:skin> (disebut juga dengan trik overrade atau over write?) SAVE template.

d. Mengganti Judul dengan gambar.

• Masuk ke pegaturan blogger 
• Pilih tataletak
• Klik widget Header pada bagian ikon pencil

Maka akan muncul pengaturan berikut:

Dari komputer Anda: Dari web. Tempelkan URL gambar di bawah. Penempatan Di balik judul dan keterangan Selain judul dan keterangan Tempatkan keterangan setelah gambar Susutkan agar sesuai Gambar akan disusutkan selebar 484 piksel.

• Centang tempatkan keterangan setelah gambar
• Centang Susutkan agar seusai
• Kemudian klik 'Choose File' atau 'Pilih File yang akan mengarahkan kita menuju sekumpulan folder di dalam perangkat kita termasuk folder gambar.

e. Cara membuat Gambar Judul Blog yang keren

Pada halaman  CoolTex Kita bisa mendapatkan banyak contoh tulisan dalam bentuk gambar png yang di olah secara otomatis dan dapat di download gratis untuk di pergunakan sebagai pengganti Judul halaman blog yang berbentuk text.

Pilih salah satu model gaya tulisan yang diinginkan dengan mengkilik salah satu tulisan format png di bawah ini:

Choose a Text Style

Most Popular - By Name

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Untuk mendapatkan lebih banyak opsi pilihan kita dapat mengklik salah satu kategori di bawah ini:

Generator Categories

Most Popular Animated Black Blue Brown Burning Button Casual Chrome Distressed Elegant Embossed Fire Fun Girly Glossy Glowing Gold Gradient Gray Green Heavy Holiday Ice Medieval Orange Outline Pink Plain Purple Red Rounded Science-Fiction Script Shadow Shiny Small Space Sparkle Stencil Stone Trippy Valentines White Yellow

Contoh saya klik 'Skate' maka akan tampil halaman berikut:

Skate Text Generator Text Logo Shadow Image Composite Logo Text Add Symbol Font Capture It Details and Download - Cpr.Sparhelt - Stencil Text Size

Di kolom Logo Text tuliskan nama atau judul halaman Blog Anda. lalu tekan atau klik 'Create LOGO'. 

Maka akan muncul bentuk judul:

Skate Text Generator

• Text
• Logo
• Shadow
• Image
• Composite

Logo Text Add Symbol
Font	Capture It Details and Download - Cpr.Sparhelt - Stencil
Text Size

Biarkan ukurannya (Text Size) tetap 70 dan pada menu (text, logo, shadow, image dan Composite) dapat kita pilih untuk mendownload loto yang telah kita buat . Simpan ke dalam folder yang telah kita beri nama di dalam laptop atau perangkat hape Android Anda.

Pilihan image di atas sangat banyak dan dapat di edit sesuka kita. Situs ini gratis 100%

Selamat mencoba template Lime Style dari kami.

Kode template : theme_9editblog

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

SHARE YA: