Cara Membuat Blog Pribadi Gratis di Blogger

"Cara Membuat Blog Pribadi Gratis di Blogger"  -  Kali ini Kang Zain akan share buat para pecinta dunia maya dengan judul Cara Membuat Blog Pribadi Gratis di Blogger . tips kali ini akan saya arahkan untuk membuat blog pribadi gratis melalui blogspot.com. menurut saya pribadi untuk membuat blog paling mudah menggunakan Blogger blogspot.com disisi lain untuk variasi sangat memuaskan. Sebenarnya banyak layanan untuk membuat blog gratis diantaranya adalah:

1. Blogger.com
2. WordPress.com
3. Blogdetik.com
4. Blog-roll.info
5. Wordblog.pl

Selain layanan diatas, masih banyak lagi. namun untuk kali ini ita akan belajar Membuat Blog Pribadi Gratis di Blogger.com.

.

Blog adalah sebagai sarana untuk menyalurkan ide kreatif kita yang akan dipublikasikan lewat dunia maya, ada juga yang mengatakan blog adalah catatan online. semuanya benar semua, ada beberapa manfaat dari memiliki blog  diantaranya: Kita bisa terkenal, menambah pengalaman atau pengetahuan, memunculkan ide kreatif lewat tulisan, berbagi pengetahuan dan bisa juga digunakan untuk peluang bisnis misalnya bisnis perkantoran, pertokoan atau usaha kecil-kecilan. untuk yang memiliki konten bagus dan traffik tinggi sudah pasti dilirik banyak sponsor yang ingin pasang iklan pada blog kita.

Blog merupakan sebuah kebutuhan khusus untuk sobat yang ingin memulai bisnis onlinenya dengan cara promosi dengan blog. bisa juga karena memang sudah hobi dalam hal tulis menulis, sehingga ingin mencurahkan ide maupun gagasannya  agar bisa diketahui oleh orang di seluruh dunia, mungkin juga bisa hanya sekedar untuk mencari penghasilan lewat blog. tergantung dari mana niat awal sobat membuat blog

Untuk mulai menulis di dunia maya terlebih dahulu kita Membuat Blog Pribadi Gratis di Blogger yang bisa sobat isi konten apapun, edit kapanpun juga modifikasi sesuka hati. namun perlu diingat untuk para pemula blogger harus mengetahui dasar-dasar blog agar nantinya tidak tersesat, hehe 

Yang perlu diperhatikan dan dijalankan untuk blogger pemula:

1. Membuat blog (menentukan alamat URL dan Judul Blog).

2. Memilih tema untuk Blog

3. Membuat Postingan yang benar dan seo

4. Menentukan Judul Postingan dan keyword konten.
5. Mengganti template.

6. Belajar Seo Untuk Pemula.

Cara diatas mungkin bisa membantu sobat blogger pemula, setelah diatas menguasai sobat bisa melanjutkan untuk belajar ngeblog lebih dalam.

Nah,,, untuk awal memulai penggunaan kita daftar dulu di blogger.com, kita akan simak bareng untuk membuat blog prubadi gratis di blogger: cekidot!!!! 

"Sobat Blogger Wajib memiliki Email untuk bisa membuat blog, saya sarankan untuk menggunakan Gmail.com dari google karena blogger.com dan gmail.com adalah satu produk google jadi nantinya lebih mudah.""

Langkah Membuat Blog Gratis :

1. Arahkan ke www. Blogger.com menggunakan web browser pilihan Anda.
   
   
   
2. Masuk menggunakan Akun Google Anda untuk memulai.
   
   
   
3. Jika Anda tidak memiliki Akun Google, klik "Get Started" untuk membuat satu.
   
   
   
4. Masukkan "Nama Tampilan" yang akan digunakan untuk menandai posting blog Anda dan klik "Lanjutkan".
   
   
   
5. Klik "Buat Blog Anda Sekarang"
   
   
6. Pilih "Judul Blog" dan URL yang tersedia untuk blog Anda. Anda dapat memeriksa jika URL Anda mempertimbangkan tersedia dengan mengklik "Periksa Ketersediaan".
   
   
   
7. Masukkan verifikasi kata dan klik lanjutkan.
   
   
   
8. Pilih template pemula, yang akan bertindak sebagai desain dasar / layout blog Anda.
   
   
   
9. Klik "Mulai Blogging"
   
   
10. Anda dapat membuat posting blog baru, mengedit posting, dan mengedit halaman dari bawah "Posting" tab.
    
    
    
11. Judul posting Anda berjalan dalam kotak teks di samping "Judul".
    
    
    
12. Anda akan mendapatkan masuk ke dalam "Compose" editor teks, di mana Anda juga akan dapat mengakses fungsi editor teks dasar seperti ukuran font, warna teks, kemampuan untuk menyisipkan link.
    
    
    
13. Anda juga dapat menggunakan "Edit HTML" tab untuk memasukkan posting Anda dalam format HTML, jika Anda inginkan.
    
    
    
14. The "Post Options" bagian yang terletak di bawah "Compose" editor teks akan memungkinkan Anda untuk mengaktifkan komentar pembaca, pengaturan HTML, dan posting waktu dan tanggal.
    
    
    
15. Anda dapat sekarang baik pilih "Simpan Sekarang" untuk menyimpan posting Anda, "Preview" untuk melihat posting Anda sebelum penerbitan ke blog Anda, atau "Publish Post" untuk mempublikasikan posting Anda langsung ke blog yang baru dibuat.
    
    
    
16. Jika Anda ingin mengubah desain blog Anda dari template yang Anda pilih pemula ketika pada awalnya membuat blog Anda, Anda dapat melakukannya di bawah "Design" tab.
    
    
    
17. Dari dalam "Desain Tab" Anda akan dapat mengedit Elemen Halaman, HTML, dan mengubah template Anda dengan Temple Designer.
    
    
    
18. Jika Anda ingin menyesuaikan pengaturan lainnya seperti yang mampu melihat, berkontribusi, atau komentar di blog dll Anda, klik tombol "Settings" tab.
    
    
    
19. Anda dapat menyesuaikan penerbitan, komentar, pengarsipan, perizinan, dan semua pengaturan lainnya dari dalam sub-tab yang terletak di bawah utama "Settings" tab.
20. Anda dapat menambahkan penulis baru yang mampu berkontribusi dan mengedit blog Anda dengan mengklik "Pengaturan" tab> "Permissions" sub-tab, dan memilih "Tambah Penulis".

