Merubah Icon Blog Kita di Semua Browser, Address bar, Tab Menu dan Bookmark

Mengganti Logo dan Icon Blog di Browser, Addres bar, dan Bookmark. Sahabat informasi Cerita 2 bulan yang lalu saya  pernah mengulas tuntas bagaimana cara Mengubah Logo Blog KIta Di Mozilla pada postingan tersebut memiiliki kendala sebab logo dan icon blog kita hanya tampil di browser mozillasedangkan di browser yang lain tidak muncul. Pada kesepatan kali ini Saya akan mengulas bagaimana cara mengubah logo blog kita dapat muncul di browser baik itu mozilla, google chrome, opera dll.

langsung aja ke TKP hehehehehehehe

Ni Screpnya : 

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj47EA9-L0j27UGtunNknkzzt0iDLFDJ3qoTwDaQLLt8zB1XmUOacGXH_5QqB_yKlL9LiE-P3D42NOCO7YrpRawbugqJ3wZiagdX-nkSACbbqRDt4M9FfyCPT1K9jNXpfnC0lWgzzOPdYg/' rel='shortcut icon' type='image/jpg'/>

Caranya : 
login Ke blog kaliankeli Rancangan =>Edit HTMl =>Setlah itu Cari code ,Meta Tag- Mempermudah pencarian Gunakan Ctrl+F +setlah itu =>Copy scrip diatas dan Paste Percis dibawah Meta Tag,
*Jgan lupa ganti code berwarnah merah Dengan icon anda..
lalu Sace Template.dan lihat hasilnya..

Oke semoga Tips dan Trik singkat ini bermanfaat selamat mencoba...

Membuat Gambar di Side bar

Sering kali kita lihat di blog orang lain dimana Di judul Sidebarnya ada Background yang cantik, kadang kita tertarik untuk membuatnya seperti Di judul sidebar mereka Namun kita tidak tahu bagai mana caranya untuk membuat sidebar seperti mereka, Yang jelas sekarang anda sahabat blogger jangan kecewa dulu, Untuk membuat sidebar seperti mereka itu gampang kok, Disini saya memberi petunjuk bagi anda yang ingin merubah background di judul sidebar, ikuti cara nya di bawah ini:

---

• Loggin ke Blogger
• Layout
• Edit HTML  
• cari kode dibawah.

.sidebar h2 {

• Tambah kode berikut dibawah kode tadi

background:url(alamat image anda disini)repeat-x;

• Isi tulisan berwarna merah diatas dengan alamat gambar anda
• Kalau ditemplate anda tidak menemukan kode .sidebar h2 {
• Tambahkan saja kode berikut pada sidebar content

.sidebar h2 {
background:url(alamat image anda disini)repeat-x;
color: #FFFF66;
font-size: 11px;
font-family: Georgia;
font-weight: strong;
margin: 0px 0px 5px 0px;
padding: 3px 0px 3px 10px;
text-align:center;
}

Keteranagan:

• Edit tulisan berwarna merah dengan alamat image/ gambar anda, warna ungu warna tulisan, warna biru ukuran tulisan, warna hijau kedudukan tulisan! 
• Lalu Anda simpan.

Membuat Gambar di Side bar

---

ering kali kita lihat di blog orang lain dimana Di judul Sidebarnya ada Background yang cantik, kadang kita tertarik untuk membuatnya seperti Di judul sidebar mereka Namun kita tidak tahu bagai mana caranya untuk membuat sidebar seperti mereka, Yang jelas sekarang anda sahabat blogger jangan kecewa dulu, Untuk membuat sidebar seperti mereka itu gampang kok, Disini saya memberi petunjuk bagi anda yang ingin merubah background di judul sidebar, ikuti cara nya di bawah ini:

---

• Loggin ke Blogger
• Layout
• Edit HTML  
• cari kode dibawah.

.sidebar h2 {

• Tambah kode berikut dibawah kode tadi

background:url(alamat image anda disini)repeat-x;

• Isi tulisan berwarna merah diatas dengan alamat gambar anda
• Kalau ditemplate anda tidak menemukan kode .sidebar h2 {
• Tambahkan saja kode berikut pada sidebar content

.sidebar h2 {
background:url(alamat image anda disini)repeat-x;
color: #FFFF66;
font-size: 11px;
font-family: Georgia;
font-weight: strong;
margin: 0px 0px 5px 0px;
padding: 3px 0px 3px 10px;
text-align:center;
}

Keteranagan:

• Edit tulisan berwarna merah dengan alamat image/ gambar anda, warna ungu warna tulisan, warna biru ukuran tulisan, warna hijau kedudukan tulisan! 
• Lalu Anda simpan.

Membuat Tab View

Sahabat blogger yang tecinta, sekarang mari kita mencoba untuk membuat Tab view di blog, ga memperpanjang uraian mari kita langsung saja membuat tab view tersebut. Begini caranya:

1. Login/masuk di blogger.com 
2. Masuk ke tata letak halaman Rancangan, edit html
3. Cari kode ini ]]></b:skin>, jika kamu merasa kesulitan mencari kode itu,pakai aja kontrol fine dengan menekan CTRL + F
4. Kemudia masukan kode di bawah ini sebelum kode ini ]]></b:skin>, atau kedalam tag css

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Langkah selanjutnya masukan kode ini sebelum </head>

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

