19 jam yang lalu
Are You looking For Fun Holiday Eyeglasses
Posted by Sugeng in
asal nulis
on 09:41
| (0) Responses
Are You looking For Fun Holiday Eyeglasses and do not have found the right one, I just want to suggest you to try this one Zenni Optical, at this site we will find a Holiday Fun Eyeglasses as well as we want, and if you want to New Arrivals models at Zenni Optical also provided,
So if you want to Holiday Fun Eyeglasses like $8 Prescription Zenni Glasses just visit this site and you will have great Eyeglasses
So if you want to Holiday Fun Eyeglasses like $8 Prescription Zenni Glasses just visit this site and you will have great Eyeglasses
Menambahkan page view Counter di postingan
Menambahkan page View counter di postingan merupakan trik yang sudah lama digunakan untuk para blogger untuk melihat berapa orangkah yang telah melihat postingan kita, biasanya page view counter ini menghiasai bagian bawah postingan kita,
cara menambahkan page view counter ini bisa teman-teman lakukan seperti dibawah ini, tapi sebelumnya teman-teman bisa melihat contoh page view counter yang biasanya ada pada postingan bagian bawah seperti gambah dibawah ini
cara menambahkan page view counter adalah seperti berikut ini, masuk ke akun blogger anda, Dashboard -> Layout -> Edit HTML trus cari code seperti ini <p><data:post.body/></p>
kemudain copy paste code dibawah ini tepat diatas code <p><data:post.body/></p> tadi
bagaimana tidak begitu sulit to untuk pasang page view counter ini
cara menambahkan page view counter ini bisa teman-teman lakukan seperti dibawah ini, tapi sebelumnya teman-teman bisa melihat contoh page view counter yang biasanya ada pada postingan bagian bawah seperti gambah dibawah ini
cara menambahkan page view counter adalah seperti berikut ini, masuk ke akun blogger anda, Dashboard -> Layout -> Edit HTML trus cari code seperti ini <p><data:post.body/></p>
kemudain copy paste code dibawah ini tepat diatas code <p><data:post.body/></p> tadi
<b:if cond='data:blog.pageType == "item"'>
<div id='hit-counter'>
<a href='http://cara-ngeblog.blogspot.com' rel='follow'>
<script src='http://www.amitjain.co.in/pageview.php' type='text/javascript'/> </a>
</div></b:if>
bagaimana tidak begitu sulit to untuk pasang page view counter ini
Menapilkan Autozoom Gambar di postingan
Cara Menapilkan Autozoom Gambar di postingan, ini untuk menambah tips dan tutorial blogger bagi pemula kita, dimana auto zoom, atau zoom otomatis untuk image atau gambar yang ada dipostingan kita ini sangat menarik sekali, karena apa ? karena kita bisa upload gambar kecil di postingan kita, akan tetapi setelah mouse kita mendekat pada gambar tesebut, gambar otomatis akan membersar,
dan ada banyak sekali cara untuk melakukanya, bermacam script dan CSS tambahan lainnya, dan salah satunya adalah dengan menambahkan fasilitas "Auto Zoom Image".Berbeda dengan image zoom lainnya (seperti fancy zoom yang atutorialnya da pada blognya kang rohman) yang menggunakan code java script, karena "Auto ZOom hanya perlu meambahkan kode CSS dan menambahatau merubah kode HTML-nya gambar atau image.
Sebelum kita membahas lebih lanjut, lihat demo di bawah ini >>>arahkan kursor di atas image<<<<
Anak ku
untuk membuatnya ikuti langkah-langkah berikut ini, kita masuk ke akun blogger kita kemudaian seperti biasa masuk ke layout dan edit html, dan untuk berjaga-jaga download terlebihdahulu templates kita untuk menghindarai kesalahan dalam melakukan proses pengeditan
cari code berikut ini ]]></b:skin> kemudian paste Kode dibawah ini tepat diatasnya ]]></b:skin>
# /*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
/*URL: http://www.cara-ngeblog.blogspot.com/ */
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color:#8cc545;
padding: 5px;
left: -1000px;
border: 2px solid #ffffff;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: -50px; /*position where enlarged image should offset horizontally */
}
Kemudian di save,
Langkah selanjutnya, Langkah selanjutnya adalah cara posting gambar dalam postingan. Kita tetap upload gambar seperti biasa kita upload gambar waktu posting. Dan kode HTML standard blogspot adalah seperti di bawah ini :
• Kopi Paste kode di atas ke dalam notepad. Perhatikan kode warna MERAH (URL gambar1) dan Warna Biru (Url Gambar2) karena kode tesebut yang nantinya akan kota kopi paste ke dalam kode di bawah ini.
• Selanjutnya ganti kode diatas dengan kode di bawah ini:
<a class="thumbnail" href="url gambar1"><img src="url gambar2"
border="0" height="70" width="100" /><span><img src="url gambar2" />keterangan gambar</span></a>
• Selanjutnya Kopi dan Paste kode Url gambar anda pada "url gambar1" dan "url gambar2"
• Keterangan Gambar adalah keterangan gambar anda
• pada kode height="70" width="100" adalah ntuk mengatur ukuran thumbnail.
selamat mencoba semoga berhasil ya
dan ada banyak sekali cara untuk melakukanya, bermacam script dan CSS tambahan lainnya, dan salah satunya adalah dengan menambahkan fasilitas "Auto Zoom Image".Berbeda dengan image zoom lainnya (seperti fancy zoom yang atutorialnya da pada blognya kang rohman) yang menggunakan code java script, karena "Auto ZOom hanya perlu meambahkan kode CSS dan menambahatau merubah kode HTML-nya gambar atau image.
Sebelum kita membahas lebih lanjut, lihat demo di bawah ini >>>arahkan kursor di atas image<<<<
Anak kuuntuk membuatnya ikuti langkah-langkah berikut ini, kita masuk ke akun blogger kita kemudaian seperti biasa masuk ke layout dan edit html, dan untuk berjaga-jaga download terlebihdahulu templates kita untuk menghindarai kesalahan dalam melakukan proses pengeditan
cari code berikut ini ]]></b:skin> kemudian paste Kode dibawah ini tepat diatasnya ]]></b:skin>
# /*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
/*URL: http://www.cara-ngeblog.blogspot.com/ */
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color:#8cc545;
padding: 5px;
left: -1000px;
border: 2px solid #ffffff;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: -50px; /*position where enlarged image should offset horizontally */
}
Kemudian di save,
Langkah selanjutnya, Langkah selanjutnya adalah cara posting gambar dalam postingan. Kita tetap upload gambar seperti biasa kita upload gambar waktu posting. Dan kode HTML standard blogspot adalah seperti di bawah ini :
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_4kNmrQ1bjec/Sm5XanxsYOI/AAAAAAAAANU/QVI921pQwGA/s1600-h/DSC00676.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 240px;" src="http://3.bp.blogspot.com/_4kNmrQ1bjec/Sm5XanxsYOI/AAAAAAAAANU/QVI921pQwGA/s320/DSC00676.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5363320321110466786" /></a>
• Kopi Paste kode di atas ke dalam notepad. Perhatikan kode warna MERAH (URL gambar1) dan Warna Biru (Url Gambar2) karena kode tesebut yang nantinya akan kota kopi paste ke dalam kode di bawah ini.
• Selanjutnya ganti kode diatas dengan kode di bawah ini:
<a class="thumbnail" href="url gambar1"><img src="url gambar2"
border="0" height="70" width="100" /><span><img src="url gambar2" />keterangan gambar</span></a>
• Selanjutnya Kopi dan Paste kode Url gambar anda pada "url gambar1" dan "url gambar2"
• Keterangan Gambar adalah keterangan gambar anda
• pada kode height="70" width="100" adalah ntuk mengatur ukuran thumbnail.
selamat mencoba semoga berhasil ya
Menampilkan recent post dengan Thumbnail di blogspot
Posted by Sugeng in
tips mempercantik blog
on 08:19
| (0) Responses
Menampilkan recent post dengan Thumbnail di blogspot, ini merupakan lanjutan dari cara menampilakan recentpost dengan feed maupun yang biasa, dimana di dalam recent post dengan gambar ini sekarang lagi ngetrend sekali, karena kebanyakan kita menginginkan postingan terakhir kita tampil di sisi side bar dengan dilengkapi gambar kecil atau thumbnail, serta dilengkapi tanggap posting dan sedikit rangkuman postingna kita serta ada jumlah comment dalam postingan kita,
ada beberapa cara untuk menampilkan postingan terakhir dengan gambar, atau bahasa agak kerenya Menampilkan recent post dengan Thumbnail di blogspot, wigit berikut ini dihasilkan oleh blogger trick, dan caranya seperti dibawah ini
berikut ini saya ambil contoh dari blog Free download software berikut ini :
cara membuatnya cukup sederhana kita tinggal copy paste aja script dibawah ini, kemudian langsung paste aja dalam gadget HTML/javascript (Tuju tab Layout - Page Elements - Add a Gadget - pilih HTML/javascript)
dan berikut ini item-item yang perlu diadakan perubahan
boxwidth - Ukuran Lebar Widget
cellspacing - Spasi diantara cells
borderColor - Warna Border
thumbwidth & thumbheight - Ukuran lebar dan tinggi gambar Thumbnails
fntsize - Ukuran Font pada title
acolor - Warna title
aBold - Tebal huruf pada title? (true or false)
numposts - Jumlah recent post yang ditampilkan?
home_page : http://NamaBlogkita.blogspot.com/ (Ubah sesuai URL blog masing2)
trus simpan, nah ini ada cara yang ke 2 untuk mnampilakan recentpost dengan gambar kecil, dan caranya bisa teman-temen ambil dari link berikut ini, dan usahakan menggunakan cara yang ke 2 karena lebih mudah cara pengerjaanya
ada beberapa cara untuk menampilkan postingan terakhir dengan gambar, atau bahasa agak kerenya Menampilkan recent post dengan Thumbnail di blogspot, wigit berikut ini dihasilkan oleh blogger trick, dan caranya seperti dibawah ini
berikut ini saya ambil contoh dari blog Free download software berikut ini :
cara membuatnya cukup sederhana kita tinggal copy paste aja script dibawah ini, kemudian langsung paste aja dalam gadget HTML/javascript (Tuju tab Layout - Page Elements - Add a Gadget - pilih HTML/javascript)
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://Namablogkita.blogspot.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>
dan berikut ini item-item yang perlu diadakan perubahan
boxwidth - Ukuran Lebar Widget
cellspacing - Spasi diantara cells
borderColor - Warna Border
thumbwidth & thumbheight - Ukuran lebar dan tinggi gambar Thumbnails
fntsize - Ukuran Font pada title
acolor - Warna title
aBold - Tebal huruf pada title? (true or false)
numposts - Jumlah recent post yang ditampilkan?
home_page : http://NamaBlogkita.blogspot.com/ (Ubah sesuai URL blog masing2)
trus simpan, nah ini ada cara yang ke 2 untuk mnampilakan recentpost dengan gambar kecil, dan caranya bisa teman-temen ambil dari link berikut ini, dan usahakan menggunakan cara yang ke 2 karena lebih mudah cara pengerjaanya
Category
- Adsense (1)
- asal nulis (1)
- Blog review (3)
- css (1)
- Dasar (3)
- optimalisasi (3)
- SEO (3)
- Templates (4)
- tips bagi pemula (11)
- tips html (2)
- tips mempercantik blog (32)
- Trik (8)
Recent post
Komentar Terbaru
Cara Membuat Blog
Link Templates Teman
-
Blogger templates Cinderella and Carriage - Free Blogger templates name is Cinderella and Carriage, this Blogspot templates have 2 Columns, Adapted from Wordpress, Brown, Fixed width, Right sidebar, ...
