Tips dan Trik Untuk Blogger Pemula

Halo Guys , Pada kesempatan kali ini saya akan Memberikan Tips dan trik untuk Blogger Pemula

Cara Membuat Tulisan Copy Paste di Teks Area

Silakan di copas code nya berikut :

<textarea cols="2" rows="1"> isi teks disini </textarea>

Catatan :
ganti tulisan isi teks disini dengan teks yang mau sobat jadikan "teks area".
Untuk angka cols="2" dan rows="1" sobat bisa ganti sesuka hati.
cols adalah yang mengatur panjang dari teks area dan rows adalah yang mengatur tinggi dari teks area

Cara Membuat Link Otomatis bertulisan "SEE MORE" Ketika Postingan Di Copy Paste

Copy Paste, hemm setiap orang pasti suka MengCopy Paste-kan Postingan kita, dan sering kali mereka tidak menyertakan Sumbernya atau Link Blog yang di CoPas. Oleh sebab itu, Saya membuat Postingan ini buat para Blogger yang merasa Postingannya di CoPas tapi tidak di sertakan Sumbernya. OK, berikut langkah-langkahnya.

[1]. Pertama, pastinya Login dulu ke Blog Kalian.
[2]. Kemudian dari Dasbor, cari Rancangan --> Edit HTML.
[3]. Lalu cari Code <head>.
[4]. Setelah ketemu, Copy dan Paste-kan Code di bawah ini, tepat di BAWAH Code tadi.

    <script type='text/javascript'>
    if(document.location.protocol=='http:'){
    var Tynt=Tynt||[];Tynt.push('cJE4D4kSKr4yYsacwqm_6l');Tynt.i={"ap":"Baca Selengkapnya Di :"};
    (function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://jmk-js.googlecode.com/files/Link%20CoPas.js';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})();
    }
    </script>

KETERANGAN :
* Tulisan yang berwarna Merah, ganti dengan kata-kata yang Kalian inginkan.

[5]. Kemudian Simpan Perubahan.

Cara Membuat Kursor Berubah Saat Menyentuh sebuah Link pada Blog

Maksudnya adalah saat kursor mouse kita menyentuh sebuah link..maka mouse kita tadi akan berubah ke bentuk yg lain...berikut deh caranya wkwkwkwk

[1]. Pertama pastinya Login dulu ke Blog Kalian masing2
[2]. Trus cari Rancangan --> Edit HTML
[3]. Lalu cari Code </head> (tekan CTRL + F atau F3 pada Keyboard untuk mempermudah pencarian)
[4]. Copy dan Paste-kan Code di bawah ini, tepat di atas Code </head>
<style type='text/css'>body, a, a:link{cursor:url(https://sites.google.com/site/rakasajmk/download-1/download-2/KursorJmK.gif), default;} a:hover {cursor:url(https://sites.google.com/site/rakasajmk/download-1/download-2/JmKKursor.gif),wait;}</style>

NB :
- Ganti tulisan yang berwarna Merah dengan URL Kursor Kalian

[5]. Terakhir tinggan di SAVE dan lihat hasilnya. Pasti Kursor Blog Kalian berubah saat menyorot Link. Oh ya Saya hampir lupa, "Tidak Semua Link Ya".

oke.....

Cara Membuat Effect Terang dan Gelap jjika disentuh mouse Pada Gambar di Blog

Setelah sebelunya Saya sudah pernah bahas tentang Cara Membuat Effect Zoom Pada Gambar Di Blog, maka kali ini Saya akan bahas tentang Cara Membuat Effect Terang dan Gelap Pada Gambar. OK kita masuk ke langkah-langkahnya.

[1]. Pertama pastinya Login dulu ke Blog Kalian.
[2]. Dari Dasbor, cari Rancangan --> Edit HTML.
[3]. Cari Code ]]></b:skin>
[4]. Kalo sudah ketemu, Copy dan Paste-kan Code di bawah, tepat di atas Code tadi. ini ada 2 pilihan jadi tinggal sibat sendiri yg memilihnya ^^

A. Dari Gelap Menjadi Terang.

    .post img{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}
    .post img:hover{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}

B. Dari Terang Menjadi Gelap.

    .post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
    .post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

[5]. Terakhir tinggal di SAVE, dan lihat hasilnya.

Cara Membuat Effect Bintang-Bintang Pada Link Blog

OK, kita langsung ke langkah-langkahnya saja. ^_^

[1]. Pertama pastinya LogIn dulu ke BLOG Kalian.
[2]. Kemudian, dari Dasbor cari Template --> Edit HTML.
[3]. Lanjut, sekarang cari Code a:link { atau a:link{. (Gunakan CTRL + F atau F3 untuk mempermudah pencarian).

Kira-Kira Codenya Seperti Gambar Di Bawah.

[4]. Nah kalau sudah ketemu, sekarang HAPUS semua Codenya. Dari Code a:link { atau a:link{ SAMPAI Code } dan ganti dengan Code di bawah.

a:hover {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQLDSxcQeSrFT-2rP-xYNziI7XLuUY3b7lw4SPgFR148RGM7xZ3EoUTPCb4kUABYqQSqbIqZ17BjYHaEds3shhREtYRFlwLylYAbfWDriuiomIeAVKlo9Bf1zhRSwm97N2aB7zjW3sJu0/s1600/stars.gif);

}

Sehingga Menjadi Seperti Gambar Di Bawah

[5]. Dan terakhir, tinggal di SIMPAN dan lihat hasilnya.

Cara Membuat Effect Bayangan Api Pada Link Blog

Kali ini Saya akan memberikan Tips, Cara Membuat Effect Bayangan Api Pada Link Blog. Effect Banyangan Api pada Link Blog, hemm, ketika Kalian mengarahkan Kursor Blog Kalian pda sebuah Link, maka akan keluar Effect Bayangan Api. Bagaimana, Kalian tertarik...? Kalau Kalian tertarik, silahkan ikuti langkah-langkah berikut.

[1]. Pertama pastinya Login dulu ke Blog Kalian.

[2]. Trus cari Rancangan --> Edit HTML.

[3]. Lalu cari Code a:hover kira-kira Codenya seperti di bawah..

a:hover {
text-decoration: underline;
color: #ff0000;
}

[4]. Kalo sudah ketemu, ganti tulisan [underline] menjadi [none], dan hapus Code pada bagian bawahnya. kira-kira Codenya seperti ini color: #ffoooo:

[5]. Lalu Copy dan Paste-kan Code di bawah ini, tepat di bawah Code yang tadi di hapus, atau di belakang Code yang tadi di hapus.

text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40, 2px -10px 10px #f10;

[6]. Kalo Kalian bingung, coba Kalian lihat Code di bawah ini.

a:hover {
text-decoration: none; text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40, 2px -10px 10px #f10;
}

[7]. Kalo sudah selesai, tinggan di SAVE, dan lihat hasilnya. Link Blog Kalian jadi ada Effect Bayangannya.

Semoga Berhasil...!!!

Cara Membuat Effect Berputar Dan Zoom Pada Setiap Gambar Di Postingan

Setiap Gambar di postingan blog kalian akan berputar dan membesar....ingin tahu??
Berikut langkahnya>>>>

[1]. Pertama, pastinya LogIn dulu ke BLOG Kalian.

[2]. Kemudian dari Dasbor, cari Template --> Edit HTML.

[3]. Lalu tekan Tombol CTRL + F atau F3 pada Keyboard, dan cari Code ]]></b:skin>.

[4]. Kemudian CoPas Code di bawah tepat di ATAS Code ]]></b:skin>.

