Posts

Showing posts with the label css

Percepat Loading Komentar dengan Memperkecil Avatar di Blogger/Blogspot

Image
Percepat Loading Komentar dengan Memperkecil Avatar di Blogger/Blogspot
Template.Id - Sobat salah satu penyebab beratnya loading blog adalah besarnya ukuran gambar / image pada komentar. Walaupun sobat memperkecil dengan CSS, tetap saja ukuran asli avatar adalah 512x512px. 

Untuk mencobanya, silahkan klik kanan pada avatar komentar yang ada di blog sobat, kemudian klik kanan pada buka gambar di tab baru. Sebagai contoh, avatar saya sebelum saya rubah ukurannya seperti gambar ini :

Pasang Tombol Social Media dengan Tooltip di Blogger/Blogspot

Image
Pasang Tombol Social Media dengan Tooltip di Blogger/Blogspot,  - Sobat blogger berikut ini saya share cara Pasang Tombol Social Media dengan Tooltip di Blogger/Blogspot terbaru. Nah sobat pasti sudah tau kan fungsi dari tombol social media, jadi dengan tombol ini kita bisa mengshare artikel kita ke media lain.

Cara Menandai Postingan Terbaru di Blog

Image
Cara Menandai Postingan Terbaru di Blog
sobat bloggers...cara ini adakah dengan menampilkan posting terbaru dengan sebuah tanda seperti ribbon. Nah untuk mencobanya silahkan ikuti langkah"-nya di bawah ini :

Masuk ke edit HTML lalu cari kode ]]></b:skin> atau </style>

lalu copy kode di bawah ini dan taruh di atas salah satu kode di atas.

.newer-post { margin: 50px auto; width: auto; height: auto; background-color: none; position: relative; } .newer-post2 { font: bold 20px Sans-Serif; text-align: center; transform: rotate(45deg); position: relative; padding: 7px 0; left: -25px; top: 7px; width: 160px; background-color: blue; color: #fff; box-shadow: 0px 0px 3px rgba(0,0,0,0.3); } .newer-post3 { width: 86px; height: 88px; overflow: hidden; position: absolute; top: -4px; right: -4px; }

berikutnya Anda cari kode ini ( masih di dalam edit template) ....<b:in…

Cara Membuat Pesan Komentar Di Bawah Editor Komentar Blogger

Image
Cara Membuat Pesan Komentar Di Bawah Editor Komentar Blogger,Anaktimor17 Blog - sobat blogger kembali saya bagikan tips untuk Anda . Pada kali ini saya mencoba share tips blogger yang saya dapat dari blognya Kompi Ajaib  dan tips dari +Kang Ismet. Untuk membuat pesan komentar di bawah

Cara Membuat Ucapan Selamat Kepada Komentator Pertamax di Blog

Image
Cara Membuat Ucapan Selamat Kepada Komentator Pertamax di Blog, Anaktimor17 Blog - Sobat blogger,istilah PERTAMAX muncul perama kali di Kaskus, Nah bagi pencinta kaskuser tentunya sudah tidak asing lagi dengan istilah ini. Pertamax diambil dari dua kata, Pertama dan X (artinya: pertama kali),

Berbagai Macam Efek Transisi Pada Gambar

Image
Berbagai Macam Efek Transisi Pada Gambar , Anaktimor17 Blog - Sobat blogger, ada beberapa efek transisi ini digunakan untuk memberi efek yang cukup keren pada gambar di blogspot. Dibawah ini adalah "Demo" dan kode "Css3" dari gambar yang diberi efek transisi.

Cara Membuat Laman 404/Page Nout Found di Blog Keren

Image
Cara Membuat Laman 404/Page Nout Found di Blog Keren sobat bloggers, pada kesempatan yang baik ini akan saya share cara membuat atau bikin halaman eror 404 di blog super keren. Laman error 404 biasanya di temukan pada artikel yang sudah di hapus, rusak atau belum pernah di buat sebelumnya pada sebuah blog. Untuk desain laman error 404 ini di guanakan kode css3 biar kelihatan keren dan laman ini bekerja pada browser mozila untuk chrome efek awan/cloud tidak muncul. Nah untuk membuat laman eror 404 sangatlah mudah, silahkan anda ikuti tipsnya di bawah ini:


Tips atau Cara Membuat Laman 404/Page Nout Found di Blog Kerenlogin ke akun blog Andapada menu dashboard >> pilih edit htmlcari salah satu kode ini lalu copy script css di bawah ini dan simpan di atas ]]></b:skin> atau</style>#error-page{background:-webkit-linear-gradient(top,#cbebdb 0,#3794c0 120%);background:-moz-linear-gradient(top,#cbebdb 0,#3794c0 120%);background:-o-linear-gradient(top,#cbebdb 0,#3794c0 120%…

Pasang Sitemap Responsive Sederhana di Blog

Image
Pasang Sitemap Responsive Sederhana di Blog - sobat bloggers, salah satu penunjang kelengkapan blog adalah dengan adanya sebuah laman khusu yang menyediakan rangkuman seluruh artikel blog kita. Jadi dengan cara ini dapat memudahkan para pengunjung untuk mencari lebih banyak lagi semua artikel yang ada di blog Anda.


