Saluran teknik: 2013

Friday, December 20, 2013

Daftar Situs Penyedia Template Blog Gratis

Trik Cara Mengganti atau Merubah Template Bawaan Blogspot agar lebih seo friendly

Di Internet ada begitu banyak situs yang menyediakan template blog yang bisa anda download secara gratis , untuk mendapatkannya anda dapat mengunjungi link berikut ini:

http://www.zoomtemplate.com/

http://btemplates.com/

http://bloggertemplateplace.com/

http://blogtemplate4u.com/

http://www.bloggertemplates.org/

http://www.freebloggertemplate.info/

http://besttheme.net/

http://www.bloggertemplatesfree.com/

http://www.finalsense.com/

Cara Memasang Visitor di Blogger

1. Kunjungi situs ini dan Register terlebih dahulu.

2. Setting Flag Counternya.

3. Setelah selesai setting desainnya sekarang klik "GET YOUR FLAG COUNTER"

Copy script yang muncul

4. Kemudian kini kawan GM LogIN ke Bloggernya

5. Pilih Tata Letak lalu Tambah Gadget

6. Cari Gadget Add HTML Pastekan kode yang tadi di Copy

7. Simpan

Cara Mengganti Icon Gambar Pada Address Blogger

Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon kecil pada address bar (kotak untuk mengetikkan alamat web) . jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini :

lalu dibarengi dengan alamat blognya.

Bagi anda yang tidak puas dengan icon/gambar tersebut, anda bisa menggantinya dengan gambar sesuai dengan keinginanmu. caranya sangat mudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat).

kalau belum bisa membuat gambarnya ikuti langkah-langkah berikut ini :

1. Pertama buatlah sebuah gambar yang akan di jadikan sebagai favicon

2. Setelah itu anda harus mengubah gambar tersebut kedalam bentuk gambar icon. Untuk hal tersebut, anda bisa menggunakan tool Favicon Generator, silahkan kunjungi situs

http://www.favicongenerator.com atau
http://www.favicon.co.uk
Anda dapat memilih ukuran favicon (16x16, 32x32, 48x48, 64x64) atau
http://favicon-generator.org
atau
http://www.favicon.cc
Anda dapat membuat favicon sendiri sesuai kreasi Anda

3. Klik pada tombol Browse...

4. Masukan gambar yang tadi dibuat untuk di ubah menjadi format icon

5. Klik pada tombol Generate Favicon.

6. Setelah proses selesai, klik pada Click Here to Download your favicon.

7. Save ke komputer anda.

Setelah itu .....
masuk ke "Tata Letak --> Edit HTML" terus tempatkan script berikut sebelum kode

</head>

<link href='http://img98.imageshack.us/img98/9617/image3cr0.gif' rel='SHORTCUT ICON'/>

atau bisa juga seperti kode dibawah ini :

<link rel="shortcut icon" href="http://img98.imageshack.us/img98/9617/image3cr0.gif"/>

Ganti huruf yang berwarna Hijau dengan lokasi gambar dimana kamu menyimpan gambar tersebut yang kita upload di tempat hosting gambar.
contohnya kamu mengupload gambar kamu di photobucket dan juga di imageshack sebagai contoh kamu meng-upload di Album Picasa caranya seperti di bawah ini :

Login ke picasa dengan account google di http://picasaweb.google.com
Tekan tombol I accept.
Jika anda memiliki software picasa yang sudah terinstall pada PC, anda dapat meng-uploadnya dengan mudah. Tekan tombol launch picasa dan software pun akan berjalan. Namun pada kesempatan kali ini, kita gunakan cara tradisional yaitu meng-upload gambar melalui browser.
Setelah anda menekan tombol I accept, silahkan dilanjutkan dengan klik tombol upload.
Isikan form title, date, dan seterusnya. jika selesai tekan tombol continue.
Tekan tombol browse dan arahkan pada file yang akan anda upload
Tekan tombol start upload untuk menguploadnya ke dalam server picasa
Setelah selesai, anda akan menjumpai tampilan thumbnail gambar tersebut. Klik gambar tersebut untuk melihatnya secara full
Klik kanan gambar tersebut dan pilih properties.
Anda akan mendapatkan URL gambar yang kurang lebih seperti ini http://lh6.ggpht. com/_4r8ISY........................oTZz4tK4/gambar-header.gif (hanya contoh alamat gambar).
Kembali lah pada situs blogger.com dan masuklah pada tab layout * Edit HTML
Link gambar yang bertuliskan http://img98.imageshack.us/img98/9617/image3cr0.gif anda ganti dengan link yang baru yaitu http://lh6.ggpht. com/_4r8ISY........................oTZz4tK4/gambar-header.gif (contoh alamat gambar).
Lakukan hal yang sama untuk gambar2 yang lain

atau kalau kamu tidak mau pusing dibawah ini ada beberapa contoh icon/gambar beserta dengan linknya.

http://img87.imageshack.us/img87/5862/image1an1.gif

http://img110.imageshack.us/img110/6218/image2ie0.gif

