TERBARU : Blogger

Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Membuat CSS Border Triangle

CSS ini paling saya sering pakai dan saya suka gabungkan dengan elemen :before dan :after cuma saya suka kelupaan kode-kodenya, oleh karena itu saya postkan sebagai dokumentasi di blog ini biar tidak bolak-balik search tentang CSS Border Triangle. referensi css ini saya baca dari hompimpaalaihumgambreng.
1. Pembentukan Triangle(Segitiga)
bisa dilihat pada demo Div dibawah ini:

Div diatas terbentuk dengan css style dibawah ini:

.coba {
width:0px;
height:0px;
border-width:150px;
border-style:solid;
border-color: red green blue yellow;
}

dengan kode html :

<div class="coba">
</div>

Untuk ukuran dari bordernya bisa kamu atur pada kode css border-width, jika belum mengerti pembentukan tampilan dari css triangle ini bisa di ilustrasikan dengan gambar dibawah ini:

2. Menghilangkan sebagian atau semua Border color
kamu juga bisa membuat tampilan lain menggunakan css border triangle seperti ini :

dengan menambahkan kode transparent pada border-color css stylenya untuk menghilangkan bagian yang diinginkan :

.coba2 {
width:0px;
height:0px;
border-width:50px;
border-style:solid;
border-color: black black black transparent
}

Juga seperti ini tinggal kreasikan pemilihan warna dan transparent -nya.

.coba3 {
width:0px;
height:0px;
border-width:50px;
border-style:solid;
border-color: #fc0 #fc0 transparent #fc0
}

More about → Membuat CSS Border Triangle

Minimalisir Copas - Manipulasi menghilangkan warna block teks

Mungkin anda seseorang yang tidak menyukai blognya 100% di Copas dari orang lain, memang tidak enak bila artikel yang kita tulis dengan seenaknya di copas oleh orang lain. Artikel blog yang di copas bisa menggambarkan artikel kita disukai oleh ornag lain namun bukan suatu alasan juga sampai 100% copas, dan untuk saya sendiri lebih menghargai jika artikel tsb minimal di edit kembali menjadi artikel dengan ciri khasnya sendiri bahkan lebih baik dalam penyampaiannya kalaupun tidak menulis sumber.

Karena Sumber ilmu hanya dari tuhan, manusia yang mau lebih berusaha yang akan menemukan ilmu pengetahuan tsb, dan kenapa tidak kita untuk menghargai orang yang berusaha itu. :D

Ada banyak cara meminimalisir Copas 100% dari yang memakai Javascript(js) ataupun CSS, dan maksud saya Copas disini seenggaknya orang lain mau belajar membaca, menelaah, dan menulisnya kembali sesuai keiinginan.
Berikut salah satunya menggunakan CSS untuk memanipulasi seleksi warna block teks seperti menghilang padahal bisa di copy teksnya.

- Cukup simpan kode berikut pada XML template kamu, tepatnya diatas kode ]]> :

::selection {background:none;}
::-moz-selection {background:none;}
::-webkit-selection {background:none;}

- Simpan template dan lihat hasilnya dengan mencoba Block Teks

kalaupun kamu ingin tidak menghilangkan warnanya atau menggantinya dengan warna yang kamu inginkan tinggal edit saja CSS nya, Contoh :

