Posts

Showing posts with the label Widget

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 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),

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 Widget Share Valid HTML 5 di Bawah Posting Blog

Image
Pasang Widget Share Valid HTML 5 di Bawah Posting Blog - sobat bloggers, lama sudah saya tidak melakukan aktivitas blogging...karena ada pekerjaan di dunia nyata yang harus saya selesaikan. Oleh karena itu pada perjumpaan kali ini, akan saya share kepada Anda cara membuat atau Pasang Widget Share Valid HTML 5 di Bawah Posting Blog. Tutorial ini saya buat karena ada pertanyaan dari sahabat Faisal Fahri. Silahkan ikuti langkah-langkahnya di bawah ini :

Pasang Widget Share Valid HTML 5 di Bawah Posting BlogAnda masuk ke akun blogMasuk ke menu edit HTMLAnda cari kode ini (tekan CTRL+F) <div class='post-footer'>...</div>Biasanya kode di atas ada lebih dari satu, Anda pilih yang terakhir/bawahhapus kode tersebut, lalu Anda ganti dengan kode di bawah ini :<b:ifcond='data:blog.pageType == &quot;item&quot;'><divclass='post-footer'><p>Terimakasih sudah berkunjung dan membaca artikel mengenai <i><data:post.title/></i>…

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.

Pantau Pemirsa Blog Anda denga widget amoung.us

Image
Pantau Pemirsa Blog Anda denga widget amoung.us - untuk mengatahui siapa saja yang sedang online di blog , maka admin harus memasang widget stat counter sejenis amoung.us(tanpa javascript) . Sobat bloggers , dengan adanya widget  amoung.us akan mempermudah admin mengetahu berapa banyak visitor pada blog-nya.

cara Pantau Pemirsa Blog Anda denga widget amoung.us :
sobat masuk ke situs amoung.us >> widgetspilih salah satu style widgetlalu copy javascript widget tersebut ke notepad dan ambil kode penayangannyalihat gambar di bawah ini :  Anda pilih salah satu widget amoung.us di bawah ini lalu taruh di widget baru.

<a href="http://whos.amung.us/stats/kode-anda"><img src="http://whos.amung.us/widget/kode-anda" /></a><a href="http://whos.af/mung.us/stats/kode-anda"><img src="http://whos.amung.us/swidget/kode-anda" /></a>


<a href="http://whos.af/mung.us/stats/kode-anda"><img src="http://whos.…

Cara Membuat Popular Post Keren dan Berwarna (Update)

Image
Cara Membuat Popular Post Keren dan Berwarna

tips dan cara pasang atau membuat widget popular post jadi keren dan berwarna di blog ialah dengan memodifikasi widget popular post menjadi keren dan warna - warni dengan memanfaatkanCSS Pseudo Element dan nth-child sehingga tampilan widget popular post di blog menjadi lebih menarik untuk dilihat. Berikut ini cara buat atau pasang widget popular post/artikel populer di blog:

Cara-nya sangatlah mudah, hanya dengan menambahkan kode css di template blog Anda. Disini saya sediakan beberapa style yang bisa Anda pilih sesuai keinginan.




cara buat atau pasang widget popular post/artikel populer di blog 1. Anda login ke akun blogger Anda
2. Kemudian Tambahkan Gadget >> Entri Populer, lalu Anda atur agar popular post hanya menampilkan judul saja.

 3. Anda copy salah satu kode css di bawah ini dan taruh di atas kode ]]></b:skin> atau </style> dan Simpan.

STYLE 1 ( demo pada blog ini)


/*Custom Popular Post*/.PopularPostsul,.PopularPos…

Pasang Artikel Terkait dan Subscribe Email Dibawah Postingan Terbaru

Image
Pasang Artikel Terkait dan Subscribe Email Dibawah Postingan Terbaru - sobat bloggers, salh satu pendukung pada struktur template blog adalah adanya widget " artikel terkait" . Nah kali ini akan saya bagikan tips cara pasang artikel terkait dan subscribe email di bawah posting terbaru. Untuk pemasangannya silahkan ikuti langkah-langkahnya di bawah ini :

Cari kode ]]></b:skin> atau </style> dan copy kode css di bawah ini dan taruh tepat di atas salah satu kode tersebut.
/* -- RELATED POST AND SUBSCRIBE EMAIL -- */#subs-and-redat{margin:0;padding:15px;background:#292929url(http://4.bp.blogspot.com/-KOeHvb-_Fs4/UyrtMveVGaI/AAAAAAAAOnU/HIi6vAYVKFU/s1600/footer-imege.png) no-repeat top left;border-radius:3px;}.kotakleft{background:none;width:44%;margin:0;padding:15px;display:block;float:left}#related-posth4{font-family:Oswald, Arial, sans-serif;font-size:22px;font-weight:normal;text-transform:uppercase;color:#eee;margin:0015px;margin-top:-15px;}#related-postli{backgr…

Cara Membuat Banner Iklan 300x250 dengan CSS3 di Blogger

Image
Cara Membuat Banner Iklan 300x250 dengan CSS3 di Blogger
Sobat bloggers, kali ini akan saya share tips blogger tentang cara buat banner iklan di blog. Nah kali ini saya bagikan tips dari blog" Tutornesia" yang sudah di modifikasi menggunakan Css3. Cara pasang-nya juga gampang tinggal di taruh pada laman gadget baru.

Langkah pemasang widget banner iklan 300X250 sebagai berikut:
 Anda buka menu Tata Letak>>HTML/JavaScript. Copy code javascript di bawah ini dan tarus di kolom gadget html/javascript tersebut


<styletype='text/css'scoped='scoped'>.ads{margin:0 auto;padding:0;position:relative;width:100%}.ads-box{background:#21514F;width:100%;height:250px;margin:0;padding:0;text-align:center;transition:all .9s ease-in-out;}.ads-box:hover{background:#000;transition:all .9s ease-in-out;}.tags1{font:45px Oswald;text-shadow:02px 1px #eee;color:#f6f6f6;padding:40px 00;}.tags2{font:16px Oswald;color:#fff;text-transform:uppercase;font-weight:bold;padding:7px 0;te…