http://img98.imageshack.us/img98/9617/image3cr0.gif

http://img134.imageshack.us/img134/633/image4hx4.gif

http://img412.imageshack.us/img412/3808/image11pc0.gif

http://img100.imageshack.us/img100/4658/image12du2.gif

http://img132.imageshack.us/img132/4733/image13lj1.gif

http://img145.imageshack.us/img145/7793/image14zg9.gif

http://img412.imageshack.us/img412/4403/image15jc7.gif

http://img264.imageshack.us/img264/7575/image16kn8.gif

http://img139.imageshack.us/img139/83/image5oa7.gif

http://img509.imageshack.us/img509/6449/image6fu0.gif

http://img507.imageshack.us/img507/5774/image8wn8.gif

http://img150.imageshack.us/img150/5784/image9qo1.gif

Floating Social Bookmark dengan Efek Easing

Dengan penambahan jquery, jika Anda meletakkan cursor pada salah satu icon social bookmark, dia akan keluar pelan-pelan, lebih lembut seperti putri Solo yang baru keluar dari keraton, itu karena efek easing yang ada pada jquery-ui.min. Di samping efek easing yang saya tambahkan pada widget ini, juga jenis social media yang saya pasang lebih banyak. Pada template Johny Ribet atau Pakdhe Johny hanya terdapat 4 jenis, untuk widget kali ini saya menambahkan sosial media Pinterest dan Youtube agar lebih lengkap. Berikut ini langkah-langkah pembuatannya :

Login ke Blogger
Masuk ke Template >> Edit HTML (centang expand widget templates)
Letakkan kode CSS di bawah ini diatas ]]></b:skin> :

.social-buttons {
    position: fixed;
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #C4302B;
}
.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}
Berikutnya penambahan jquery dan javascript, masih di Edit HTML letakkan kode berikut sebelum </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
    $(window).load(function(){
        $('.social-buttons .social-icon').mouseenter(function(){
            $(this).stop();
            $(this).animate({width:'160'}, 500, 'easeOutBounce',function(){});
        });
        $('.social-buttons .social-icon').mouseleave(function(){
            $(this).stop();
            $(this).animate({width:'43'}, 500, 'easeOutBounce',function(){});
        });
    });
</script>

Untuk jquery library warna biru diatas, jika pada template yang Anda gunakan sudah terpasang, ditinggalkan saja.
Selanjutnya memanggil widget tersebut, letakkan kode HTML di bawah ini sebelum </body> :

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>

Ganti tulisan warna biru diatas, dengan ID Anda masing-masing jangan sampai keliru dengan ID tetangga.
Terakhir, Save Templates

Cara Mengganti Header Di Blogspot

Pertama kali orang melihat blog, mayoritas mereka melihat header blog tersebut.. Kesan pertama terhadap blog yang mereka kunjungi adalah bagaimana header blog tersebut mencerminkan isi atau konten dari keseluruhan blog. Untuk blogspot blog, tampilan header (pakai gambar atau hanya tulisan saja) biasanya tergantung dari template yang kita gunakan. Ada kalanya, format keseluruhan template blogspot sudah sesuai dengan keinginan kita, namun gambar headernya tidak cocok dengan isi blog kita. Jika demikian kasusnya, kita perlu mengganti header blog agar sesuai dengan konten.

Bagaimana mengganti header blog blogspot? Untuk mengganti header blogspot, ada beberapa cara yang bisa kita lakukan. Cara termudah adalah dengan melalui pengaturan add and arrange page element (tergantung template yang digunakan. sebagian besar template blogspot mendukung penambahan gambar di header lewat menu ini). Untuk mengganti header blogspot dengan cara ini, login ke dashboard blogger.

Masuk ke tab Layout. Pada kotak Header (sesuai judul blog anda) klik Edit.

Pada jendela baru yang muncul, klik Browse untuk mencari gambar yang akan digunakan sebagai header. Sebaiknya sebelum melakukan ini, kita harus menyediakan image yang akan kita pakai sebagai header, dengan ukuran sesuai ukuran header (jika tidak tahu ukuran headernya, beri tanda centang pada Shrink to fit dimana ukuran gambar akan disesuaikan dengan ukuran header). Pilih behind title and description jika gambar yang anda masukkan tidak mengandung teks judul, karena ini berarti judul dan deskripsi blog akan ditampilkan. Sebaliknya, jika anda membuat gambar header komplit dengan tulisan judul dan deskripsinya, pilih instead of title and description yang mana pilihan ini akan menyembunyikan judul dan deskripsi. Klik Save. Kini blog anda sudah mempunyai header yang sesuai dengan keinginan anda (tentunya disesuaikan dengan tema blog).

Cara lain untuk mengganti header blogspot adalah melalui pengaturan kode CSS. Caranya, dari dashboar blogger, masuk ke blog yang akan kita ganti headernya. Masuk ke tab Layout > Edit HTML. Pastikan anda selalu membackup template sebelum mengubahnya (caranya dengan klik Download full template) agar sewaktu-waktu ada kejadian yang tidak kita harapkan, kita bisa kembalikan lagi template seperti semula.

