Macam-macam Widget Jam Cute untuk Blog Anda

Anda ingin mempercantik tampilan blog anda ? Anda bisa menambahkan widget-widget salah satunya jam. nah, berikut ini merupakan widget jam cute untuk blog anda:

 Tapi sebelum itu berikut merupakan cara memasang widget jam:

1. Copy kode HTMLdibawah ini
2. Login akun blogger
3. Pilih tata letak
4. Klik tambah gadget
5. Pilih HTML javascript
6. Paste kode tadi
7. Klik Simpan

<div align="left"> <embed src="http://img198.imageshack.us/img198/4373/clwarmcho.swf? quality="high" width="150" height="100" wmode="transparent"></embed></div> <br>

 

<embed src="http://www.blogclock.cn/swf/S100114643733a8-e.swf" Width="150px" Height="150px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S1002185d2a33e6-3.swf" Width="150px" Height="150px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed></p> </div> </form>

<embed src="http://www.blogclock.cn/swf/S1001729d49e761-f.swf" Width="200px" Height="200px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src='http://www.blogclock.cn/swf/S10031403d775ae-6.swf' Width='120px' Height='100px' type='application/x-shockwave-flash' quality='high' wmode='transparent'></embed>

<embed src="http://www.blogclock.cn/swf/S100234458f3377-7.swf" Width="150px" Height="150px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S1002706632df8e-1.swf" Width="150px" Height="150px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S100294b3349872-0.swf" Width="150px" Height="150px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S10021502be4a53-1.swf" Width="150px" Height="150px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

Catatan:

Jika ingin menyesuaikan lebar dan tinggi maka ubah dengan cara edit kode HTML di atas dan temukan kode berikut ini width="150px" dan height="150px" ubah angka tersebut sesuai keinginan anda ingat hanya angka tidak pakai dispasi atau apapun.

Berikut merupakan postingan saya tentang Widget jam lucu untuk Blog. Anda juga dapat mengunjungi postingan saya yang satu ini Macam-macam Widget Kalender Lucu Clik Here . Thanks a lot semoga bermanfaat .

Cara Membuat Rainbow Link

Rainbow link merupakan salah satu trick yang diaplikasikan kepada link yang ada dalam sesebuah blog. asalkan cursor mouse dilalukan pada sesuatu link, link tersebut akan berubah menjadi warna-warni dengan warna yang tertentu.

Tutorial untuk menjadikan blog anda juga mempunyai link berwarna-warni adalah seperti berikut.

1.) Copy code di bawah ini.

<script src="https://sites.google.com/site/unwanted86/javascript/rainbowlink.js" type="text/javascript"> </script>

2) Buka dashboard blog anda, kemudian pergi ke layout > page element > add a gadget


3) Cari HTML/javascript. Kemudian apabila sudah buka, paste code kat situ.


4) Siap dan save.


Source : http://tutorialuntukblog.blogspot.com

Cara Membuat Widget Social Media Melayang di Blog

Preview Widget

FARESPO - Tak bisa dipungkiri lagi bahwasanya social media atau yang sering disapa jejaring sosial adalah sarana berinteraksi online terbaik saat ini, tentunya masih ada sarana-sarana pendukung lainya, seperti forum, grup, chat, dan lain sebagainya, akan tetapi sekarang ini social media masih menjadi prioritas diantara para pengguna internet. Dengan social media, para pengguna dapat berinteraksi dengan mudah layaknya di dunia nyata, tanpa batasan dan aturan apapun.

Sebagai blogger, apa manfaat yang dapat kita peroleh dari layanan social media? tentunya banyak sekali benefit ataupun keuntungan yang akan didapat, salah satunya adalah mempermudah marketing atau promosi blog kita, di social media kita dapat dengan mudah merekomendasikan blog kita ke orang-orang yang mungkin menyukainya, jadi selain SEO kita masih punya backup trafik yang bersumber dari social media.

Sehubungan dengan mendapatkan trafik dari social media, pada kesempatan kali ini FARESPO ingin membagikan cara membuat sebuah widget social media atau jejaring sosial, namun kali ini widgetnya bersifat melayang atau popup, jadi tidak memakan tempat, selain itu efeknya keren dan loadingnya juga cukup ringan karena tidak menggunakan bantuan javascript.

Cara Membuat Widget Social Media Melayang di Blog

1. Login ke Blogger.

2. Pilih Tata Letak / Layout.

3. Klik Add / Tambahkan gadget.

4. Pilih HTML/JavaScript.

5. Letakkan kode berikut ini kedalamnya.