.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}}

[5]. Terakhir tinggal di SIMPAN dan lihat hasilnya.

CARA MENGHILANGKAN BEKAS BAGIAN PADA NAVBAR BLOGSPOT YANG MENGHILANG

Hai lagi semua...... saya pengen share berita terkeren dan akan lebih membuat blog kamu jadi lebih profesional lagi bro wkwkwkwkwk , tapi sebelum kita ke topik CARA MENGHILANGKAN BEKAS BAGIAN PADA NAVBAR BLOGSPOT YANG MENGHILANG kalian harus jalani CARA AGAR NAVBAR BLOGSPOT MENGHILANG dulu....jika sudah...oke deh langsung aja ke TKP wakakakakakakaka

Mau kan blog kalian seperti gambar diatas ini?? tanpa navbar dan tanpa ada bekasnya...

Oke berikut Langkah-langkahnya:

yang pertama sekali jika tampilan blog kalian begini (lihat gambar dan ikuti langkahnya)

# YANG PERTAMA SEKALI KLIK CADANGKAN/PULIHKAN LALU KLIK ANTARMUKA BLOG LAWAS

Lalu selanjutnya > >

> Pilih Design -> Edit HTML

> Jangan lupa centang kolom expand widget templates.

> Sebelum <body expr:class='"loading" + data:blog.mobileClass'> (bisa jadi setiap template berbeda-beda, yang pasti masukan kodenya sebelum <body ) masukan Kode berikut



