DESIGN BLOG ALA ANAK TKJ

Cara Membuat Scroll di Blog

Cara membuat Scroll di blog untuk widget seperti Arsip Blog, populer posts, kategori/label, artikel terbaru dan lain-lain. Scroll berfungsi untuk mempersingkat tampilan dan juga menghemat tempat. Scroll juga membuat halaman blog menjadi lebih cepat untuk dibuka. Untuk lebih jelasnya silakan lihat gambar dibawah ini.

Dari gambar diatas, judul artikel yang terlihat hanya sebatas 4 judul dengan gambar, tapi ketika di scroll menggunakan mouse, maka akan terlihat artikel lainnya, dengan posisi dan tempat yang sama. Sehingga tidak memakan tempat yang banyak. Untuk cara membuatnya. Ikuti langkah-langkah dibawah ini.

Cara Membuat Scroll di Blog

1. Login ke Blogger

2. Dari halaman dasbor Pilih pengaturan Template.

3. Selanjutnya Klik Edit Html.

4. Dan Cari tulisan widget yang akan kita beri scroll. Misalnya widget dengan judul Populer Posts maka kita cari populer posts. Untuk memudahkan pencarian Tekan control F di keyboard dan masukan tulisan Populer Posts .

5. Jika sudah ketemu maka kode lengkapnya seperti dibawah ini.

<b:widget id='PopularPosts1' locked='false' title='Populer Posts' type='PopularPosts'>

6. Sekarang Copy PopularPosts1 ke Notepad dan tambahkan kode lengkap seperti dibawah ini di Notepad.

#PopularPosts1 .widget-content{

height:200px;

width:auto;

overflow:auto;

}

7. Selanjutnya cari kode ]]></b:skin>

8. Copy Kode diatas dan letakkan di Atas kode ]]></b:skin>

Contoh:

#PopularPosts1 .widget-content{

height:200px;

width:auto;

overflow:auto;

}

]]></b:skin>

Catatan: height:200px itu tinggi kotak scroll nya, silakan diganti jika kurang panjang. misalnya jadi height:400px; 

9. Terakhir Klik Preview untuk melihat hasilnya. Jika Populer posts sudah ada scroll nya baru dah di Save. Selesai. Semoga Bermanffat.

Catatan: Jika arsip blog yang ingin diberi sroll. Maka cari dulu tulisan arsip blog di edit html. klo sudah ketemu, copy kode SETELAH tulisan <b:widget id='  terus lanjutkan ke langkah 6 Seperti diatas. Untuk yang lain juga seperti itu caranya. Silakan dicoba.

MOGA BEMANFAAT ZOB DITUNGGU YA KUNJUNGAN BALIKNYA

DESIGN BLOG ALA ANAK TKJ

Cara Membuat Tulisan Bayangan Pada Judul Blog

Cara membuat tulisan bayangan pada judul blog. Sebenarnya tidak hanya dijudul blog yang bisa diberi tulisan bayangan, tapi semua tulisan yang ada di blog juga bisa kita beri tulisan bayangan. Tapi yang harus kita ketahui terlebih dahulu adalah kode html pada bagian-bagian blog, setelah ketemu dengan kodenya baru bisa kita beri tulisan bayangan.

Kali ini akan saya bagi cara membuat tulisan bayangan di judul blog dan juga deskripsi blog. Untuk contohnya bisa kalian lihat dibagian judul dan deskripsi blog ini atau gambar dibawah ini. Text bayangan yang saya gunakan itu hanya sedikit. Agar tidak berlebihan, tapi kalian bisa nanti menggunakan text bayangan sesuai dengan yang kalian inginkan. Untuk cara membuat tulisan bayangan di blog.

Ikuti langkah-langkah dibawah ini.

Text Bayangan di Judul Blog