<style>
.farespo-fixedmenu{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwqzORmKG0ZVJOOYU53u5bCf2mh_HeMTlMCe_Y9T2fUcXEHEJP6jmBzHkp5hXE0SzsvghzEmCs9a6iWALf3aWWnq5iP1Vsd0B-avVMzYqxOEdqDUI8pCM7NsnsFkehZeZHJlPxQDCTTHk/s1600/facebook.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}
.farespo-fixedmenu1{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieir-NTGCxGaW5JQvggYh-el6Dpi1bH_aHbaEXmKYKojgZ_MQ3JKivgH4sLJpAktD-0keGbTrvlK0VJ0yw4DaJ0KIwiTleDKG0jn9msKtF44qmd2-fcI5_2Fj2pgmrg1AbMLErGLTSdV8/s1600/facebook-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}
.farespo-fixedmenu_1{margin:0px 0 0 43px}
.farespo-fixedmenutw{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIZbLIIGLiOYHJaoIId_oGS14_Gz8wrd23Oih4FnW0UUsFoKgrC_DxwwVo5Z2clNFLhEANwqIBd8z_HDAJ2gUxeNPLS8uTsEOx1YLHZgNBF17cGDhjqeJhNh9Bm0_4zXxaZBCKUwzzHFM/s1600/twitter.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}
.farespo-fixedmenutw1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeO5GINrcaltD94ZLnUDStXgCzdBfHgcKeiXDBsiHf1-GxdK0D_blioAvb93IYbenKNjCeZfg70EPluhIsREweSj-IXjub3VE2s9sodHpl3gOR_8hn9Q60GbPYPRZilFYOB_R07pwLkZ0/s1600/twitter_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}
.farespo-fixedmenutw_1{margin:0px 0 0 43px}
.farespo-fixedmenufb{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjePy_osjYR-yrD6zfi-15Gmdih72SHYYBAlOMM9E6NEBmRyEdlf0FWpyvigRSKQvNo2_AYIIaYSyNkiEQsjgVt4d3RXbJrejXQqM_g-t-AJtsi2236VRxrnlP-UCEC4J204Ek3jBtmlJc/s1600/Gplus.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}
.farespo-fixedmenufb1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVhRAvl332ToL0pFbYOc6BmkoT9jUjwJUzRGOlCplioqgpP5u8htY3r65_uMwXkMV7yCODL4QY2XIxHg5X02QlpB3acwAuJ3WX5UWESYaRmKsusXathkA5lHdNaRUB5lfNXhGlGC_EyoM/s1600/Gplus_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}
.farespo-fixedmenufb_1{margin:0px 0 0 43px}
.farespo-fixedmenurss{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS4MIIOp4S-Qgcr0Eb3uS3SPGPM_CwM3n12rz4PCKbR4VcGPW16rQZFDBmOHzrG5dNq_F7Y_0VivyuHWik-AV7FYyvUHT9dOCdq6wjsF5k3KJdMZW08WMMImja9GFlWzyeNPXs_ZU8CvM/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}
.farespo-fixedmenurss1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisfIY6MaapM6u6Wuh18bfVJ09QMmpr_vGjkOvHtW-JCOCKRl1pKqui4DYgTgvlgkGH1c8BsI_-Y2pkvqxWybZK3Hn4wuHR7aNyzA5yqU4tMiaCxLquh8WZkWRvxQ7i5h4j16FFVtf3Clc/s1600/RSS-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;}
.farespo-fixedmenurss_1{margin:0px 0 0 43px}
</style>
<div class='farespo-fixedmenu' onmouseout='this.className=&apos;farespo-fixedmenu&apos;' onmouseover='this.className=&apos;farespo-fixedmenu1&apos;'><div class='farespo-fixedmenu_1'>
<a href='https://www.facebook.com/tuliskancom' target='_blank'><img alt='Like us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvVPpjuqufwbWgFsJ5mDp-RgNpGQW2rpB_Pit8XULwL0jtlYcNaL65ndznaxcIqPph5gGU5TehYxygqwMfygCaddQVtxgPIEHiem__2NrZvSavk_c6Pb6rVkU8eGI0DSi9R1LJi1gCmHI/s1600/facebook-hover1.png' title='Like us on Facebook'/></a><br/>
</div></div><div class='farespo-fixedmenutw' onmouseout='this.className=&apos;farespo-fixedmenutw&apos;' onmouseover='this.className=&apos;farespo-fixedmenutw1&apos;'><div class='farespo-fixedmenutw_1'>
<a href='https://twitter.com/tuliskancom' target='_blank'><img alt='Follow us on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMDwA-edYB05F3sZDFJiGcTz5vJ_luSQphrsz5e75VdFNWz9Pza9NqjuIc_qF-lvBBvmv3IFy8hyphenhyphenTMIhLOFwP_jjOo60kEs18iSqTRqN6blEZWSoBaNjGWXVVm2VLJRpdf2RKJmNUJeAk/s1600/twitter_hover1.png' title='Follow us on Twitter'/></a><br/>
</div></div><div class='farespo-fixedmenufb' onmouseout='this.className=&apos;farespo-fixedmenufb&apos;' onmouseover='this.className=&apos;farespo-fixedmenufb1&apos;'><div class='farespo-fixedmenufb_1'>
<a href='https://plus.google.com/10921029102910212' target='_blank'><img alt='Recommend us on Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKngWZeMship2wcNBHXcmF2twHQs3QVObtqpl8clpkE6zByd93xZ03hOwdkyo_0kcgbHxUdE4Lsi7ZMuhMLVFKgX6gV85y8GN0sXDoOi5Mvtsw12KHICFaRzVwQGP2i6nLdYQ2eaPl3qc/s1600/Gplus_hover1.png' title='Recommend us on Google Plus'/></a><br/>
</div></div><div class='farespo-fixedmenurss' onmouseout='this.className=&apos;farespo-fixedmenurss&apos;' onmouseover='this.className=&apos;farespo-fixedmenurss1&apos;'><div class='farespo-fixedmenurss_1'>
<a href='http://feeds.feedburner.com/bloggertrix' target='_blank'><img alt='Subscribe me on RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZA0_PNj3IH858r_KAgtgBjO3zUmRJfHf91TYLdeAFLk2GrLDLDiYrWBcvHpo7OwdUn6f22rLHKl-bK9_JQNG6XsZpWhz6N84WPMlHWdnpnSTiIWv99kQLM8031D1uUGVvXfvxCKoXFEg/s1600/RSS-hover1.png' title='Subscribe me'/></a><br/>
</div></div>