> Lalu akan tampil gambar seperti ini:

> Klik Delete Widgets.

Cara Membuat Gambar Supaya Berputar Dan Membesar Saat Disentuh Oleh Cursor Mouse

Berkreasi dalam dunia blogging memang sangat menyenangkan, sampai-sampai tidak terasa lagi waktu yang telah berlalu. dalam dunia blogging, tampilan sebuah blog yang memiliki tampilan yang menarik akan menambah pengunjung berminat untuk berkunjung ke blog tersebut, apalagi di tambah dengan artikel-artikel yang sangat menarik, akan semakin mendongkrak jumlah pengunjung. Cukup demikian basa-basinya [heheheheheee.. ] Langsung saja.

1. Seperti biasa sobat harus login dulu di akun blog sobat

2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan

3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan

4. Sobat cari kode </head>

5. Setelah ketemu sobat copy paste code di bawah ini tepat di atas kode </head>

6. dan sobat klik save / simpan template.

Langkah selanjutnya untuk penenpatan gambar dalam postingan.

1. Sobat harus menambahkan kode <div id="denzuaz"> sebelum URL gambar dan jangan lupa di tutup dengan kode </div> contoh seperti di bawah ini:

<div id="denzuaz">
<a href="http://sugoi-blog.blogspot.com/"><img src="http://a6.sphotos.ak.fbcdn.net/hphotos-ak-prn1/s720x720/527903_442289492457973_547107217_n.jpg" /></a></div>

keterangan:

kode berwarna merah adala kode pembuka dan penutup
kode berwarna hijau silakan sobat ganti dengan URL blog Sobat dan URL gambar yang ingin Sobat pasang di dalam postingan.
Setelah semuanya selesai klik Publikasikan dan lihat hasilnya.

Demikianlah tips "Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Cursor".

Cara Memasang Widget Floating Share Melayang yang keren di Blog (Twitter, Facebook, dan Google +1)

Pada kesempatan yang baik ini saya bakal ngebahas apa itu widget floating share melayang.. wuidiih.. emang bisa melayang bro ? yaa bisa laah.. selain ngebahas tentang widget floating share melayang, Kamu Klik juga bakal ngasih kode-kodenya dan cara-cara pemasangannya..
Apa sih floating itu ? Floating adalah sebuah menu yang posisinya absolute dan selalu tampil di tengah-tengah atau melayang, Floating ini juga terkadang mengikuti scroll dari browser. Ya sesuai dengan variasinya lah :D hehe..
Jadi yang bakal kita jadiin floating adalah Widget Share (Twitter, Facebook, dan Google +1).
Nanti di blogmu bakal nampak seperti gambar dibawah:

Lalu bagaimana cara pemasangannya ?
Okelah, langsung disimak aja pemasangannya. Silakan ikuti langkah-langkahnya sebagai berikut:

Seperti biasa kamu harus Login ke dashboard blogger kamu.

Pilih Rancangan > Elemen Laman > Add gadget/Tambah Gadget > Pilih yang HTML/JavaScript.

Copy script dibawah ini, Lalu pastekan pada gadget

<style> #floatdiv { position:fixed; bottom:15%; margin-left:-70px; z-index:10; float:left; padding-bottom:2px; } #mbtsidebar { background:#fff; border-top:1px solid #ddd; border-left:1px solid #ddd; border-bottom:1px solid #ddd; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding-left:5px; width:60px; margin:0 0 0 5px; } .fb_share_count_top {width:52px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id="floatdiv"> <div id="mbtsidebar"> <table cellpadding="1px" cellspacing="0"> <tr> <td style="padding:5px 0px 0px 0;"><a href="https://twitter.com/share" class="twitter-share-button" data-via="NAMA TWITTER KAMU" data-lang="en" data-related="anywhereTheJavascriptAPI" data-count="vertical">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </td> </tr> <tr> <td style="padding:5px 0 2px 0;"> <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td> </tr> <tr> <td style=" padding:5px 0px 0px 0px;"> <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script> <g:plusone size="Tall" expr:href="data:post.url"> </g:plusone></td> </tr> <tr> <td> <p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#000;" href="http://sugoi-blog.blogspot.com/2012/06/cara-memasang-widget-floating-share.html"><blink>Get Widget</blink></a></p></td></tr></table></div></div>

