Cara Mempercepat Loading Blog With CSS External

Funtastic blogger akan berbagi tips tentang cara mempercepat loading blog with css external, Mengingat kecepatan akses blog sangatlah penting dan berpengaruh besar untuk sebuah web blog, saya rasa trik ini sangatlah penting untuk dicoba.

Karena itulah saya berusaha memaksimalkan, semaksimal mungkin mengompres dan mengurangi berat blog saya ini. kali ini saya akan membahas Cara Agar Loading blog Lebih Cepat Dengan CSS External , Maksudnya adalah bagaimana kita menyimpan CSS (Cascading Style Sheet) ke tempat hosting agar blog sedikit ringan karena file CSS terpisah dengan file XML-nya.

Kecepatan loading blog, selain dipengaruhi oleh kecepatan koneksi, juga dipengaruhi oleh berat/ ringannya blog itu sendiri. ada banyak cara untuk mengurangi berat blog yaitu dengan mengurangi jumlah widget/ pernak-pernik blog yang tidak begitu penting, Dengan cara mengkompres kode baik CSS maupun HTML, ataupun juga bisa dengan membuat CSS External, yang diupload/disimpan di webhosting.

Dan yang akan saya bahas kali ini adalah membuat CSS External.
1. Seperti biasa, Login ke akun blogger sobat

2. Masuk Rancangan/Layout

3. Pilih Edit HTML

4. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)

5. Beri tanda centang "Expand Template Widget" ataupun tidak, tidak masalah.

Perhatikan kode CSS dibawah ini, kode tersebut terletak diantara kode

<b:skin><![CDATA[/* sampai dengan sebelum kode ]]></b:skin>

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Tyrexcom
Date:     26 Feb 2012
Updated by: blogger Team
----------------------------------------------- */
#navbar-iframe{
display:none !important}
body{
background:#f5fffa;
width:980px;
color:#333;
font-size:12px;
font-family:Arial,Tahoma,Verdana;
margin:0 auto 0;
padding:0}
Potong atau Cut semua kode CSS-nya mulai dari sini sampai dengan diatas atau sebelum kode:
]]></b:skin>

6. Simpan di Notepad dengan ekstensi.css caranya: klik File, pilih Save As, beri nama file tersebut misal: Blogku.css lalu Save.

7. nah sampai disini kita sudah mempunyai file.css. Selanjutnya kita tinggal mengUpload/menyimpannya di WebHosting, misal yang saya pakai yaitu Google Site.

8. Jika sudah meng-Uploadnya, misal:

http://sites.google.com/site/tyrexcom/JavaScript/blogku.css

Penulisan untuk scriptnya menjadi seperti dibawah ini:

<link href='http://sites.google.com/site/tyrexcom/JavaScript/blogku.css' rel='StyleSheet' type='text/css'/>

Letakan kode script diatas di antara kode: ]]></b:skin> dan </head> , lihat contohnya seperti ini :

]]></b:skin>
<link href='http://sites.google.com/site/tyrexcom/JavaScript/blogku.css' rel='StyleSheet' type='text/css'/>
</head>

9. Sebelum menyimpannya, harap di Preview terlebih dahulu, bila tampilan blog tetap pada aslinya, berarti sobat berhasil mempraktekannya. dan terakhir Save Template Sobat. Sippppp Selesaiiiii.

Catatan:


Setelah mengetahui cara diatas, pasti kita akan direpotkan saat kita akan menambah kode CSS pada template blog kita, yah... mau tidak mau kita harus mengedit dan meng-Upload kembali ke webhosting sobat.

Saya rasa cukup sekian dari saya, bila sobat blogger ada yang mengalammi kesulitan, silahkan berkomentarlah disini, dan semoga saja, saya bisa membantu

 

Sumber:tyrexcom.blogspot.com

Read more »

Cara menyimpan javascript ke komputer

