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.

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.

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/AVvXsEg3gETB3j3WrCm3GCrsyNXWo94z_R7PhX1sQvxnuKQGAYUG9oERN7sSh7C6Canytxs7LHdHRtO66O9MZQzZ_PfuV6NW1yX5m_ZjpgHrMx3BIduuPdbpMhjrjkY3aldGfQnSijVpXyPeDOU/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!

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/AVvXsEh5x9WdSOyzPPKYFvSRh2fMU3GdS5f0jyYYW6FAJ01NomQp6M8FWIpWH9nUNOFVb8Eupr3IGQajqM3cpZngeTD0WDNdnL4FQ9bTs3YLycDHQgrYqU5c0xEcvKiIF7D0bwR2FDjVUMH9PZo/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;

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 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.

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.

Hari ini, saya tidak akan merangkai kata demi kata untuk membuat sebuah tutorial tentang cara mengganti proxy di Google Chrome. Cukup dengan melihat video yang saya upload ke Youtobe ini, Anda akan memahami bagaimana cara merubah proxy dan port di chrome. Untuk diketahui, cara Setting Proxy Server di Google Chrome Browser jauh berbeda dengan di media browser Firefox. Tetapi, saya yakin Anda tidak akan pernah mengalami kesulitan untuk melakukannya.


Google Chrome menggunakan proxy dari sistem komputer untuk dikoneksikan ke jaringan (Internet). Mengubah setting akan memengaruhi Google Chrome serta program lain yang tersambung ke internet.

Pertanyaan :
Saya sudah melakukan tukar link dengan banyak blog. Yang ingin saya tanyakan, bagaimana cara melihat Tautan atau link External yang mengarah ke blog kita? Adakah situs atau website lain (Sebagai pihak ketiga) yang menyediakan tool untuk melihat semua itu, sebut saja External Link Checker?

Jawaban :
Terdapat puluhan situs web yang menyediakan tool External Link Checker seperti Link Vendor, Daily Blog Tips, Check links dan lain-lain. Tapi, kenapa Anda mesti repot-repot memamfaatkan pihak ketiga untuk melihat link External yang mengarah ke blog Anda, karena jumlah Tautan External yang mengarah ke blog kita bisa di lihat di laman Google Webmaster Tools. Caranya? Login ke Akun Google Webmaster Tool Anda. Pilih Lalu Lintas Penelusuran dan klik Tautan ke Situs Anda. Dari sana Anda bisa melihat Jumlah Total Tautan yang mengarah ke Blog Anda dan juga bisa melihat Jumlah Domain teratas untuk blog Anda. Lengkapnya, lihat gambar di bawah ini!

Salah satu cara untuk menghemat Space di area widget (Sidebar) adalah dengan memasng fitur scroll pada widget. Dengan adanya penambahan fitur scroll pada widget, tinggi widget bisa kita atur sesuai dengan tinggi yang diharapkan. Pada umumnya, fitur scroll dipasang pada widget daftar isi, widget Recent Post, Widget FeedBurner dan Widget Link Exchange.


Untuk menambahkan fitur Scroll pada Widget, sobat blogger hanya menambahkan kode SEBELUM dan SETELAH kode widget sobat. Berikut ini kode yang disisipkan :

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #eee;">
Kode Widget Sobat disini
</div>

Tambahan :

1. Ganti tulisan yang berwarna merah dengan kode Widget Sobat.
2. height:200px adalah ukuran tinggi widget
3. Untuk menghilangkan bingkai Scroll, sobat blogger tinggal mengganti angka 1 menjadi 0 (Nol) pada kode border:1px
4. #eee adalah kode border widget, bisa diganti dengan warna yang lain. Untuk melihat kode warna, silahkan kunjungi link berikut : Web Color Chart

Semenjak bulan Juli 2013, XL menampilkan Toolbar di setiap kiri bawah web blog yang dikunjungi. Toolbar XL tampil dengan sebuah logo kecil yang bertuliskan XL. Jika pengguna internet XL meng-klik logo tersebut, maka toolbar-nya akan memanjang dan menampilkan nomor XL yang digunakan dan menampilkan 2 shotcut. Shortcut pertama untuk mengecek kecepatan internet dan Shortcut kedua untuk mengecek sisa kuota internet XL. Lihat Gambar berikut!


Bagi saya pribadi, Toolbar XL ini sangat menggangu karena banyak artikel yang saya baca tertutup oleh toolbar ini (Artikel dari blog yang memiliki template Zoom atau lebar). Barangkali, tidak sedikit pengguna XL yang merasakan hal yang sama dengan yang saya rasakan. Oleh karenanya, saya pun membuat sebuah artikel tentang cara menghilangkan Toolbar XL saat internetan menggunakan PC.

Untuk menghilangkan Toolbar XL, klik logo 1x. Setelah itu, klik tanda silang (Kali) yang terdapat pada Toolbar tersebut. Pop Up windows akan muncul seperti gambar yang tersedia. Apakah Anda yakin? Klik "Ya". Semua proses selesai.

