Cara Menghilangkan Judul dan Deskripsi Blog

Menurut saya, mengganti judul blog dan deskripsi blog menggunakan gambar adalah keputusan yang sangat tepat karena blog akan terlihat lebih professional dan menarik. Namun, ada satu hal yang perlu diketahui oleh kita semua bahwa "Ketika kita mengganti judul dan deskripsi blog menggunakan gambar, maka judul dan deskripsi blog tidak langsung hilang, keduanya tetap ada, menempel di depan gambar." Untuk menghilangkannya, kita harus menyisipkan kode "display:none;" pada template kita.

Sebelum dan setelah dihilangkan

1. Cara menghilangkan judul blog
Cari kode .Header h1 { kemudian letakkan kode display:none; dibawahnya. Lihat contoh!

.Header h1 {
display:none;
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

2. Cara menghilangkan deskripsi blog
Cari kode .Header .description { lalu letakkan kode display:none; dibawahnya. Lihat contoh!

.Header .description {
display:none;
font-size: $(description.text.size);
color: $(description.text.color);
}

Tidak menutup kemungkinan, blogger pemula akan mengalami kesulitan dalam menerapkan kode di atas. Jadi, silahkan mamfaatkan komentar Google Plus di bawah ini untuk bertanya secara online.

Menambahkan Garis Di Sidebar Blog Sebagai Pemisah

Tutorial ini menunjukkan kepada Anda tentang bagaimana menambahkan atau menyisipkan garis di antara satu widget dengan widget yang lainnya. Garis ini nanti akan berfungsi sebagai pemisah widget yang tentunya dapat memperindah sidebar blog Anda. Untuk menjalankan tutorial ini, Anda tidak akan kebingungan karena Anda tidak akan mengobrak abrik kode Template Anda (Kok bisa Sich..!!!). Karena kita akan melakukannya melalui "Perancang Template Blogger". Follow me!

Memasang Garis Pemisah Di Antara Widget Blogger

• Masuk menggunakan akun blogger Anda di blogger.com
• Pilih Template dan Klik tombol "Sesuaikan"
• Klik "Tingkat Lanjut" dan "Tambahkan CSS"
• Paste kode berikut di kolom yang tersedia

.sidebar .widget {
border-bottom: 1px solid #474747;
}

• Lihat Live Preview yang ada di bawahnya. Jika sukses, klik tombol "Terapkan ke blog"

Tambahan :

1. Angka 1 adalah ketebalan Garis, rubah saja sesuai yang diharapkan
2. #474747 adalah kode warna. Bisa dirubah sesuai selera Anda. Untuk melihat kode warna, klik disini.

10 Bingkai / Border Untuk Menghias Gambar Blog

Jika kita menambahkan border atau bingkai pada gambar blog kita, maka posting kita akan terlihat lebih rapi dan gambar blog menjadi lebih cantik. Oleh sebab itu, saya menyiapkan sobat blogger 10 kode CSS yang digunakan untuk membuat bingkai pada gambar blog. Sobat blogger dapat mengkostumisasi kode CSS ini sesuai dengan harapan sobat. Posting yang sobat blogger baca ini berbanding terbalik dengan posting sebelumnya yaitu "Cara Menghilangkan Bingkai, Border Atau Bayang Pada Gambar Blog". Tapi sudahlah, jangan dipikirkan. Bagaimana cara menerapkan kode CSS ini pada template blogger? Gampang sekali, sobat blogger hanya meletakkan satu dari 10 kode CSS berikut di atas kode ]]></b:skin>

Berikut ini kode CSS beserta screenshot hasil kode setelah diterapkan :

1. Kode 1

.post-body img{
border: 1px solid #4C3C1B;
padding: 5px;
width: 300px;
background-color: #EFEECB;
}

2. Kode 2

.post-body img{
border: 1px solid #666666;
padding: 10px 10px 60px 10px;
}

3. Kode 3

.post-body img{
border-style: double;
padding: 16px;
background-color: #DCDCED;
}

4. Kode 4

.post-body img{
border-top-width: 4px;
border-bottom-width: 4px;
border-top-style: double;
border-bottom-style: double;
border-top-color: #E1A60A;
border-bottom-color: #E1A60A;
padding: 8px 0px;
}

5. kode 5

.post-body img{
border: 10px dotted #29C3FF;
margin: 0;
padding: 0;
}

6. Kode 6

.post-body img{
width: 300px;
padding: 0px 6px 6px 0px;
background-color: #9FB2C1;
border-top-width: 2px;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 2px;
border-style: solid;
border-color: #082F70;
}

7. Kode 7

.post-body img{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi43hc61NoslNIviscnVRckW6qJHSNpEopA7EsGvn4Zml2PjSfSekXsibmIB1Ed3V4J26QrwzI_xlooxFdB7hw9iZAD_bn_GiClxMpKNTptrw3R83yqU2lNGQ4hz84PsEiwxa0oiBarmFI/s400/image-background.png) repeat scroll 0 0 transparent;
padding:7px;
border:1px solid #cecece;
-moz-box-shadow: 0px 0px 5px #BBB;
-webkit-box-shadow: 0px 0px 5px #BBB;
box-shadow: 0px 0px 5px #BBB;
}