::selection {background:#ccc; color:#FC0;}
::-moz-selection {background:#ccc; color:#FC0;}
::-webkit-selection {background:#ccc; color:#FC0;}

More about → Minimalisir Copas - Manipulasi menghilangkan warna block teks

Membuat Teks link dengan background icon open tab

Untuk dokumentasi CSS style kali ini saya buat adalah membuat teks link kita mempunyai icon misalkan icon pop up seperti ini

, Pasti sudah pernah melihatkan Link dengan icon seperti itu disampingnya, yang berguna sebagai penunjuk link yang bisa dibuka atau harus dibuka.
Hasil akhirnya lebih jelasnya seperti ini

Ini adalah link dengan icon open tab

Seperti itu, pasti pernah melihatnya kan, jika da yang belum tahu caranya agar terpasang otomatis di tiap teks link post artikel blog kamu, berikut ini caranya, cuma sedikit menambahkan css :

.post-body a{
padding-right: 18px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ_vtkacWkMYmRisBUi_QLAhK0D1LcyPLLnImN3SsZUznQWn1Llzt5Opuf9aC7EZjTdjSnf8KDfcSXyOrxOD8UK6soRPqqtM_aZtiIEagOOSycyvAmGs_jlpSMbx3wTIqeGkKTWjxNGj6m/s1600/link.png) no-repeat center right;
}
.separator a{ background:none;}

jika div class post-body a sudah ada cukup tambahkan saja isinya :

padding-right: 18px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ_vtkacWkMYmRisBUi_QLAhK0D1LcyPLLnImN3SsZUznQWn1Llzt5Opuf9aC7EZjTdjSnf8KDfcSXyOrxOD8UK6soRPqqtM_aZtiIEagOOSycyvAmGs_jlpSMbx3wTIqeGkKTWjxNGj6m/s1600/link.png) no-repeat center right;

cara menambahkan icon nya ada banyak cara dengan selektor css, bisa kamu baca lebih lengkap:

hunlock.com

More about → Membuat Teks link dengan background icon open tab

Cara mengatasi deskripsi blog yang tidak tampil di facebook

Saat kita menyimpan tautan atau link pada status facebook dan komentar facebook bagian dari deskripsi blognya tidak tampil. Mungkin terasa sepele namun suatu hal kecil seperti ini bisa menjadi suatu hal yang sangat mengganggu untuk blogger. :D
yang seharusnya seperti gambar dibawah ini:

Menjadi seperti ini deskripsinya tidak tampil:

Bug ini terjadi jika template blog kita tidak terbaca bagian deskripsinya, dan dari apa yang pernah saya baca dari buka rahasia hal ini juga bisa terjadi karena Facebook secara rutin mengambil data di dalam halaman dan menyimpannya ke dalam cache. Setelah suatu halaman baru ditemukan pada suatu url posting yang di-share, Facebook melakukan crawl dan menyimpan data-data halaman tersebut, dalam hal ini adalah gambar dan teks. Yg dilakukan pada saat crawl adalah mencari meta data (dalam tag opengraph dan tag-tag lain). Ketika meta data tidak ditemukan, algoritma Facebook akan mengambil data gambar dan teks apapun yg pertama kali ditemukan pada halaman tersebut. Nah, inilah mengapa kadang snippet gambar dan deskripsi yang ditampilkan tidak sesuai.

Untuk penyebab secara pastinya dari template saya sendiri kurang tahu pasti, namun untuk deskripsi kita bisa terbaca di facebook kita harus menambahkan Meta pengganti agar bisa kembali tampil dan terbaca di facebook .
Caranya simpan kode dibawah ini tepat diatas kode <data:post.body/> :

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.snippet'>
<meta expr:content='data:post.snippet' name='description'/>
</b:if>
</b:if>

Simpan Template

More about → Cara mengatasi deskripsi blog yang tidak tampil di facebook

Mengubah bagian deskripsi header dengan judul posting

Hari ini saya ingin mendokumentasi lagi tentang pengeditan template blogger untuk Mengubah bagian deskripsi header dengan judul posting sesuai dengan judul post artikel page yang sedang dibuka. Lebih jelasnya yaitu saat kita membuka Halaman Artikel bagian deskripsi blog akan diganti dengan Judul Artikel yang sedang dibuka, namun saat di homepage bagian deskripsi kembali ke semula.
Seperti gambar dibawah ini:

Sekarang kita lakukan untuk penggantian nya :
1. Pertama cari Kode xml seperti dibawah ini :

<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>

Atau yang seperti ini jika yang diatas tidak ada:

<b:includable id='description'>
<div id='desc'><data:description/></div>
</b:includable>

2. Jika sudah ketemu ganti saja dengan kode ini:

<div class='descriptionwrapper'>
<b:if cond='data:blog.pageType != "item"'><p class='description'><span><data:description/></span></p>
<b:else/>
<p class='description'><span><b:if cond='data:blog.pageType == "item"'>
<data:blog.pageName/>
</b:if></span></p>
</b:if>
</div>

3. Simpan template dan lihat hasilnya apakah saat di halaman artikel bagian deskripsi blog jadi judul posting/artikel, dan di homepage kembali normal dengan deskripsi blog.

More about → Mengubah bagian deskripsi header dengan judul posting

Cara membuat Posting lama dan posting baru blogger menjadi judul artikel

Yang saya akan postingkan untuk kali ini adalah bagaimana caranya untuk mengubah Navigasi petunjuk posting lama ataupun posting baru digantikan tampilannya dengan judul dari artikel posting lama ataupun baru. Menu posting lama dan baru yang ada dibawah mnu komentar blogger atau yang biasanya disebut blog-pager, Untuk contohnya sendiri sudah saya terapkan pada template saya di blog biroelangiet.blogspot.com, untuk contohnya bisa dilihat jika membuka salah satu artikelnya, ataupun anda bisa melihan screenshotnya dibawah ini:

untuk cara membuatnya saya mempunyai dua Opsi :

Mengganti blogpagernya dihompage dan di artikelpage
Menggantinya hanya di artikel page nya saja, dihomepage tetap default(bawaan blogger).

Opsi Satu

Kita mulai dengan Pilihan yang pertama, mengganti Navigasi petunjuk posting lama ataupun posting baru dengan judul artikel dihompage maupun di artikelpage, silahkan masuk ke menu eit html nya.
1. Copy kode dibawah ini dan simpan diatas kode ]]></b:skin> :