saya akan membahas artikel tentang Cara Menyimpan Javascrip Ke Komputer sebelumnya saya telah membuat artikel mengenai Cara Menyimpan file CSS ke Komputer.

Javascript adalah bila saya katakana adalah bahasa pemrograman khusus untuk membuat sebuah web menjadi lebih hidep pembuatanya sendiri memakan waktu lama serta harus memiliki kemampuan khusus untuk membuatnya sama seprti halnya css javascrip juga adalah coding atau code yang bisasa digunakan dalam pemrograman web namun taukah anda cara menyimpa code ini biasanya javascrip ini isinya panjang sekali dan biasanya susah untuk dimengarti unuk contoh file yang sudah jadi anda bias Download disini namun pada kali ini saya akan menjelaskan bagaimana cara menyimpan file java ini dalam html ataupun dalam XML dimasukan kedalam computer untuk nantinya agar dapat di uploads ke google code mari kita lihat saja bagimana tutorial nya namun anda harus mengetahui atau dapat membedakan mana yang dimaksud dengan kode java scrip dan kode HTML dalam artikel yg berjudul  Cara Menyimpan Javascrip Ke Komputer.

Tutorial Cara Menyimpan Javascrip Ke Komputer

• Pertama anda masuk codding anda atu XML atau HTML anda untuk mendapatknya
• Kemudian anda cari code <script type='text/javascript'> untuk awalan dan penutup </scrip> untuk akhiran jadi kode Javascrip itu terletak antara code di atas.

Contoh code Javascrip bias lihat potongan code berikut

<script language='javascript'>
function Barva(koda)
{
document.getElementById(&quot;vzorec&quot;).bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById(&quot;vzorec2&quot;).bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}
</script>

• Diatas adalah code javascrip tapi bagaimana menyimpanyanya jadi kalian harus copy code di atas 
• Anda copy code d antara <script language='javascript'> …. Code javascrip ….. </script>
• Anda copy kemudian anda buka Notepad di computer anda lalu pastekan kedalamnya
• Kemudian anda save dengan extensi filenya dengan .js contoh Javascripcontoh.JS

Mungkin cukup saja artikel saya ini semoga bermanfaat

 

Sumber: thomijasir.blogspot.com

Read more »

Cara Memanggil File CSS dari Google Code

Sekarang saya akan membahas artikel tentang Cara Memanggil File CSS dari Google Code 

Cara memanggil file dari google code dalam bentuk file css yang dapat di panggil tentu saja bisa karena google code ini memberikan kemudahan bagi penggunanya cara ini bisa digunakan untuk mempercepat loading suatu web atau blog.

Tutorial Cara Memanggil File CSS dari Google Code

1. Pertama anda masuk google code
2. Pilih file CSS  yang akan di panggil 
3. Klik kemudian anda akan masuk control file kemudian
4. Anda klik kanan dan Copy link untuk memudah kan lihat gambar berikut ini 
5. Setelah itu anda save url nya jangan sampai lupa
6. Kemudian buka halaman HTML sobat kemudian atau buka halaman xml
7. Kemudian anda copy code berikut ini di atas tag </head> atau <body> atau  <b:skin>

<link href="Your URL CSS" rel="stylesheet" type="text/css">

• kemudian anda paste kan atau masukan URL yang telah di dapat kedalam Your Url Here
• setelah itu save dan seharusnya CSS sudah dapat dipanggil secara normal 

Demikian Cara Memanggil File CSS dari Google Code.

Semoga bermanfaat.

 

Sumber: thomijasir.blogspot.com

Read more »

Cara Menyimpan file CSS blog

sekarang saya akan membahas artikel tentang Cara Menyimpan file CSS ke Komputer .

