CARA MEMBUAT EFEK RATING BINTANG PADA POPULAR POST

Hai sobat blog {BL} bertjumpa lg dgn saya...!
Kali ini saya akan memberikan trik bagai mana cara membuat efek rating bintang pd popular post.
Ok...Langsung kita praktekkan.

1. Login ke blogger>Template>Edit Html

Copy / Paste code ini sebelum / di atas </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

     2.Copy / Paste code ini tepat sebelum / di atas ]]></b:skin> atau </style>

Style 1

/* Popular Post */ .PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none} .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none} .PopularPosts ul{margin:0;list-style:none;color:#64707a} .PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;} .PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)} .PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s} .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';} .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f006\f005\f005\f005\f005';opacity:.9} .PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f006\f006\f005\f005\f005';opacity:.85} .PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f006\f006\f006\f005\f005';opacity:.8} .PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f006\f006\f006\f006\f005';opacity:.75} .PopularPosts ul li:hover:before{opacity:1} .PopularPosts ul li:first-child{border-top:none} .PopularPosts ul li:last-child{border-bottom:none} .PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;} .PopularPosts ul li a:hover{color:#2476e0;} .PopularPosts .item-thumbnail{margin:0;} .PopularPosts .item-snippet{display:none} .PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

Scroll Box by Zaidan Group

Style 2

/* Popular Post */ .PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none} .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none} .PopularPosts ul{margin:0;list-style:none;color:#64707a} .PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;} .PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)} .PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s} .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';} .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.9} .PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.85} .PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.8} .PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75} .PopularPosts ul li:hover:before{opacity:1} .PopularPosts ul li:first-child{border-top:none} .PopularPosts ul li:last-child{border-bottom:none} .PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;} .PopularPosts ul li a:hover{color:#2476e0;} .PopularPosts .item-thumbnail{margin:0;} .PopularPosts .item-snippet{display:none} .PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

Scroll Box by Zaidan Group

Style 3

/* Popular Post */ .PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none} .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none} .PopularPosts ul{margin:0;list-style:none;color:#64707a} .PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;} .PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)} .PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s} .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';} .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005';opacity:.9} .PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005';opacity:.85} .PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005';opacity:.8} .PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005';opacity:.75} .PopularPosts ul li:hover:before{opacity:1} .PopularPosts ul li:first-child{border-top:none} .PopularPosts ul li:last-child{border-bottom:none} .PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;} .PopularPosts ul li a:hover{color:#2476e0;} .PopularPosts .item-thumbnail{margin:0;} .PopularPosts .item-snippet{display:none} .PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

Scroll Box by Zaidan Group

     3.Simpan template dan lihat hasilnya...!

Mungkin ini saja yg dpt sy berikan semoga bermanfaat.


WASSALAM...

Read More

CARA MENYISIPKAN TANDA TANGAN PADA POSTINGAN

Kali ini saya akan memberikan trik bagai mana cara membuat / menyisipkan tanda tangan pada postingan seperti contoh di bawah ini.

1. Silahkan buka website http://www.mylivesignature.com 
2. Anda tidak perlu daftar langsung saja klik START NOW ! / START HERE !.

     3.Isi kolom Name dgn nama yg anda inginkan yg akan menjadi tanda tangan anda seperti contoh di atas tersebut By Zaidan Group.Kemudian klik next step.

     4.Kemudian pilih ponts menurut selera anda dilanjutkan dgn klik next step.

     5.Select The Size sesuaikan besar ponts yg anda inginkan lalu klik next step.

     6.Background color / text color sesuaikan menurut selera lanjutkan dgn klik next step.

     7.Set The Slope pilih menurut selera klik next step.Pada tahap ini anda telah berhasil membuat text tanda tangan.

Selanjutnya kita akan membubuhkannya pada setiap postingan...

1. Masih di dalam menu mylivesignatur.com klik want to use this signature
2. Klik Generate Html Code dan klik Generate a code for my handwritten signature
3. Copy / Paste code html yg tersedia.
4. Masuk ke akun blog anda pilih pos>edit klik tab html letakkan code html tanda tangan anda tadi diawal postingan / ditengah postingan maupun di bawah postingan terserah yg anda inginkan.

Mungkin ini saja yg dapat saya berikan semoga bermanfaat...

WASSALAM...

Read More

TIPS & TRIK 10 BESAR SEO

Untuk menjadikan web / blog anda menjadi 10 besar di SEO ada beberapa hal yg perlu anda perhatikan yaitu :

• Keywords

keywords / kata kunci sesuatu yg paling utama di dalam SEO di mana anda secara singkat menyeritakan / menjelaskan tentang isi web / blog anda .

Memilih kata kunci yang terbaik berhubungan dengan informasi, jasa atau produk yg sedang kamu  tawarkan.

Sebagai contoh, jika anda sedang merancang sesuatu tentang Web Disain maka berilah kata kunci yg relefan serta dapat bertahan di search engine menurut perkembangan jaman.

• URL Text

url text / judul dari sebuah artikel tidak kalah pentingnya dgn keywords di atas sebab kata kunci maupun judul sebuah artikel haruslah saling bertautan.

• Description, Meta tags

Optimalkan meta tags artikel anda maka akan membantu anda lebih cepat di rayapi oleh search engine.

• Title Tags

Title tags hampir sama dgn url text halaman atau dokumen. Ini menjadi kata kunci yg dpt dilihat pd tab jendela browser anda. Yang paling utama tentang judul artikel adalah, jangan meletakkan apapun di dalam judul artikel selain kata kunci tentang artikel tsb.

• Image Names

Jika anda menyematkan sebuah / beberapa gambar pd bagian artikel jgn lupa untuk memberikan kata kunci pd gambar tersbt.

• ALT tags

Alt tags adalah kata kunci yg dapat anda sisipkan pd sebuah gambar,dgn memberikan kata kunci pd sebuah gambar dpt membantu search engine lebih cepat merayapi situs anda .

• Heading tags

Adalah judul sebuah website di mana hurus membuat judul sebuah website yg mengandung  / menjelaskan isi tentang situs anda .

• Content

Di dalam membuat sebuah artikel anda haruslah membuat tidak kurang dari 500 kata bahkan lebih dari pd itu lebih baik di sini kita bisa menuliskan beberapa kata kunci / sebanyak-banyaknya kata kunci tentang isi dari artikel yg kita buat ter sbt .

• Hyperlinks

Gunakan hyperlinks sehingga search engine akan mempunyai suatu tautan teks untuk mengikuti kepada halaman berikutnya .Gunakanlah tautan kata kunci sebanyak-banyaknya tentang isi dari artikel anda ter sbt .

Mungkin ini saja yg bs saya berikan mudah-mudahan bermanfaat.

wassalam....

Read More

CARA MERUBAH / MENGGANTI OLDER POSTS DGN ANGKA

Di sini sy akan menjelaskan bagaimana merubah older posts pd blog secara ringkas & jelas.

Seperti inilah hasilnya.


Langsung saja anda masuk ke dlm akun blog anda>pilih menu template>edit html setelah masuk cari code seperti ini ]]></b:skin> atau </style>.

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; } .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;} #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;} .showpageOf{display:none!important} #blog-pager .pages{border:none;}