#blog-pager-newer-link {font-size:12px;width:200px;float:left; text-align:left;}
#blog-pager-older-link {font-size:12px;width:200px;float:right; text-align:right;}

Untuk width atau lebarnya sesuaikan dengan template anda.
2. Simpan script jquery ini dibawah kode </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://biroelangiet.googlecode.com/files/blogpager.js' type='text/javascript'/>

3. Simpan tempate

Opsi Dua

Berikutnya kita mulai untuk Pilihan Yang Kedua yaitu mengubah blogpagernya dengan nama judul artikel hanya jika berada di page artikel, jadi tampilan dihompage untuk blogpagernya default.
Cukup copykan kode dibawah ini dibawah kode </head>:

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#blog-pager-newer-link {font-size:12px;width:300px;float:left; text-align:left;}
#blog-pager-older-link {font-size:12px;width:300px;float:right; text-align:right;}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://biroelangiet.googlecode.com/files/blogpager.js' type='text/javascript'/>
</b:if>

Simpan template

Referensi: ardiyantobay.blogspot.com

More about → Cara membuat Posting lama dan posting baru blogger menjadi judul artikel

Cara membuat blog kita di indeks google memiliki rating bintang

Entah ini termasuk kategori SEO atau bukan, saya kurang tahu tentang masalah apa itu SEO, yang pasti saya menyukainya karena membuat status blog kita di indeks google lebih menarik dengan adanya rating bintang atau Rich Snippet untuk blogger.
Jika diandaikan sebuah warung, warung kita lebih terang karena adanya Lampu yang terang dan mencolok dibandingkan dengan warung lain, bisa diandaikan seperti itu setidaknya bisa membuat pengunjung tertarik untuk melihat informasi blog kita di Search Engine Google. Ada banyak jenis Rich Snippet Lengkapnya bisa dibaca disini

Sekarang kita mulai untuk memasang Icon Rating Bintang untuk blog kita saat berada di indeks google.
1. Buka atau daftar akun Google Plus
2. Jika sudah buka bagian profil anda dan copykan no ID google plus nya seperti no yang saya beri tanda merah pada gambar dibawah ini:

Pilih Edit Profil, dan pilih Kontributor Untuk, isi dengan URL blog anda, dan Pilih Pengeditan Selesai.