Cara Menyimpan CSS apa yang terdengar di benak anda tentang CSS ini mungkin disini saya akan menjelaskan sedikit mengenai CSS dan fungsinya sedikit tidak terlalu mendetai CSS menurut saya sendiri adalah suatu codding yang digunakan untuk bagian body atau badan HTML dan bisanya berupa style bagian layout dan bagian bagian seprti menubar dan yang lainya itu yang dinamakan CSS biasanya terdapat pada halaman html atau bias juga dapat di temukan di bagian XML dan baisanya berupa codding yang panjang dan beberapa baris namun semua itu dapat disingkat menjadi 1 baris namun saya akan menerangkan bagaimana cara menyimpannya dan cara ini sangat mudah ok saya akan langsung saja menjelaskan caranya berikut ini.

Tutorial Menyimpan File CSS

• Pertama anda masuk ke aacount blogger
• Masuk bagain HTML
• Kemudian pilih edit HTML
• Dan cari kode CSS blog sobat

Kode css ini bisanya terletak sebelum ]]></b:skin> dan biasanya panjang memiliki beberapa baris

Contoh kode CSS berikut di bawah ini :

#menubar{width:770px;height:32px;background:#de360f;float:center;margin-bottom:10px;}

#menubar ul{float:left;margin:0;padding:0;}

#menubar li{float:left;list-style:none;margin:0;padding:0;}

#menubar li a, #menubar li a:link{border-right:1px solid #F0512D;float:left;padding:8px 12px;color:#fff;text-decoration:none;font-size:13px;font-weight:bold;}

#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {color:#ffa500;text-decoration:underline;}

#menubar li li a, #menubar li li a:link, #menubar li li a:visited{font-size: 12px;background: #de360f;color: #fff;text-decoration:none;width: 150px;padding: 0px 10px;line-height:30px;}

#menubar li li a:hover, #menubar li li a:active {background: #F0512D;color: #ffa500;}

#menubar li ul{z-index:9999;position:absolute;left:-999em;height:auto;width:170px;margin-top:32px;border:1px solid ##F0512D;}

#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{left:auto}

#menubar li:hover, #menubar li.sfhover{position:static}

• Diatas adalah contoh kode css menubar
• Kemudian anda copy code CSS tersebut
• Kemudian buka notepad di computer kamu
• Copy code css tersebut kedalam note pad dan save
• Pada bagian save ganti extensinya menjadi .css jangan .txt
• Dan save pada directory hardisk mu
• Dan file siap untuk di upload ke Hosting atau google code

Mungkin cukup saja artikel yang dapat saya sampaikan ini semoga bermanfaat

 

Sumber: thomijasir.blogspot.com

Read more »

Cara Membuat Widget Photo Slide Show di halaman Postingan

Sebuah halaman blog yang tidak ada sentuhan foto atau gambar akan terasa membosankan. Jika sudah bosan, maka pengunjung blog tidak akan lama bertahan. Bukan hanya sebagai pernak-pernik, sebuah foto juga bisa memberikan kesan tersendiri. Orang akan lebih hafal dengan gambar daripada tulisan.

Sekarang, kita akan belajar untuk membuat slide show, yaitu foto-foto yang ditampilkan secara bergantian dengan otomatis. Slide show bisa digunakan untuk menampilkan banyak foto tanpa menyita banyak space. Karena foto akan diputar layaknya sebuah video, sehingga lebih menarik dan hemat tempat.

Slide show bisa digunakan untuk menampilkan foto liburan yang banyak, atau memajang foto-foto produk untuk toko online. Cara untuk membuat slide show ini sangat mudah, tidak perlu pintar photoshop atau flash. Kita tinggal menyiapkan foto yang sudah diupload (dihosting). Kita bisa memanfaatkan post blogger, Picasa, Photobucket, dan lain-lain.

Cara Mudah Membuat Slide Show Foto di Blog
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
   position: relative;
   width: 100%;
   height: 250px;
   overflow: hidden;
   margin:0 auto;
}
#content-slider img {
   display: block;
   width: 100%;
   height: 250px;
}
</style>
<div id="content-slider">
<img src="URL Foto 1" />
<img src="URL Foto 2" />
<img src="URL Foto 3" />
<img src="URL Foto 4" />
</div>