Keterangan:

• Ganti kode yang berwarna biru tua dengan ID / Nama Fan Page Facebook anda
• Ganti kode yang berwarna biru muda dengan Username Twitter anda
• Ganti kode yang berwarna merah dengan ID Google+ anda
• Ganti kode yang berwarna oranye denan ID Feedburner blog anda

6. Klik "Save/Simpan", dan selesai.

Demikian informasi terbaru tentang Cara Membuat Widget Social Media Melayang di Blog, semoga bermanfaat, dan selamat mencoba.

Cara Memasang Menu Navigasi

Menu navigasi horizontal biasa digunakan pada situs web atau blog. Dilihat dari peranannya menu horizontal sangat berguna bagi pemilik blog maupun pengunjung guna menavigasi ke halaman yang diinginkan.

Memasang menu navigasi ini biasa diletakkan di bawah maupun di atas header. Anda bisa memasukkan link secara horizontal atau berderet kesamping. Biasanya link yang diletakkan pada menu horizontal ini adalah menu yang dianggap penting, karena pengunjung blog ketika pertama kali membuka halaman secara tidak langsung akan melihat menu ini.

Menu ini sangat mudah diaplikasikan pada template blog, karena cara membuat menu navigasi horizontal ini menggunakan css biasa yang tidak akan membebani loading blog Anda. Menu horizontal yang akan kita buat adalah menu navigasi seperti yang ada pada blog ini, atau Anda bisa lihat contoh gambarnya di bawah ini:

Cara Membuat Menu Navigasi Pada Blog

1. Login ke blog Anda

2. Pilih Template > Click Edit Template.

3. Cari kode ]]></b:skin> atau </style>

4. Copy-paste code CSS berikut ini tepat diatasnya :

#menunavigasi {float:left; background:#252525; width:auto; margin:0 auto; padding:0 auto;-moz-border-radius: 10px; border-radius:4px} #menubar {width:100%} #menubar,#menubar ul {list-style:none; margin:0; padding-left:10px} #menubar a {display:block; text-decoration:none; font-size:12px; font-weight:Bold; color:#eee; border-right:1px solid #666; padding:8px 12px} #menubar li {float:left; width:auto} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a {color:#fff}

 Keterangan :
#252525 : Warna background menu navigasi
#eee : Warna font atau tulisan menu navigasi
#666 : Warna border samping kanan tulisan
#fff : Warna font atau tulisan saat di sorot kursor

Warna di atas bisa Anda ganti sesuai warna kesukaan Anda. Untuk melihat kode-kode warnanya silahkan lihat Daftar Kode Warna HTML

5. Kemudian cari kode <div id='content-wrapper'>
6. Copy-paste code berikut ini tepat dibawahnya :

 

<div id='menunavigasi'> <ul id='menubar'> <li><a href='http://www.tugasku4u.com'>Homepage</a></li> <li><a href='#'>Kumpulan Tugas</a></li> <li><a href='#'>Kumpulan Makalah</a></li> <li><a href='#'>Tutorial Blogger</a></li> <li><a href='#'>Tips Dan Trick</a></li> <li><a href='#'>Bantuan Donasi</a></li> </ul> <div style='clear:both;'/> </div> <div class='clear'/>

Keterangan:

- Ganti tulisan warna merah dengan alamat link milik Anda yang ingin dimasukkan dalam menu.

- Ganti tulisan warna biru dengan nama alamat link yang dimasukkan tadi.