3. Sekarang masuk ke menu edit html blogger anda, saran saya pilih download template terlebih dahulu jikalau nanti ada kesalahan, Jika sudah Contreng menu Expand Template Widget, dan cari kode <head> (CTR+F untuk mempermudah pencarian) ,dan simpan kode ini dibawah kode <head> tadi :

<link href='https://plus.google.com/101970755812325494011' rel='publisher'/>

yang berwarna merah ganti dengan ID google plus anda seperti pada langkah No2.
4. Simpan kode dibawah ini tepat dibawah kode <body> :

<div>
<div itemscope='' itemtype='http://data-vocabulary.org/Review'>

Kemudian tambahkan kode div penutup dibawa ini tepat diatas kode </body> :

</div></div>

5. Sampai disini coba Simpan template terlebih dahulu untuk memastikkan jika tidak terjadi kesalahan.
6. Jika sudah disimpan dan tidak terjadi kesalahan penempatan kita lanjutkan ke tahap berikutnya.
7. Cari kode post-title entry-title di template anda, akan kita temukan kode xml seperti ini:

<H3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</H3>

dan kita tambahkan kode berwarna merah dan xml nya akan seperti ini (biasanya ada 2 kode xml yang sama seperti diatas, kita tambahkan sama seperti dibawah ini pada keduanya):

<span itemprop='itemreviewed'><span itemprop='description'>
<H3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</H3></span></span>

8. Sampai disini coba Simpan template terlebih dahulu untuk memastikkan jika tidak terjadi kesalahan.
9. Cari kode <data:post.body/> dan simpan kode dibawah ini tepat dibawah kode yang di cari tadi jika ada lebih dari satu samakan saja tambahkan kode dibawah ini:

Description: <span itemprop='description'><data:post.title/></span>,
Rating: <span itemprop='rating'>4.5</span>,
Reviewer: <span itemprop='reviewer'><data:post.author/></span>,
ItemReviewed: <span itemprop='itemreviewed'><data:post.title/></span>

10. Simpan template.

Berikutnya coba anda cek berhasil tidaknya di Rich Snippets Testing Tool, Masukkan Url yang sekiranya banyak dikunjungi, pengalaman saya jika artikelnya kurang banyak dibuka biasanya tidak muncul Rating nya, Namun yang penting verified seperti gambar dibawah ini:

Dari pengalaman saya sama halnya di indeks google artikel yang belum banyak dibuka biasanya tidak muncul rating bintangnya.
referensi: pelajaran blog

More about → Cara membuat blog kita di indeks google memiliki rating bintang

Cara membuat komentar facebook dibawah artikel blogger

Sebuah kotak komentar bertujuan untuk memberikan fasilitas diskusi pada sebuah blog, tanpa sebuah kotak komentar yang berisi kritik dan saran sebuah blog memiliki kesan yang kaku tanpa adanya sebuah diskusi.
Fasilitas komentar itu sendiri untuk Blogger sudah tersedia, namun jika kita merasa bosan dengan menu komentar bawaan blogger kita bisa memanfaatkan fasilitas komentar yang telah disediakan Facebook untuk kita pasang di blog kita.
Cara memasang menu komentar facebook langkah-langkahnya adalah sebagai berikut:
1. Login akun facebook anda.
2. Kunjungi URL berikut https://developers.facebook.com/apps. pilih Create App.

3. Isi form Pendaftaran contohnya seperti gambar dibawah ini:

4. Lanjutkan dan isi Captcha Verifikasinya, Jika berikutnya tampil seprti gambar dibawah ini berarti akun anda belum verify no ponsel.

Pilih saja link ponsel untuk verifikasi no ponsel anda.

5. Jika sudah konfirmasi Nomor Ponsel dan memasukkan kode yang telah dikirim oleh facebook melalui sms, dan mengkonfirmasinya. Close saja menu Popup konfirmasi ponselnya.
6. Kembali ketahap Create App sekarang kamu bisa isi Form Create appnya.