Sekian dulu Sobat Cara Membuat Blog Pribadi Gratis di Blogger  semoga dapat membantu sobat yang ingin membuat blog pribadi. kalau ada pertanyaan silahkan tinggalkan komentar. Salam Blogger

Referensi:  http://www.sowanlor.com/

Read More

Cara Memasang Jumlah Postingan dan Komentar di Blog

Cara Memasang Jumlah Postingan dan Komentar di Blog - Menampilkan jumlah postingan dan komentar di blog ternyata mudah. sebenarnya widget satu ini sudah lama dikembangkan, namun sudah tentu jika yang melihat para blogger pemula pasti bingung dan bertanya-tanya bagaimana cara mudah menampilkan jumlah postingan dan komentar di blog? akhirnya saya posting buat sobat blogger semua yang ingin menampilkan jumlah postingan dan komentar pada sidebar blog atau pada blog.

Sobat bisa memasang jumlah postingan dan komentar pada sidebar, footer atau tempat yang lainnya dengan mudah, karena cukup dengan menambah kode jumlah postingan dan komentar. jika sobat tertarik bisa langsung simak tutorial dibawah ini:

Cara Mudah Memasang / Menampilkan  Jumlah Postingan dan Komentar di Blog

1. Login terlebih dahulu di blog sobat
2. Masuk ke menu Tata Letak >>>Tambah Gadget >>>pilh HTML atau JavaScript
3. Masukan kode dibawah ini dalam kotak HTML atau JavaScript