7. Pratinjau, jika tidak ada kesalahan silahkan simpan template Anda.

Demikian tutorial cara memasang menu navigasi pada blog, semoga tutorial ini bisa bermanfaat bagi sobat semua.

source : http://www.tugasku4u.com/2013/09/cara-memasang-menu-navigasi-pada-blog.html

Cara Membuat Scroll Box Pada Blog Archive

Blog archive untuk sesebuah blog boleh menjadi list yang begitu panjang apabila banyak entri yang di post atau jika sudah lama terlibat dengan dunia blogging.

Tutorial kali ini kan menunjukkan bagaimana untuk jadikan blog archive anda boleh scroll untuk menampakkannya lebih ringkas menyenangkan mata memandang.:)

Tutorial untuk buat scroll bagi blog archive adalah seperti berikut.


1. Dari dashboard > design > edit html > Expand widget templates.
(backup template untuk langkah berjaga²)

2. Menggunakan fungsi find (ctrl + F), cari kod <div id='ArchiveList'>

3. Anda akan jumpa kod ini <div class='widget-content'> sebelum kod <div id='ArchiveList'>

4. Gantikan kod <div class='widget-content'> yang anda jumpa di langkah 3 dengan kod berikut.
 

<div class='widget-content' style='overflow:auto; height:200px'>

Note: Anda boleh tukar 200px dengan ketinggian yang anda mahukan.

Contoh:

Sebelum.


Selepas


4. Save dan lihat hasilnya.:)

source : http://tutorialuntukblog.blogspot.com/2011/06/tutorial-buat-scroll-box-untuk-blog.html

Cara Memberi Widget Burung Twitter Warna Warni Di Blog

Cara Memberi Widget Burung Twitter Warna Warni Di Blog - . Kini saya akan posting lagi tutorial yang sama, hanya saja jika sebelumnya saya posting hanya yang berwarna biru, kini saya akan posting beberapa warna. Anda bisa pilih salah satu yang cocok untuk blog anda.

1. Masuk ke akun blogger anda

2. Pergi ke tata letak -> tambah gadget -> html/javascript

3. Masukkan script ini ke kolom

<!-- floating twitter Bird --> <script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script> <script type="text/javascript"> var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWdxA8MP4vQLPlv7fJTkTIyuh-Vmg2klUnHT0jMJ3P-wT9X86gujVdzjpFvG5eS3bE-ApCODG5Jhn_GtDDXiopfKn3RmStFDejdS0Tu14tcIU9NWPWaQtPWDwVcZCuRJw937JiV2O3vgw/s1600/burung+twitter+terbang.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/androidnymous07"; var tweetThisText = "Twitter - UserID http://ramadhanlmzero.blogspot.com/"; tripleflapInit(); </script>

Ganti text yang berwarna biru muda dengan url twitter anda
Ganti text yang berwarna merah dengan url warna burung twitter yang anda suka. Berikut pilihannya :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmjx4Iq9Lx-EZkZz3mBMxv0BDNBvnUGWoCD79M81zzE9Gc8Rcprh-2INASMwmEiFmvnHLUasfIxJCxyo45DTrPh4B4Oa0d3h4PwIpy0Wu1eyPYQI-1yzHImwluSVawqVIfPolO2QmAy08/s1600/yellow+bird.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDwTz71LH-YQ3ozRIbzCycFJerNCZQaDmDIRIiVJCZjGBY8_IIG4016ixJBBbC-RHFCKTv4lZ3AIYpSiZFOXITRu9WrPuQXmSa0qEMahMFEf0teWzYmxn9sBjsjnV3byWqBXNFpkUDbAM/s1600/black+bird.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCD3NB2X7tWT0FPTVLAIWLj_m9xelo6IZMB7nm50NEjpY-s7ociJMzS5N7EySvYqFqZZ3LER-QBNSe8q08Ts3FLn56Tibi6chV5W7ZGhOZscKeGIAAz6Z0U23yVjQXNvtC6QtoqOwICKQ/s1600/Blue+bird.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXqlLafOW5ZtnuahGPcyi0zQo_XiRLPj4Ov3bjGVu1dfrc4yv6dl8BDLIHat-szL2YQJrUS3Oj2G7U-S-jhrGqm7W0rfMpQbwrBLqvRWnMNmdICwb9NlC8PTIDA74Utj8SyGk_HNRQKP8/s1600/brown+bird.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKpfa0p7K8TazfbBSnO6fMAOPRFBlP-5RGMyKGnQGaPhBrB6q1ifgEXrCHIHlb3hPJ7mmlXPX4AmB8z7FNmmqKEm7bm_MCcEEZcSDuuYliE2Dhiao1pk7fC8xEKw0zrRnZag6cFNZRZeg/s1600/Green+bird.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUD5RcUTngXYe2n3WurlOp6wpqDlWVuHF_ZIsZ-Rt40AsX5J1Dwp22XBjtiV8HnUR8Flwm0ZONySJfcsWhdC69I_oBfMNRwIoiGYoUVZ57ol-f3Gyw-rHnt5596z3vRk_mnifSG7MJpqw/s1600/purple+bird.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRU24PAew79JpsONTEOk0NFM1eqoVpNE9GkdSmcw1mdJGqAVr_u8sxm6JFB8lpsbWFt8UVN1SD2LaTHXGgo3Ut2wuWDy4twlPwWI9Wr6K5PjjKQSwIqMG_SoigNINEzTVkTOoemxcz8tM/s1600/white+bird.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqhglsjsjiYIX_N4-c-mTWHf_DbYD-3RvLiKXb1bfA0XW_uZ76zHT8bmqBtMoKJskjBmRkoiIifnOXeAJwDmxTa0VpQhXpwfNayQLavwQXZ2NTWNSfbaDF9xM97MqL76mFBc4_wC746Vg/s1600/red+bird.png

