Senin, 24 Juni 2013

Ganti Home,Posting Lama & Posting Baru Di Blogspot

Cara Mengganti Home, Posting Baru & Lama Tautan Dengan Image

Blog Blogger secara default dilengkapi dengan navigasi halaman (pagination) di bawah semua posting dalam urutan "Posting Lebih Baru", "Home" dan "Posting Lama". Jika Anda bekerja untuk mengubah blog Anda menjadi website profesional maka Anda harus berpikir untuk mengubah link ini jelek dengan gambar gaya atau tombol. Ini tidak hanya akan meningkatkan desain blog Anda, tetapi juga menarik pembaca Anda untuk membaca postingan lain. Oleh karena itu Anda dapat meningkatkan tampilan halaman blog Anda dengan melakukan perubahan sederhana.

Anda membaca tutorial ini sehingga saya bisa berharap bahwa Anda sudah melihat jenis mewah tombol berikutnya dan sebelumnya di beberapa blog besar. Jika pemilik blog tersebut menggunakan jenis tombol maka Anda juga harus mencoba mereka. Ganti lama dan baru posting link dengan gambar untuk memberikan blog Anda sentuhan profesional. Jadi, mari kita lihat bagaimana melakukannya.

Berikut adalah beberapa langkah sederhana yang harus Anda ikuti.

Pergi ke dashboard blogger Anda.
Arahkan ke Template> Edit HTML (Backup pertama Template Blog Anda)
Centang pada kotak Memperluas Template Widget.
Tekan Ctrl + F dan mencari

<data:newerPageTitle/>

dan ganti dengan kode dibawah ini.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2-7EGFB0KXgVCyGv5i_ZxGL53p7_5rGTw9_i__0PVPleuUwD4cWzNnW0PlRsuJGxQJox7hTUQ1vN0DzfSu1qrOgLCKKoYS6PtArC5MN4KYU_Mu3z7nGUTGGJ1lsYvdFqvMlDfoa5hOlYN/s400/previous.png"/>

sekarang cari kode dibawah ini ( untuk mengganti older pos/posting lama )

<data:olderPageTitle/>

dan ganti dengan kode ini

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg09_B72u-T0IBWiA_8uFtcKbwa99RdkQ7xaB2p__At6-4iTHxzOLetuxad5AAFIAiUuXWqlhkMApVsnh510He6g7ZaKSOuMr2oANVlwinsZoVyzcxWTmSY0Q0-jeDa58hTxUbHhtrBX2SL/s400/Next.png"/>

sekarang cari kode dibawah ini

<data:homeMsg/>

dan menggantinya dengan kode di bawah ini :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2vvZequ9zVkWT7ZDhW46e6NfHMVyatXjbFj70Lo3sOanPYYwYL6-h7vk_OBRuVkkwbsx8oexNJSc-T3Sb5BqCNGQuCaFlDN6106tHcHpHj_0ikd28IEZ3lNLdGeVSA7V84KCHwje2QlvC/s1600/home.png"/>

sekarang klik save template
dan lihat hasilnya

Kustomisasi: Jika Anda ingin menggunakan gambar lain sesuai dengan pilihan Anda, maka cukup mengubah URL gambar dengan gambar Anda sendiri.

Jumat, 14 Juni 2013

Floating banner

Floating banner atau banner malayang biasa dipakai untuk menampilkan iklan ppc di blog yang akan menyebabkan pengunjung sedikit "dipaksa" untuk mengklik iklan tersebut yang berujung menambah poin penghasilan bagi kita sebagai publisher sekaligus pengelola blog.

Akan tetapi beberapa penyedia layanan iklan ppc melarang penggunaan cara diatas dengan dalih melanggar TOS yang telah disetujui oleh publisher (blogger) bersama pengelola ppc

Namun terlepas dari hal tersebut, idblog ingin menshare cara memasang floating banner/ banner melayang di blogspot.

1. Login ke Blogger>> pilh menu edit tata letak/layout>> Edit HTML
2. Klik "download template lengkap", ini untuk antispasi kesalahan dalam pengeditan
3. Paste kode css berikut sebelum tag ]]>

Banner di posisi kanan atas blog

#registrasi {
top:5px;
right:5px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#registrasi a img {border:0}

Banner di posisi kanan bawah blog

#registrasi {
bottom:5px;
right:5px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#registrasi a img {border:0}

Banner di posisi kiri atas blog

#registrasi {
top:5px;
left:5px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#registrasi a img {border:0}