Keterangan:

Untuk teks yang berwarna merah, silakan ubah/ganti sesuai keinginan kamu.
-70px : Ini adalah ukuran, dimana biasanya menyesuaikan lebar konten. jadi kamu bisa mengubahnya apabila widget floating share melayang ini malah menutupi postingan. misalnya dari yang -70px menjadi -110px. pokoknya agar posisi widget ini pas.
NAMA TWITTER KAMU : Ubah pake nama twitter kamu atau twitter blog kamu ^^

Setelah dipaste, lalu kamu save/simpan tanpa judul.
Dan lihat hasilnya..

Cara menghilangkan NAVBAR BLOG di Blog

Cara menghilangkan navbar pada Blog II , mungkin cara ini bisa berhasil kali ya wkwkwkwk
oke langsung saja deh

Login ke blogger kamu
silahkan menuju ke edit template kamu
jangan lupa selalu back up template kamu yah dengan download template kamu dulu, agar jika terjadi kesalahan dapt dipulihkan.
Beri centang pada pojok kiri atas pada template kamu.
Untuk menghilangkan navbar blogger, sobat tinggal menambahkan kode di bawah ini pada style sheet CSS blogmu. dengan menaruh kode berikut diatas kode ]]></b:skin>

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Atau jika cara diatas tadi masih belum bisa, bisa juga menaruh kode berikut persis di bawah kode <body>

Simpan template kamu

Membuat Images Social Bubbles di Bawah Postingan Blogspot

Bukankah teman-teman semua pengin blog yang dibuat itu kelihatan menarik? Kali ini saya akan memberikan cara yang membuat blog Anda semua lebih menarik. Dari sekian banyak pembuatan social bookmark, cara ini yang paling saya suka disamping simpel, gambar logonya lebih menarik. Yang akan saya bahas disini adalah kode image bubbles transitions, dan sekedar info bahwa tutorial ini hanya bisa diterapkan pada browser firefox versi 3.5+, opera 9.5+, safari dan chrome. Untuk demo bisa sobat lihat di blog saya.

Sebelum memulai sebaiknya simpan dulu semua html lengkap blog anda, untuk berjaga-jaga bila terjadi kesalahan...OKE langsung saja ke T-K-P wkwkwkwk.

Login ke Blogger.
Klik Rancangan.
Masuk ke Edit HTML centang expand widget templates
Jika terjadi kesalahan sebaiknya download terlebih dahulu template anda
Paste kan kode berikut sebelum kode ]]></b:skin>

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}
.bubblewrap li img{
width: 55px;
height: 60px;
border:0;
margin-right: 12px;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8);
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

Cari kode yang mirip seperti ini :

<data:post.body/></b:if>
</div>

Kemudian letakkan kode berikut setelah kode diatas :

</ul>
</div>

Simpan Template .

Untuk kode yang berwarna ungu adalah kode url untuk gambarnya, anda bisa ganti dengan gambar social bookmark yang sobat punya.

Cara Menambahkan Kolom Diatas dan Dibawah Postingan Blog

Ketemu lagi, di postingan saya tentang menambah kolom dibawah postingan sudah saya jelaskan bagaimana temen-temen blogger semua membuat elemen baru di blog. Kali ini saya akan memberikan tutorial tentang membuat dua kolom baru diatas dan dibawah postingan.

Coba perhatikan gambar disamping ini muncul dua kolom baru dibawah post blog. Sehingga jika Anda menambahkan dua kolom dibawah postingan, Anda dapat menyimpan gadget/widget di atas/bawah postingan misalkan adsense, iklan, atau widget yang lainya.

Apakah Anda ingin menambahkan dua kolom diatas/bawah post body blog Anda? coba ikuti langkah dibawah ini.. Pastikan Anda sudah Log In ke blogspot lalu pilih menu Layout kemudian masuk menu Edit HTML

Taruh Kode berikut dibawah ini tepat diatas Kode ]]></b:skin>