1. Login ke blog, dan ke pengaturan Template
2. Klik edit HTML, dan cari kode .Header h1 { lengkapnya seperti dibawah ini.
.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: 0 0 $(title.shadow.spread) #000000;
}
3. Setelah ketemu dengan kode diatas maka tambahkan kode text-shadow: 2px 2px 5px #800000; Jadi kode lengkapnya seperti dibawah ini.
.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: 2px 2px 5px #800000;
}
4. Sekarang coba dipreview/pratinjau dulu template kamu, dan lihat sudah ada text bayangan belum judul blog kamu. Jika sudah berubah baru Di save.
5. text-shadow: 2px 2px 5px ini adalah horizontal dan vertikal dari text bayangannya. dan #800000; adalah warna dari text bayangan. Silakan diganti sesuai dengan yang kalian inginkan.
6. Untuk lebih jelasnya, kalian bisa atur text bayangan sesuai dengan yang kalian inginkan disini http://www.cssportal.com/css3-text-shadow-generator/. 

Text Bayangan di Deskripsi Blog

1. Login ke blog, dan ke pengaturan Template
2. Klik edit HTML, dan cari kode .Header .description { lengkapnya seperti dibawah ini.
.Header .description {
  font: $(description.font);
  color: $(description.text.color);
}
3. Sama seperti diatas, tambahkan kode text-shadow: 2px 2px 5px #800000; lengkapnya.

.Header .description {
  font: $(description.font);
  color: $(description.text.color);
text-shadow: 2px 2px 5px #800000;
}
4. Silakan di preview/pratinjau untuk melihat perubahannya. Setelah berubah baru save.

Atau cara cepatnya, letakan diatas ]]></b:skin> kode2 diatas. contoh:

1. logn ke blogger, dari halaman dasbor pilih pengaturan template.
2. trus klik edit html dan cari kode ]]></b:skin>
3. dan letakan kode berikut diatas ]]></b:skin>
.Header h1 {

  font: $(header.font);

  color: $(header.text.color);

  text-shadow: 2px 2px 5px #800000;

}

.Header .description {

  font: $(description.font);

  color: $(description.text.color);

text-shadow: 2px 2px 5px #800000;

}
4. Save template selesai.

contoh gambar penempatan kode diatas ]]></b:skin>,

1. Untuk mempermudah edit text bayangan seperti yang kalian inginkan, silakan kunjungi situs ini http://www.cssportal.com/css3-text-shadow-generator/. 
2. Selesai. Silakan dibaca juga cara-cara menghias blog yang lain, seperti Cara membuat tombol share facebook, twitter dan cara memberi warna background pada judul posting blog atau cara mengganti tulisan home next  previous di blog.

MOGA BEMANFAAT ZOB DITUNGGU YA KUNJUNGAN BALIKNYA

DESIGN BLOG ALA ANAK TKJ

Cara Membuat Gambar Header Blog

Cara Membuat Gambar Header Blog. Satu lagi cara desain blog sendiri, yaitu dengan menambahkan gambar di header blog. Cara membuat gambarnya bisa menggunakan software, bisa juga secara online. Artikel ini akan menjelaskan tentang cara membuat gambar header blog secara online. Prosesnya tidak lama, cukup mengunjungi situs penyedia layanan pembuatan gambar, dan memilih salah satu bentuk gambar yang kita inginkan. Setelah itu download dan pasang di blog kita. Silakan lihat dulu contoh gambar dibawah ini.

Gambar diatas adalah contoh gambar dalam bentuk tulisan yang pernah saya gunakan di blog ini. Dengan menggunakan gambar, kita punya banyak pilihan bentuk dan juga warna yang bisa digunakan. Berbeda dengan tampilan huruf blog, yang warna dan bentuknya terbatas, hanya bisa menggunakan satu warna.

Ukuran gambar yang dihasilkan cukup kecil dan juga tidak memberatkan loading blog, ukuran huruf bisa diatur sesuai dengan yang kita inginkan. Disitus tersebut ada juga jenis gambar animasi, seperti huruf yang mengeluarkan api, Petir, animasi Glow yang bergerak dan masih banyak lagi.