5. Untuk text yang berwarna biru bisa anda ganti dengan url twitter anda

6. Klik "simpan"

Selesai, anda suka memiliki widget burung twitter terbang sesuai warna yang anda pilih.

Source : http://ramadhanlmzero.blogspot.com/2013/03/cara-memberi-widget-burung-twitter.html

Cara Membuat Energy Saver untuk Blog

Blog anda boleh diletakkan dalam mode energy saver jika anda mahu. Kalau dunia realiti ada Earth Hour untuk menunjukkan sokongan kepada penjimatan tenaga, blog anda pun boleh.:)



Contoh blog apabila diletakkan energy saver seperti gambar di bawah.



Tutorial untuk letakkan energy saver ini seperti berikut.


1. Dari dashboard > design > edit html.
(backup template untuk langkah berjaga²)

2. Dengan menggunakan fungsi Find (ctrl + F), cari kod </head>

3. Copy kod di bawah dan paste SEBELUM kod </head>

Contoh:



4. Save dan lihat hasilnya.

Nota: Anda perlu biarkan selama 1 minit untuk energy saver memulakan operasi.:)

Cara Membuat Widget Popular Post Warna Warni

Cara Mudah Membuat Widget Popular Post Warna Warni – Selamat malam sahabat blogger. Setelah sebelumnya sudah pernah membahas tentang Cara MudahMembuat Widget Recent Comment Dengan Foto sekarang akan membahas seputar widget popular post. Sebenarnya banyak jenis popular post di blog salah satunya yaitu widget popular post warna warni seperti pelangi. Pasti sobat sudah pernah lihat kan widget popular post seperti ini?? Ya dengan adanya widget popular post seperti ini akan menjadikan tampilan blog sobat menjadi lebih fresh.

Nah bagi yang menginginkan widget popular post warna warni seperti diatas,ikuti langkah langkahnya sebagai berikut. Cek itt doott..

Cara Mudah Membuat Widget Popular Post Warna Warni :

• Login terlebih dahulu di blog masing masing
• Sebelumnya pasang dulu widget popular post di blog, Klik Tata Letak >> Add Gadget >> Popular Post
• Setting widget popular post tersebut sesuai gambar di bawah ini :

• Nah selanjutnya klik Template >> Edit HTML
• Cari kode </b:skin> ( gunakan ctrl+f untuk memudahkan)
• Copy kode dibawah ini dan letakkan diatas kode </b:skin>
• Simpan templte.

Nah sekarang coba cek blog kamu,widget popular postnya menjadi warna warni kaya pelangi,hehe..  itulah sedikit tips dan tutorial Cara Mudah Membuat Widget Popular Post Warna Warni. Semoga bisa bermanfaat. Terima Kasih.

Sumber : http://www.tips-caramudah.com/2013/04/cara-mudah-membuat-widget-popular-post.html#ixzz2vnPXT3OU

Cara Membuat Image magnify

Image magnify merupakan salah satu kesan khas yang digunakan terhadap gambar yang dipost dalam sesebuah entri untuk mencantikkan dan menjadikan ianya lebih unik berbanding kaedah² yang melihat gambar yang lain.

Contoh gambar yang diaplikasikan image magnify ini boleh dilihat disini, Image magnify

Dengan menggunakan image magnify, gambar dapat dipertontonkan kepada pengunjung samada untuk diperbesarkan atau diperkecilkan tanpa memerlukan dibuka kepada new tab. dan yang menariknya cara zoom in dan zoom out ini mempunyai kesan khas yang menakjubkan.

Berikut adalah tutorial untuk image magnify ini.