7.Pilih Lanjutkan dan Isi kode pemeriksaan Captchanya.
8. Akan tampil page seperti ini :

kode yang ditandai warna merah itulah yang akan kita perlukan untuk membuat facebook comment di blog kita.
9. Sekarang masuk ke menu Edit Html blogger anda, dan Centang menu Expand Template Widget.
10. Sekarang cari kode yang mirip seperti kode dibawah ni biasanya berada dipaling atas :

<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

11. Tambahkan kode berwarna merah hingga seperti script dibawah ini:

<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

12. Cari kode <title><data:blog.pageTitle/></title> , dan simpan script ini tepat dibawahnya :

<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='Nama atau Judul Blog' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='App Id Facebook' property='fb:app_id'/>
<meta content='ID Facebook' property='fb:admins'/>
<meta content='article' property='og:type'/>

13. Cari kode <body> , dan simpan script beriktu tepat dibawahnya:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'App ID facebook',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};

(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
<fb:comments/>
</script>

14. Cari kode;

<div class='post-footer-line post-footer-line-3'/>
</div>

simpan script ini tepat dibawahnya:

<b:if cond='data:blog.pageType == "item"'>
<p align='left'>Silahkan Gunakan Facebook Comment, Jika Anda Tidak Memiliki Url Blog!</p>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments colorscheme='white' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/></div>
</b:if>

15. Simpan template, untuk warna skema nya bisa dark ataupun white, dan untuk width nya ubah sesuai kebutuhan.

Jika ingin menyembunyikan menu komentar bawaan bloggernya pilih Setelan, Komentar, dan pilih Sembunyikan (jika pada antarmuka blogger lama).

More about → Cara membuat komentar facebook dibawah artikel blogger

Cara membuat blog di blogger

Blogger adalah salah satu Produk Google yang dimiliki oleh PyraLab,pada akhir tahun 2002 akhirnya PyraLab diakuisi oleh Google.Com. Semenjak itu, banyak terdapat aplikasi-aplikasi yang bersifat umum atau terbuka yang mampu mempermudah penulisan dan pengelolaan sebuah blog dengan domain namablog.blogspot.com.

Banyak keunggulan dari blogger dan kemudahan untuk mengelola sebuah Blog, karena tool yang mudah dimengerti. Selain itu sudah ada banyak situs-situs yang menyediakan artikel tutorial dalam mengelola sebuah Blog di Blogger. Jika penasaran silahkan coba saja mendaftarkan diri di blogger, yang bisa anda gunakan untuk membuat artikel keinginanmu.

Caranya mudah :
1. Saya sarankan untuk membuat email Gmail, ini akan menguntungkan anda jika menggunakan email produk google yang akan fleksible untuk menggunakan produk google lainnya, cara membuat Gmail bisa anda kunjungi artikel Cara membuat email Google Mail atau Gmail. Jika anda ingin membuatnya dengan email seperti yahoo atau hotmail pun silahkan saja.
2. Sebelumnya saya akan bahas terlebih dahulu pembuatan blog jika anda sudah mempunyai Akun Gmail.
3. Kunjungi situs blogger.com, setelah itu anda cukup login dengan menggunakan email google yang sudah dibuat.

4. Isi Nama Tampilan sesuai keinginan, dan beri tan da ceklist pada tulisan persetujuan persyaratan dan layanan, dan pilih LANJUTKAN.

5. Pilih menu Blog Baru

6. Isi Judul Blog, pilih Alamat blog anda, dan pilih Template awal yang diinginkan.

7. Jika sudah pilih Buat Blog.
8. Tampilan berikutnya akan muncul menu seperti dibawah ini :

9. Blog sudah berhasil, berikutnya tinggal anda kelola menggunakan menu-menu yang tersedia.

Sekedar saran lainnya menurut saya buat anda yang baru belajar blogger, lebih baik menggunakan antarmuka blogger lawas, karena Blogger menu diatas menggunakan antarmuka baru.
Alasannya karena menurut saya situs-situs yang menyediakan tutorial blogger kebanyakan menggunakan antarmuka blogger lawas.
caranya pilih gambar menu di sebelah kanan atas dan pilih antarmuka blogger lawas.

Maka tampilannya akan seperti ini :

More about → Cara membuat blog di blogger

Cara menambahkan Background gambar pada Posting

Hal yang mendasar tapi bisa berguna buat yang baru belajar blogger dan belajar tentang DIV atau Division yaitu Tag HTML yang mempunyai fungsi untuk mengkelompokan atau membagi file fungsi HTML lain yang bisa memudahkan pemberian Style yang berbeda sesuai keinginan pada masing-masing kelompoknya.

kembali ke topik Cara untuk menambahkan Background gambar pada Posting, kita akan pergunakan fungsi div style.

contoh kita akan memberikan Backround Image dari posting berikut ini:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sekarang kita buat div stylenya ataupun pengelompokkannya dengan cara seperti ini:

<div style="background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_Kms886KM1-PCfq-tUykqL_YgPEMtl4IHXJF1CZ5yydqnU9azOUWksYaIRWp9bPVAnBI3fH9AEJccyHLjwPGDRV0FeXn4SCG0XgolAOSx3W7-N6irYpXzo2k7WewiLtAQPqK0GeD-w61w/s1600/bg.jpg) repeat; color: #ffffff; padding:5px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

Background: url (URL gambar yang diinginkan)
Repeat ,berfungsi untuk melakukan pengulangan gambar misal jika gambar 250x250 pixel, maka akan diulangi penambahan gambar ke samping , dan kebawah keatas secara berturut-turut. Jika gambar tidak ingin di repeat maka gunakan kode no-repeat. fungsi lainnya repeat-x(hanya keatas kebawah) dan repeat-y(kesamping kanan dan kiri).
padding, berfungsi untuk memberikan jarak bagian dalam pada suatu div.
color, berfungsi untuk memberikan warna teks pada sebuah div.

Hasilnya seperti ini:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

More about → Cara menambahkan Background gambar pada Posting

Cara membuat Scroll pada gadget arsip Blogger

Untuk saya kali ini, yang akan membahas tentang cara membuat scroll pada gadget arsip blogger, sebenarnya seberapa pentingkah membuat scroll pada gadget blog mu? sccroll ini berfungsi untuk mengefesienkan arsip yang memanjang ke bawah agar tidak memakan tempat terlalu banyak.

Dengan scroll di gadget arsipmu bisa meminimalkan gadget arsip karena memakai scroll.
di bawah ini contoh Gadget Arsip tanpa scroll:

Contoh gadget Arsip dengan scroll:

1. Login Blogger
2. Pilih Rancangan, Edit Html
3. Centang Expand Template Widget
4. Cari kode <div id='ArchiveList'> (Ctrl + F untuk lebih mudah mencarinya)
5. Cari kode seperti dibawah ini:

<h2><data:title/></h2>
      </b:if>
      <div class='widget-content'>
      <div id='ArchiveList'>
      <div expr:id='data:widget.instanceId + "_ArchiveList"'>
        <b:if cond='data:style == "HIERARCHY"'>
         <b:include data='data' name='interval'/>
        </b:if>
        <b:if cond='data:style == "FLAT"'>
          <b:include data='data' name='flat'/>
        </b:if>
        <b:if cond='data:style == "MENU"'>
          <b:include data='data' name='menu'/>
        </b:if>
      </div></div>
      </div>
    </b:includable>

Tambahkan kode bercetak tebal seperti di bawah ini:

<h2><data:title/></h2>
      </b:if>
      <div class='widget-content'>
    <div style='overflow:auto; width: auto; height:220px;'>
      <div id='ArchiveList'>
      <div expr:id='data:widget.instanceId + "_ArchiveList"'>
        <b:if cond='data:style == "HIERARCHY"'>
         <b:include data='data' name='interval'/>
        </b:if>
        <b:if cond='data:style == "FLAT"'>
          <b:include data='data' name='flat'/>
        </b:if>
        <b:if cond='data:style == "MENU"'>
          <b:include data='data' name='menu'/>
        </b:if>
      </div></div>
      </div>
      </div>
    </b:includable>

Alternatif lain kamu lihat kode diatas mempunyai Id dengan nama ArchiveList pada kode <div id='ArchiveList'>,

Kamu juga bisa membuat scroll cukup dengan CSS berikut simpan diatas kode ]]>:

#ArchiveList {
overflow:auto;
width:auto;
height:220px;
}

Untuk nama id tersebut bisa saja bukan ArchiveList bisa saja ArchiveList1, ArchiveList2, dst. sesuai nama Arsip gadget di template kamu jadi tinggal disesuaikan saja. ok

More about → Cara membuat Scroll pada gadget arsip Blogger

Cara membuat threaded comment menu pada blogger

Penjelasan dari menu komentar ini yaitu penambahan menu Reply atau Balas dengan ciri khas balasan sebuah komentar yang menyamping ke kanan.Seperti menu komentar pada wordpress, blogger untuk sekarang ini juga sudah support threaded comment menu ini.
Dengan menu komentar ini memberikan suasana dialog komentar lebih stylish daripada menu komentar yang versi sebelumnya di blogger.

Berikut adalah cara pemasangannya :
1. Masuk ke menu Rancangan » Edit html
2. Download template lengkap terlebih dahulu sebagai antisipasi jika terjadi kesalahan.
3. Centang menu expand template widget
4. Cari kode <b:include data='post' name='comments'/> (Ctrl+F untuk mempermudah pencariaan) ada 4 kode jadi anda harus teliti dalam mengganti kode ini.
5. Sekarang ganti 4 kode <b:include data='post' name='comments'/> dengan kode dibawah ini:

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