Copy / paste code di atas dan tempatkan tepat di atas code ]]></b:skin> / </style>.

Mungkin ini saja yg bs saya berikan semoga bermanfaat.

WASSALAM...

Read More

CARA MUDAH MENYEMBUNYIKAN TANDA QUICK EDIT PADA BLOG

Ketika anda yg baru terjun di dunia blogger tentunya anda mungkin agak kesulitan menata isi dari blog yg anda buat.Kali ini saya akan menjelaskan sedikit pengetahuan saya tentang bagai mana cara menghilangkan tanda quick edit pada blog.

Pada gambar di atas yg diberi tanda lingkaran merah itulah yg di maksud.
Cara menghilangkanya yaitu anda terlebih dahulu harus masuk ke dasbor blog anda klik pada kolom Template->Edit Html klik sembarang pada kolom html kemudian klik tombol CTRL + F pada keyboard Pc / Laptop anda gunanya untuk menampilkan bar pencarian pada halaman html tsb.Copy code ini   <b:include name='quickedit'/>   pada tab pencarian halaman html seperti terlihat pada gambar lalu tekan Enter.

Edit code di atas dng code seperti ini   <!--b:include name='quickedit'/-->   lihat pada gambar yg perlu di edit.

Catatan : setiap anda selesai mengedit satu code silahkan anda klik kembali pd tab pencarian lalu tekan Enter untuk menghindari penambahan Bab baru pada halaman html lakukanlah berulang kali sampai benar2 tidak ada lg pengeditan,jangan lupa untuk mengklik tab Simpan Template untuk menyimpan editan yg telah anda buat.
Mungkin ini saja yg dpt saya sajikan kepada anda sekalian semoga bermanfaat.


WASSALAM....

Read More