1) Copy code di bawah, kemudian letakkan di HTML/javascript dalam blog anda.
(Dashboard > layout > add page element > HTML/javascript )
Jika masih tidak jelas lagi,  Klik disini
 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src=" http://www.yourjavascript.com/610310434009/unwanted86.blogspot.com.js" type="text/javascript"> /*********************************************** * Kod telah di'edit' oleh unwanted * Pastikan notis ini tidak dibuang untuk menghargai kerja² edit yang dilakukan oleh unwanted * -- Sharing Is Caring -- http://www.unwanted86.blogspot.com -- ***********************************************/ </script>

2) Apabila sudah letak code tu, save sahaja seperti biasa..
Siap untuk bahagian letakkan kod asas..

Seterusnya, adalah kod yang anda perlu letakkan bersama dengan url gambar yang anda hendak post dalam blog..(kod asas tadi perlu letak sekali je. Kod bawah ini diperlukan untuk membuat kesan tersebut pada gambar.)

 

<img src="url gambar disini" class="magnify" data-magnifyby="2" style="width:200px; height:150px cursor: url(magnify.cur), -moz-zoom-in; " />

Keterangan :

• url gambar disini : Masukkan url gambar.


• 2 : Skala pembesaran. Bergantung kepada width dan height. Nilai lebih besar dari 1 akan membesarkan gambar, nilai kurang dari satu akan mengecilkan gambar contoh 0.5


• 200 : Masukkan lebar gambar yang anda rasakan bersesuaian


• 150 : Masukkan tinggi gambar yang anda rasakan bersesuaian

source : http://tutorialuntukblog.blogspot.com

Cara Membuat Gambar Bergerak

Membuat scrolling image dapat memberi pandangan yang berbeza berbanding memaparkan gambar secara statik. Kebanyakan scrolling image ini diaplikasikan oleh sesetengah blog yang mempunyai senarai list dalam bentuk gambar seperti banner ataupun mendapat tag daripada blogger lain.

Contoh scrolling image adalah berikut.




Pergerakan setiap gambar dapat diubah samada dari kiri ke kanan, bawah ke atas dan sebaliknya. Selain itu kelajuan pergerakan setiap gambar juga dapat dikawal.


Contoh kod bagi scrolling image adalah seperti berikut.
 

<marquee direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" width="150" height="200"> <a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a> <a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a> </marquee>

Penerangan:Arah pergerakan gambar : boleh ditukar kepada up, down dan right.
Kelajuan pergerakan gambar : boleh ditukar kepada nombor lain. Semakin tinggi nilai semakin laju.
link untuk dibuka: link yang hendak dibuka apabila gambar diklik.
url gambar: url gambar yang hendak dipamerkan.

Nota:
1. Jika anda ingin menambah lebih banyak gambar, cuma copy paste kembali untuk bahagian gambar
2. Kod-kod ini dapat digunakan di dalam post entri ataupun pada bahagian gadget


Source : http://tutorialuntukblog.blogspot.com 

Cara Membuat Background dan Border Pada Halaman Posting di Blog

Ada banyak cara untuk membuat template blog anda kelihatan cantik dan menarik, salah satunya yaitu menambahkan background atau bahkan border pada halaman posting karena halaman posting merupakan bagian inti dari sebuah blog dan merupakan bagian yang paling banyak mendapatkan perhatian dari pengunjung maka dari itu seorang pemilik blog harus bisa memberikan sentuhan cantik untuk template blognya.

Kembali kepembahasan awal,
Membuat Background dan Border pada Halaman Posting

Membuat Border

Cari kode #main-wrapper { pada template anda dan taruh kode border: 3px solid #000000; tepat dibawahnya.Kodenya nanti akan terlihat seperti ini.

#main-wrapper {

border: 3px solid #000000;

Ket:
3px ( Ukuran lebar border )
Solid ( jenis border )
#000000 ( kode warna )

Untuk ukuran, jenis border, dan warna anda bisa mengganti sesuai keinginan yang pantas untuk blog anda. Sebagai contoh anda lihat border dibawah ini.

border: 3px solid #000;

border: 5px solid #f00;

Dotted
border: 3px dotted #000;

Dashed
border: 5px dashed green;

Double
border-style: double; border-color: blue;

Outset
border-style: outset; border-color: #404040;

Membuat Background

Cari kode #main-wrapper  pada template anda dan taruh kode background: #333333; tepat dibawahnya.Kodenya nanti akan terlihat seperti ini.

#main-wrapper {

background: #4DB64A;

Ket:
#4DB64A; ( kode warna yang bisa anda ganti sesuai keinginan ).Sebagai contoh anda lihat warna background dibawah ini.

background: #4DB64A;

Menggabungkan Border dan Background

Cari kode #main-wrapper selanjutnya taruh kode border: 5px solid #666666;
background: #4DB64A;.Kodenya nanti akan terlihat seperti ini.

#main-wrapper {

border: 3px solid #666666;

background: #4DB64A;

Untuk keterangan kode sama dengan yang di atas.Sebagai contoh anda lihat warna Border dan background dibawah ini.