<script type="text/javascript">
function showpostcount(json) {
document.write('Total Posts : <b>' + parseInt(json.feed.openSearch$totalResults.$t,10) + '</b><br>');}</script>
<script src="http://softwaremaniapc.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>
<script type="text/javascript">
function numberOfComments(json) {
document.write('Total Comments : <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}</script>
<script src="http://softwaremaniapc.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>

4. Simpan

Keterangan:

Sobat ganti warna url BIRU diatas dengan alamat blog sobat.

Ok! sobat blogger,,, tutorial Cara Memasang Jumlah Postingan dan Komentar di Blog sampai disini dulu, bagaimana mudah kan?? tentunya sangat mudah, hehehe karena sudah saya coba dan berhasil, sekarang gantian sobat yang pasang di blog. hehe selamat mencoba.

Read More

Cara Membuat / Memasang Widget CCTV Di Blog

Tag:Cara Membuat / Memasang Widget Camera CCTV Di Blog - Tutorial cara memasang camera cctv di blog - cara membuat camera cctv di pojok blog - cara membuat dan memasang widget cctv di blog dengan mudah - cara memasang widget cctv keren di blog - Cara mudah memasang camera cctv di blog.

Cara Membuat / Memasang Widget CCTV Di Blog  - ternyata untuk memasang cctv di blog sangat mudah, widget satu ini terlihat menarik, ketika para pengunjung hadir pada blog kita maka secara otomatis camera pengintai berada pada blog. tentunya sangat menarik untuk dipasang sebagai variasi blog, namun sebenarnya yang terpenting dalam blogger yaitu menyempurnakan postingan agar masuk 10 pencarian google untuk selalu memperbaiki blog agar seo. 

Setelah membaca penjelasan, jika sobat ingin memasang camera cctv di blog, silahkan simak tutorial dibawah ini : 

1. Login Ke Blogger
2. Pilih Tata Letak
3. Lalu Tambahkan Gadget Atau Add Gadget
4. Lalu Tekan HTML/JavaScript
5. Lalu COPAS ( Copy Paste ) Kode Di Bawah Ini Di Kolom HTML/JavaScript

<script language="JavaScript" src="https://sites.google.com/site/bloggerbondowosoblogspotcom/js/camera.js" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlSiRtu2E1xCg4y_MkIlWyo60FZv-SKokH0Nj8Bn6g3XPS6zpdIUoW6xfsdPftWJ8FUFhr2CsppProm5uc3mkgOrL5sSA_DR6Zxq9dhkVaqpRlDycO7U7KmZpK2H3pY8O7Y0BaU1R8JUk/s1600/cctv.gif")</script>

6. Lalu Tekan Tombol Simpan Dan Lihat Hasilnya.

Sekian dulu sobat tutorial Cara Membuat / Memasang Widget CCTV Di Blog . semoga bermanfaat, untuk modifikasi blog lengkap sobat bisa simak Cara Modifikasi Blog dan untuk tutorial blog, silahkan klik link berikut: tutorial blog lengkap

Read More

Cara Membuat Bismillah Otomatis Di awal Postingan Blog

Cara Membuat Bismillah Otomatis Di awal Postingan Blog - Tips dan trik kali ini buat blog sobat yang ingin memasang lafaldz bismillah di awal postingan, ini cocok banget buat sobat yang beragama islam untuk membuat widget satu ini yaitu bismillah di awal postingan blog, setelah sobat pasang bismillah di awal postingan blog, maka secara otomatis akan berada di awal postingan blog. sebenarnya sudah lama untuk dipublikasikan, tapi para pembuat blog baru setiap harinya membanjiri dunia maya. 

Nah,,, Jika sobat ingin menambah bismillah di awal postingan Blog, ikuti petunjuk dibawah ini: Cekidot !!!!

Cara Memasang Bismillah Di Awal Postingan
1. Buka blog anda
2. Pilih Template => Edit HTML

3. Cari kode <data:post.body/> jika sudah ketemu.

4. Lalu letakkan kode Bismillah dibawah ini, tepat diatasnya

<div style='text-align: center;'><span style='font-size: large;'><span style='font-family: Traditional Arabic;'>?&#1616;?&#1618;?&#1616; ????&#1616; ???&#1617;&#1614;?&#1618;??&#1616; ???&#1617;&#1614;?&#1616;??&#1616;</span></span> </div><br/>

Atau Sobat bisa juga memasang kode dibawah ini, Bedanya pada tampilan font :

<div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><span dir='rtl'>?&#1616;?&#1618;?????????????????&#1616; ??&#1616;???&#1614;&#1617;?&#1618;?&#1614;?&#1616; ???&#1614;&#1617;?&#1616;??</span></span></span></div><br/>

Sekian dulu sobat Cara Membuat Bismillah Otomatis Di awal Postingan Blog tentunya sangat menarik buat blog sobat, hehehe Selamat Mencoba Widget Bismillah Di awal postingan Blog.

Read More

Cara Membuat Efek Bayangan Pada Link Blog

Cara Membuat Efek Bayangan Pada Link Blog - Membuat Efek Shadow pada link blog - Membuat efek bayangan pada blog - Membuat Efek Bayangan (Shadow) pada blog - efek shadow pada blog - Cara Mudah Membuat Efek Bayangan Pada Link Blog. Tips dan trik seperti diatas akan saya kemas menjadi simple dan mudah dipahami untuk blogger pemula, agar tidak bingung dengan banyak tutorial yang ada. sebenarnya banyak cara untuk membuat link bayangan pada blog sampai bingung gak bisa pasang.

Banyak cara untuk membuat teks link menjadi lebih menarik di blog supaya teks tersebut di dikunjungi , apalagi link itu berkaitan dengan postingan lain di dalam blog atau link internal blog , efek samping nya cukup bermanfaat buat blog kita, Cara ini bisa meningkat nilai pageview pada blog dan membantu dalam upaya sobat untuk meramping kan blog karena nilai pageview nya naik .

Nah,,, untuk lebih simplenya saya kasih beberapa tutorial bisa sobat pilih dan mencobanya, memang sebuah kendala pada tutorial kadang tidak bisa diterima setiap template alias berbeda-beda namun aslinya semuanya sama, cuma bagi blogger pemula akan merasa kesulitan. jika sobat tertarik membuat efek bayangan pada link blog, ikuti petunjuk dibawah ini: 

Cara Membuat Efek Bayangan Pada Link Blog (Cara Pertama)

1. Log in akun blog sobat.
2. Pada dasbor blog pilih Template �� Edit HTML
3.Sobat Cari kode seperti dibawah ini :

a:hover {
color:#80ff00;
text-decoration:none;
}

4.Ganti kode diatas dengan kode dibawah ini

a:hover {color: #ff0000;text-shadow: 0 0 0.5em #000080,0 0 0.5em #0000ff;text-decoration:none; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; -o-transition:all .2s ease-out}

5.Kemudian Simpan dan lihat hasilnya.

Keterangan :

Bila sobat pengen efek shadow/bayangan yang dihasilkan menjadi lebih tebal, maka tambahkan lebih banyak kode  0 0 0.5em #000080 Hasil Efek bayangannya yang dikeluarkan akan semakin tebal.

Contohnya seperti ini :

a:hover{color: #ff0000;text-shadow: 0 0 0.5em #000080,0 0 0.5em #000080,0 0 0.5em #000080,0 0 0.5em #000080;text-decoration:none; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; -o-transition:all .2s ease-out}

Cara Membuat Efek Bayangan Pada Link Blog (Cara Kedua)

1. Log in akun blog sobat.
2. Pada dasbor blog pilih Template �� Edit HTML
3.Sobat Cari kode #outer-wrapper  (Untuk lebih mudah dan cepat gunakan ctrl+f )
4. jika sudah ketemu, sobat tambahkan kode-kode dibawah ini tepat dibawahnya kode #outer-wrapper tadi.

box-shadow:0 0 20px #6d5d96;
-webkit-box-shadow:0 0 10px #6d5d96;
-moz-box-shadow:0 0 20px #6d5d96;
-o-box-shadow:0 0 10px #6d5d96;

Untuk lebih jelas penempatannya, karena biasanya kurang tepat memasangnya jadi kode tidak berfungsi. kurang lebih hasilnya seperti dibawah ini sobat:

#outer-wrapper {
background:#ffffff;
border-left:1px solid #4169e1;
border-right:1px solid #4169e1;
border-bottom:1px solid #4169e1;
width: 1000px;
margin:0 auto;
padding:10px 10px 20px 0px;
text-align:left;
font: normal normal 11.5px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
box-shadow:0 0 20px #6d5d96;
-webkit-box-shadow:0 0 10px #6d5d96;
-moz-box-shadow:0 0 20px #6d5d96;
-o-box-shadow:0 0 10px #6d5d96;
}

Keterangan :

0 0 20px : Dapat sobat ganti, jika ingin efek bayangan lebih jelas dan tebal.
 #6d5d96 : Adalah warna bayangan, bisa sobat ganti dengan warna bayangan yang sobat inginkan.

Sekian dulu sobat  Cara Membuat Efek Bayangan Pada Link Blog, jika masih ada yang belum jelas bisa tinggalkan komentar. sampai bertemu kembali untuk modifikasi blog. Selamat Mencoba,

Read More

Cara Mudah Membuat Menu Label Keren diblog

Cara Mudah Membuat Menu Label Keren diblog - Tutorial kali ini saya bilang sangat unik, kenapa tidak, tampilan menu ini apabila di klik maka akan memperlihatkan semua entri yang ada dalam label tersebut, tidak seperi label bawaan apabila di klik maka akan melakukan loading dan memberikan hasil entri dalam label tertentu di areal entri ( postingan ), menu label tersebut akan melakukan penyesuain dengan lebar widget tempat menu label ini di letakkan jadi tidak perlu lagi melakukan resize.

Jika sobat bingung kurang lebihnya seperti gambar dibawah ini:

 Nah,, bagai mana sudah ada gambaran? untuk lebih jelasnya ikuti petunjuk dibawah ini dan sobat bisa langsung coba pada blog sobat:

Cara Mudah Membuat Menu Label Keren diblog

- Masuk Keakun Blog sobat
- Pilih Template
- Klik Tombol Edit HTML
- Cari Kode ]]></b:skin> (Gunakan tombol ctrl + f untuk memudahkan pencarian kode)

- Copy kode berikut dan letakan di Atas kode ]]></b:skin>

    #dafis-acc{
    font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#333;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMwG133uC2LWJgf5EjodtnrjSvk268ERm2KZ7vKxC_tocZJ-BXi9B7IC36em0N57NGmAI0ymV-iKhKMq0S9IfGpbTAF9U1frYKLD2-wyzrO-eRmbwgSvErLdW5G0yMdlpgu2I3sCkE13w/s320/bg5.gif) repeat-y scroll left center #E7F7FB;
    padding:2px 0;
    border:1px solid #339DC6;
    }
    .dafis-label{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN7DVsFU-b7I-QHXX8t28CbQoOknaQp6ESYLjV6IB1Q2oqwiJjuWBMpqgYXo-6l577m5MpV-XCKtrguUhpgDHK3iCt2hIyYGOKijIKVLXfPb4fgRXRynuROWRtmLwR_zVpraFnv5yrzcs/s1600/bg4.gif) repeat-x scroll 0 0 #E1F4FB;
    font-weight:bold;
    line-height:1.4em;
    overflow:hidden;
    white-space:nowrap;
    vertical-align: baseline;
    margin: 1px 3px;
    outline: none;
    cursor: pointer;
    text-decoration: none;
    padding: 2px 10px;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    border:1px solid #2F94BA;
    }
    .dafis-label:hover{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijgTPgScn7cpnhHNnRHPqH1xxJd_Bo9F5w-gmtoSzfdRkoVr_qKPSOIm2dEBOm5HnpjwqLF8A8rh4ur43ZguD19oDdrt3tJN4GhMaThqr1Rf7PO6t3vA2VKazBZT98l1AykCyaHZwXjoU/s320/bg2.gif) repeat-x scroll 0 0 #E1F4FB;
    color:#003366;
    }
    .dafis-daf ol{
    margin:0 0 0 30px !important;
    padding:0 !important;
    }
    .dafis-daf ol li{
    background-color:#C9E9F4;
    line-height:1.5em;
    margin:1px 3px !important;
    white-space:nowrap;
    text-align:left;
    border:1px solid #339DC6;
    }
    .dafis-daf ol li a{
    text-decoration: none !important;
    color:#333 !important;
    display:block;
    padding-left:10px;
    }
    .dafis-daf ol li a:hover{
    background: #7BC4DF;
    border-left: 5px #333 solid;
    padding-left: 5px;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    }