Banner di posisi kiri bawah blog

#registrasi {
bottom:5px;
left:5px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#registrasi a img {border:0}

4. Copy dan paste kode berikut setelah kode </body>

<div id='regristrasi'>
Kode Iklan Anda
</div>

5. Simpan Template

membuat menu dropdown

Cara membuat menu dropdown di bawah header blogspot

Cara membuat menu dropdown di bawah header blogspot - Rasanya kurang indah jika blog kita tidak memiliki menu dropdown di bawah header oleh karena itu ane akan memberikan tips cara membuat menu dropdown di bawah header blogspot yang mana sebelum ane memposting artikel ini ane juga sudah berbagi dengan sobat blogger semua tentang cara membuat header logo blog.

Cara membuat menu dropdown di bawah header blogspot bisa dikatakan sebagai salah satu usaha cara kita untuk mempercantik sebuah blog dan dengan adanya tab menu pada blog kita, maka akan lebih memudahkan pengunjung dalam mencari topik pembahasan yang ada pada blog kita. Mmmmmp..sampai disini tentunya agan penasaran bukan, bagaimana sih penampakan dari menu dropdown di bawah header blogspot itu? Dibawah ini adalah gambarnya.

Cara membuat menu di blog

Bagaimana..tertarik bukan? Untuk cara membuat menu dropdown di bawah header blogspot silahkan ikuti langkah-langkah dibawah ini.

Cara membuat menu dropdown di bawah header blogspot

Sebelum kita memulai membuat menu dropdown di bawah header blogspot alangkah baiknya backup dulu template agan karena ditakutkan terjadi hal-hal yang tidak di inginkan.

1. Masuk ke akun blogger agan -> klik Template -> Edit HTML

2. Centang “Expand Widget Templates ”

3. Lalu agan cari kode ]]></b:skin> ( gunakan Ctrl + F untuk memudahkan proses pencarian )

4. Terus taruh script di bawah ini tepat diatas kode ]]></b:skin>

#catmenucontainer{

height:33px;

width:1000px;

margin:0 auto;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1L_iQ-1OutQ9owfz6RCdU9RwHO7biXjCBWvpy7p7V66O_6arCimjfMIoj8nfMIuRdWoMLXCl0oDuOM9XMVC1JJsNUboDEW0XPhIHQVtyViEPKOrbcTk6aKyQtClIWVHn1AqbFOegz0Ehl/s1600/2.gif) repeat-x;

display:block;

padding:0px 0 0px 0px;

font-size:12px;

font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;

font-weight:normal;

border-top:1px solid #252424;

}

#catmenu{

margin: 0px;

padding: 0px;

width:1000px;

background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZJ6lhiVBcv2Hz-F2o2W2bIyqfM4-H9t0vGnZ2rVjSXmt69NQKnsPoFgKwHO1vRQfKt5YI5wB0UbpRabA-ZHHDEmNbXD3lTWyd_DxlpalXSIhx7NcfRI-EUySrFcQOuYohJkKPLihBJw7U/) repeat-x;

height:33px;

}

#catmenu ul {

float: left;

list-style: none;

margin: 0px;

padding: 0px;

}

#catmenu li {

float: left;

list-style: none;

margin: 0px;

padding: 0px;

}

#catmenu li a, #catmenu li a:link, #catmenu li a:visited {

color: #fae7df;

display: block;

margin: 0px;

padding: 9px 10px 10px 10px;

}

#catmenu li a:hover, #catmenu li a:active {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijtgY7cDTo1o8xjbsZgRnZhEXz765KvVuyuhO0S61qYxKx5oR0Jwvrv3k5mcxf8F7RuEb1lwCLuWs9gM_hkZP3Bsg21FlwJnmnl-hKz8Ow96yw8u2daJ9PL0VhKHF1iq5Ho6xja8-Z3SRV/) repeat-x;

color: #fff;

margin: 0px;

padding: 9px 10px 10px 10px;

text-decoration: none;

}

#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {

background:#ED4A05;

width: 150px;

color: #fae7df;

font-family:Tahoma,century gothic,Georgia, sans-serif;

font-weight: normal;

float: none;

margin: 0px;

padding: 9px 10px 10px 10px;

border-bottom: 1px solid #FF7800;

}