/*Under Post
-----------------------------*/
#underpost h2{
font-size:13px;
font-weight:bold;
color:#B8002E;
border-bottom:2px solid #000000;
padding-left:5px;
}
#underpost{
width:530px;
}
#underleft{
width:257px; /*lebar kolom kiri*/
float:left;
margin:4px;
}
#underright{
width:250px; /*lebar kolom kanan*/
float:right;
margin:4px;
}

Perhatikan code yang berwarna merah diatas, samakan dengan lebar (width) post body atau main-wrapper di blog Anda. Untuk mengetahhui lebar post body cari kodenya dibawah ini :

#main-wrapper {
width: 410px;

Nah ukuranya adalah yang tercetak tebal diatas. Jangan lupa untuk membagi dua area kolom kiri dan kanan, perhatikan code yang berwarna biru diatas tadi, misalnya lebar post body atau main wrapper blog anda 410px maka bagi antara kolom kiri dan kanan. Jangan lupa atur margin dan padding untuk jarak tepi antara kolom kiri dan kanan. Setelah langkah pertama selesai mari ke langkah selanjutnya, masih di area Edit HTML, lalu cari code dibawah ini

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>
</div>

Jika ingin menambahkan dua kolom dibawah post body maka tambah code yang berwarna merah tepat dibawah code yang berwarna biru dan masih didalam code yang berwarna hijau diatas. Dan jika ingin menambah dua kolom diatasnya maka taruh code yang berwarna merah diatas code yang berwarna biru dan didalam code yang berwarna hijau

Sehingga kurang lebih codenya menjadi seperti

Dua kolom dibawah post body

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>
<div id='underpost'>
<b:section class='underleft' id='underleft'/>
<b:section class='underright' id='underright'/>
</div>
</div>

Dua kolom diatas post body

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>
</div>

Nah jika semuanya sudah beres tinggal SAVE. Coba lihat di area page element muncul dua kolom dibawah/diatas post body. Kode-kodenya sesuaikan saja dengan template Anda, karena semua template codenya agak berbeda-beda. Nah jika kolom kiri dan kanan tidak bisa sejajar maka atur lebar (width) kolom kiri dan kanan, juga atur padding dan marginnya.

Cara Menambahkan Agar Ada 3 Kolom di Bawah Header Blogspot

Apa teman-teman blogger semua ingin tampilan blognya tambah ramai? Kali ini saya akan menjelaskan sedikit tentang bagaimana cara membuat ramai blog teman-teman semua, salah satunya dengan membuat tiga kolom di bawah header. Widget 3 kolom dibawah header ini sebenarnya bisa Anda tambahkan jika pada bagian sidebar template sudah penuh dan terlalu panjang. Sebagai alternatif untuk meletakkan kode html ataupun javascript yang mungkin andaperlukan. Kurang lebih sama dengan postingan saya yang dulu tentang membuat multi kolom yang diletakkan di bagian bawah blog, namun kali ini saya meletakkannya bagian atas atau tepatnya dibawah header.

Baiklah langsung menuju lokasi pengeditan template-nya.

Silahkan login ke blogger.
Ke Tata Letak.
Pilih Edit HML.
Tidak Usah klik Expand Template Widget.
Letakkan kode berikut ini diatas kode ]]></b:skin>

/* –- Top --*/

#top {

background:#fff;

margin-top:10px auto;

width:960px;

overflow:hidden;

font-size:12px;

padding:10px;

}

#top h2 {

background:#000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x;

font-size:14pt;

font-weight:400;

text-align:center;

font-style:normal;

line-height:1.3em;

color:#fff;

padding:5px;

margin-top:-10px;

margin-left:-10px;

margin-right:-10px;

}

#top ul {

color:#333;

margin:0;

padding:0;

}

#top ul li {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX47kGfe_0fN9p-3158CpQ0zpPqS8_WwId3A3LKD1xQbUpLEUkijsj6Iq6YWuCc8pI-9qwW9vyOF8dzwgK40GZlrXDqPzjtntbu7evl-ykUF_MlfWpKT5NepqTa2yFnXUsg4EzGJ3WyFtf/s320/b3.gif) no-repeat;

list-style-type:none;

border-bottom:1px dashed #CCC;

margin:0 0 10px;

padding:0 0 5px 20px;

}

#top ul li a:hover {

margin:0px 0px 5px;

padding:0px;

}

#topcenter {