Pada menu Edit HTML, beri centang Expand Widget Template. Tekan tombol Ctrl + F bersamaan untuk memanggil fungsi pencarian. Ketikkan header pada kolom Find untuk mencari kode css header. Anda juga bisa menscroll mouse untuk melakukan pencarian ini, tapi tidak praktis.Cara kedua ini tidaklah sulit, namun jika Anda tidak ingin pusing-pusing membuat gambar sendiri, Anda bisa memanfaatkan website penyedia gambar yang gratis, seperti: freewebpageheaders.com, smashingmagazine.com dan lain.

Adapun cara download gambar di freewebpageheaders.com adalah sebagai berikut:

Klik Daftar Sekarang untuk membuka halaman situsnya;
Klik Register untuk mendaftar.
Klik Agree. Kemudian Anda akan diminta untuk mengisi Registration form. Form ini terdiri dari 2 bagian yaitu : Required info dan Optional info. Required info merupakan info yang harus Anda berikan untuk pendaftaran sedangkan Optional info merupakan info yang digunakan untuk menampilkan data Anda kepada pengunjung saat Anda login. Jika Anda merasa tidak perlu maka diabaikan saja untuk bagian ini.
Klik Submit Registration Form, lalu Anda akan mendapat pesan supaya membuka email untuk mengaktifkan account Anda.
Buka email yang Anda gunakan untuk mendaftar. Klik pada link yang diberikan untuk mengakftifkan account Anda.
Jika sudah, Anda akan mendapat pesan bahwa account Anda sudah diaktifkan.
Klik Return to the front page of free Web Page Headers.
Lalu klik Login untuk mendowload gambar header.
Pilih kategori header yang Anda inginkan. Jika Anda sudah menemukan gambar yang cocok. Klik pada gambar tersebut lalu klik Download.
Kemudian gambarnya akan terbuka pada halaman baru. Klik kanan pada gambar lalu pilih Save Image As lalu tekan Save.
Selesai. Sekarang gambar sudah tersimpan di komputer Anda.

Langkah selanjutnya Cara Mengganti Header Blog pada Blogger, yang pertama dilakukan yaitu mencari tahu berapa ukuran header pada template Anda, caranya:

Klik Rancangan->Edit HTML.
Cari kode #header-wrapper. Supaya mudah untuk mencarinya, tekan Ctrl+F ketikkan #header-wrapper lalu tekan Next.
Jika sudah ketemu biasanya ada kode width dan height disekitarnya. Misalnya seperti ini:

#header-wrapper {
width:975px;
height:130px;
margin:0px;
padding:0px;
text-align:left;
background:#FFF url("http://i977.photobucket.com/albums/ae258/SPN_photo/HeaderMaskolis-New.jpg") no-repeat right ;
}

Keterangan:
width:975px; adalah panjang header
height:130px;adalah lebar header.

Agar gambar Anda sesuai dengan ukuran header template, maka gambar Anda harus diresize menjadi 975x130 pixel. Untuk merizenya Anda bisa menggunakan program pengolah gambar seperti Ms Paint, ACD See, Photoshop atau lainnya.
Setelah selesai. Masuk ke Dashboard Blogger Anda lagi, pilih Rancangan => Page Elements.
Klik Edit pada bagian Header.
Kemudian akan muncul halaman baru, pilih Browse from your computer, jika gambarnya disimpan dikomputer atau Browse from the web, jika gambarnya disimpan di image hosting seperti: Imageshack, Photobucket atau Geocities.
Pada bagian Placement. Pilih Behind title and description, jika Anda ingin manampilkan gambar dibelakang judul dan deskripsi blog atau pilih Instead of title and description, jika Anda ingin menyembunyikan judul dan deskripsi blog.
Lalu klik Save, selesai.

CATATAN:

Tidak semua template bisa dipasang gambar, karena ada yang hanya menggunakan teks saja oleh karena itu pilihlah template yang sesuai kebutuhan.
Jika cara di atas sulit diterapkan pada blog Anda, isi kotak komentar yang ada di bawah siapa tau saya bisa bantu.

Cara Membuat Banner Header Blog Gratis

Anda ingin memsangkan sebuh banner animasi yang keren diwebsite/blog anda? banner ini gratis dan tidak berbayar. Mari kita ikuti langkah-langkah membuat banner animasi gratis :
1. Kunjungi flashvortex.com
2. Kemudian Klik Menu Banner

3. Maka akan muncul berbagai pilihan banner yang cocok untuk dipasang di header, anda pilih bannernya dan klik EDIT THIS

4. Masukan Text yang ingin anda tayangkan di banner

5. Dan masukkan URL blog atau website anda serta klik GENERATE ANIMATION

Keterangan : Text Size ganti dengan ukuran huruf yang anda inginkan

6. Kemudian , copy kode yang tersedia

7. Paste kode tersebut di widget HTML posisi header blog atau website anda.contoh hasilnya :