6. Simpan template dan sekarang coba lihat hasilnya.
7. Tambahan untuk menambahkan style css, copy kan css berikut tepat diatas kode ]]></b:skin> :

/* div untuk image admin */
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
/* div untuk coment loadmore*/
.comments .comments-content .loadmore a {
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
.comments .continue {
border-top: 2px solid #cccccc;
}
/* div untuk bagian tanggal komentar*/
.comments .comments-content .datetime a{
float: right;
color: #069;
}
.comment-block .comment-footer a:link, a:visited {
color:#069;
}
.comments .avatar-image-container {

}
.comments .continue a{
color:#069;
}
/* div untuk body dari satu komentar */
#comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child {
background:#fafafa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoG2mmlJFZOh5Z_Ww0cL51LFESDo2dySV0RfFKNeYR5rzbiUnGCdmg3-m5iF5s98WGPAz867oNp7pr7VEfjYwtZkQqrt5m-8WTODPYKZzHX7GXZ9ZE2llcGRtqkgjbTr21oFl8tL8isah8/s0/header-shadow.png) top repeat-x;margin:10px auto 0;
margin:10px 0;
padding:5px 10px;
border-top:1px solid #cccccc;
border-left:3px solid #069;
border-bottom:1px solid #cccccc;
border-right:1px solid #cccccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;
-moz-box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;
-webkit-box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;
}
/* div untuk tombol balas dan hapus */
.comment-actions a {
background: #c1c1c1;
background: -moz-linear-gradient(top, #c1c1c1 0%, #dedede 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c1c1c1), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: -o-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: -ms-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: linear-gradient(top, #c1c1c1 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1c1c1', endColorstr='#dedede',GradientType=0 ); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding:2px 5px !important; margin-right:10px; border:1px solid #c1c1c1; color:#666666; -webkit-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); }
.comment-actions a:hover { background: #c9c9c9; background: -moz-linear-gradient(top, #c9c9c9 0%, #dedede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9c9c9), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: -o-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: -ms-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: linear-gradient(top, #c9c9c9 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#dedede',GradientType=0 ); text-decoration:none !important; }

/* div untuk wadah avatar */
.avatar-image-container {
border: 1px soli #ccc;
}

More about → Cara membuat threaded comment menu pada blogger

Cara memasang menu navigasi breadcrumb pada blog

Sebuah navigasi yang berada diatas judul artikel yang akan tampil jika ada di single post atau di page isi artikel. Fungsinya adalah untuk memperlihatkan posisi artikel kepada pembaca dan juga dapat mencari artikel dalam kategori yang sama.
Breadcrumb sendiri kalau diterjemahkan dalam bahasa indonesia artinya remah roti; menurut saya maksudnya mungkin menggambarkan dari sebuah Roti (Sebuah blog) dan navigasi ini adalah remah roti nya atau potongan dari isi sebuah blog.

Berikut adalah langkah-langkah penerapan Menu Navigasi Breadcrumb:
1. Masuk ke menu Rancangan » Edit html, Centang menu expand template widget.
2. Cari kode ]]></b:skin> dan simpan CSS ini diatas kode tadi :

p.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:double 3px
#e6e4e3;
}

