Cara menyembunyikan judul dan deskripsi blog dan menggantinya dengan

 gambar atau logo

Tampilan header pada blog sangatlah penting karena itu akan menjadi kesan pertama dari pengunjung. Jika tampilan header blog kita bagus dan terlihat menarik, pasti pengunjung blog akan senang dan betah berada di blog kita apalagi jika blog kita membahas artikel yang menarik dan bermanfaat. Sebelumnya kita sudah bahas cara mengganti judul blog dengan gambar atau logo tapi tanpa menyembunyikan judul dari bawaan blog.

Kali ini saya akan bahas mengenai cara menyembunyikan judul dan deskripsi blog dan menggantinya dengan gambar atau logo yang kita inginkan. Seperti contoh, lihat blog saya ini. Blog ini punya judul dan deskripsi hanya saja saya sembunyikan dan saya ganti dengan gambar tersebut agar tampilannya lebih bagus.

Oke langsung saja cara menyembunyikan judul dan deskripsi blog dan menggantinya dengan gambar atau logo. Ikuti langkah-langkah berikut.

1. Login ke akun blogger anda => template pada menu sisi bilah samping kiri => sesuaikan. Lihat gambar berikut.

2. Selanjutnya pilih 'Tingkat lanjut' => Tambahkan CSS => Copy paste script berikut ke dalam kotak CSS.

.Header h1 {
height: 0px;
visibility: hidden;
display: none;
}
.Header .description {
height: 0px;
visibility: hidden;
display: none;
}

3. Gambar contohnya sebagai berikut.

4. Jika sudah di paste, klik simpan setelan di pojok kanan atas dan lihat hasilnya. Maka Judul dan deskripsi blog anda akan tersembunyi.

5. Dan sekarang di lanjutkan mengganti header dengan gambar atau logo. Sayangnya artikel ini sudah terlalu panjang :). untuk melanjutkan, buka saja ini : Cara mengganti judul blog / header dengan gambar atau logo.

Sekian dan semoga bermanfaat. Terimakasih.

Cara mengganti header blog dengan gambar atau logo dengan mudah

Cara mengganti header blog dengan

gambar atau logo

Kesan pertama dari sebuah blog tentu adalah bagian kepala atau headernya. Jika tampilan headernya bagus, pasti seorang pengunjung akan suka dan betah berada di blog anda apalagi jika isi dari blog anda membahas tentang sesuatu yang menarik. Tentunya untuk mendesain blog agar terlihat cantik dan menarik tidak hanya dari merubah headernya saja. Baca: cara mempercantik tampilan blog.

Ok langsung saja cara mengganti header blog dengan gambar atau logo. Ikuti langkah-langkah di berikut.

Baca: Cara menempatkan judul blog di tengah-tengah.

1. Login ke akun blogger anda => klik tata letak pada menu bilah sisi samping kiri => klik edit header. Lihat gambar di bawah.

2. Setelah di klik maka akan muncul tab baru seperti gambar berikut =>  pada tahap ini jangan lupa centang "Susutkan gambar agar sesuai". Ini di perlukan untuk merubah ukuran gambar yang anda pilih agar bisa menyatu dan pas pada blog anda.

3. Klik Choose file => pilih gambar / logo yang ingin anda jadikan sebagai header => klik simpan. Lihat gambar di bawah.

4. Contoh hasilnya sebagai berikut (ini hanya sebagai contoh karena di sini gambar blog dan isi artikerlnya tidak sesuai).

Catatan :

Gunakanlah gambar judul/header pada blog anda sesuai dengan apa yang anda bahas pada blog anda. Dan desainlah semenarik mungkin karena tampilan header akan jadi kesan utama bagi pengunjung.


Sekian dan semoga bermanfaat. Terimakasih.

Cara memasukan video youtube ke postingan blog dengan mudah

Cara memasukan video youtube ke postingan blog

Youtube sangat di gemari oleh pencari uang online hingga saat ini. Seorang youtuber juga bisa menggunakan blog untuk meningkatkan visitor youtubenya dengan cara menyertakan video youtube ke postingan blognya. Apalagi jika punya blog yang pengunjunganya sudah banyak, itu akan lebih memudahkan kita untuk mempromosikan video youtube yang kita punya. Untuk menyertakan video youtube pada postingan blog, ada 2 cara mudah yang bisa di lakukan.

