Blog Database

Jumat, 13 Desember 2013

Menambah Elemen Add Gadget baru di Sidebar

Menambah Elemen baru pada Sidebar,untuk menambahkan widget baru yang lebih mudah jika Anda ingin menampilkan konten - konten Anda. halaman depan atau apakah Anda ingin menampilkannya pada halaman berikutnya.

Menambah Elemen bisa Anda tambahkan mana Anda suka, misalnya di header, sidebar, footer atau elemen - elemen seperti bawah dan kredit tambahan.

Menambah Elemen Baru di Sidebar adalah untuk memudahkan anda dalam pengeditan kode CSS dalam template Anda. Selain elemen Sidebar digunakan adalah yang paling penting dalam template blog Anda (biasanya).

Dalam posting ini saya akan menjelaskan cara Menambah Elemen baru pada Sidebar, jika Anda ingin Menambah Elemen Baru di bagian mana saja pada dasarnya sama seperti pada menambah elemen - emelen yang lainnya

Membuat dan mulai mengedit Elemen baru di Sidebar caranya cukup mudah, sobat blogger hanya cukup mengikuti cara - cara berikut.
1. Login ke blog Anda:

2. Pilih Tata Letak

3. Klik Edit Html

4. Download Template Lengkap dan Klik Expand Template Widget

5. Kemudian cari ]]></b:skin> tambahkan kode di bawah kode di atasnya

#sidebar-top {
           float:right;
           margin:0;
           padding:0px;
           width:352px;
           display:inline;
}

.sidebar-top {
            line-height: 1.5em;
}

.sidebar-top .widget {
            float:left;
            width: 332px;
            margin:0;
            padding: 0px 10px 0px 10px;
}

#sidebar-top .widget-content {
            padding:0px 10px;
            background:#ffffff;
            color: #000000;
}

.sidebar-top a, .sidebar a:visited {
            color:#333333;
            text-decoration:none;
            font:normal 13px Times New Roman;
}

.sidebar-top a:hover {
           text-decoration:none;
           background-color:
           #333333;color:#ffffff;
}

.sidebar-top h2 {
            background:#333333;
            color: #ffffff;
            text-transform: capitalize;
            height: 26px;
            font-size: 16px;
            font-family: Arial;
            margin: 0;
            padding: 10px 0px 0px 20px;
            border-bottom:1px solid #eeeeee;
}

6. Kemudian pencarian <div id='sidebar-wrapper'>

73 Tambahkan kode - kode berikut dibawahnya

<div id='sidebar-top'>
<b:section class='sidebar-top' id='sidebar-top' showaddelement='yes'>
<b:widget id='HTML14' locked='false' title='Perkenalkan Disini!!!' type='HTML'/>
</b:section>
</div>

8. Simpan template.

Selasa, 03 Desember 2013

Memasang Alt Img Otomatis di Blog

ALT Image berfungsi untuk mengoptimasi SEO pada Postingan Blogger yang tersisipkan Gambar, karena Google akan lebih mudah untuk menentukan letak-letak indeks artikel sehingga blog kita yang terdapat ALT image bisa ditemukan pada pencarian gambar di google, maka dari itu ALT Image penting untuk sebuah Blog, coba saja jika anda tidak memasang ALT Image pada postingan anda yang tersisipkan gambar dan anda mengecek Seo Score Blog anda di Chkme.com, pasti mereka akan menyarankan anda untuk selalu menyisipkan ALT Image pada gambar yang belum dipasang ALT Image.

Ada dua cara dalam memasang ALT Image, ada yang secara manual dan ada yang secara Otomatis, jika dengan cara manual lebih ribet, karena kita harus memasang ALT Image setiap kita ingin menyisipkan gambar dalam postingan kita, tetapi dengan menggunakan pemasangan ALT Image otomatis, kita bisa sedikit terbantu, karena kita tidak harus memasang ALT image secara manual saat kita menyisipkan Gambar, karena ALT Image sudah terpasang secara otomatis di Gambar tersebut.

ok deh, kalau sobat ingin memasang ALT Image otomatis di blog sobat, bisa ikuti Cara Berikut.
1. Masuk Ke Blogger
2. Pilih Tab Template
3. Klik Edit HTML
4. Cari Kode </body> (Pake CTRL+F supaya lebih mudah)
5. Tempelkan Kode Dibawah ini tepat diatas Kode </body>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { $('img').each(function(){ var $img = $(this); var filename = $img.attr('src') $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.'))); }); }); //]]> </script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { $('img').each(function(){ var $img = $(this); var filename = $img.attr('src') $img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.'))); }); }); //]]> </script>

Segitu aja, semoga bermanfaat bagi Sobat Blogger.

Selasa, 12 November 2013

Komentar Google Plus Tidak Muncul? ini solusinya

Berdasarkan pertanyan dari rekan rekan pada postingan saya tentang Cara Menampilkan Komentar Blogger dan Google Plus Diblog yang menanyakan tentang masalah komentar Google+ yang tidak bisa muncul saat ada pengunjung yang berkomentar maka postingan ini saya buat.Masalah ini terjadi karena template yang kita gunakan tidak mendukung untuk komentar Google Plus sehingga komentar yang dibuat tidak bisa muncul nah untuk mengatasi masalah ini berikut tipsnya :

1. Pada menu edit HTML cari kode berikut, :

<div class='comments' id='comments'>

gunakan Ctrl + F untuk memudahkan pencarian

2. Setelah ketemu tambahkan kode ini dibawah kode tadi

<div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>

3. Terakhir simpan template sobat.
Sebagai tambahan jika sobat masih menggunakan template lama dan belum menggunakan fitur threaded comment silahkan update template sobat dengan cara mengganti kode berikut :

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>

Deangan kode dibawah ini :

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comment_picker'/>
</b:if>

Demikian yang bisa saya sampaikan berkaitan dengan cara mengatasi komentar G+ yang tidak bisa muncul,selamat mencoba semoga membantu.

sumber: http://abitalita.blogspot.com/2013/09/cara-mengatasi-komentar-google-plus.html

Senin, 04 November 2013

Tombol Demo dan Download Model Flat

Blog dengan content download akan terlihat lebih bagus jika dipasang tombol / button dengan sedikit bergaya, contohnya seperti pada trik blog kita kali ini memasang Tombol Demo dan Download Model Flat seperti yang sering kita lihat pada website penyedia content download.

yang tertarik untuk memasang Tombol Demo dan Download Model Flat, ikuti langkah-langkah berikut ini :

1. Langsung saja pada Edit HTML template blog

2. Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya

.button{list-style:none;text-align:center;width:100%;margin:5px auto;padding:0;clear:both;}
.button li{display:inline;margin:0;padding:0;}
.button li a{background:#3498db;display:inline-block;height:30px;margin:auto 5px;line-height:32px;width:120px;color:#fff !important;font-size:12px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;cursor:default !important;font-family:arial,sans-serif;font-weight:700;text-transform:uppercase;}
.button li a:hover{background:#2980b9;}

3. Kemudian SAVE Template

4. Selanjutnya paste kode ini setiap anda akan membuat postingan (pada mode HTML)

<div style="text-align: center;">
<ul class="button">
<li><a href="#" target="_blank">Live Demo</a></li>
<li><a href="#" target="_blank">Download</a></li>
</ul>
</div>