width:300px;

float:left;

margin-left:10px;

background:#fff;

padding:10px

}

#topleft {

width:280px;

float:left;

margin-left:10px;

background:#fff;

padding:10px;

}

#topright {

width:280px;

float:right;

margin-left:10px;

background:#fff;

padding:10px;

}

Cari kode yang mirip seperti ini, biasanya letaknya dibawah </head>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='JUDUL BLOG ANDA ! (Header)' type='Header'/>

</b:section>

</div>

Kemudian letakkan kode berikut ini tepat setelah kode diatas :

<b:section class='top' id='topleft' preferred='yes' showaddelement='yes'>

</b:section>

<b:section class='topcenter' id='topcenter' preferred='yes' showaddelement='yes'>

</b:section>

<b:section class='topright' id='topright' preferred='yes' showaddelement='yes'>

</b:section>

</div>

Simpan Template.

Cara Memasang Breadcrumb di Blogspot

Pengertian breadcrumb sendiri kurang lebihnya adalah suatu navigasi yang berisikan kategori atau label dari postingan dan bisanya selalu di awali dengan tombol menuju home (halaman depan blog).

Pada dasarnya Breadcrumb merupakan navigasi seo sebaris dengan tautan internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat.

Jadi simple-nya seperti ini : search engine selalu membaca label atau tags setiap postingan blog, karena saat ini google sudah tidah menggunakan meta tag keyword lagi untuk mengindeks suatu website/blog, maka yang jadi perhitungan google saat ini adalah meta description dan label (kategori). Maka dari itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google.

Langsung saja pada langkah-langkah pembuatan breadchumb ini : :>>

Cara Pasang Breadcrumb Di Blog Blogspot

1. Log-in ke Blogger.com gunakan akun anda.
2. Kemudian menuju Rancangan lalu Edit HTML >> klik Expand Template Widget. Lalu masukan Codey Breadcrumb berikut ini:

.breadcrumbs {
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #e2e7b4;
}
.breadcrumbs a {
text-decoration:none;
color: #000000;
}

Letakan kode CSS diatas sebelum tag ini: ]]></b:skin>

3. Kemudian anda cari tag berikut ini:

<div class='post hentry'>

(bila tidak ada seperti kode diatas, coba hapus tanda penutup panah kanannya)

4. Setelah ketemu maka masukan kode tag Breadcrumb berikut ini di atas kode sebelumnya:

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == "item"'> <div class='breadcrumbs'><a expr:href='data:blog.homepageUrl'>Beranda</a> » <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != "true"'> , </b:if> </b:loop> </b:if> » <data:post.title/> <br/> <hr width="auto"> </hr> <br/> </div> </b:if> </b:if>

5. Kemudian klik tombol Simpan Template atau Save Template anda.

Memasang Translate Gambar Bendera Pada Blog

Kebanyakan blog menggunakan bahasa internasional, yaitu bahasa Inggris dengan tujuan agar blognya dapat dimengerti oleh semua orang diseluruh dunia. Namun jangan khawatir apabila blog yang kita miliki berbahasa Indonesia, dengan menggunakan tambahan widget google translate maka blog kita yang berbahasa Indonesia akan dapat diterjemahkan ke dalam beberapa bahasa yang digunakan di dunia, seperti bahasa Inggris, Perancis, Italia, Jerman, Brazilia, Portugal, Yunani, Jepang, Cina, Korea, maupun bahasa Arab.

Pada kesempatan kali ini saya akan memberikan tutorial kepada teman-teman tentang cara memasang translate yang berupa gambar bendera. Tips ini baru saya dapatkan dari blog lain wkwkwkwkwk. Baik, langsung saja pada langkah-langkahnya :

Pertama login ke blogger terlebih dahulu
Klik Tata Letak
Klik tab Elemen Halaman
Klik Tambah Gadget
Pilih Tambah HTML/JavaScriptCopy pastekan code translate di bawah kedalam kolom yang tersedia.

Tampilan Ke-1

Copy Code ini :

Tampilan Ke-2

Copy Code ini :

Semoga bisa membuat blog kalian bermanfaat ^o^

Cara Membuat Arsip Blog Dengan Scroll

Arsip blog dengan menggunakan scroll memang menjadi pilihan untuk menghemat ruang di blog. selain itu arsip blog dengan scrolll akan memudahkan pengunjung melihat-lihat daftar isi artikel kita. membut arsip blog sangat mudah, kalo sobat pengen membuatnya silahkan ikuti langkah-langkah berikut :