Cara pertama yaitu menggunakan tombol yang sudah di sediakan oleh blogger. Ikuti langkah-langkah berikut.

1. Masuk ke akun blogger anda => Entri baru (tulis artikel) => klik menu 'Insert a video' (letaknya di atas). lihat gambar berikut.

2. Setelah di klik, maka akan muncul tab baru seperti berikut. Anda cari video yang anda ingin pasang di blog => jika sudah menemukan video yang anda inginkan, klik video tersebut dan tekan pilih. Lihat gambar di bawah.

3. Maka video akan muncul otomatis di postingan blog anda.


Cara ke dua yaitu copy paste script youtube dan paste di HTML postingan. Ikuti langkah-langkah di berikut.

1. Cari video youtube yang ingin anda sertakan di blog anda => sematkan => copy alamat tersebut. Lihat gambar di bawah.

2. Jika sudah ketemu alamat video youtube yang anda inginkan, masuk ke akun blogger anda => Entri baru (memposting) => klik menu HTML yang ada di pojok kiri atas => copy paste alamat youtube tersebut di situ. Lihat gambar di bawah.

3. Jika sudah selesai di paste, kembali ke menu 'Compose' di pojok kiri atas. dan otomatis video ada di postingan anda.

4. Jika anda ingin merubah ukurannya, ganti angka yang saya tandai kotak merah di atas dengan angka (ukuran) yang anda inginkan.

Dari cara di atas, silahkan pilih sesuai keinginan anda. Sekian dan semoga bermanfaat. Terimakasih.

Cara menghilangkan navbar pada blog dengan mudah

Cara menghilangkan navbar pada blog

Kali ini saya akan bahas tentang cara menghilangkan navbar pada blog. Lihat contoh gambar navbar berikut.

Ada 2 cara untuk menghilangkannya. Cara pertama bisa kita gunakan dengan cara mengubah menu default dari blogger dan cara ke dua kita gunakan script CSS. Keduanya sama-sama sangat mudah.

Oke langsung saja cara pertama ikuti langkah-langkah di bawah ini.

1. Login ke akun blogger anda

2. Pilih menu tata letak di bilah sisi kiri. Lihat gambar di bawah.

3. Setelah muncul seperti gambar di atas, pilih OFF (yang saya beri tanda lingkaran merah) dan tekan simpan setelan. Maka dengan cara semudah itu, navbar anda sudah hilang.


Cara ke dua kita gunakan script CSS. Ikuti langkah-langkah di berikut.

1. Login ke akun blogger anda

2. Pilih menu template pada bilah sisi kiri => Sesuaikan. Lihat gambar di bawah.

3. Setelah itu akan muncul tampilan baru, pilih tingkat lanjut => tambahkan CSS => pada kotak CSS, isikan script berikut

#navbar {display:none}

Contoh gambar :

4. Setelah menambahkan script di atas, klik terapkan ke blog dan lihat hasilnya.

Sekian dan semoga bermanfaat. Terimakasih.

Cara membuat postingan terkait di bawah postingan blog dengan mudah

Cara membuat postingan terkait
di bawah postingan blog

Kali ini saya akan membahas tentang cara membuat artikel terkait disertai dengan gambar di bawah postingan blog. Contoh gambarnya sebagai berikut.

Menambah artikel terkait sangat penting. Ketika visitor ingin tahu lebih dalam tentang artikel yang di bahas di blog anda, dia akan mengklik artikel terkait di bawahnya dan pastinya akan meningkatkan traffic blog anda.

Cara membuat postingan terkait pada blog, ikuti langkah-langkah di bawah ini.

1. Login ke akun blogger anda.

2. Klik template pada bilah sisi kiri => Edit HTML. Lihat gambar di bawah.

3. Dalam kotak yang berisi script-script HTML tersebut klik Ctrl + F untuk pencarian. Cari script </head> .

4. Jika sudah ketemu, copy paste script di bawah ini tepat di atas atau sebelum kata </head>.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 10px;  -moz-border-radius: 10px; border-radius: 10px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

5. Setelah selesai paste script di atas, cari script <div class='post-footer'>.  Biasanya ada 2 script yang seperti itu, pilih saja yang ke 2 (jika yang kedua tidak bisa, paste di yang pertama). Jika ada lebih dari 2, coba satu-satu pasti bisa.