1. Gambar yang dihasilkan berformat PNG dan juga GIF, sesuai dengan bentuk dan animasi yang digunakan. Dan ukuran File gambar yang dihasilkan juga berbeda, antara Png dan Gif, sesuai dengan ukuran huruf gambar yang digunakan.
2. Untuk gambar animasi ukuran huruf 40 keatas bisa sampai 50-70kb dalam format Gif. Sedangkan untuk gambar biasa tanpa animasi hanya 10-30kb dalam format png.
3. Silakan pilih bentuk dan ukuran gambar yang sesuai dengan yang kalian inginkan.

Untuk lebih jelasnya, Cara membuat gambar header blog. 

Ikuti langkah-langkah dibawah ini:

1. Kunjungi situs http://cooltext.com/ 
2. Selanjutnya pilih salah satu gambar huruf yang kalian suka.
3. Dan atur warna dan juga bentuk hurufnya.
4. Setelah selesai, lihat bagian bawah, klik Creat Logo.
5. Terakhir Download. Seperti gambar dibawah ini.

6. Sekarang, memasang gambar tersebut di blog kita.
7. Login ke blog, dan Klik pengaturan Tata Letak.
8. Pada bagian layout Header Blog, Klik Edit. Dan Upload gambar tadi.

9. Selanjutnya atur penempatan gambar. Pilih dibalik judul dan keterangan.
10. Terakhir Save pengaturan gambar. Dan lihat, gambar berada di belakang judul dan deskripsi. Jika ingin menyembunyikan tulisan judul dan deskripsi blog. Ikuti langkah-langkah dibawah ini.
    

Cara menyembunyikan judul dan deskripsi blog

1. Sekarang kita sembunyikan tulisan judul dan deskripsi dari halaman blog, cari kode ]]></b:skin> dan tempatkan kode ini diatasnya.
.Header h1 {
   height: 0px;
   visibility: hidden;
   display: none;
}

.Header .description {
   height: 0px;
   visibility: hidden;
   display: none;
}
2. Setelah menambahkan kode diatas maka judul blog dan deskripsi akan disembunyikan dari tampilan blog, tinggal gambar saja.
3. Dengan begitu judul dan deskripsi tetap ada, hanya disembunyikan.
4. Silahkan cek di chkme.com untuk melihat masih ada atau tidak title judul blog H1, jika ada berarti gambar header tidak akan mempengaruhi seo blog.

Jika kita memliih menempatkan gambar selain judul dan keterangan atau tempatkan keterangan setelah gambar. Maka H1 header akan hilang, dan itu mempengaruhi seo blog. Jika ingin mencoba silahkan saja cek di chkme.com atau disitus chek seo blog lainnya. Agar H1 header blog disembunyikan dari halaman blog tanpa mempengaruhi seo blog, gunakanlah cara seperti diatas.
MOGA BEMANFAAT ZOB DITUNGGU YA KUNJUNGAN BALIKNYA

DESIGN BLOG ALA ANAK TKJ

Cara Membuat Tombol Share di Blog

Cara membuat Tombol Share di Blog. Tombol share sosial media memudahkan pengunjung untuk berbagi artikel yang dibaca, atau sekedar memberikan like dari artikel yang dibacanya. Seperti facebook, twitter, google +. Tombol share merupakan salah satu cara untuk mempromosikan blog kita ke banyak orang.

Dan dapat meningkatkan jumlah pengunjung blog, semakin banyak yang share, maka akan semakin banyak kemungkinan orang yang akan mengunjungi blog. Tombol share yang akan kita buat ini akan ditempatkan di bawah posting blog. Jadi setelah pengunjung membaca sebuah artikel, pengunjung akan melihat tombol share untuk berbagi. Untuk melihat contohnya silakan lihat tombol share di bagian bawah artikel ini.

Cara membuat tombol share di blog. Ikuti langkah-langkah dibawah ini:

1. Kunjungi situs www.sharethis.com. dan pilih get the button.
2. Step 1 pilih Blogger dan Klik Next Step 2.
3. Step 2 Pilih style Buttons yang kalian inginkan. dan klik next step 3.
4. Step 3, atur tombol share apa saja yang akan kalian masukan ke blog. 
5. Dan klik Finish get the code dan isi pembuatan account dengan email dan password untuk masuk ke sharethis.com. 
   