- Sekarang Cari Kode </head>
- Copy dan paste kode berikut Diatas Kode </head>

<script src='http://dapurtutorial8.googlecode.com/files/Scriptdaftarisi1.js' type='text/javascript'/>

- Jika Sudah Klik Tombol Simpan Template
- belum selesai sobat, selanjutnya ikuti petunjuk dibawah ini:

Selanjutnya Letakkan di sidebar

- Sobat masuk dasbord blog sobat pilih Tata Letak --> Add Gadget --> Pilih HTML/JavaScript.
- Masukkan kode dibawah ini kedalam kotak HTML/JavaScript.:

<script type="text/javascript" src="http://dapurtutorial9.googlecode.com/files/Scriptdaftarisi2.txt"></script><script src="http://softwaremaniapc.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Keterangan :
Perhatikan URL yang Berwarn BIRU ganti menggunakan URL blog Anda

- Jangan lupa Save
- selesai dan lihat hasilnya.

Sekian dulu sobat  Cara Mudah Membuat Menu Label Keren diblog, jangan lupa mampir lagi diblog Software Mania PC

::Selamat Mencoba::

Read More

Cara Membuat Tampilan Label Cloud Berwarna di Blog

Cara Membuat Tampilan Label Cloud Berwarna di Blog - Kali ini kang zain akan share Cara Membuat Tampilan Label Cloud Berwarna di Blog, Label cloud ternyata bisa dimodif sesuai keinginan kita, contohnya pada postingan kali ini, label atau kategori blog dibuat berwarna. tentunya akan menambah cantik blog kita. kurang lebihnya seperti gambar dibawah ini:

Jika sobat tertarik dengan Cara Membuat Tampilan Label Cloud Berwarna di Blog. langsung saja ikuti tutorial dibawah ini:

Cara 1 Cara Membuat Tampilan Label Cloud Berwarna di Blog

1. Login ke akun blogger
2. Pilih "Template"
3. Klik "Edit HTML", jangan lupa aktifkan "Expand Template Widget"
4. Cari kode ]]></b:skin>  atau cukup  ]]> , gunakan Ctrl F biar gampang
5. Copy kode berikut dan pastekan SEBELUM kode ]]></b:skin>

/*-----Labels Cloud Styled widget by proBlogiz.blogspot.com----*/ .label-size{ display: inline-block; padding: 0px 10px; height: 29px; line-height:29px; border-radius: 5px; font-weight:bold; font-size:12px; text-decoration:none; } .label-size{ border: 1px solid #769e42; box-shadow: inset 0 1px 0 #c5e59c ; background-color: #9ed35a; text-shadow: 0px 1px 1px #6ea23b; color: #fff; background-image: linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -o-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -moz-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -webkit-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -ms-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%); } .label-size:hover{ background-color: #b7fa66; background-image: linear-gradient(top, #b7fa66 0%, #7ec940 100%); background-image: -o-linear-gradient(top, #b7fa66 0%, #7ec940 100%); background-image: -moz-linear-gradient(top, #b7fa66 0%, #7ec940 100%); background-image: -webkit-linear-gradient(top, #b7fa66 0%, #7ec940 100%); background-image: -ms-linear-gradient(top, #b7fa66 0%, #7ec940 100%); } .label-size:active{ background-image: linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -o-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -moz-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -webkit-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -ms-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%); } .label-size{ display:inline-block; border-radius: 5px 0 0 5px; border-right-width:0; position:relative; z-index:5; margin-right: 20px; margin-bottom: 10px; } .label-size:after{ content: " "; width: 22px; height: 22px; line-height: 18px; font-size:25px; border-top: 1px solid #769e42; border-right: 1px solid #769e42; box-shadow: inset 0 1px 0 #c5e59c ; background-color: #9ed35a; text-shadow: 0px 1px 1px #7eac46; border-radius: 3px 7px 3px 0; color: #fff; background-image: linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -o-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -moz-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -webkit-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -ms-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); position:absolute; top: 3px; right: -12px; z-index:-3; -webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */ -moz-transform: rotate(45deg); /* FF3.5+ */ -ms-transform: rotate(45deg); /* IE9 */ -o-transform: rotate(45deg); /* Opera 10.5 */ transform: rotate(45deg); filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6?IE9 */ M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand'); zoom: 1; } .label-size:hover:after{ background-color: #b7fa66; background-image: linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%); background-image: -o-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%); background-image: -moz-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%); background-image: -webkit-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%); background-image: -ms-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%); } .label-size:active:after{ background-image: linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -o-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -moz-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -webkit-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -ms-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); } .label-size:before{ content: " "; height:5px; width:5px; display:block; position:absolute; right:-3px; top:11px; background-color: #fcfdf5; border: 1px solid #83ab52; border-radius:5px; box-shadow: 0 1px 0 #b2ddd83; } .label-size span{ padding:2px 5px; border: 1px solid #9e5c26; border-radius: 5px; box-shadow: inset 0 1px 0 #f5bf8c; background-color: #ed943f; text-shadow: 0px 1px 1px #000; margin-left: 10px; background-image: linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%); background-image: -o-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%); background-image: -moz-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%); background-image: -webkit-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%); background-image: -ms-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%); } #Label1 {height:210px !important;}

6. Jangan lupa sobat Save. Ok

Penting !!!!

Sebelum melakukan langkah diatas tambahkan/aktifkan dulu widget label standar di menu "tata letak" dan buatlah menjadi cloud. Karena berdasarkan pengalaman kode diatas tidak akan bekerja sesuai yg diinginkan sebelum mengaktifkan widget label standarnya blogspot.

Cara 2  Cara Membuat Tampilan Label Cloud Berwarna di Blog

1. Login ke akun blogger
2. Pilih "Template"
3. Klik "Edit HTML", jangan lupa aktifkan "Expand Template Widget"
4. Cari kode ]]></b:skin>  atau cukup  ]]> , gunakan Ctrl F biar gampang
5. Copy kode berikut dan pastekan SEBELUM kode ]]></b:skin>

