Cara Downloads Software Gratis

Berbagi Tips dan mengarahkan Downloads Software secara gratis

Home » Semua post berkategori Modifikasi Blog
Tampilkan postingan dengan label Modifikasi Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Modifikasi Blog. Tampilkan semua postingan
Kamis, 18 April 2013

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/AVvXsEiRn-lVnCom2wLjTpgBEDyqTn-Sj4bZvCHKXHPO83Paac7EyKZbgNV83htauL29r3jcbRFd31YR7c2RNpoucbieyytVOMi79YrErx_43qElUf8K8jpf_SQi_RoOJocssJ_JKDbc9RolcUk/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/AVvXsEjPuR8oe06rZBwtIRQKcX3dMKVmY_YKAUulov-naS0EVJ5cF7EOn_1ugSZeY0_ASssZaIv3uUN1CvG8AESzWZydOMCnym09Ul338TUsVRFDof3Nw9oztt-H-p_szI68iQUfRsny6y_NWxU/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/AVvXsEgsG9l-R2jpnO0E_XZxIqMrqCnxqWAeueanRd7Cvke8OBlMqb-hwqHhZCZ6iNtRaMcj8E4ZjafRW2I7xNZJW_9y-rBNrUxHVI9PyI9P8lxd1L6WvmmxsoQPefpNgFg07eLof1-m-He3G9Q/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::


blogger fc Modifikasi Blog

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/AVvXsEjWtsJYjsR8uuBg8k3avwvl2C2hIqv_hEMNsCNU2kCQIhdMSFum_2nghF896X0ofpCgUH2zhB8AZfc9OLntxWkVp8lho3pF2aIkYdbkhm-_hzeqZ14DLD5Mc6mcR90zLWwRL4FEEpgbrAw/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/AVvXsEhZD6aXTNG4oN9qEWxe7pKzgXPZY__FVpEnWEueAFZfi7-9iAxoCg9zM4QwBBwkTF591WFwME0XIduNMbzSPxUkxxFhL9_2VXXuh-X5d-3l5UI7l_vqGqMzxfYoImwbsD3o0wOnJ3-XhGw/s1600/yellow-btrix-hover.png);}
#Label1 a:active { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnnKs-odjrHIAY1v3x3GDhQy5P9NhyphenhyphenL2fN6a09iEZyUK_8ltZ76exMmiAHUGFnLsZS3XHMcKADE0U9aLIUEJmWrPRlRqNp6-dPmU2JBguzWa9oeIkVZGvRtzYzx_Ez46d9GtZCQdBn6YE/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
blogger fc Modifikasi Blog

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






blogger fc Modifikasi Blog

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.




blogger fc Modifikasi Blog
Rabu, 17 April 2013

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.


blogger fc Modifikasi Blog
Jumat, 12 April 2013

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.


blogger fc Modifikasi Blog
Selasa, 09 April 2013

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.

blogger fc Modifikasi Blog

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
blogger fc Modifikasi Blog
Langganan: Postingan (Atom)