1. Langkah selanjunya Di save dulu langkah-langkah di atas tadi.
2. Masuk Elemen halaman dan Add gadget -->> HTML java Script
3. Paste kode di bawah ini.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

4.Langkah terakhir Kamu simpan !!! lihat apakah sudah nampak tab view kamu.

Keterangan:
Lebar dan tingginya (width:350px;hight:25px) bisa kamu Ubah sesuai dengan template blog kamu,
backgound standarnya bisa kamu ganti sesuai dengan yang kamu suka,yang saya tandai warna merah adalah warna-warna yang bisa kamu ganti.Semoga sukses!!!!!

Membuat Daftar Isi Otomatis

Membuat daftar isi otomatis blog, Hari ini blogtegal akan berbagi tutorial yang sangat sederhana yakni membuat daftar isi otomatis blog yang mana daftar-daftar ini akan bekerja secara otomatis yg menampilkan isi-isi artikel blog berdasarkan label,jadi cara kerja daftar isi otomatis sama persis dengan cara kerja Related post. Contohnya bisa di lihat daftar isi.
Untuk masalah tingkat ke-SEO-annya awak rasa tidak ada, karna menggunakan javascript, sedangkan search engine kurang bersahabat dengan yang namanya javascript, jadi daftar isi otomatis ini tidak terindex search engine, oke kita langsung ke tutorialnya.
Silahkan copy paste script berikut pada posting baru, ya seperti membuat postingan biasa atau bisa kamu tempatkan pada Static_Page.

<script style="text/javascript" src="http://blogtegal.googlecode.com/files/auto-contents.js">
</script>
<script src="http://www.blogtegal.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>

Ganti alamat blognya dengan alamat blog kamu, jika gak di ganti juga gak apa, awak hanya bilang matur-suwun

Cara Buat Read More

Apa itu Read More ? Read More adalah bla bla bla .hehehehe yang jelas Read More berguna untuk menampilkan sedikit cuplikan dari postingan pada halaman utama. dalam postingan kali ini saya akan membahas bagaimana CARA BUAT READ MORE pada blog. Read More ini berfungsi untuk menampilkan sedikit postingan pada halaman depan dan dibawahnya ada kata Read More atau
selanjutnya dan jika diklik baru artikel dari sebuah postingan akan tampil semua.Read More ini juga berguna untuk menghemat halaman depan blog,jadi ga makan banyak tempat walaupun kamu pasang 5-7 artikel pada halaman depan blog kamu.jaman kaya ginikan pada hemat.hehehehe

Pengen buat Read More ? silakan ikuti tutorial Cara Buat Read More berikut ini :

1.Login ke blogger

2.Klik "Tata Letak" kemudian Klik "Edit HTML".Kemudian beri tanda centang pada tulisan "expand widget tempate"