5. Ganti URL Foto 1 dengan URL foto yang sudah dihost (upload)
6. Kita bisa juga menyesuaikan tinggi foto (height) dan lebarnya.
7. Kita bisa menambahkan atau menampilkan foto lebih banyak lagi dengan menambahkan kode sama seperti <img src="URL Foto 4" /> dan seterusnya.
7. Simpan jika sudah selesai.

Demikian cara membuat widget photo slide show di halaman postingan.

Sumber: kurniasepta.blogspot.com

Read more »

Cara Mengindeks Blog/Site Di Yahoo Search Engine

Kawan- kawan blogger Indonesia yang saya banggakan, kali ini saya akan mengajak belajar bersama tentang  bagaimana cara submit blog ke yahoo. Dengan hal ini, yahoo search engine akan mengindeks blog kita. Hal ini juga bertujuan untuk menemukan error atau kesalahan di situs atau blog kita, halaman posting yang populer dan lain-lain.

Langkah Langkah submit blog ke yahoo

Langkah 1: Kunjungi Yahoo Site Explorer dan sign in dengan akun yahoo yang kamu miliki.

Langkah 2: Tambahkan blog milikmu (http://contoh.blogspot.com). Klik pada Add My Site.

Langkah 3: Proses Otentikasi situs / Authenticate dengan menambahkan meta tag pada blog atau situs.

Langkah 4: Sekarang tambahkan meta tag setelah (head tag) di blog. Kemudian klik Ready to Authenticate

Langkah 5: Sekarang klik pada tombol explore di belakang  nama blog kita. Kemudian  kita  akan melihat halaman seperti gambar di bawah ini. Kemudian klik “submit it for free “.

Langkah 6: Ada dua pilihan (a) Submit a website or webpage atau (b) submit site feed. Pertama memilih pilihan (a. Masukkan alamat blog kamu. Kemudian pilih opsi (b), dan masukkan masukkan alamat feed blog punyamu. Kawan – kawan blogger Indonesia dapat  melakukan submit url sebagai berikut:

1.atom.XML

2.rss.XML

3.feeds/comments/default

4.feeds/comments/default? Alt = rss

5.feeds/posts/default

6.feeds/posts/default? Alt = rss

Setelah beberapa hari, cobalah check blog kamu (http://namablogkamu.blogspot.com) di yahoo search engine. Mungkin blog milikmu akan terindeks apabila langkah di atas dilakukan dengan benar. Semoga Bermanfaat

Sumber: http://maiin-pintarblog.blogspot.com/2012/01/cara-mengindeks-blogsite-di-yahoo.html

Read more »

Cara Menampilkan Widget Hanya Di Halaman Tertentu

Cara Menampilkan Widget Hanya Di Halaman Tertentu - Kalian pernah melihat blog yang widgetnya gonta-ganti pada setiap halaman. Kalau pernah blog itu pasti memakai cara ini. Langsung saja kita simak kode-kode untuk menampilkan widget pada halaman yang diinginkan.
Berikut Kode Untuk Mengatur Menampilkan Widget Di Blog :

1. Menampilkan widget hanya di halaman depan saja (homepage)

<b:if cond='data:blog.url == data:blog.homepageUrl'>
......................................................
</b:if>

2. Menampilkan di semua halaman kecuali homepage.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
......................................................
</b:if>

3. Menampilkan widget hanya di halaman Archive saja.

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
......................................................
</b:if>

4. Menampilkan widget di semua halaman kecuali halaman archive.

<b:if cond='data:blog.pageType != &quot;archive&quot;'>
......................................................
</b:if>

5. Menampilkan widget hanya di halaman posting.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
......................................................
</b:if>

6. Menampilkan widget di semua halaman, kecuali halaman posting.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
......................................................
</b:if>

7. Menampilkan widget hanya di postingan tertentu saja.

<b:if cond='data:blog.pageType == &quot;alamat-postingan&quot;'>
......................................................
</b:if>

8. Menampilkan widget selain di postingan tertentu.

<b:if cond='data:blog.pageType != &quot;alamat-postingan&quot;'>
......................................................
</b:if>

9. Menampilkan widget hanya di halaman staticpages.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
......................................................
</b:if>

10. Menampilkan widget di semua halaman, kecuali halaman staticpages.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
......................................................
</b:if>

Catatan : Titik - titik di atas adalah kode widget yang harus di tempatkan.

---

Berikut Ini Cara Penerapan Kode Tersebut Pada Widget :

Kita ambil salah satu contoh, Misalkan sahabat lihat di blog saya ini ada widget dengan judul Translate pada sidebar dan kita akan membuat widget tersebut hanya tampil pada halaman beranda atau homepage saja, berikut caranya.

1. Silahkan login akun Blogger.com

2. Pilih menu Rancangan dan Pilih Edit/HTML
3. Setelah Itu Centang Expand Template Widget
4. Untuk menghindari terjadinya kesalahan silahkan Download Lengkap Template

5. Kemudian cari Translate gunakan Ctrl+f

6. Lalu kita cari dan perhatikan kode widget seperti ini :

<b:widget id='HTML9' locked='false' title='Translate' type='HTML'> <b:includable id='main'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/> </b:includable></b:widget>

7. Kode di atas adalah kode widget Translate apabila kita akan menampilkan widget Translate tersebut hanya di beranda atau hompage maka sisipkan kodenya dan akan menjadi seperti ini.

<b:widget id='HTML9' locked='false' title='Translate' type='HTML'> <b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/></b:if> </b:includable></b:widget>

Keterangan: Kode yang berwarna merah adalah kode yang membuat widget hanya muncul pada homepage di blog, kita bisa lihat pada kode No.1 di atas. Pastikan posisi kode dipasang sesuai dengan tempatnya.
Sekian postingan saya kali ini semoga bisa bermanfaat.

 

Sumber: http://blogmashanif.blogspot.com/2013/02/menampilkan-widget-halaman-tertentu.html

Read more »

Cara menampilkan widget hanya pada halaman awal

Setiap kita menambahkan widget pada blog, maka secara default akan tampil pada bagian homepage (halaman awal) dan tampil juga pada bagian halaman posting lainnya. Untuk memilih widget yang hanya akan tampil pada halaman utama atau homepage saja, perlu penambahan kode perintah supaya widget tersebut hanya muncul pada halaman utama atau homepage.

Kode perintah tersebut harus kita sisipkan pada bagian widget yang kita ingin menampilkan pada halaman utama atau homepage,berikut.

• Masuk ke akun blogger kemudian masuk menu Design - Edit HTML/Edit Template
• Ceklist pada expand template widget
• Sebelum melakukan penambahan didalam template, sebaiknya backup dulu template kalian, mendownload full template

Selanjutnya pilih widget yang akan kita munculkan pada bagian homepage saja, saya ambil contoh widget "Recent Comment" setelah ketemu sisipkan 2 baris kode sebagai perintah supaya hanya muncul pada halaman utama atau homepage saja.

Untuk jelasnya perhatikan baris kode widget recent comment, kode yang berwarna merah adalah kode untuk memunculkan widget supaya hanya muncul di homepage.

<b:widget id='HTML2' locked='false' title='recent comment' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:if> </b:includable> </b:widget>

Kemudian save template, sekarang widget hanya akan muncul pada halaman utama atau homepage, bila kita masuk ke salah satu halam post, widget tersebut tidak akan muncul.

Sumber: http://alfijadul.blogspot.com/2012/06/cara-menampilkan-widget-hanya-pada.html

Read more »