Our social:

Latest Post

Showing posts with label Blog. Show all posts
Showing posts with label Blog. Show all posts

Tuesday, 13 December 2016

Cara Menampilkan Postingan Berdasarkan Label Menggunakan Feed Blogger

Cara Menampilkan Postingan Berdasarkan Label Menggunakan Feed Blogger

Untuk menampilkan postingan yang hanya pada label tertentu, kita bisa memanfaatkan jasa LABEL pada blogspot. Sebagai contoh, saya memiliki blog yang dikelompokkan kedalam beberapa label, salah satunya berlabel Widget. Dan saya ingin menampilkan widget artikel yang berisikan artikel dalam label Widget saja. Jadi artikel dengan label lain tidak diikutsertakan.

Berikut cara singkat untuk membuatnya :

Login ke Blogger anda. Pilih menu Design >  Layout.
Kemudian klik Add a gadget.
Lalu cari widget yang bertuliskan Feed.
Klik pada tulisannya atau pada gambar bersimbol (+).

Lalu akan muncul form isian seperti dibawah ini :
cara Menampilkan Feed Blog
- Ketikkan alamat ini pada Feed URL yang tersedia :
http://alamat-blog-anda.blogspot.com/feeds/posts/default/-/Widget
Ubahlah teks alamat-blog-anda menjadi alamat blog anda.
Ubahlah teks widget menjadi label blog anda.
- Jika menggunakan nama labelnya lebih dari satu kata seperti “Widget Saya”, maka harus menambahkan %20 diantara kedua kata label tersebut. Hasilnya menjadi :
http://alamat-blog-anda.blogspot.com/feeds/posts/default/-/Widget%20Saya
- Untuk menampilkan urutan postingan dari yang terbaru ke yang lama, ubah menjadihttp://alamat-blog-anda.blogspot.com/feeds/posts/default/-/Widget?orderby=updated
Klik tombol Continue.
Setelah itu akan muncul kotak Konfigurasi tampilan. Ketikkan Judul menu,berapa jumlah konten yang ingin ditampilkan.



Jika ingin melihat hasil dari menampilkan feed, anda bisa klik link Preview. Setelah selesai klik pada icon "Save".
Lihat hasilnya dengan Refresh Blog Anda. Hasilnya pada Blog anda akan tampil konten dari feed yang sudah anda panggil.

Selamat Mencoba

Wednesday, 30 November 2016

Cara Merubah Widget Label Blog Menjadi Lebih Keren dan Menarik

Hampir semua blog memberikan widget Label . Gunanya untuk mempermudah melihat Artikel sesuai kategori, dengan widget label / kategori pasti akan mempermudah dalam memilih Artikel yang berkaitan dengan artikel lainya. Pastilah semua blogger mempunyai widget label, namun tampilan default dari blogger sendiri kurang menarik. Untuk itu sekarang kita akan membuat widget tersebut menjadi lebih menarik dan pastinya lebih keren Nah untuk mempercantik tampilan label agar pengunjung lebih senang tentunya .  kalian tinggal pake saja  kode CSS yang sudah saya kumpulkan banyak.

Berikut Langkah - Langkahnya

1. Silahkan Login Ke Blog Anda Sendiri Jangan Punya Orang Lain
2. Setelah Itu Pilih Layout -> Add a Widget -> Label
3. Atur Widget Label Sesuai yang dibawah ini lalu Simpan
Hasil gambar untuk konfigurasi widget label
4. Selanjutnya menuju ke Tamplate -> Edit HTML
5. Cari Kode label-size
6. Kalau Udah Ketemu Silahkan Pilih Tampilan Label Sesuka Anda dan Ganti Kode label-size dengan yang anda pilih tadi
7. Setelah Itu Simpan

Berikut Kumpulan Kode Label Keren 

1. Label Flat

Membuat Widget Label Flat UI Keren