3.Cari kode </head> lalu copy kode berikut dan paste diatasnya.
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

4.Cari kode <p><data:post.body/></p> lalu copy dan paste kode berikut dibawahnya.

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>

5.Klik "Save template"

6.Kemudian klik menu "pengaturan lalu klik "format" cari kotak kosong yang ada dibawah lalu isi kotak tersebut dengan kode berikut .

<span class="fullpost">

</span>

7.Kemudian klik Simpan pengaturan ...

8.Pada saat kamu memposting,klik "edit HTML" Nanti akan secara otomatis muncul kode seperti dibawah ini .

<span class="fullpost">
</span>

Letakan postingn yang ingin ditampilkan di atas kata read more atau selanjutnya diatas kode tersebut .dan sisanya/keseluruhan artikel di antara atau ditengah kode tersebut contohnya sebagai berikut

<span class="fullpost">

posting sisa artikel disini

</span>

Cara Merubah Judul Blog dengan Judul Postingan

Sebenernya merubah judul Blog dengan judul postingan Adalah sedikit bagian dari SEO (Search Engine Optimization).Judul postingan juga berpengaruh dalam listing hasil pencarian Search Engine .Mengoptimalkan Judul postingan sangat dianjurkan untuk mendapatkan posisi terbaik dalam search engine. Jika sebelum anda merubah judul Blog dengan judul postingan "keyword" atau judul Dari postingan blog kamu ada Di belakang judul Blog maka setelah Anda Merubah Judul Blog dengan Judul Postingan Yang tampil di hasil pencarian "keyword" atau judul postingan anda berada di depan. Karena itu Merubah Judul Blog dengan Judul Postingan Sangat baik Untuk SEO (Search Engine Optimization). Para pakar SEO Juga menyatakan Cara ini membuat Searc engine lebih Friendly Terhadap Blog Kita. Ikuti Cara Merubah Judul Blog dengan Judul Postingan Berikut ini :

1.Log In Ke Blogger Lalu Klik Tata Letak-->>Edit HTML
2.Kalo Udah Cari kode berikut ini :

<title><data:blog.title/></title>

Biasanya Ada Di atas . atau untuk lebih mudah gunakan Tombol CTRL+F

3.Kalo udah ketemu ganti kode tadi dengan kode berikut :

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

4.Kalo udah tinggal sinpen dahh..

Keterangan : Untuk Home atau halaman utama Judulnaya akan tetep judul blog kamu . tapi silakan coba klik salah satu postingan kamu,maka Judul Blog Berubah jadi Judul Postingan.

Cara Merubah Judul Postingan Menjadi Judul Blog

---

Wah kali ini kita kan membahas tentan cara merubah judul postingan menjadi judul blog, Untuk apa ya kita merubah judul postingan menjadi judul blog..?? Sebenarnya banyak keuntungan yang kita dapat dari perubahan tersebut salah satunya supaya postingan/artikel kita cepat terindek olek mesin pencarian, ini adalah salah satu teknik SEO, Nah para sahabat blogger yang setia di blog ini mari lah kita mencoba menerapakannya di blog kita masing dengan mengikuti cara di bawah ini.

---

caranya sbb:


1. Seperti biasa anda login ke blog anda.


2. Pilih menu Layout (Tata letak)->klik Edit HTML


3. Centang Expand Template Widget


4. Cari kode seperti ini

<title><data:blog.pageTitle/></title>

5. ganti kode tadi dengan kode di bawah ini

<b:if cond="data:blog.pageType == &quot;item&quot;">
< title>&lt;data:blog.pageName/&gt;</title>
< b:else>
< title>&lt;data:blog.pageTitle/&gt;</title>
< /b:else></b:if>

6. klik SIMPAN TEMPLATE. selesai


Silahkan lihat hasilnya di webbrowser anda,,,jika anda membuka salah satu posting judul blog anda akan berubah menjadi judul posting. judul blog anda akan terlihat jika anda kembali ke halaman utama blog anda