#Label1 a{float: left;
    font-size: 11px!important;
    line-height: 1em!important;
    display: block;
    margin-right: 7px;
    margin-bottom: 7px;
    padding: 7px;
    background: #ffd964 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdqT_ZO1dTTzhmNGL7RLD1tKmA6Ody1XrycMWV3q8HOhizaNEgemcICrsis40ppGGqILxPJSeIiZ3tNu4a5Xkg-xlI08IDlERGO3dTixAYMF9TcsAHSJSnOXZBrk9PRcpq7EIxicGYuj8/s1600/yellow-btrix.png);
    border: 1px solid #F9B653;
    color: #9C6533!important;
    text-shadow: 1px 1px 0px rgba(255,255,255,0.4);
    box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.1);
    webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
#Label1 a:hover{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwQvNs2F4XXSDhw7EVqnUUOBgaLUdgwY4LFLpUFjXygR9wOwA6Lf2y2-dkkaHi00hBHz17FX8amaV_m8vx9V0Zw94nm5XYVLCsuAzxlRso-qzXRDup8T-SzsgLVGSYjfZ5X1IvWoaL-gI/s1600/yellow-btrix-hover.png);}
#Label1 a:active { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_Lzgb9Ww7GteBQIflaK3DOYfM5XnJMxp2MV2oolaEpdJV9v8wZF5o9l-1LZ4dZMPvaovLllkhouVvr7ni3JRwXANtyq2BUBuxnOgZZwB7Lds2l2nEPm9kBe-lf4Yn8c9FAyFpqrrjZZw/s1600/yellow-btrix-active.png); }

6. Jangan lupa sobat Save. Ok

Sekian dulu penjelasannya, semoga bermanfaat tutorial Cara Membuat Tampilan Label Cloud Berwarna di Blog. Good Luck

Read More

Cara Membuat Label Cloud keren dan cantik berwarna

Cara Membuat Label Cloud keren dan cantik - Kali ini Kang Zain share cara membuat Label Cloud keren dan cantik, modifikasi kali ini cukup simple dan tentunya sangat mudah. banyak cara untuk mempercantik label blog, diantaranya dengan menggunakan css agar kelihatan menarik.

Untuk membuat dan memodifikasi tampilan Label Cloud Blogger seperti gambar diatas, sobat hanya perlu menambah kode CSS pada template. Dibawah ini saya bagikan juga kode CSS berikut tutorial cara pemasanganya pada template blogger. 

Langsung saja untuk tutorialnya ikuti Cara Membuat Label Cloud keren dan cantik berwarna dibawah ini:

1. Masuk Blogger Dasboard > Template > Edit HTML > Lanjutkan
2. Backup template
3. Tekan Control + F > cari kode ]]></b:skin>
4. Letakkan kode dibawah ini tepat diatas kode  ]]></b:skin>

/*-----Labels Cloud Styled widget by proBlogiz.blogspot.com----*/ .label-size{ margin:0; padding:0; position:relative; } .label-size a , .label-size span{ float:left; height:24px; line-height:24px; position:relative;font-size:12px; margin-bottom: 9px; margin-left:20px; padding:0 10px 0 12px; background:#0089e0; color:#fff; text-decoration:none; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; border-top-right-radius:4px; } .label-size a:before , .label-size span::before{ content:""; float:left; position:absolute; top:0; left:-12px; width:0; height:0; border-color:transparent #0089e0 transparent transparent;border-style:solid; border-width:12px 12px 12px 0; } .label-size a:after , .label-size span::after{ content:""; position:absolute; top:10px; left:0; float:left; width:4px;height:4px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background:#fff; -moz-box-shadow:-1px -1px 2px #004977; -webkit-box-shadow:-1px -1px 2px #004977; box-shadow:-1px -1px 2px #004977; } .label-size a:hover , .label-size span::hover { background:#555;} .label-size a:hover:before , .label-size span::hover::before{border-color:transparent #555 transparent transparent;}

5. Jangan lupa Save Template dan pastikan label pada template sobat sudah dibuat label cloud. OK

Sekian dulu Cara Membuat Label Cloud keren dan cantik berwarna, semoga bermanfaat. Good Luck

Read More

Cara Membuat Label Cloud Keren dan Cantik diblog

Cara Membuat Label Cloud Keren dan Cantik - Setiap blog tentunya memiliki fasilitas Label widget, pada Blogger secara default ada 2 pilihan yaitu List dan Cloud. Widget Label Cloud yang akan jadi bahasan Desain Blog kali ini. Dengan sedikit tambahan kode CSS widget label type cloud ini bisa dipercantik tampilanya di blog. 

Kurang lebihnya seperti gambar dibawah ini sobat:

  
Label di blog adalah kata kunci yang mengkategorikan seluruh isi/konten blog . Label juga merupakan link-link singkat dan sederhana menuju postingan Anda. Pemasangan widget Tag, Label atau Kategori pada Blog/web bertujuan untuk memberikan navigasi yang mudah bagi pembaca blog. Pada Blogger sejak Google telah mengambil alih atau menyediakan layanan widget resminya melalui server Blogger sendiri, salah satunya adalah Page List and Label Cloud List dengan enable deisgner untuk membuat dynamic menus.

Intinya share kali ini untuk merubah widget label agar lebih cantik. dengan CSS dibawah ini akan mewarnai label sobat menjadi keren dan menarik. Berikut penjelasannya:

 ::Cara Membuat Label Cloud Keren dan Cantik diblog::

1. Masuk Blogger Dasboard > Template > Edit HTML > Lanjutkan
2. Backup template
3. Tekan Control + F > cari kode ]]></b:skin>
4. Jika sudak ketemu, Copy kode CSS dibawah ini dan Pastekan/letakkan kodenya tepat diatas kode ]]></b:skin>

 /*-----Labels Cloud Styled widget by proBlogiz.blogspot.com----*/ .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 #B20000; 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; }