6. Setelah pembuatan account selesai, maka akan terbuka halaman import elemen laman, seperti gambar dibawah ini.
   
7. Klik Menambah Widget. Selanjutnya di tata letak blog kamu akan ada widget ShareThis. Pindahkan widget ShareThis ke bagian bawah(footer) blog dan save.
8. Sampai disini, pembuatan tombol share sudah selesai, silakan lihat blog kamu. Tombol share sudah tampil dibawah posting Blog. Tapi juga terlihat di halaman awal blog.

Tambahan: Untuk mengatur agar tombol share hanya terlihat di bawah posting blog.

1. Buka pengaturan template, dan klik edit html.
2. Cari kode sharethis gunakan Ctrl + F untuk mempermudah pencarian. Maka akan terdapat kode seperti dibawah ini.
<b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>...</b:widget>
3. Klik tanda >...< maka kode akan menjadi seperti ini.
<b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>
<b:includable id='main'>...<b:includable>
</b:widget>
4. Klik lagi tanda >...< maka kode akan menjadi seperti ini.
<b:widget id='HTML1' locked='false' title='ShareThis' 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>
5. Selanjutnya masukan kode <b:if cond='data:blog.pageType == "item"'> dan </b:if>, jadi kode lengkapnya seperti ini.
<b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>
    <b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
  <!-- 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:if>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>
6. Preview dulu. Sudah hilang belum tombol share di halaman awal blog kamu. Jika sudah hilang seperti gambar dibawah ini. Baru di save/simpan template.
7. Selanjutnya lihat blog kamu. dan klik salah satu artikel kamu dan lihat dibagian bawah artikel. tombol share sudah ada. dan hanya tampil disetiap artikel, tidak tampil di halaman awal blog. selesai. Semoga Bermanfaat.

MOGA BEMANFAAT ZOB DITUNGGU YA KUNJUNGAN BALIKNYA

DESIGN BLOG ALA ANAK TKJ

Cara Membuat Read More di Blog

Cara Membuat Read More di Blog. Cara buat tulisan read more atau baca selengkapnya di blog dengan mudah. Menggunakan fitur dari blog. Fungsi read more itu sendiri adalah untuk meringkas atau memotong posting blog di halaman awal blog. Dengan memasang read more maka loading blog akan lebih cepat dan lebih rapi. Lihat contoh gambar dibawah ini.

Read more ini bisa dibilang versi blogger, karena untuk menggunakannya, kita harus mengaturnya secara manual. Dari posisi gambar hingga jumlah kata yang akan kita tampilkan di awal halaman. Cara menggunakannya cukup mudah, karena tool untuk membuat read more sudah disediakan oleh blogger. Letaknya berada di halaman entri atau laman blog. Untuk lebih jelasnya. 

Ikuti langkah -langkah dibawah ini.

Cara Membuat Read More di Blog

1. Buka entri baru atau edit artikel kamu yang sudah ada.
2. Klik Insert Jump Break di tempat dimana artikel yang akan kamu potong. Maka akan muncul garis putus-putus seperti gambar dibawah ini. Itu adalah tanda batas artikel yang akan ditampilkan di halaman awal blog.

3. Terahir save artikel kamu dan lihat hasilnya. Selesai.

Fungsi read more ini hanya meringkas tampilan posting dihalaman awal blog. Jadi, ketika di klik tulisan read more atau baca selengkapnya. Maka akan terbuka halaman baru yang menampilkan semua isi dari artikel yang dipilih. Tulisan readmore itu juga bisa diganti, silahkan baca cara mengganti tulisan read more dengan kata yang kamu ingingkan sendiri, bisa kalian lihat Semoga Bermanfaat.

 

MOGA BERMANFAAT ZOB DITUNGGU KUNJUNGAN BALIKNYA OK

DESIGN BLOG ALA ANAK TKJ

Cara Membuat Daftar isi Blog