8. Kode 8

.post-body img{
background-color: #666;
color: #fff;
font-weight: bold;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

9. Kode 9

.post-body img{
color: #000;
font-weight: bold;
background-color: #f99;
border: 3px solid #c00;
}

10. Kode 10

.post-body img{
border-style: dotted;
}

Bagi sobat blogger yang ingin mengcopy paste tutorial ini, jangan lupa mencantumkan URL blog ini sebagai sumber artikel. Blogger yang baik adalah blogger yang saling menghargai setiap karya dari temannya. Terima kasih untuk pengertiannya!

Membuat Waktu Posting Seperti Kalender

Blog yang menggunakan style kalender untuk waktu posting (Post Time) biasanya adalah blog yang bernaung di bawah platform Wordpress. Kini, blog blogger dapat menggunakan style yang seperti itu untuk mempercantik tampilan blog. Teknik merubah bentuk post time dari default post time ke bentuk kalender post time ini saya dapatkan beberapa waktu yang lalu dan sudah di coba.

Sebelum kita mengedit template blog kita, ada satu hal yang perlu dilakukan terlebih dahulu yaitu "Merubah form waktu". Urutan form waktu yang digunakan adalah tanggal, bulan dan tahun (Jangan menggunakan form waktu yang lain). Bagaimana caranya? Caranya sesuai dengan gambar di bawah ini!

Langkah 1

Langkah 2

• Selanjutnya klik "Template" dan "Edit HTML"
• Cari kode <h2 class='date-header'><span><data:post.dateHeader/></span></h2> dan ganti dengan kode berikut

<div id='Date'><script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script></div><b:else/><div id='Date'><script>changeDate(&#39;&#39;);</script></div>

• Letakkan kode berikut sebelum kode </head>

<script type='text/javascript'>
//<![CDATA[
var DateCalendar;
function changeDate(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
day = "<strong class='date_day'>"+da[0]+"</strong>";
month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
year = "<strong class='date_year'>"+da[2]+"</strong>";
document.write(month+day+year);
DateCalendar = d;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Calendar style date
----------------------------------------------- */
#Date {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxRgQ4oySt7d9OGqqYQr9_usnOn6D5niL6sH5WA-8dtSFfnGH5ZU9Eb5p_BXraL_Ydv8lz9MNZNgM0KBEVlVtBh2wONXvnskd2WVnVGCa5DUioOiUgCcDMrm227Wwb2w-iGyaH6vEdNkI/h120/dateformat.png) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 15px 2px 0 -108px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}
.date_month {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#ffffff; /* Month&#39;s color */
}
.date_day {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#282828; /* Day&#39;s color */
}
.date_year {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#282828; /* Year&#39;s color */
}
</style>
</b:if>

• Preview template sebelum di simpan

Tambahan :
Jika kalender tidak muncul dengan benar, ganti -108 dengan 0;

Cara Menghilangkan Ruang Kosong Di Atas Header Blog

Terdapat blank space atau ruang kosong di atas header blog di saat kita menghapus Navbar. Ruang kosong ini sering dimamfaatkan oleh banyak blogger untuk memasang menu horizontal, Sticky Bar, Notification Bar bahkan untuk memasang iklan. Bagi sebagian blogger, ruang kosong yang ada di atas header sangat mengganggu desain blog oleh karenanya, mereka lebih memilih untuk menghilangkan ruang kosong itu.

Langkah-langkah menghilangkan jarak di atas header blog

• Masuk ke akun blogger Anda
• Klik Template -> klik Edit HTML
• Gunakan Ctrl + F untuk mencari tag </ head>
• Selanjutnya, tambahkan kode berikut tepat di atas tag </ head>

<style type='text/css'>
.content-inner
{
margin-top: -40px !important;
}
</style>

• Preview template terlebih dahulu sebelum di simpan

Anda dapat mengubah -40px sesuai nilai yang diinginkan. Terus bereksperimen dengan nilai ini untuk menyesuaikan posisi header. Setelah berhasil menempatkan kode ini di situs Anda, header situs Anda tidak akan memiliki ruang yang tidak perlu di atasnya.

Sticky Bar Cantik Untuk Blogger

Sticky Bar mulai tenar di kalangan Webmaster atau blogger semenjak munculnya Hello Bar. Hello Bar bisa didapatkan oleh pemilik blog secara gratis dengan melalui proses registrasi di salah satu website yang mengeluarkan menu bar tersebut. Sekarang, untuk mendapatkan menu bar seindah Hello Bar, pemilik web blog tidak perlu melakukan proses registrasi yang berbelit-belit karena saya sudah menyediakan beberapa baris kode CSS dan HTML yang bisa membentuk sebuah Sticky Bar yang cantik dan keren. Sticky Bar ini memiliki warna Orange dan Hitam plus teks warna putih.

Seperti Sticky Bar pada umumnya, Sticky Bar ini pun memiliki sebuah panah yang berfungsi untuk membuka dan menutup menu bar ini (Fitur Hide and Show). Apa kelebihan Sticky Bar ini dengan Sticky Bar yang lain? Sobat blogger tidak perlu Edit Template untuk memasang Sticky Bar ini dan sobat blogger bisa melakukan kostumisasi menu bar ini sesuai dengan yang diinginkan.

Cara Memasang Sticky Bar di Blog

• Masuk ke blogger.com menggunakan akun blogger sobat
• Pada menu Drop Down, pilih tata letak.
• Klik "Tambahkan gadget"
• Lalu pilih HTML/JavaScript
• Copy Paste kode berikut pada kolom yang tersedia

<style>
/*---Codes by www.tutorialblogspot.com---*/
#wg-rosebar {
width:100%;
height:100px;
position:fixed;
top:0;
left:0;
}
#wg-rosebarbtm {
border-bottom:3px solid #000;
background-color:#F60;
overflow:none;
width:100%;
height:30px;
position:fixed;
top:0;
left:0;
}
#wg-rosebarbtmdata {
color:#fff;
padding:5px;
}
#wg-rosebarbtmhide {
position:absolute;
top:4px;
right:12px;
width:20px;
height:20px;
cursor:pointer;
}
#wg-rosebarbtmshow {
position:absolute;
top:0;
right:5px;
width:30px;
height:25px;
cursor:pointer;
background-color:#F60;
padding-top:5px;
border-bottom:3px solid #000;
border-left:3px solid #000;
border-right:3px solid #000;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
}
.wg-rosebarbtmdownarrow {
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid #CC5200;
}
.wg-rosebarbtmblock {
width:8px;
height:10px;
background-color:#CC5200;
}
.wg-rosebarbtmuparrow {
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid #CC5200;
}
</style>
<div id="wg-rosebar" >
<center id="wg-rosebarbtmshow" onmouseup="document.getElementById('wg-rosebarbtm').style.display='block'"><div class="wg-rosebarbtmblock"></div><div class="wg-rosebarbtmdownarrow"></div></center>
<div id="wg-rosebarbtm" >
<center id="wg-rosebarbtmhide" onmouseup="document.getElementById('wg-rosebarbtm').style.display='none'"><div class="wg-rosebarbtmuparrow"></div><div class="wg-rosebarbtmblock"></div></center>
<center id="wg-rosebarbtmdata"><a href="http://www.tutorialblogspot.com">Teks Yang Tampil</a></center>
</div>
</div>