#catmenu li li a:hover, #catmenu li li a:active {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijtgY7cDTo1o8xjbsZgRnZhEXz765KvVuyuhO0S61qYxKx5oR0Jwvrv3k5mcxf8F7RuEb1lwCLuWs9gM_hkZP3Bsg21FlwJnmnl-hKz8Ow96yw8u2daJ9PL0VhKHF1iq5Ho6xja8-Z3SRV/) repeat-x;

color: #fff;

padding: 9px 10px 10px 10px;

}

#catmenu li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 170px;

margin: 0px;

padding: 0px;

}

#catmenu li li {

}

#catmenu li ul a {

width: 140px;

}

#catmenu li ul a:hover, #catmenu li ul a:active {

}

#catmenu li ul ul {

margin: -34px 0 0 170px;

}

#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,

#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {

left: -999em;

}

#catmenu li:hover ul, #catmenu li li:hover ul,

#catmenu li li li:hover ul, #catmenu li.sfhover ul,

#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {

left: auto;

}

#catmenu li:hover, #catmenu li.sfhover {

position: static;

}

5. Kemudian agan cari kode <div id='content-wrapper'>

6. Copy kode dibawah ini dan paste tepat dibawah kode <div id='content-wrapper'>

<div id='catmenucontainer'>

<div id='catmenu'>

<ul>

<li><a href='http://NAMA LINK BLOG ANDA/'>Home</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1</a>

<ul class='children'>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-1</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-2</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-3</a></li>

</ul>

</li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a>

<ul class='children'>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-1</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-3</a></li>

</ul>

</li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li>

</ul>

</div>

</div>

<div class='clear'/>

7. Klik Pratinjau/Preview terlebih dulu sebelum di SAVE template nya, jika sudah berhasil maka klik Save/Simpan.

Note:

- Edit Your-Link-Here,Link-Title, dan Link-Name. Ganti dengan link dan title link yang agan inginkan.

- Jika kode <div id='content-wrapper'> tidak ada dalam template agan, itu berarti cara ini tidak sesuai dengan template yang sedang agan gunakan. Tetapi agan masih bisa memasangnya dengan cara :

Masuk -> Elemen Laman -> Tambah Gadget -> pilih HTML/JavaScript >> taruh kode script yang ke-2 di dalam nya. Klik Simpan dan lihat hasilnya.

Itulah tutorial dari ane tentang cara membuat menu dropdown di bawah header blogspot semoga postingan ini bermanfaat khusunya bagi agan-agan yang ingin mempercantik blognya dengan cara membuat menu dropdown. Terimakasih dan semoga berhasil

- See more at: http://langkah2membuatblog.blogspot.com/2012/11/cara-membuat-menu-dropdown-di-bawah.html#sthash.z6bkYddd.dpuf

Membuat Banner Di Header

Cara Membuat Banner Pada Header di Blogspot, mungkin Anda pernah melihat pada suatu Blog yang menampilkan Banner pada Header yang Iklannya selalu berganti-ganti pada saat di reefresh ulang. untuk itu dalam topik kali ini akan dijelaskan mengenai cara membuat iklan Banner di header pada Blog.

Untuk membuat banner pada header di blogspot berikut langkah-langkahnya :

Silahkan Anda login ke Akun blog kepunyaan Anda, Lalu pilih Rancangan - Edit HTML kemudian Kilik pada kotak dekat tulisan Expand Template Widget

Kemudian silahkan Copy kode CSS berikut ini dan diletakkan sebelum kode ]]></b:skin> ( lalu sesuaikan ukuran dengan Template Anda)

#neobux {

margin-bottom:5px;

width:468px;

float:right; /* important to be same as image width */

height:60px; /* important to be same as image height */

margin:10px;

position:relative; /* important */

word-wrap:break-word; /* fix for long text breaking sidebar float in IE */

overflow:hidden; /* fix for long non-text content breaking IE sidebar float */

}

#neobuxContent{

width:468px; /* important to be same as image width or wider */

position:absolute; /* important */

top:0; /* important */

margin:0px;

padding-left:0px; /* important */

}

.neobuxImage{

float:left; /* important */

position:relative; /* important */

display:none; /* important */

}

Kemudian silahkan di Copy dan pastekan kode berikut setelah kode ]]></b:skin>

//<![CDATA[

//]]>

</script>

//<![CDATA[

//]]>

</script>

$(document).ready(function() { $('#neobux').neobux({ timeOut: 3000 }); });

</script>

Lalu silahkan di cari kode berikut atau yang lebih mendekati/sama dengan :

<b:include name='title'/>

</h1>

</div>

<b:include name='description'/>

</div>