Cara membuat daftar isi blog. Gunanya untuk memudahkan pengunjung untuk melihat semua daftar artikel blog yang dikelompokan sesuai dengan kategori artikel. Setiap membuat artikel atau posting baru, otomatis akan masuk ke daftar isi ini. Contoh gambar.

Ikuti langkah-langkah dibawah ini.

1. Login ke Blog dan pilih laman.

2. Pilih laman kosong dan Copy semua kode dibawah ini dan Paste kan ke bagian HTML. Ganti kode yang berwarna merah dengan alamat url blog kamu.

<script src="http://me-sitemap.googlecode.com/files/sitemapblog.js" type="text/javascript">
</script>
<script src="http://pengguna-komputer.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

3. Lihat gambar dibawah ini. Ada Compose dan HTML, Klik HTML dan masukan kode diatas.

4. Beri judul Daftar isi dan klik publikasikan. 

5. Jika di blog kamu belum terlihat juga daftar isinya. Coba Edit salah satu artikel kamu dan klik Label dibagian Setelan Entri(Sebelah kanan entri). Dan beri nama sesuai yang kamu inginkan. Contoh gambar:

6. Selanjutnya klik selesai seperti gambar diatas. Dan Klik Perbarui.

7. Sekarang coba lihat lagi daftar isi kamu. Selesai. 

MOGA BERMANFAAT ZOB DITUNGGU KUNJUNGAN BALIKNYA

DESIGN BLOG ALA ANAK TKJ

Cara Membuat Label atau Kategori di Blog

Cara Membuat Label atau Kategori di Blog. Label atau kategori di blog yang berarti mengelompokan jenis artikel berdasarkan pembahasan yang berkaitan antara satu dan lainnya. Misalnya kita punya 3 artikel dengan judul ayam jantan, ayam hias dan ayam kampung, maka dari ketiga judul tersebut kita kelompokan menjadi satu jenis, yaitu ketegori ayam. Jadi ketika orang buka label/kategori ayam, maka ketiga judul tersebut akan tampil dalam satu halaman.

Itulah sedikit penjelasan apa yang dimaksud dengan label atau kategori. Untuk lebih jelasnya bisa kalian lihat di Kategori sebelah kiri blog ini. Klik salah satu kategori, maka akan terbuka halaman baru, dengan isi semua artikel yang kategorinya sama. Untuk lebih jelasnya. Cara membuat label atau kategori di blog.
Ikuti langkah-langkah dibawah ini.

1. Buatlah 3 entri baru atau edit 3 artikel lama kamu.
2. Dan dibagian Setelan Entri(sebelah kanan entri) Klik Label dan beri label dengan nama Tutorial Blog dan klik Selesai. Tulis ketiga artikel kamu dengan nama label yang sama Tutorial Blog. Lihat gambar dibawah untuk lebih jelasnya.

3. Setelah Selesai memberi nama label. Buka pengaturan Tata Letak.
4. Klik Tambahkan Gadget atau add gadget.Dan cari Label seperti gambar dibawah ini.

5.  Klik Tanda + di sebelah kanan Label gambar diatas dan beri judul label atau kategori, dan klik Simpan. seperti gambar dibawah ini.

6. Contoh tampilan kategori atau label di blog lihat gambar dibawah ini.

7. Letakan label/kategori sesuai dengan yang kamu inginkan. dan Lihat hasilnya.Widget degan nama kategori/label sudah ada di blog kamu. Selesai.

Dengan adanya label, maka kita dapat dengan mudah membagi setiap artikel menjadi beberapa nama kelompok artikel yang sesuai dengan yang kita inginkan. Dalam satu artikel, kita juga bisa membuatnya menjadi 2 label atau lebih. Jadi tidak harus menempatkan satu artikel kedalam satu kategori. Tapi bisa kebanyak kategori

Jika nanti label/kategori kamu sudah banyak, tambahkan fungsi scroll agar tidak banyak menghabiskan tempat. Jika ingin memberi warna background pada judul kategori, dan lain-lainnya.

MOGA BERMANFAAT ZOB DITUNGGU KUNJUNGAN BALIKNYA