Cara Membuat Arsip Blog Dengan Scroll:

Sobat harus mempunyai arsip blog, kalo sobat belom punya tinggal pasang aja, Caranya mudah. Klik Tata Letak. pilih Elemen Halaman, Tambah Gadget, Tambah Arsip Blog. Gaya arsip blog harus yang Hierarki

Setelah itu Pilih Edit HTML

Beri tanda centang pada Expand Widget Template

Cari kode <div id='ArchiveList'> gunakan Ctrl+F untuk mencari,kalau sudah ketemu letakan code berikut di atas kode tadi <div style='overflow:auto; width:ancho; height:400px;'> warna biru adalah tinggi scroll

Cari lagi kode <b:if cond='data:style == "MENU"'> , perhatikan dibawah kode itu terdapat code :

<b:include data='data' name='menu'/>

</b:if>

</div>

tambah code </div> lagi, jadinya seperti ini

<b:include data='data' name='menu'/>

</b:if>

</div>

</div></div>

Klik Simpan

Cara agar Blog Lebih cepat di akses Lewat HP

Perubahan begitu Cepat dan tak terkendali, kini sudah bukan hal sulit dan langka lagi untuk mengakses internet, sudah tidak terhitung jumlahnya orang mengakses Internet lewat HP karena rata-rata perusahaan Hape sudah menambahkan fitur ini.
Dengan HP yang sudah sudah suppor dengan GPRS, cukup cepat untuk mengakses internet apalagi dengan HP 3G.Untuk itulah, kita bisa mengatakan banyak pembaca yang mungkin datang ke blog Anda melalui ponsel / HP. Dan jika Blog Anda tidak bisa diakses atau sangat lama mengaksesnya di HP/ ponsel kemungkinan besar Anda akan kehilangan semua pembaca yang menggunakan HP, sebuah blog yang normal dibutuhkan banyak waktu untuk memuat semua tampilan halamannya selain itu Blog Anda kadang tidak sesuai di layar HP.

Agar kita tidak kehilangan kesempatan, sebaiknya kita membuat Blog kita Mudah atau Cepat di AKses Handphone.
Baiklah Mari kita Mulai dan ikuti langkah-langkah berikut ini :

Masuk ke akun Blogger Anda
Klik Tata Letak
Klik Edit HTML
Cari Kode dibawah ini : agar cepat ketemu silahkan tekan Ctrl + F
<b:include data='blog' name='all-head-content'/>
Sisipkan kode berikut ini di bawahnya
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
Klik Save Template

Sekian Tips dari Saya Semoga Bermanfaat.

ADSENSE

Tips dan Trik Untuk Blogger Pemula

> Klik Delete Widgets.

Cara Membuat Gambar Supaya Berputar Dan Membesar Saat Disentuh Oleh Cursor Mouse

Cara Memasang Breadcrumb di Blogspot

Cara Pasang Breadcrumb Di Blog Blogspot

Cara agar Blog Lebih cepat di akses Lewat HP

Post a Comment

No comments

Post AD

googlads

Total Pageviews

Facebook

Popular Posts

Advertisement

Categories

Tags

Link Download Spider-Man: Far from Home [2019][HD][480p][720p][1080p][BluRay][BRRip][WEBRip][CAM]

Contact Form

Popular Posts

Blog Archive

Labels

ADSENSE

Tips dan Trik Untuk Blogger Pemula

> Klik Delete Widgets. Cara Membuat Gambar Supaya Berputar Dan Membesar Saat Disentuh Oleh Cursor Mouse

Cara Memasang Breadcrumb di Blogspot

Cara Pasang Breadcrumb Di Blog Blogspot

Cara agar Blog Lebih cepat di akses Lewat HP

Post a Comment

No comments

Post AD

googlads

Total Pageviews

Facebook

Popular Posts

Advertisement

Categories

Tags

Link Download Spider-Man: Far from Home [2019][HD][480p][720p][1080p][BluRay][BRRip][WEBRip][CAM]

Contact Form

Popular Posts

Blog Archive

Labels

> Klik Delete Widgets.

Cara Membuat Gambar Supaya Berputar Dan Membesar Saat Disentuh Oleh Cursor Mouse