5. Save Template

Keterangan !!!

Pastikan label pada blog sudah terpasang dan dibuat Cloud bukan List.

Read More

Cara Membuat Efek Bayangan Judul Dan Title Blog

*Cara Membuat Efek Bayangan Judul Dan Title Blog* - Bagaimana kabarnya sobat? tentunya baik2 saja kan,,, Apakah mash semangat ngeblog? tentunya sobat harus tetep semangat untuk mencapai cita2 yang sobat inginkan, Kang Zain kali ini ingin share Cara Membuat Efek Bayangan Judul Dan Title Blog agar sobat blogger tetap semangat. hehehe,.

Biasanya dsain template kita default judul dan title blog tidak memiliki efek bayangan atau yang sering disebut shadow, Efek Bayangan Judul Dan Title Blog ini tentunya salah satu cara mempercantik blog yang lebih tepatnya pada title blog, kemarin saya juga sudah share tentang mempercantik judul blog diantaranya:Dsain Title Judul Blog Keren dan Menarik, Cara Merubah Font Judul Blog, Tips Cara membuat Judul blog Berjalan

Tips Cara Membuat Efek Bayangan Judul Dan Title Blog cukup mudah kok sobat,, dan untungnya buat kita, blog menjadi tambah menarik dan cantik. Walaupun banyak cara yang dilakukan untuk mepercantik judul dan title blog, dengan menambahkan dan atau memodifikasi kode css tetapi yang saya terapkan disini lebih simple. ini tentunya berpengaruh pada pengunjung kita untuk tetap menikmati blog kita. Nah,, jika sobat ingin memasangnya ikuti tutorial dibawah ini:

Cara Membuat Efek Bayangan Judul Dan Title Blog

1. Login ke blogger anda.
2. Pada halaman dashbor klik menu Template.
3. Kemudian Backup Template, menjaga kemungkinan terjadi eror. Dengan cara Download Template Lengkap, lihat yang berada disamping kanan layar monitor anda Cadangkan/ Pulihkan.
4. Selesai mendownload Template, klik Edit HTML.
5. Untuk mempercepat pencarian gunakan Ctrl F dalam kotak edit html.
6. Apabila semua langkah diatas telah anda lakukan, cara pertama cari struktur kode yang mirip seperti dibawah ini, untuk merubah dan menambah efek bayangan pada judul blog.