• Klik Simpan

Tambahan :
Ganti teks yang berwarna merah sesuai dengan yang sobat inginkan.

Cara memasang Profil Pengarang di bawah artikel blog

Memasang Profil Author/Admin di bawah posting atau artikel bukanlah sebuah kewajiban yang harus dijalankan akan tetapi hal ini sangat disarankan oleh Google supaya pengunjung blog kita lebih mengenal kita. Pengunjung blog akan lebih meyakini kebenaran suatu artikel yang mencantumkan nama penulisnya ketimbang meyakini suatu artikel yang tidak jelas siapa penulisnya. Google juga menyarankan setiap pemilik blog untuk segera beralih dari profile Blogger ke profile Google+ (Informasi ini bisa di lihat di Blogger Buzz).

Blogger.com dan Google+ adalah layanan Google yang tidak bisa dipisahkan, keduanya saling berhubungan. Sebagai contoh : Ketika kita upload gambar/foto melalu post editor blogger, maka gambar/foto itu akan langsung tersimpan di galeri foto kita di Google Plus. Saat ini juga, banyak widget Google+ yang sudah menjadi widget bawaan blogger seperti Widget Google+ followers, Google+ Badge, Google+ share button dan yang lainnya.

Banyak blogger yang tidak tahu bahwa pemilik blog dapat menambahkan Profile Pengarang di bawah pos tanpa edit template. Ha.. ha... Jangan-jangan, sobat blogger juga tidak tahu. Ketimbang ketinggalan informasi, baca tips di bawah ini!

Cara menambahkan profile blogger atau Google+ di bawah posting blog

1. Masuk ke laman blogger.com
2. Pilih layout/Tata letak

3. Klik Edit (Pop up window akan muncul)

4. Kasih tanda centang pada "Tampilkan profil pengarang di bawah pos"
5. Klik Simpan

Apakah profile pengarang sudah tampil di bawah posting? Kalau Profile pengarang tidak tampil, berarti template yang sobat blogger gunakan tidak memiliki Post Footer (Post Footer di hapus atau disembunyikan). Coba munculkan kembali post footer, Insyaallah, profile pengarang akan langsung muncul.