.Label a{
padding-left: 5px;
padding-right: 31.5px;
color: #fff!important;
height: 32px;
background: #5797bf;
margin-right: 2px;
line-height: 32px;
text-decoration: none;
border: none !important;
transition: all .3s ease-in-out !important;
float: left;
margin-top: 2px;
font-size: 13px;

2. Label kedua

Hasil gambar untuk widget blogger keren

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10} .cloud-label-widget-content{text-align:left} .label-size{border-radius:30px;background:#FA0830;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase} .label-size a,.label-size span{display:inline-block;color:#ffffff!important;padding:6px 8px;font-weight:bold} .label-size:hover{border-radius:30px;background:#333333} .label-count{white-space:nowrap;border-radius:30px;padding-right:3px;margin-left:-3px;background:#333333;color:#fff!important} 
.label-size{line-height:1.2} 

3. Label ketiga 

.cloud-label-widget-content {  text-align: justify; max-height: 300px; overflow-y: auto; } 
.cloud-label-widget-content::-webkit-scrollbar-thumb { background-color: #ecf0f1; border-radius: .425em; } 
.cloud-label-widget-content::-webkit-scrollbar { background: 0 0; } 
span.label-size { float: left; font-size: 10pt; background: #fff; border: 1px solid #bdc3c7; border-radius: 3px; margin: 4px; padding: .4em .75em; } 
span.label-size:before { content: "\f02b"; font-family: FontAwesome; color: #95a5a6 } 
span.label-size a { color: #666; margin-left: .5em; }

4. Label Keempat

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
background:#0dd7b4;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
background:#333333;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#333333;
color:#fff !important;
}
.label-size {
line-height:1.2
}

5. Label Kelima

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;filter:alpha(100);opacity:10}.cloud-label-widget-content{text-align:left}.label-size {border:5px dashed #000000;border-bottom-right-radius: 30px;border-top-left-radius: 30px;background:#FA0830;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase;}.label-size a,.label-size span{display:inline-block;color:#ffffff !important;padding:6px 8px;font-weight:bold;}.label-size:hover {border:5px dashed #FA0830;background:#000000;}.label-count {white-space:nowrap;border-bottom-right-radius: 30px;border-top-left-radius: 30px;padding-right:3px;margin-left:-3px;background:#000000;color:#fff !important;}.label-size {line-height:1.2}

6. Label Keenam

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;filter:alpha(100);opacity:10}.cloud-label-widget-content{text-align:left}.label-size {border: 8px inset #0572F8;background:#0572F8;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase;}.label-size a,.label-size span{display:inline-block;color:#ffffff !important;padding:6px 8px;font-weight:bold;}.label-size:hover {background:#000000;}.label-count {white-space:nowrap;padding-right:3px;margin-left:-3px;background:#000000;color:#fff !important;}.label-size {line-height:1.2}

7. Label Ketujuh

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;filter:alpha(100);opacity:10}.cloud-label-widget-content{text-align:left}.label-size {background:#08A2FA;border-radius: 30px;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase;}.label-size a,.label-size span{display:inline-block;color:#ffffff !important;padding:6px 8px;font-weight:bold;}.label-size:hover {background:#000000;}.label-count {white-space:nowrap;padding-right:3px;margin-left:-3px;background:#000000;color:#fff !important;}.label-size {line-height:1.2}

8. Label Kedelapan

.Label a{ background: rgb(0,100,180);background: -moz-linear-gradient(top, rgba(0,100,180,1) 0%, rgba(20,60,100,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,100,180,1)), color-stop(100%,rgba(20,60,100,1)));background: -webkit-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);background: -o-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);background: -ms-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);background: linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064b4', endColorstr='#123d60',GradientType=0 );display:inline-block;border: 1px solid #005ca6;padding:0 8px; color:#fff!important;height:28px; line-height:28px; text-transform:capitalize; text-decoration:none;float:left;margin-top:5px; font-size:14px;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);}.Label a:hover{color:#000 !important; background:#123d60;}

9. Label Kesembilan

.label-size{margin:0 2px 6px 0;padding: 3px;text-transform: uppercase;border: solid 1px #C6C6C6;border-radius: 3px;float:left;text-decoration:none;font-size:10px;color:#666;}
.label-size:hover {border:1px solid #6BB5FF;text-decoration: none;-moz-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;-ms-transition: all 0.5s ease-out;transition: all 0.5s ease-out;-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-webkit-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg);filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');zoom: 1;}
.label-size a {text-transform: uppercase;float:left;text-decoration: none;}.label-size a:hover {text-decoration: none;} 

Selamat mencoba

Friday, 11 November 2016

Cara Mudah Memasang atau Mengganti Favicon pada Blog

Kali ini kita akan membahas tentang logo. Seperti yang saya katakan sebelumnya, saat pertama kali membuat blog di blogger semua serba standar dan bawaan dari blogspot. 

Agar tampil beda, kita perlu melakukan beberapa perubahan. Salah satu yang mendasar adalah logo blogger yang selalu terlihat pada browser Anda. Dalam bahasa blog, logo ini dinamakan favicon.
Apa itu Favicon?
Favicon adalah singkatan dari Favorite Icon yaitu sebuah gambar icon yang muncul pada address bar suatu website. Favicon bisa disebut juga sebagai shortcut icon, website icon, URL icon, atau bookmark icon.
Hasil gambar untuk favicon
Secara default jika Anda membuat blog di blogger, blog sobat akan memiliki favicon berupa logo “Blogger”
Nah agar blog Anda terlihat lebih unik Anda bisa mengganti favicon tersebut dengan favicon milik Anda sendiri.
Berikut adalah caranya:
#1. Pertama Andat harus menyiapkan terlebih dahulu sebuah gambar persegidengan ukuran tidak lebih dari 100KB. Format gambar bisa apa saja, .JPG, .PNG, atau .ICO.
Anda bisa membuat gambar tersebut secara manual menggunakan software seperti photoshop atau GIMP. Selain itu bisa juga menggunakan Favicon Generator.
#2. Jika gambarnya sudah siap, sekarang login ke blogger.com > Masuk ke menu “Tata Letak” > Klik “Edit” pada bagian Favicon:
Tata Letak
#3. Klik “Choose File” dan pilih gambar favicon yang sudah sobat buat.
Upload Favicon
#4. Setelah itu tinggal klik tombol “Simpan”
Setelah berhasil memasang favicon di blog, kemungkinan saat anda cek blog anda faviconnya masih tetap berupa logo blogger. Hal tersebut wajar karena pengaruh Cache browser.
Silakan Anda bisa hapus cache browser untuk melihat perubahan favicon.

Cara Membuat Judul Postingan Blog berada di Tengah

Template bawaan Blogspot selalu menempatkan judul postingan di sebelah kiri, sehingga beberapa blogger kebingungan saat ingin menempatkan judul postingan tepat di tengah-tengah atau dalam posisi center.Wordpress biasanya menerapkan hal ini untuk template bawaannya, namun Blogger tidak demikian.
Hasil gambar untuk blogger

Berikut cara membuatnya:

  1. Login ke blogger.com
  2. Klik Template, ada dua pilihan, cara paling mudah klik Sesuaikan, jika ingin menggunakan metode Edit HTML, cari kode ini ]]></b:skin> lalu paste scrip di bawah tepat diatasnya. 
h3.post-title { text-align:center; }
     3. Karena kita menggunakan kode Sesuaikan, tampilannya lebih interaktif. Klik Tingkat Lanjut,      Tambahkan CSS dan paste script di atas di dalam form. 

     4. Setelah itu, Simpan klik Terapkan ke Blog di pojok kanan atas.
       Jika semua sudah berjalan dengan baik, maka hasilnya akan membuat judul postingan blog            Anda akan berada di tengah-tengah. 
       Itu akan berlaku untuk semua postingan sebelumnya dan setiap postingan yang akan di                  postingan kemudian. Jika anda bosan dengan tampilan begitu, anda bisa menghapusnya suatu        waktu.

Copyright 2015. All Rights Reserved

Design By Premium Blogger Templates