Membuat Slider Post di bawah Header

Slider post berperan menampilkan postingan yang diterbitkan dalam bentuk thumbnail dan link yang aktif. Letaknya di bawah header disertai dengan fasilitas slider yang bisa digeser guna meminimaliskan tampilan blog. Sebelumnya lihat dulu DEMO.  Berikut langkah-langkahnya:

1) Login blogger

2) Pilih Template > Edit Html

3) Centang Expand template widget

4) Copy kode di bawah dan pastekan di atas tag ]]></b:skin>

Download:

#carousel{width:960px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#000;margin-bottom:8px}

#carousel h5{color:#555;margin:2px}

#carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}

#carousel .thumb{float:left;margin-right:5px;}

#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM9t7xpbwJJlcFhaIf1y6eRhjybR1hTeAkvSJTRcIYj5zfSThzz1LDyG5YrsUYtNWNY-BU5SDNKKvXNuD10MJ0ewvlqN9i-R7zNKMbIBd8t1FTFp8YnGrcm1cuHU-jcThsG0YqX04vP8tq/s1600/previous.png) center;z-index:100;cursor:pointer;}

#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBc5w58H0J1dWb1cFKaZ3J8cnokWYNJa8mN-BWCcMF625EVqdfvR6jc9FnKwor7wnMgLIO5Rl3TqtP66-mmbVCm3cKIRvVDfGj_mLeNhhaa2OU66ozZjVmc75lmX8w0DUEZVQIOXkoxxcB/s1600/next.png) center;z-index:100;cursor:pointer;}

#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}

#carousel ul{width:100000px;position:relative;margin-top:10px}

#carousel ul li{background:#04B404;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 5px 2px;padding:6px}

#carousel ul li a.slider_title{color:#fff;display:block;margin-top:0;padding-top:0}

Catatan: 
Warna merah bisa kamu ganti ukuran widget image slider
Warna Orange bisa kamu ganti background image slider
Warna hijau bisa kamu ganti warna tanggal image slider
Warna kuning bisa kamu ganti background widget image slider

Membuat border pada artikel blog

Pada dasarnya fungsi border tidaklah berbeda dari text area. Sama-sama penting untuk penulisan kode script/html. Adakalanya kita ingin menampilkan sebuah kode script/html pada artikel terkait. Nah, kamu bisa memaksimalkan peran text area dan border pada artikel terkait. Ada beberapa jenis border yang akan saya jelaskan di sini:  

1) Copykan kode di bawah pada mode html

2) Ganti tulisan yang berwarna merah dengan kode script/html ataupun tulisan yang kamu inginkan

BORDER
digunakan untuk membatasi tulisan

<div style="border: 1px solid #FF7F00; margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color: #6F00FF; text-align: center;">Tulisan yang akan ditampilkan disini</div>

Hasilnya seperti ini. Download scriptnya di sini

Tulisan yang akan ditampilkan disini

Membuat Drop Cap pada Artikel Blog

Kadangkalanya kita menginginkan sebuah artikel yang di balut dengan gaya tulisan yang lebih menarik. Ini mudah saja, dengan cara membuat drop cap (huruf besar) di awal paragraf artikel yang kamu buat dapat membuat gaya tulisan tampak tidak monoton lagi. Sebenarnya banyak cara yang bisa digunakan untuk membuat drop cap pada artikel blog. Bisa dengan CSS ataupun yang akan kubahas kali ini. Proses ini lebih mudah dan tidak terlalu ribet untuk menerapkannya. Berikut langkahnya:

1) Masukkan huruf awal yang akan kamu drop cap pada kode berikut. Contohnya:

"Merubah gaya tulisan pada artikel blog menggunakan drop cap tidaklah sulit. Asal kamu mau belajar melakukannya, semua hal pasti akan mudah. Kamu bisa mencobanya setelah membaca artikel ini. Selamat mencoba."

<span style="color: black; float: left; font-family: arial; font-size: 50px; line-height: 30px; padding-right: 5px; padding-top: 5px;">M</span>erubah gaya tulisan pada artikel blog menggunakan drop cap tidaklah sulit. Asal kamu mau belajar melakukannya, semua hal pasti akan mudah. Kamu bisa mencobanya setelah membaca artikel ini. Selamat mencoba.

2) Agar lebih mudah tulis artikel pada mode html