Menggabungkan Border dan Background

border: 5px solid #666666;

background: #4DB64A;

Mengganti Warna Background dengan Gambar/Photo

Kode ( background: #4DB64A; ) di ganti dengan
Kode ( background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSVs6wHMCRaUxj3Oa2y34uZuwwq728TOXr7fdH2G0FAC4sZ-GvxBQ0-5jmASb0gEjRsI6HLuE8bcU7cos-4-PW0K6EEj4mnC5XEu0i9B36-fl1ct6EvA5ghq9ZZ4UVpXTIrjZX9Q6Dhuc/s1600/abstrak%203.jpg);   )

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSVs6wHMCRaUxj3Oa2y34uZuwwq728TOXr7fdH2G0FAC4sZ-GvxBQ0-5jmASb0gEjRsI6HLuE8bcU7cos-4-PW0K6EEj4mnC5XEu0i9B36-fl1ct6EvA5ghq9ZZ4UVpXTIrjZX9Q6Dhuc/s1600/abstrak%203.jpg);

Sebelum anda memulai untuk mempercantik blog dengan mengubah warna pada halaman posting baik itu menambahkan border atau background atau bahkan menggabungkan antara borden dengan background alangkah baiknya anda download template lengkap dahulu untuk mengantisipasi apabila terjadi kesalahan edit pada template.

source : http://roningasinanblog.blogspot.com/2012/06/membuat-background-dan-border-pada.html

Cara Mengubah Gambar Header Pada Blog

Cara Memasang Gambar Header. Gambar header adalah sebagai ciri khas suatu blog. Template boleh sama, tapi gambar header pastilah berbeda. Dan gambar header mampu menggambarkan akan suatu blog itu sendiri. Sebelum mengganti gambar header, siapkan dulu gambar yang akan di upload. Dan sesuaikan panjang ( umumnya sekitar 850 px) dan lebar gambar dengan kolom widget header gambar itu sendiri. Agar tampak lebih rapi sehingga tidak ada ruang kosong pada kolom widget header. 

Cara memasang gambar template standar blogspot:

• Klik Desain..
• Klik Tata Letak.
• Pilih dan Klik Edit pada widget header

• Silahkan upload foto dan untuk penempatan gambar header silahkan sesuaikan sendiri.

• Klik Simpan.
• Untuk mengetahui lebar kolom pada gambar,silahkan lihat di edit pengaturan template sesuaian.

• Terakhir Klik TerapkanBlog

Cara Memasang Gambar Header template pihak ke tiga :

• Klik gambar header untuk mengetahui linknya. caranya klik kanan mouse, pilih view background image.

• Silahkan copy link yang ada di kota adddress bar browser.

• Selanjutkan silahkan buka Edit HTML template
• Silahkan paste kode tersebut pada kolom Find( Klik CTRL+F dan pastekan kode tersebut ) dan Klik Enter maka akan terlihat/terseleksi link tersebut.

• Selanjutnya silahkan ganti link gambar tersebut dengan link gambar Sahabat.
• Klik Pratinjau tempalte.
• Dan Klik Simpan template.

Untuk menghapus atau menghilangkan judul agar tidak ganda dengan judul yang ada di link gambar baru, silahkan ubah font color judul blog ( Header) menjadi transparent.

 Misal Contoh kode font Header pada template yang menjadi percobaan dalam postingan ini :

Header
----------------------------------------------- */
#header-wrap {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioWRy-2-EJuvVgrxcG_kQJkKCEGIpe3TrwJrODmDd8AE7_4w2G7qEn2U0xJ2vmmjF3vrJ7oQq7Pocul_LYPpnmixIUqWoSTWdPD2evgLKi46h1RAAqSIMeeEIA6v2rHncPhcfmKAYfmqA/s1600/Gambar+header11.jpg) no-repeat;
width:770px;
height:265px;
float:left;
}
#header-inner {
background-position:center center;
margin-left:auto;
margin-right:auto;
}
#header {
float:right;
width:500px;
color:transparent;
text-align:right;
padding:100px 20px 0 0;
}
#header h1 {
height:45px;
font:italic bold 30px georgia;
letter-spacing:0;
margin:0;
padding:10px 0px 0px 0px;
text-transform:none;
text-shadow: 2px 2px 2px color:transparent;
}
#header a {
color:transparent;
text-decoration:none;
text-shadow: 2px 2px 2px color:transparent;
}
#header a:hover {
color:transparent;
}
#header .description {
height:16px;
color:transparent;
font:bold 13px arial;
letter-spacing:0em;
margin:0;
padding:2px 0px 47px 0px;
text-transform:none;
text-shadow: 1px 1px 1px color:transparent;
}
#header img {
margin-left:auto;
margin-right:auto;
}