3. Cari kode :

<b:includable id='main' var='top'>

dan simpan kode ini diatas kode Langkah no 3:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>
<b:if cond='data:blog.pageType == "item"'>

<p class='breadcrumbs'>
<span class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
» Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>

<p class='breadcrumbs'>
<span class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

4. Cari kode :

<b:include data='top' name='status-message'/>

dan ganti dengan kode dibawah ini:

<b:include data='posts' name='breadcrumb'/>

More about → Cara memasang menu navigasi breadcrumb pada blog

Cara mengubah tag heading template blogger

Tag heading adalah attribut html yang berfungsi untuk menyusun level-level heading dan subheading pada website sehingga akan lebih terstruktur dengan baik. Terdapat 6 buah tag yang digunakan untuk memberikan judul (heading) pada badan dokumen HTML dengan menggunakan tag H1 sampai H6. Menurut apa yang saya baca dan saya dengar dari teman saya SEO on page terletak pada Susunan Tag Heading ini yang biasa mereka sebut Dynamic Heading.

Untuk memastikan Template blog kita jika sedang berada di single post atau page artikel; judul post menjadi H1 dan judul blog menjadi p. title tidak ada tag heading dan jika berada di homepage maka susunannya menjadi; judul blog H1 dan judul post h2 atau h3.

Berikut adalah cara mengubahnya:
1. Cari kode dibawah ini

<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>

2. dan ganti semua kode diatas dengan kode dibawah ini:

<div id='header-inner'>
<div class='titlewrapper'>
<b:if cond='data:blog.pageType != "item"'>
<H1 class='title'>
<b:include name='title'/>
</H1>
<b:else/>
<p class='title'>
<b:include name='title'/>
</p>
</b:if>
</div>
<b:include name='description'/>
</div>

3. Berikutnya adalah untuk mengedit Tag head bagian Judul Post nya, cari kode seperti dibawah ini:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

4. dan ganti semua kode itu dengan kode dibawah ini:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.title'>
<H3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</H3>
</b:if>
<b:else/>
<H1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</H1>
</b:if>

5. Tahap editnya sudah selesai namun coba kamu lihat blog kamu pada bagian Header Judul dan deskripsinya bedakan saat di Home page dan Di Single page(Page artikel) akan ada perbedaan ukuran. agar hal ini bisa diatasi sekarang kamu coba cari elemen Css:

#header h1{

}
#header h1 a{

}

sekarang tambahkan kode ini dibawah elemen css tadi:

P.title {

}
P.title a{

}

6. Kamu isikan isi css yang sama pada #header h1 dengan P.title , dan #header h1 a dengan P.title a

jika kurang mengerti contohnya seperti ini:
Jika

#header h1{
font-size: 20px;
color: #ffffff;
}
#header h1 a{
text-align:left
}

maka kita samakan isinya seperti ini:

P.title {
font-size: 20px;
color: #ffffff;
}
P.title a{
text-align:left
}

More about → Cara mengubah tag heading template blogger