</b:if>

</b:includable>

</b:widget>

</b:section>

Copy lalu pastekan kode berikut ini tepat dibawah kode </b:section>

<a href='Silahkan di isi dengan alamat Url Affiliasi Anda'><img height='60' src='Silahkan di isi dengan Alamat Url Gambar Banner Anda' title='' width='460'/><span>Silahkan di isi dengan Nama Affiliasi Anda</span></a></li>

</ul>

</div>

Untuk keterangan yang Nomor 5 itu di isi dengan random satu buah banner saja dan namun bila Anda ingin memasang lebih banyak lagi Anda dapat menambahkan dengan mencopy kode yang sama seperti diatas yang berwarna HIJAU. Selamat mencoba........

Anda mungkin juga meminati:

- See more at: http://tutorialplan.blogspot.com/2012/05/cara-membuat-banner-pada-header-di.html#.UbuVM-c3Bkc

Floating Fan Page Facebook

Floating Fan Page Facebook merupakan widget yang kita tambahkan pada blog untuk mempercantik tampilan blog sekaligus menata dengan rapi widget-widget yang sudah terpasang pada blog. Sebelumnya saya juga sudah pernah bahas tentang cara memasang like box facebook widget pada blog. Dan pada kesempatan kali ini, saya akan memberikan tips blog lagi yaitu Cara Memasang Floating Fan Page Facebook Pada Blog. Sebagai gambaran awal dari Floating Fan Page Facebook pada blog, teman-teman bisa melihat contohnya pada widget fan page yang saya sudah pasang pada blog ini. Pemasangan widget fan page ini tidak akan berjalan dengan lancar bilamana teman-teman blogger belum membuat halaman fan page pada facebook sebelumnya. Untuk itu, silakan buat dulu halamannya. Dan untuk membuat halaman fan page pada facebook, silakan tanyakan saja pada Om Google.

Untuk teman-teman blogger yang sudah punya halaman fan page pada facebook dan ingin memasang widget floating fan page facebook pada blog, silakan ikuti langkah-langkahnya di bawah ini :

Silakan login ke akun blog Anda.
Pada halaman dasbor akun blog, silakan klik nama blog Anda.
Kemudian pada halaman overview blog Anda, silakan pilih template-edit HTML-Prossed-expand widget template.
Selanjutnya silakan cari kode ]]></b:skin>.
Kalau sudah ketemu kodenya, silakan copy dan paste kode di bawah ini pas di bawah kode ]]></b:skin>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

Selanjutnya silakan simpan template blog Anda dan tutup juga halaman edit HTML-nya.
Kemudian silakan pilih lagi layout, lalu pilih dan klik Add Gadget pada posisi mana saja.
Setelah muncul windows Add Gadget Blogger, silakan pilih HTML/JavaScript dengan cara klik tombol plus [+] yang ada disebelah kanannya.
Langkah selanjutnya, silakan copy kode di bawah ini dan paste pada bagian content.

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".likebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .likebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimgoAx19joJzcKtwLjZ8bGqHNT9ZGGqqLuiHPoQ7jz6TKY5XX8UwD1quBzNgRqkgMF4ILg_SXypdSXLsZCREtoY-YN0LNRqhreoungkSI4yX449EZOm6LR7535FUUMUDcMZmo_KjU4r3Ga/s1600/fb.png") no-repeat scroll left top transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed; right:-250px;top:44%;} .likebox div{border:none;position:relative;display:block;} .likebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;} .likebox span a{color: gray;text-decoration:none;} .likebox span a:hover{text-decoration:underline;} </style> <div class="likebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/centrinoblog&width=240&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=258" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 258px; width: 245px;background:#fff;"></iframe> </div> </div>

Setelah dipaste kodenya pada bagian content, jangan dulu disimpan kodenya tapi silakan ganti kode yang saya kasih warna merah dengan alamat atau URL halaman fan page facebook Anda. Setelah diganti kode yang berwarna merah, barulah disimpan kodenya.

Ok sob, selamat ya, sudah berhasil Memasang Floating Fan Page Facebook Pada Blog. Jika ada kendala, silakan tanyakan saja lewat komentar atau buku tamu blog ini.

Demikian informasi dari saya tentang tips blog Cara Memasang Floating Fan Page Facebook Pada Blog dan jika informasi ini bermanfaat, silakan sebarkan ke teman-teman blogger yang lain dengan cara silakan pilih dan klik icon share di bawah ini. Terima kasih..