Ketika kita berbicara tentang Daftar Isi blog (Table of Content), maka kita akan langsung teringat dengan sebuah nama yaitu "Abu Farhan". Siapakan dia? Abu Farhan adalah salah satu Webmaster kebanggaan Indonesia yang telah menciptakan banyak Daftar Isi Blog yang memiliki tampilan indah, cantik dan keren. Nama Abu Farhan tidak hanya sering disebut di Indonesia, tapi sering juga disebut di luar negeri. Setiap Daftar isi yang dibuat oleh Abu Farhan, selalu saja mendatangkan pujian dari setiap webmaster yang melihatnya. Hal ini dapat dibuktikan dengan komentar-komentar yang ditinggalkan oleh pengunjung Website yang dikelolanya.


Salah satu Table of Content yang di buat oleh Abu Farhan adalah Table of Content yang berbasis Accordion. Daftar isi Accordion memiliki tampilan yang sangat menakjubkan yang disusun berdasarkan Label Posting. Ketika judul Label di klik oleh pengunjung, maka posting yang terkait dengan label akan terbuka.

Cara memasang daftar isi blogger ini tidak sulit. Kita hanya memasukkan kode berikut di tempat kita biasa menulis artikel/posting. Tapi perlu di ingat, kode di masukkan pada mode HTML bukan Compose.

<link href="http://muhammad-septi-rosidi.googlecode.com/svn/branches/TOC/toc.css" rel="stylesheet" type="text/css"></link> <script src="https://muhammad-septi-rosidi.googlecode.com/svn/branches/TOC/toc.js">
</script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=1000&amp;callback=loadtoc" type="text/javascript">
</script> <script type="text/javascript">
var accToc=true;
</script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> <script src="http://muhammad-septi-rosidi.googlecode.com/svn/gadgets/extras/toc.js" type="text/javascript"></script>

Kode di atas sudah saya modifikasi sedimikian rupa, sehingga sobat blogger tidak perlu edit kode di atas.

Dengan Google Drive, Anda dapat menyimpan segala sesuatu dan berbagi apa saja. Google Drive adalah penyimpanan pribadi untuk berkas, map, dan Google Documents Anda yang dapat Anda akses dari peramban web atau perangkat apa pun yang sudah Anda pasangi Google Drive.

Simpan item Anda sebanyak 2 GB pertama secara gratis.
Bila Google Drive Anda semakin bertambah, beli penyimpanan tambahan mulai harga kurang dari $4,99 per bulan untuk 100 GB.

Akses semua yang ada di Google Drive Anda dari semua perangkat.
File Anda di Google Drive tidak akan pernah lenyap. Anda dapat memasang aplikasi desktop dan seluler untuk mengakses file Anda dengan komputer, ponsel cerdas, atau tablet selain drive.google.com.


Berkas selalu disinkronkan. Cukup sambungkan ke web – ini akan diproses secara otomatis.
Kemampuan sinkronisasi yang terpasang pada Google Drive memastikan bahwa berkas, map, dan Google Documents Anda semuanya sama di seluruh perangkat.

Berhenti mengirim lampiran melalui email. Mulailah berbagi.
Google Drive memungkinkan Anda memilih siapa - teman, keluarga, rekan kerja - yang bisa mendapatkan file Anda. Anda tidak perlu melampirkan lampiran email lagi. Anda cukup berbagi file, folder, atau Google Doc dari perangkat apapun.

Tetap bekerja sama
Apakah Anda bekerja sama dengan orang lain di Google Docs, Sheets, dan Slides? Google Drive memungkinkan Anda terus membuat, mengakses, dan berkolaborasi dalam versi dunia bebas. Google Drive sama seperti layanan Google sebelumnya namun dengan beberapa fitur baru yang bermamfaat.

Yahoo Web Player adalah sebuah fitur blog yang dapat digunakan untuk memainkan mp3, YouTube , dan berbagai video dan format audio lainnya. Mengutip ungkapan dari official webplayer.com tentang Yahoo Web Player "Yahoo Web Player is The easiest way to add video and audio to your site. Bring your pages to life by adding relevant rich media using our smart, sleek and easy-to-install player."


Yahoo Web Player yang saya berikan buat sobat blogger menggunakan fitur Slide Out, begitu pengunjung blog meng-klik link lagu, dari sebelah kanan blog kita akan muncul Web Player dari Yahoo ini dengan tampilan yang sangat keren. Sampai saat ini, belum ada satupun blog yang saya lihat memasang Yahoo Web Player di blog-nya. Jadi, buruan sobat blogger pasang supaya jadi yang pertama.

---

Cara Membuat Yahoo Web Player Di Blog

---

• Sign In di blogger.com
• Kemudian klik tombol warna biru di bawah ini!

Temukan informasi yang lebih lengkap atau detail mengenai Yahoo Web Player di situs resminya melalui link berikut : Yahoo Web Player Official Site