Cara Pasang Sitemap Responsive Sederhana di Blog :Anda login ke akun bloggerMasuk ke menu Edit HTMLcopy kode css di bawah ini, lalu taruh tepat di atas kode ]]></b:skin> atau</style>. #bp_toc{border:1px solid #f5f5f5;background:#ffffff;padding:5px;width:100%;margin-top:10px;}.toc-header-col1, .toc-header-col2, .toc-header-col3{background:#edf1ec;color:#000000;padding-left:5px;width:250px;}.toc-header-col2{width:75px;}.toc-header-col3{width:125px;}.toc-header-col1a:link, .toc-header-col1a:visited, .toc-header-col2a:link, .toc-header-col2a:visited, .toc-header-col3a:link, .toc-header-col3a:visited{ font-size:90%;text-decoration:none;}.toc-header-col1a:hover, .to…

Cara Membuat Tombol Sosial Share Menggunakan CSS3

Image
Cara Membuat Tombol Sosial Share Menggunakan CSS3, LokerJakarta CSS3benar-benar menakjubkan. Ini memberikandesainerwebkemampuanuntuk

Pasang Dialog/Pesan Pembuka Ketika Masuk Blog

Image
Pasang Dialog/Pesan Pembuka Ketika Masuk Blog - tips ini saya ambil dari blog Kompi Ajaib, dimana sangat berguna untuk memberitahukan para pengunjung tentang suatu hal yang penting. Tips ini juga bisa di terapkan pada hari raya tertentu, misalnya pada saat lebaran,dan hari besar keagamaan lainnya. Hal ini tergantung kreatifitas Anda kembali.


Tanpa basa-basi, silahkan Anda ikuti tips dan cara pasang dialog atau pesan pembuka saat masuk blog :

Pasang Dialog/Pesan Pembuka Ketika Masuk Blog Buka akun blog anda , pilih menu edit html dan cari kode ]]></b:skin> atau</style> (tekan CTRL+F)Anda Copy script css di bawah ini dan simpan di atas ]]></b:skin> atau</style>. Anda pilih salah satu css di bawah ini :CSS 1
/* Pesan Pembuka Homepage */ #welcomebox {position: fixed;top: 10%;left: 50%;width: 70%;margin-left: -37%;z-index: 1000000;text-align: center;background: rgba(0, 0, 0, 0.5);padding: 20px 2%;} #welcomebox p{color: #FFF;font-size: 150%;line-height: 1.6em;ma…

Cara Pasang Widget Label Cloud Blogger Keren

Image
Cara Pasang Widget Label Cloud Blogger Keren 
sobat bloggers, salah satu nilai tambah untuk blog kita adalah dengan tampilan blog yang elegant dan full color...nah salah satu poin plus tersebut adalah dengan memasang widget label cloud blogger warna-warni. oleh kareana itu, berikut ini saya share untuk Anda cara pasang widget label cloud blogger keren dan warna-warni :)





Cara Pasang Widget Label Cloud Blogger Keren Masuk Dasboard Blogger Pilih TemplateKemudain Pilih Edit HTMLAnda copy kode CSS berikut dan letakkan diatas kode </b:skin> atau </style> (pilih salah satu).
<!-- cssuilabelcolorby Anaktimor17 Blog--> .sidebar.label-size{ position:relative;text-transform: uppercase;text-decoration:none;font-size:11px;font-family:Oswald, Arial, Sans-Serif;color:#fff!important;}.sidebar.label-sizea{ color:#fff!important;font-weight:300;padding:8px 10px;margin:06px 6px 0;float:left;display:block;-moz-transition: all 0.4s ;-o-transition: all 0.4s;-webkit-transition: all 0.4s ;-ms…

Pasang Share Button di Blog Di Atas Posting Keren

Pasang Share Button di Blog Di Atas Posting Keren, Anaktimor17 Blog- kali ini saya akan membahasCara Membuat Share Button di Blog,

Cara Buat Tombol Demo dan Download Keren ala Anaktimor17 Blog

Image
Cara Buat Tombol Demo dan Download Keren ala Anaktimor17 Blog - Banyak tutorial cara membuat tombol "Demo" dan "Download" yang sudah sahabat lain bagikan, kali ini saya akan membuat tutorial cara membuat tombol demo dan download ala blog ini.

Pasang Facebook Like Box dan Comment untuk Template Responsive

Image
Pasang Facebook Like Box dan Comment untuk Template Responsive, Anaktimor17 Blog – Sobat blogger, kali ini saya akan share untuk sobat tentang cara Membuat Facebook Like Box dan Comment untuk template Responsive . Kenapa saya katakan responsive?

Cara Modifikasi Komentar Yang di Hapus Oleh Penulis Blog

Image
Cara Modifikasi Komentar Yang di Hapus Oleh Penulis Blog, Anaktimor-17 Blog - akhirnya update artikel baru nieh. Sobat, lama baru posting dimana kesibukan saya selama ini membuat saya lupa akan blog kesayanganku ini. Saat ini saya lagi persiapan untuk masuk di salah satu PT. Jadi gak sempat meluangkan waktu untuk posting artikel terbaru. Tips ini memanfaatkan CSS pseudo element :after dan :before saja, untuk contoh bisa lihat gambar dibawah ini

Sebelum dimodifikasi