.Header h1 {
font: $(header.font);
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

Untuk lebih jelasnya cari kode .Header h1 {, setelah menemukan kode yang mirip seperti diatas ganti dengan kode dibawah ini :

.Header h1 {
font: normal bold 50px Arial;
color: $(header.text.color);
text-shadow: 3px 3px 6px Green;
}

7. Langkah selanjutnya adalah menambah efek bayangan pada title blog, scroll kebawah dari kode diatas atau untuk mempermudah cari kode ( .Header .description { ), lihat contoh struktur pada template milik saya adalah sebagai berikut, silahkan sesuaikan dan lihat baik-baik pada editor template sobat.

.Header .description {
font-size: 130%;
}

Ganti dengan kode dibawah in, setelah menemukannya.

.Header .description {
font-size: 130%;
text-shadow: 3px 3px 6px Green;
}

9. Jika semua langkah telah selesai, klik Pritinjau untuk melihat hasilnya dan apabila tidak terjadi eror klik Simpan Template.

::::::Keterangan !!!::::::

? Untuk mengganti ukuran huruf rubah 50px sesuai selera.
? Jenis huruf rubah Arial menjadi, misalnya Courier.
? Untuk mengganti efek rubah pada 3px 3px 6px misalnya menjadi 2px 2px 4px dan warnanya Green bisa sobat ganti dengan warna yang lain, contoh dengan White; sehinggga bisa mendapatkan warna dan ketebalan efek shadow yang berbeda dari yang diatas.

Sekian dulu  Cara Membuat Efek Bayangan Judul Dan Title Blog, semoga bermanfaat. Good Luck.

Read More

Cara Memasang Widget JAM di Blog

Cara Memasang JAM di Blog - Widget jam merupakan widget yang sering dipakai oleh para blogger untuk menghias blog nya. karena widget jam ini selain untuk mempercantik blog juga bisa menambah nilai dari blog itu sendiri karena dengan memasang widget jam ini akan membuat setiap visitor dapat melihat waktu saat ini sehingga mereka bisa mengontrol aktivitas mereka. 

Banyak tutorial untuk mempercantik blog, seperti yang sudah kang zain share diantaranya; Cara Membuat Gambar Animasi Bergerak di Blog, Cara Membuat Link Berkedip Warna-Warni di Blog, Tips Cara Membuat Animasi Semut berjalan di blog, Trik Cara Membuat Tulisan Mengikuti Kursor di Blog. tentunya modivikasi blog akan menambah cantik blog kita dan pengunjung menjadi kagum akan kreatifitas kita.

Sebenarnya memasang widget jam cukup memberatkan blog apabila kita sudah memasang banyak widget di blog kita, tapi kalau baru sedikit widget juga tidak masalah. Apakah sobat tertarik untuk memasang widget jam tersebut? Bila tertarik untuk memasangnya, silahkan ikuti tutorial berikut:

1. Masuk ke situs penyedia jam, saya kasih contoh clocklink.com, silahkan masuk DISINI.
2. Setelah sobat sampai di situs tersebut, silahkan sobat lihat bagian sidebar sebelah kiri situs tersebut. Disitu ada beberapa pilihan aneka jenis jam yang bisa sobat pilih. Misal analog, digital, animal dan lain-lain. Silahkan sobat pilih sesuai keinginan sobat. seperti gambar dibawah ini:

3. Setelah sobat pilih, maka akan muncul aneka bentuk jam yang bisa dipilih.
4. Setelah sobat memilih salah satu jam, maka selanjutnya klik View HTML Tag di bawah gambar jam yang sobat suka. seperti gambar dibawah ini:

5. Maka akan terbuka halaman baru persetujuan, klik Accept untuk mendapatkan kodenya.
6. Atur kode area berdasarkan area di daerah sobat. seperti dibawah ini:

7. Setelah itu sobat akan mendapatkan kode html dari jam tersebut seperti pada gambar diatas, copy saja. ok.

CARA PASANG DI BLOG

Lantas, bagaimana cara memasang widget jam ini di blog kita? Berikut caranya:
1. Masuk dashbor blog sobat.
2. Klik Tata Letak.
3. Klik add gadget/tambah gadget di sidebar dimana sobat akan menempatkan jam tersebut.
4. Pilih HTML/Java Script.
5. Copast kode html jam tadi di kotak baru tersebut lalu klik simpan.
6. Silahkan lihat blog sobat.

Sekian dulu tutorial mengenai cara memasang widget jam di blog kita. Semoga bermanfaat untuk semua.

Read More

Cara membuat Judul Postingan ditengah

Cara membuat Judul Postingan ditengah - Cara Membuat agar Judul Post Rata Tengah - Ada cara mudah mengubah perataan judul postingan pada blog. judul postingan biasanya yang banyak kita jumpai adalah rata kiri, nah,,, jika sobat ingin mempercantik dengan mengubah judul postingan menjadi rata tengah ikuti tutorial Cara membuat Judul Postingan ditengah dibawah ini:

• Masuk ke akun blogger 
• Buka Design / Rancangan 
• Pilih Edit HTML 

Kemudian cari kode h3 ( Gunakan Ctrl + F ), pusatkan pencarian pada kode h3 tersebut. Jika ketemu, maka hasilnya akan lebih dari satu. Nah, sekarang pusatkan pencarian pada kode h3 yang disertai kode �� title�� dan kode ��Post�� (Karena setiap template berbeda-beda, saya tidak bisa mengatakan dengan gamblang bahwa kodenya harus ini, jadi berusahalah mencari manual), misal :

Misal kodenya seperti ini

h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

Untuk membuuat judul post menjadi rata tengah, tinggal tambahkan kode text-align:center; jadi seperti

h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
text-align:center;
}

• klik pratinjau dulu jangan lupa seve hasil jerih payah sobat.

Sumber

Read More

Cara Membuat Judul Sidebar di Tengah

Cara Membuat Judul Sidebar di Tengah - Ingin mempercantik blog? sobat bisa lihat Cara Mempercantik blog, Untuk yang baru memulai membuat blog/blogger pasti template pembawaan blogger biasanya judul sidebar atau title sidebar berada di pinggir atau tepi kiri. tips ini akan membantu sobat untuk membuat teks atau judul yang berada di sidebar, posisinya akan menjadi rata di tengah.

Nah,, kiranya penjelasan diatas sudah jelas, sekarang menuju ke tutorialnya, Cara Membuat Judul Sidebar di Tengah berikut ini:

1. Login ke Blogger
2. Pilih Template => Edit Html
3. Backup template dulu
4. Centang Expand Template Widget
5. Pake Ctrl+F/tekan tombol f3 untuk mencari kode h2{ atau .sidebar h2 {

6. Letakkan kode dibawah ini setelah kode h2{ atau .sidebar h2 {

 text-align: center;

Kurang lebihnya seperti dibawah ini :
h2{text-align: center; atau .sidebar h2 { text-align: center;

7. Sobat Preview dan save (tekan pratinjau dulu baru simpan template).

Maka hasilnya akan seperti dibawah ini:

Sekian dulu Cara Membuat Judul Sidebar di Tengah, semoga bermanfaat

Read More

Cara Membuat Widget Entri Populer Keren dan Terbaru

Cara Membuat Widget Entri Populer Keren dan Terbaru - Rasanya sangat menarik di dunia blogger jika memang dijadikan hoby,,, entri populer keren dan terbaru kali ini menampilkan nuansa baru dengan hasil yang simple dan tentunya menarik, kemarin postingan saya Cara Membuat Widget Entri Populer Keren dan Cantik juga menampilkan widget entri popular atau popular post dengan baground berwarna. namun artikel kali ini lebih pada simple dan menarik.

Nah,,, jika sobat blogger tertarik untuk Membuat Widget Entri Populer Keren dan Terbaru langsung saja menuju tutorialnya dibawah ini. cekidot !!!!!

1. Masuk ke akun Blogger Sobat.
2. Klik Rancangan > Edit HTML.
3. Klik Download Template Lengkap untuk berjaga-jaga kalau-kalau nanti terjadi kesalahan dalam pengeditan.
4. Silakan sobat cari kode ]]></b:skin> jika sudah ketemu lalu Letakkan kode berikut di bawah kode ]]></b:skin>

<style type='text/css'>
.PopularPosts .item-title{display:yes}
.PopularPosts ul li {
border-radius:50px 0px 0px 50px;
float: left;list-style: none outside none;margin: 1px !important;padding: 1px !important;
border: 1px solid #444;
overflow: hidden;
box-shadow: 0px 0px 1px #333;
font-style: normal;
font-weight:bold;
width: 100%;
height:60px;
border-radius:35px 5px 5px 35px;
}
.PopularPosts ul li:hover{
background: -moz-linear-gradient(top, #FFFFFF 1%, #5c5c5c 50%);
overflow: hidden;
color: #414141;
width: 100%;
height:60px;
border: 1px solid #ffffff;
box-shadow: 0px 0px 2px #ffffff;
}
.PopularPosts ul li img {
padding:1px ;
margin:1px;
margin-top:3px;
border-radius:35px 35px 35px 35px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
border: 1px solid #333;
height: 50px;width:50px;
overflow: hidden;
}
.PopularPosts ul li img:hover {
border:1px solid #ffffff;
border-radius:25px 25px 25px 25px;
background: -moz-linear-gradient(top, #FFFFFF 1%, #5c5c5c 50%);
box-shadow: 0px 0px 10px #ffffff;
}
</style>

6. Klik tombol Pratinjau ,jika berhasil kemudian Save

Tampilan blog menarik jadinya kan gak bosan. hehehe selamat mencoba Cara Membuat Widget Entri Populer Keren dan Terbaru semoga makin betah bloggerannya. hehehehe

Read More

Cara Membuat Widget Entri Populer Keren dan Cantik

Cara Membuat Widget Entri Populer Keren dan Cantik - Sejauhmana sobat Mempercantik blog ? banyak cara untuk modifikasi blog sobat, mungkin Cara Membuat Widget Entri Populer Keren dan Cantik ini bisa menjadi salah satu pilihan. entri popular kalau dari google tentunya biasa saja,, tanpa ada variasi  yang menarik dan keren. dengan tambahan script pada artikel ini sobat dapat Membuat Widget Entri Populer Keren dan Cantik.

Sobat bisa lihat juga postingan saya untuk mempercantik blog diantaranya : Cara Membuat Recent post bergambar Pada blog - Cara Membuat Gambar Animasi Bergerak di Blog - Cara Membuat Link Berkedip Warna-Warni di Blog - Tips Cara Membuat Animasi Semut berjalan di blog - Trik Cara Membuat Tulisan Mengikuti Kursor di Blog - Cara Membuat Salju dan Daun Berjatuhan Di Blog - Cara Membuat Efek Bintang Bertaburan Pada Cursor Blog itulah beberapa postingan saya bisa sobat gunakan untuk mempercantik blog. 

Nah,,, waktunya ke TKP Cara Membuat Widget Entri Populer Keren dan Cantik , untuk lebih lanjut nih,,,, baca tutorialnya :

1. Login ke blog anda
2. Klik Tata letak >> Tambah Gadget >> Entri Populer >> tampilkan entri populer hanya judulnya saja. Jangan menggunakan tubnail dan cuplikan. Atur jumlah judul posting yang akan dimunculkan.
3. Klik simpan
4. Selanjutnya klik Template
5. Klik Edit Html >>klik lanjutkan
6. Cari kode  ]]></b:skin> Jika sudah ketemu kopi paste kode css berikut ini tepat diatas kode ]]></b:skin>

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

7. Sobat Preview dahulu, setelah berhasil baru di SAVE

Sekian Dulu Sobat  Cara Membuat Widget Entri Populer Keren dan Cantik semoga bermanfaat. Good Luck Tunggu Update dari kang Zain. Ok

Read More

Cara Membuat Gambar Animasi Bergerak di Blog

Cara Membuat Gambar Animasi Bergerak di Blog - Banyak cara untuk membuat blog makin cantik dan keren, Membuat gambar animasi bergerak yang berada dipojok blog itu juga dapat dijadikan variasi atau modifikasi blog agar terlihat menarik. hehehe 

Software Mania PC setelah mencoba beberapa tutorial akhrnya menemukan Cara Membuat Gambar Animasi Bergerak di Blog dengan gambar animasi bergerak pada pojok blog ini (kalau belum dicopot). hehe sobat juga bisa gunakan ini untuk mempercantik blog. cekidot !!!!! Cara Membuat Gambar Animasi Bergerak di Blog :

Cara Memasang Gambar Animasi Bergerak di Blog cukup mudah :

   1. Masuk Akun Blogger Sobat
   2. Pilih Tata Letak & Klik Tambah Gadget
   3. Pilih Gadget HTML/Java Script
   4. Paste Kode gambar animasi yang sobat inginkan dibawah ini:
   5. Kalau sudah Klik SIMPAN

Gambar Animasi Bergerak Boneka

<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/228/th/22801.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Monyet Lompat

<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/539/th/53966.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Bola

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/712/th/71266.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Naruto

<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/656/th/65649.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Panda

<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/212/th/21215.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Spongebob

<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1028/th/102882.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Doraemon

<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1031/th/103123.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Senyum

<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/197/th/19769.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Monyet

<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/458/th/45845.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Babi

<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/110/th/11046.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Gajah lompat

Script:

<div style="position: fixed; top: 80px; left: 20px;width:120px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" title="Selamat Datang " /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Boring

Script :

<div style="position: fixed; top: 80px; left: 20px;width:80px;height:120px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002016B.gif" border="0" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Tuyul ketawa

Script:

<div style="position: fixed; bottom: 80px; right: 20px;width:82px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002031F.gif" border="0" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Boneka Joget

Script :

<div style="position: fixed; top: 80px; left: 20px;width:82px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002013F.gif" border="0" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Panda Main Bola

Script :

<div style="position: fixed; top: 80px; right: 30px;width:160px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002032D.gif" border="0" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Tuyul Baring

Script :

<div style="position: fixed; top: 80px; left: 20px;width:120px;height:100px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/0002031E.gif" title="Selamat Datang." /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Panda Biru

Script

<div style="position: fixed; top: 80px; left: 20px;width:100px;height:100px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/0002033D.gif" title="Selamat Datang" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Memanah

Script:

<div style="position: fixed; top: 80px; left: 10px;width:210px;height:120px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020236.gif" title="Selamat Datang" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Bunga

Script :

<div style="position: fixed; bottom: 80px; left: 10px;width:100px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020322.gif" title="Selamat Datang." /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Anjing Laut

Script:

<div style="position: fixed; bottom: 80px; left: 10px;width:110px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203B5.gif" title="Selamat Datang" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Lumba-Lumba

Script :

<div style="position: fixed; top: 80px; left: 10px;width:110px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BA.gif" title="Selamat Datang" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Kucing Tidur

Script :

<div style="position: fixed; bottom: 80px; left: 10px;width:110px;height:140px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203C0.gif" title="Selamat Datang" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Kelinci

Script :

<div style="position: fixed; bottom: 80px; left: 10px;width:125px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203A0.gif" title="Selamat Datang." /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Dragon

Script:

<div style="position: fixed; top: 80px; right: 10px;width:150px;height:130px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020478.gif" title="Selamat Datang" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Ikan

Script :

<div style="position: fixed; bottom: 80px; left: 10px;width:100px;height:130px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020479.gif" title="Selamat Datang" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Pinguin

Script :

<div style="position: fixed; bottom: 80px; left: 10px;width:110px;height:130px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020484.gif" title="Selamat Datang." /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Gambar Animasi Bergerak Helikopter

Script :

<div style="position: fixed; bottom: 80px; left: 10px;width:110px;height:130px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="Selamat Datang" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

Sampai disini Cara Membuat Gambar Animasi Bergerak di Blog - bagaimana sudah banyak pilihan? tinggal pasang dah,,,, semoga bermanfaat. salam blogger.

Read More