6. Jika sudah ketemu, copy paste script berikut di atas <div class='post-footer'>.

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=8&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyrijt4DEMQA8izlkyN8TsP9FvT72rCzOxHizcO7M6wyjKnDZfEMLijpsRh3NlXXQv_ig70jIsFGTsz1AAmgF5pqKIvMv_AL89PEZomJO3sONKtQU3aYdu8jn57Ycrx_vwNP6hc_jVUwJF/s1600/best+blogger+tips.png'/></a>
</b:if></b:if><!-- Related Posts with Thumbnails Code End-->

 7. Untuk merubah banyaknya postingan terkait yang ingin anda tampilkan, ubah angka 4 yang saya beri warna biru di atas menjadi yang anda inginkan.

8. Klik simpan template (letaknya di atas) dan lihat hasilnya.

Sekian dan semoga bermanfaat. Terimakasih.

Cara membuat tulisan berada dalam kotak pada blog

Cara membuat tulisan dalam kotak pada blog

Menyematkan kotak dalam tulisan blog akan lebih terlihat bagus. Banyak pengguna blog menaruh kotak dalam postingan, biasanya salah satu tujuannya adalah menaruh informasi penting agar terlihat rapi dan mudah di perhatikan oleh pengunjung.

Namun untuk membuat kotak tersebut, tidak di sediakan menu default oleh blogger untuk membuatnya. Jadi kita harus membuat sendiri. Ikuti langkah-langkah di bawah ini.

1. Login ke akun blogger anda => tulis artikel (klik entri baru) => buat tulisan contoh seperti gambar berikut.

2. Lihat bagian kiri layar terdapat menu 'Compose' dan 'HTML' => klik HTML (guna untuk membuat kotak) => lalu copy paste script di bawah. lihat gambar di bawah

<div style="background-color: white; border: 3px #1780dd Double; padding: 10px; text-align: left;">.(GANTI TULISAN INI).</div>

Contoh gambarnya seperti berikut:

3. Setelah script di paste, kembali ke menu Compose dan lihat hasilnya => hasilnya akan sebagai berikut.

4. Ada pilihan kotak lainnya seperti gambar berikut.

5. Jika anda ingin merubah seperti gambar di atas, perhatikan script yang saya beri tanda biru di atas pada langkah 2 (Double). Ganti script tersebut dengan script di bawah dan lihat hasilnya.

.suragx (Dashed).

.suragx (Dotted).

.suragx (Groove).

.suragx (Inset).

.suragx (Outset).

.suragx (Ridge).

.suragx (Solid).


6. Jika anda ingin membuat kotak seperti gambar yang saya beri tanda merah di atas (langkah no 4). Buat script sebagai berikut. (penjelasan gambarnya ada pada langkah no 2 dengan mengganti bagian yang saya kasi tanda kotak merah dan mengganti warna backgroundnya).

<div style="background-color: #f3f3f3; padding: 10px; text-align: left;">.(GANTI TULISAN INI).</div>

Penjelasan script :

• border: 3px = ketebalan kotak script. 
• #1780dd = warna kotak script.
• Double = bentuk kotak.
• padding:10px = panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting.
• background-color:ffffff; = warna dalam kotak.
• Dan text-align:left; = posisi tulisan didalam kotak di kiri 

Sekian dan semoga bermanfaat. Terimakasih.

Cara mudah merubah ukuran judul / header pada blog

Cara gampang merubah ukuran 

header blogspot

Kali ini saya akan bahas mengenai cara merubah ukuran judul/header pada blog. Tampilan cantik tentunya di perlukan di sebuah web/blog, hal tersebut bertujuan agar pengunjung blog kita jadi nyaman dan betah berada di blog kita dan tentunya kita juga akan merasa sedikit bangga dengan hal tersebut.

Ok langsung saja cara merubah ukuran judul/header pada blog. Ikuti langkah-langkah berikut :

1. Masuk ke akun blogger anda => buat postingan seperti biasanya.

2. Klik menu template pada bilah sisi kiri => sesuaikan => tingkat lanjut => latar => rubah warna header seperti yang anda inginkan. Lihat gambar di bawah.

3. Selanjutnya merubah ukuran tulisan judulnya, pilih menu tambahkan CSS => pada kotak CSS isikan script sebagai berikut. lihat gambar di bawah.

.header-outer{
left:-40px;
width:1000px;
height:40px;
bottom:10px;
}