Ubah warna Font menjadi transparent, silahkan ubah sampai benar-benar judul tidak tampak lagi. Sehingga hasilnya seperti gambar paling atas dipostingan ini.

Cara Praktisnya adalah meletakan kode berikut diatas kode ]]></b:skin>

#header{
display: none !important;
}

Cukup sekian Cara Memasang Gambar Header. Semoga bermanfaat. Selamat berkreatif dan Salam ngeblog.

source : http://www.djangkarubumi.com/2013/06/cara-memasang-gambar-header.html

Cara Mengubah Tampilan Scrollbar Jadi Keren

Pada postingan kali ini, Tugasku4u akan berbagi tutorial bagaimana cara mengubah tampilan scrollbar pada blog. Seperti kita tahu, scrollbar adalah alat penggeser yang digunakan untuk melihat bagian bawah suatu blog atau website. Scrollbar ini akan muncul bila blog/website Anda melebihi kapasitas layar monitor sobat.

Secara standart tampilan scrollbar seperti gambar diatas, namun dengan menambahkan CSS pada template, kita bisa mendapatkan tampilan yang berbeda, namun CSS ini setahu saya hanya bekerja pada browser Google Chrome. Apabila sobat semua menggunakan browser Mozilla Firefox, maka tidak bisa melihat perubahan ketika sobat menambah CSS scrollbar pada template sobat.

Nah, berikut ini adalah panduan singkat bagaimana cara mengubah tampilan scrollbar untuk blog sobat:

1. Login ke akun blog Anda

2. Pilih menu Template => Edit HTML
3. Cari kode ]]></b:skin> (gunakan Ctrl + F untuk mempermudah pencarian)

4. Copy dan pastekan kode di bawah ini tepat di atas kode tadi !!

scrollbar {width: 13px; background: #CCCCCC; border-radius: 10px}

scrollbar-thumb {background-color: #252525; border-radius: 10px}

Keterangan:

Ganti tulisan berwarna biru dengan ukuran scroll yang Anda inginkan.

Ganti tulisan berwarna merah dengan warna background scrollbar kesukaan Anda.

Ganti tulisan berwarna orange dengan warna scroll yang Anda inginkan.
Untuk memilih warna lain, silahkan lihat disini : Daftar kode warna HTML

5. Selesai, lihat blog Anda !!

Nah, bagaimana Sobat mudah kan??? Demikianlah tutorial blog yang bisa Saya bagikan. Jika ada pertanyaan atau apapun itu, Silahkan anda berkomentar di kotak komentar di bawah. semoga bermanfaat.


source: http://www.tugasku4u.com/2013/05/cara-mengubah-tampilan-scrollbar-jadi.html

Cara Mengganti Background Blog

Pada kali ini saya akan membahas tentang Cara Mengganti Background Blog. Jika anda adalah seorang Blogger, pastinya Tampilan Blog merupakan salah satu target utama dalam mengoptimalkannya. Untuk mempercantik dan menambah suasana blog menjadi kondusif dengan Cara Mengganti Background Dengan Gambar. Bagi Blogger yang baru masuk ke dunia ini memang tak semua bisa, karena melihat Kode - Kode yang berserakan dimana - mana itu rasanya pedih dimata dan bikin pusing.
Tapi saya akan memberikan Trik Cara Mengganti Background Blog Bergerak dan Tidak Bergerak. Oke simak langsung Tutorial Blogger ini. Cekidot....

Cara Mengubah Background Blog Dengan Gambar Bergerak :

1. Buka Blogger Home kalian.
2. Kemudian pilih Template » Edit HTML.
3. Lalu Cari Kode body { atau body{
4. Kemudian Copy Kode dibawah ini dan Pastekan dibawah body {  :

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU9kEYfV6NGzCIE2biN_LWoZnjySlgeHfecxA-tupentapayMxAyIeZPgZG3FuirQnQQ0P9NBetP_mPsiGPC4mSbsbxCCGfCuRgN7_1drGXCN6FC7O-oJ7B5uBGVspArMlhg4LwtbxPTA/s1600/Gambar+Background+Blog+ViperGoy.png) fixed repeat;

5. Ganti url berwarna Biru tersebut dengan url Gambar Background yang anda  inginkan.
6. Simpan dan Selesai.

Cara Mengganti Background Blog Dengan Warna :

1. Buka Blogger Home kalian.
2. Kemudian pilih Template » Edit HTML.
3. Lalu Cari Kode body { atau body{
4. Kemudian Copy Kode dibawah ini dan Pastekan dibawah body { :

background: #ececec fixed repeat;

5. Ganti tulisan berwarna hijau dengan Kode Hex Warna lainnya yang anda inginkan.
6. Simpan / Save.


Sekian dari Saya untuk artikel yang berjudul Cara Mengganti Warna Background Dengan Gambar Bergerak Image. Semoga bermanfaat untuk semua Terima Kasih Banyak !