4. Jika sudah fix, klik terapkan ke blog (pojok kanan atas).


Penjelasan Script :

• left:-40px; adalah kode untuk mengatur kerapatan sisi kanan header dengan tampilan layar, silahkan di rubah-rubah seperti yang anda inginkan.
• width:1000px; adalah kode untuk menyesuaikan lebar header, silahkan di sesuaikan seperti keinginan anda.
• height:40px; adalah kode untuk merubah ukuran tinggi header, silahkan di sesuaikan seperti keinginan Anda.
• bottom:10px; adalah kode jarak dari bagian bawah, silahkan atur sesuai keinginan anda.

Sekian dan semoga bermanfaat. Terimakasih.

Cara merubah jarak antara judul blog 

dengan deskripsi blog

Cara merubah jarak antara judul blog dengan deskripsi blog kali ini saya akan bahas tentang cara merubah jarak antara judul blog dengan deskripsi blog. kita akan lakukan dengan mudah tanpa harus mengutak-atik HTML. 

Jika merujuk pada template default dari blogspot, jarak antara judul dan deskripsi blog menurut saya terlalu jauh. ini memang tidak berpengaruh apa-apa pada mesin pencari namun banyak yang menilai jarak antara judul dan deskripsi blog itu terlalu jauh dan kurang nyaman di pandang menurut saya juga begitu.

baca juga : cara meletakkan judul blog di tengah-tengah

Cara merubah jarak antara judul blog dan deskripsi blog, ikuti langkah-langkah di bawah ini:

1. Login ke akun blogger anda => klik template => sesuaikan. Lihat gambar di bawah.

2. Klik tingakt lanjut => Tambahkan CSS => dalam kotak CSS, isikan script di bawah ini.

.region-inner.main-inner{ margin-top: -20px; } .titlewrapper{ margin-bottom: -40px; }

Ini gambar ilustrasinya:

Anda bisa merubah spasi antara judul blog dan deskripsi blog sesuai yang anda inginkan. Jarak spasi, bisa anda mainkan dengan merubah angka yang saya tandai biru di script atas. Stiap anda selesai merubah angka dalam script CSS tersebut, lihat preview di bawahnya jika sudah merasa pas di hati, klik terapkan ke blog sebelah kanan atas.

Sekian dan semoga bermanfaat. Terimakasih.

Cara mudah menampilkan postingan 

terbaru pada blog

Untuk menampilkan postingan terbaru pada blog ada banyak cara. Namun kebanyakan blogger menggunakan cara ke tiga (edit HTML).  Padahal blog sudah menyediakan menu widget untuk menampilkan postingan terbaru pada blog. Langsung saja ikuti langkah-langkah di bawah :

1. Masuk ke akun blogger anda => klik tab tata letak di bilah sisi kiri => tambahkan gadget. Lihat gambar di bawah.

2. Pilih feed. Lihat gambar di bawah.

3. Akan muncul menu seperti berikut => isikan alamat blog anda => selanjutnya. Lihat gambar di bawah.

4. Setelah klik lanjutkan, akan muncul seperti gambar dibawah ini. Anda bisa merubah tulisan Judul sesuai dengan keinginan Anda. Batas maksimal postingan terbaru yang dimunculkan paling tinggi 5 postingan. Klik simpan dan lihat hasilnya.

Sekian semoga bermanfaat. Terimakasih.

Cara membuat 'baca selanjutnya / Read more' di postingan blogspot dengan mudah

Cara membuat 'baca selanjutnya / Read more' di postingan blogspot

Walaupun ini sangat mudah, namun banyak diantara blogger yang masih bingung membuat "baca selanjutnya/read more" pada blog. Memang ada cara yang selain ini yaitu dengan mengedit kode HTML blog tersebut. Nanti akan saya share juga cara membuat "baca selanjutnya" dengan menambahkan koding ke dalam HTML blog.

Langsung saja cara membuat baca selanjutnya pada blog tanpa mengedit HTML. Ikuti langkah-langkah di bawah ini :

1. Masuk ke akun blogger anda dan buat postingan => setelah selesai membuat artikel, klik 'insert jump break' (gambar kertas terpotong di atas). Lihat gambar di bawah.

2. Tempatkan kursur pada bagian tulisan anda yang ingin di potong. Lihat gambar di bawah.

3. Publikasikan dan lihat hasilnya.

Sekian dan semoga bermanfaat. Terimakasih.