Cara Membuat Recent Post Dengan Thumbnail/Gambar

by Administrator Tags tutorial - Rabu, Februari 15, 2012

<div dir="ltr" style="text-align: left;" trbidi="on"><span class="Apple-style-span" style="color: #333333; font-family: Verdana, sans-serif; font-size: 12px; line-height: 19px;"></span><br />
<div style="text-align: justify;"><span itemprop="rating"><b>Cara Membuat Recent Post Dengan Thumbnail/Gambar</b> - Dengan menambahkan widget recent post atau artikel terbaru yang dilengkapi dengan gambar ini akan melengkapi widget cantik dan keren pada blog Anda. Tampilannya bagus dan keren, dilengkapi dengan gambar dan jumlah komentar serta judul artikel terbaru donk :) Mari kita lihat contoh gambar dari Recent Post dengan Thumbnail / Gambar di bawah ini, Cekidot</span></div><div style="text-align: justify;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKnN9nJcD0iIoXD3FTGZ4BMkGjO7cNoB4Mfvjy38WLXihEktkUePf9hv8OUSw35jVXC-9_p2adefpitRAE7n_TX11NsYFl7OiFejU2Dm64QSFNq8SE5ACcopsfof7gY5rqsaEsiBqYWY4/s320/recent-post-with-thumbnail.gif" imageanchor="1" style="color: #3b5998; margin-left: 1em; margin-right: 1em; text-decoration: none;"><strike><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKnN9nJcD0iIoXD3FTGZ4BMkGjO7cNoB4Mfvjy38WLXihEktkUePf9hv8OUSw35jVXC-9_p2adefpitRAE7n_TX11NsYFl7OiFejU2Dm64QSFNq8SE5ACcopsfof7gY5rqsaEsiBqYWY4/s320/recent-post-with-thumbnail.gif" style="background-color: #f0efef; border-bottom-color: rgb(202, 206, 207); border-bottom-left-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(202, 206, 207); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(202, 206, 207); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(202, 206, 207); border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-top-style: solid; border-top-width: 2px; margin-bottom: 2px; margin-left: 0px; margin-right: 4px; margin-top: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px;" /></strike></a></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Sangat mantap, tampilan edan. Widget ini sangat cocok buat Anda yang mempunyai blog bernuansa elegant, simple, dan web 2. Selain tampilannya yang mantap dan keren, cara memasnagnyanya juga mantap dan gampang alias mudah. Jadi tidak masalah buat blogger newbie.</div><div style="text-align: left;"><br />
</div><div style="text-align: justify;">Widget ini paling banyak dicari, karena menurut penelitian blogger indonesia, mereka menyukai tampilan yang simple dan keren, dan dilengkapi dengan thumbnail, jumlah komentar.<b> </b></div><div style="text-align: left;"><span itemprop="rating"></span></div><div style="text-align: justify;"><span itemprop="rating"><br />
</span></div><div style="text-align: left;"><span itemprop="rating"><b></b></span></div><div style="text-align: justify;"><span itemprop="rating"><b><span itemprop="rating"><b>Tanpa basa basi berbicara panjang lebar kaya kereta exspres, mulai aja yuk cara memasangnya..</b></span><span itemprop="rating"> </span></b></span></div><span itemprop="rating"><b></b></span><br />
<div style="text-align: left;"></div><ul style="margin-bottom: 1em; margin-left: 1em; margin-right: 1em; margin-top: 1em; padding-left: 1em; text-align: left;"><li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkCerbX4JEK4hw8NJf-Q-9CBxOwmsojM6vnXsCU0dYRgjR6biLDei2wzkU6b9SGrknKHtCJXsIxCrYmkaOy82Vxhp0emEGx0H1IVvQlRhlwlyQ-7Gx_6sCuutY6eghnxTba9cNCSccVsQ/s1600/uncheck.gif); padding-bottom: 0.2em; padding-left: 0.5em; padding-right: 0px; padding-top: 0.2em; text-align: justify;"><span itemprop="rating">Selalu ingat untuk Login dulu ke blogger sobat, </span></li>
<li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkCerbX4JEK4hw8NJf-Q-9CBxOwmsojM6vnXsCU0dYRgjR6biLDei2wzkU6b9SGrknKHtCJXsIxCrYmkaOy82Vxhp0emEGx0H1IVvQlRhlwlyQ-7Gx_6sCuutY6eghnxTba9cNCSccVsQ/s1600/uncheck.gif); padding-bottom: 0.2em; padding-left: 0.5em; padding-right: 0px; padding-top: 0.2em; text-align: justify;"><span itemprop="rating">Lalu pada Dasboard blogspot sobat pilih Tata Letak, </span></li>
<li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkCerbX4JEK4hw8NJf-Q-9CBxOwmsojM6vnXsCU0dYRgjR6biLDei2wzkU6b9SGrknKHtCJXsIxCrYmkaOy82Vxhp0emEGx0H1IVvQlRhlwlyQ-7Gx_6sCuutY6eghnxTba9cNCSccVsQ/s1600/uncheck.gif); padding-bottom: 0.2em; padding-left: 0.5em; padding-right: 0px; padding-top: 0.2em; text-align: justify;"><span itemprop="rating">Selanjutnya, pilih Tambah Widget => HTML/Javascript, Lalu, copas dan masukan kode script di bawah ini, </span></li>
</ul><ul style="margin-bottom: 1em; margin-left: 1em; margin-right: 1em; margin-top: 1em; padding-left: 1em; text-align: left;"><span itemprop="rating"><blockquote class="tr_bq" style="background-attachment: initial; background-clip: initial; background-color: #f4f5f7; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj58jM9k6j7yO63A4ctN_6m2GDdH6HIn7rzDlkmcT__1CJQnUxh0_Yvxe-14T98k3KrVPd3q85kOx2Hb_TqzGALjv4MV_ol6qQ1fgxX21HWuK46vubLVDfI71czL7LqHd1n76S850Do-EQ/); background-origin: initial; background-position: 3px 3px; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(204, 204, 204); border-bottom-style: dashed; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: dashed; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: dashed; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: dashed; border-top-width: 1px; font-family: 'Times New Roman', Times, serif; font-size: 1.2em; font-style: italic; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; padding-bottom: 10px; padding-left: 36px; padding-right: 15px; padding-top: 10px;"><div style="text-align: justify;"><script language="JavaScript"></div>imgr = new Array(); imgr[0] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image1.gif"; imgr[1] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image2.gif"; imgr[2] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image3.gif"; imgr[3] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image4.gif"; imgr[4] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image5.gif";  showRandomImg = true; boxwidth = 230; cellspacing = 8; borderColor = "#ffffff"; bgTD = "transparent"; thumbwidth = 40; thumbheight = 40; fntsize = 12; acolor = "#666"; aBold = true; icon = " "; text = "comments"; showPostDate = false; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10; home_page = "<b>http://koisine.blogspot.com/</b>"; </script> <script src="https://sites.google.com/site/anasceria/recentposts_thumbnail.js" type="text/javascript"></script></blockquote></span></ul><ul style="margin-bottom: 1em; margin-left: 1em; margin-right: 1em; margin-top: 1em; padding-left: 1em; text-align: left;"><li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkCerbX4JEK4hw8NJf-Q-9CBxOwmsojM6vnXsCU0dYRgjR6biLDei2wzkU6b9SGrknKHtCJXsIxCrYmkaOy82Vxhp0emEGx0H1IVvQlRhlwlyQ-7Gx_6sCuutY6eghnxTba9cNCSccVsQ/s1600/uncheck.gif); padding-bottom: 0.2em; padding-left: 0.5em; padding-right: 0px; padding-top: 0.2em; text-align: justify;"><span itemprop="rating">Yang terakhir, Simpan aja deh.</span></li>
</ul><blockquote class="tr_bq" style="background-attachment: initial; background-clip: initial; background-color: #f4f5f7; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj58jM9k6j7yO63A4ctN_6m2GDdH6HIn7rzDlkmcT__1CJQnUxh0_Yvxe-14T98k3KrVPd3q85kOx2Hb_TqzGALjv4MV_ol6qQ1fgxX21HWuK46vubLVDfI71czL7LqHd1n76S850Do-EQ/); background-origin: initial; background-position: 3px 3px; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(204, 204, 204); border-bottom-style: dashed; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: dashed; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: dashed; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: dashed; border-top-width: 1px; font-family: 'Times New Roman', Times, serif; font-size: 1.2em; font-style: italic; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; padding-bottom: 10px; padding-left: 36px; padding-right: 15px; padding-top: 10px;"><b>Catatan :</b><span class="apple-converted-space"><span style="font-size: 13.5pt;"> </span></span>untuk tulisan yang<span class="apple-converted-space"><span style="font-size: 13.5pt;"> </span></span><b>bercetak tebal alias bold,</b><span class="apple-converted-space"><span style="font-size: 13.5pt;"> </span></span>mangga untuk diganti dengan alamat blog sobat.</blockquote><div class="MsoNoSpacing">Sekian sudah artikel mengenai<span class="apple-converted-space"><span style="font-size: 13.5pt;"> </span></span><a href="http://koisine.blogspot.com/2012/02/cara-membuat-recent-post-dengan.html" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguv5vUwgyBb6J4SJR9LncT1D1XjazzIg5oEmKaJ7gD70n0Gg4HqBbAux6g91W5wm-JyC3Dgfec8nRxuiNFIObjYNo_wac-xgrLnN92bSX0uk4Nb_8xqJUSncgED4wSwv8Yg-w2j2v_a_M/s400/fs_blank.png); background-origin: initial; background-position: 100% 50%; background-repeat: no-repeat no-repeat; color: #3b5998; cursor: pointer; padding-bottom: 0px; padding-left: 0px; padding-right: 13px; padding-top: 0px; text-decoration: none;" target="_blank"><b>Cara Membuat Recent Post Dengan Thumbnail/Gambar</b></a><span class="apple-converted-space"><span style="font-size: 13.5pt;"> </span></span>pada kesempatan kali ini, semoga artikel ini dapat bermanfaat dan dapat menjadi inspirasi yang baik.</div><div class="MsoNoSpacing"><br />
</div><div class="MsoNoSpacing">Terima kasih.</div><div class="MsoNoSpacing"><br />
</div><div class="MsoNoSpacing"><br />
</div><div class="MsoNoSpacing" style="text-align: right;">Source : <span class="Apple-style-span" style="color: black; font-family: 'Times New Roman'; font-size: small; line-height: normal;">http://koisine.blogspot.com</span></div></div>

Cara Membuat Recent Post Dengan Thumbnail/Gambar - Dengan menambahkan widget recent post atau artikel terbaru yang dilengkapi dengan gamba...

Membuat Widget Popular Post dengan Animasi

by Administrator Tags tutorial - Rabu, Februari 15, 2012

<div dir="ltr" style="text-align: left;" trbidi="on"><a href="http://flanoids.blogspot.com/" target="_blank"><span class="Apple-style-span" style="color: red;">Membuat Widget Popular Post dengan Animasi</span></a><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"> - Assalamu’alaikum sobat blogger… bagaimana kabarnya? Mudah-mudahan sehat selalu yah.. Setelah beberapa waktu yang lalu kita telah melewati bulan ramadhan sebulan penuh kemudian dilanjutkan dengan libur lebaran yang insyaALLAH penuh kesan, semoga setelah semuanya berlalu semangat ramadhan masih melekat di diri kita, amiiin….</span><br />
<span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;">Sobat.. pada postingan saya mengenai tutorial blog kali ini, saya akan sharing ke sobat semuanya mengenai cara </span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><b>Membuat Widget Popular Post dengan Animasi</b></span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"> pada blogspot, postingan ini untuk terus melengkapi postingan-postingan saya  sebelumnya mengenai tutorial blog guna mempercantik tampilan blog. Gambar dibawah ini adalah contoh </span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><b>Widget Popular Post dengan Animasi.</b></span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"> Jika sobat ingin melihat versi demonya silakan sobat klik </span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><blink><b><a href="http://argohealthy.blogspot.com/" style="color: #dd0000; text-decoration: none;" target="_blank">disini </a></b></blink></span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;">(Sok atuh di klik)</span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><br />
</span><br />
<div class="separator" style="clear: both; color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL7vlDkQZ-8BAc3uK7vnoYwiuY1op_t63SKuuqPkZUCx46w1J-YWHR8vvtBkRUMWQ9GNipjG7iJyUr-e0utPHezKuqUmNxjnUPGlK_XjXJHXyHEZK5fHlUICRPDNW7t0rGk91xuvY0zes/s1600/popost.jpg" imageanchor="1" style="color: #dd0000; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL7vlDkQZ-8BAc3uK7vnoYwiuY1op_t63SKuuqPkZUCx46w1J-YWHR8vvtBkRUMWQ9GNipjG7iJyUr-e0utPHezKuqUmNxjnUPGlK_XjXJHXyHEZK5fHlUICRPDNW7t0rGk91xuvY0zes/s320/popost.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px;" width="297" /></a></div><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;">Baiklah sob… tanpa panjang lebar lagi, kita langsung saja ke tutorialnya. </span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;">1. Silakan sobat login ke akun blog sobat.</span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;">2. Kemudian pilih Design > Page Elements</span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;">3. Jika pada blog sobat belum terpasang </span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><b>widget popular post</b></span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;">, silakan sobat tambahkan dengan mengklik “</span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><i>Add Gadget</i></span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;">” dimana saja yang sobat inginkan dan jangan lupa akhiri dengan mengklik tombol save</span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><br />
</span><div class="separator" style="clear: both; color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjvJf2Lv1fpxoD9QLLnoHFzk-ryp_iau0Ft-65X1ATSaoARuVJlvy-oeoARj7zp5k5mTyFx9xebPO-q7MXi9j3AjzD_377xTQ3K_iLwVSNtD392LKrpx04LltTFbSgdG-DHBhv6h0EdFU/s1600/popost1.jpg" imageanchor="1" style="color: #dd0000; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="0" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjvJf2Lv1fpxoD9QLLnoHFzk-ryp_iau0Ft-65X1ATSaoARuVJlvy-oeoARj7zp5k5mTyFx9xebPO-q7MXi9j3AjzD_377xTQ3K_iLwVSNtD392LKrpx04LltTFbSgdG-DHBhv6h0EdFU/s320/popost1.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px;" width="320" /></a></div><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;">4. Selanjutnya silakan sobat klik lagi “</span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><i>Add Gadget</i></span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;">” dan tambahkan gadget  </span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><i>HTML/Javascript</i></span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;">kemudian copas kode dibawah ini dan akhiri dengan mengklik tombol save.</span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><br />
</span><blockquote style="background-attachment: initial; background-clip: initial; background-color: darkgrey; background-image: initial; background-origin: initial; border-left-color: rgb(102, 102, 102); border-left-style: solid; border-left-width: 10px; color: black; font-family: 'trebuchet ms'; font-size: 13px; line-height: 1.6em; margin-bottom: 10px; margin-left: 20px; margin-right: 10px; margin-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px; padding-top: 10px;"><style type="text/css" media="screen"><br />
<br />
#PopularPosts1 {<br />
 overflow:hidden;<br />
margin-top:5px;<br />
padding:0px 0px;<br />
height:400px;<br />
}<br />
#PopularPosts1 ul {<br />
width:220px;<br />
overflow:hidden;<br />
list-style-type: none;<br />
padding: 0px 0px;<br />
margin:0px 0px;<br />
}<br />
#PopularPosts1 li {<br />
 width:208px;<br />
padding: 5px 5px;<br />
margin:0px 0px 5px 0px;<br />
list-style-type:none;<br />
float:none;<br />
height:80px;<br />
overflow: hidden;<br />
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;<br />
border:1px solid #ddd;<br />
}<br />
#PopularPosts1 li .item-title {<br />
    color:#A5A9AB;<br />
    font-size:1em;<br />
    margin-bottom:0.5em;<br />
}<br />
#PopularPosts1 li .item-title a {<br />
 text-decoration:none;<br />
color:#4B545B;<br />
font-size:11px;<br />
height:18px;<br />
overflow:hidden;<br />
margin:0px 0px;<br />
padding:0px 0px 2px 0px;<br />
}<br />
#PopularPosts1 li img {<br />
 float:left;<br />
margin-right:5px;<br />
background:#EFEFEF;<br />
border:0;<br />
}<br />
#PopularPosts1 li .item-snippet {<br />
  overflow:hidden;<br />
font-family:Tahoma,Arial,verdana, sans-serif;<br />
font-size:10px;<br />
color:#262B2F;<br />
padding:0px 0px;<br />
margin:0px 0px;<br />
}<br />
#PopularPosts1 .item-snippet a,<br />
#PopularPosts1 .item-snippet a:visited {<br />
    color:#3E4548;<br />
    text-decoration: none;<br />
}<br />
#PopularPosts1 .spyWrapper {<br />
    height: 100%;<br />
    overflow: hidden;<br />
    position: relative;<br />
}<br />
#PopularPosts1 {<br />
    -webkit-border-radius: 5px;<br />
    -moz-border-radius: 5px;<br />
}<br />
.tags span,<br />
.tags a {<br />
    -webkit-border-radius: 8px;<br />
    -moz-border-radius: 8px;<br />
}<br />
a img {<br />
    border: 0;<br />
}<br />
--><br />
</style><br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script><br />
<script type="text/javascript" charset="utf-8"><br />
$(function () {<br />
    $('.popular-posts ul').simpleSpy();<br />
});<br />
</script><br />
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script></blockquote><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;">Nah Sobat, </span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><b>Widget Popular Post dengan Animasi</b></span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"> sekarang sudah jadi. Silakan sobat simpan terlebih dahulu settingan pada </span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><i>Page Elements</i></span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"> tadi kemudian liat hasilnya.</span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;">Saya rasa cukup sampai disini dulu postingan saya mengenai cara </span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><b>Membuat Widget Popular Post dengan Animasi</b></span><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"> kali ini, semoga bermanfaat.</span><br />
<div><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><br />
</span></div><div><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;"><br />
</span></div><div style="text-align: right;"><span class="Apple-style-span" style="color: #444444; font-family: 'trebuchet ms'; font-size: 13px; line-height: 20px;">Source : </span>http://www.merdiyanse7.com</div></div>

Membuat Widget Popular Post dengan Animasi - Assalamu’alaikum sobat blogger… bagaimana kabarnya? Mudah-mudahan sehat selalu yah.. Setelah b...

Cara Memasang Tombol 'Back to Top' pada Blog

by Administrator Tags tutorial - Rabu, Februari 15, 2012

<div dir="ltr" style="text-align: left;" trbidi="on"><br />
<img src="http://2.bp.blogspot.com/-XgOFX9ZrqQg/Tn7Y-5R7j7I/AAAAAAAAAkA/dbH5pCsRmp4/s1600/Up.png" /><br />
Tombol 'Back to Top' atau 'Kembali ke Atas' merupakan sebuah tombol yang jika diklik akan membawa kita menuju ke bagian atas suatu halaman pada blog. Tombol ini berguna untuk memudahkan pengunjung saat ingin kembali ke bagian atas halaman blog setelah selesai membaca artikel. Terlebih lagi bila isi posting terlalu panjang. Jadi, pengunjung tidak perlu repot-repot mengeklik scroll bar atau memutar scroll pada mouse untuk kembali lagi ke bagian atas halaman.<br />
<br />
Letak tombol ini berada di pojok kanan bawah layar monitor dan melayang. Untuk memasang tombol ini, Anda dapat menyimak langkah-langkahnya di bawah ini.<br />
<br />
1. Masuk ke akun Blogger Anda.<br />
<br />
2. Klik Rancangan > Elemen Laman > Tambah Gadget.<br />
<br />
3. Pilih HTML/JavaScript.<br />
<br />
4. Copy dan paste kode di bawah ini di kolom Konten.<br />
<br />
<br />
<span class="Apple-style-span" style="color: red;"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Kembali ke Atas"><img src="http://i1186.photobucket.com/albums/z370/lanonadex/Up.png" /></a></span><br />
<br />
<br />
5. Anda dapat mengganti Kembali ke Atas dengan judul yang Anda inginkan.<br />
<br />
6.Bila ingin menggunakan gambar Anda sendiri, silakan ganti <span class="Apple-style-span" style="color: red;">http://i1186.photobucket.com/albums/z370/lanonadex/Up.png</span> dengan url gambar Anda.<br />
7. Klik tombol SIMPAN.<br />
<br />
8. Pindahkan elemen ke posisi paling bawah.<br />
<br />
9. Klik tombol SIMPAN.<br />
<br />
10. Selesai.<br />
<br />
<br />
<div style="text-align: right;">Source : http://lanoblog.blogspot.com</div></div>

Tombol 'Back to Top' atau 'Kembali ke Atas' merupakan sebuah tombol yang jika diklik akan membawa kita menuju ke bagian at...

Cara Pasang Widget Facebook Like Fan Page di Blogger

by Administrator Tags tutorial - Rabu, Februari 15, 2012

<div dir="ltr" style="text-align: left;" trbidi="on"><span class="Apple-style-span" style="color: red;">widget like Facebook Fan Page</span> merupakan salah satu optimasi blog terbaik guna meningkatkan reputasi dan traffic blog kita, widget ini diletakan pada blog kita untuk meningkatkan jumlah fan yang menyukai blog kita. sehingga, jika kita mengupdate post di blog kita, kita dapat mengupdatenya juga di Facebook, dan jika ada fan kita di facebook tertarik dengan postingan kita, maka pasti akan mengunjunginya sehingga sumber traffic di blog kita pun bertambah.<br />
tentnya, widget ini khusus bagi anda yang sudah mempunyai Fan Page. Widget ini juga dapat menampilkan foto para pengunjung yang menyukai Facebook Fan Page kita.<div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4a4kdLcC0X4XEaffDMDZ05G8DRKi38uzFxCfCUw1pKe8S2InZHkj0SGeGlFFOnuIwOPIKAfXZgXUvsf4o2iY96gKJFOu9meCC4kQlea_-3_9ms9AbdBAVeOAeyPIA8MlraVy1WbYniUZ7/s320/fan+widget+example.JPG" /></div><div><br />
</div><span class="Apple-style-span" style="color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">gambar diatas merupakan contoh widget like fan page yang sudah terpasang di blog, ditandai dengan lingkaran merah.<br />
<br />
<span class="hidenpost" style="display: inline;">tanpa panjang lebar lagi, berikut cara-cara memasang widget ini ke dalam blog anda :</span><br />
<ol><span class="hidenpost" style="display: inline;">
<li style="margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-indent: 0px;">pastikan anda sudah memiliki <b>Facebook Fan Page</b>.</li>
<li style="margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-indent: 0px;">selanjutnya kunjungi situs <a href="http://developers.facebook.com/docs/reference/plugins/like-box">http://developers.facebook.com/docs/reference/plugins/like-box</a><br />
copy-paste link ini ke browser anda.</li>
<li style="margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-indent: 0px;">disana terdapat kolom bernama <b>Facebook Page URL</b>. copy-paste kan URL Facebook Fan Page Anda ke kolom tersebut.</li>
<li style="margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-indent: 0px;">ada banyak pengaturan seperti, width, color scheme dan sebagainya, itu untuk mengatur lebar, warna dan sebagainya yang nantinya akan di preview di samping pengaturannya itu, pilihlah yang anda sukai. jika sudah klik tombol <b>Get Code</b>.</li>
<li style="margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-indent: 0px;">berikutnya muncul kotak dialog kode plugin like box anda. kopilah kode tersebut yang terdapat pada kotak <b>iframe</b>.</li>
<li style="margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-indent: 0px;">Login ke blogger anda, klik tab design/rancangan.</li>
<li style="margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-indent: 0px;">klik <b>tambah gadget</b> dan pilihlan <b>HTML/javascript</b>.</li>
<li style="margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-indent: 0px;">pastekan kode yang telah anda copy tadi.</li>
<li style="margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-indent: 0px;">klik <b>Save</b></li>
<li style="margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-indent: 0px;">cek dengan klik lihat blog.</li>
</span></ol><span class="hidenpost" style="display: inline;">mudah sekali kan cara memasang <b>Widget Like Facebook Fan Page</b>.<br />
anda dapat meletakkannya dimana saja yang anda mau.<br />
semoga bermanfaat dan sukses selalu ^^</span></span></div>

widget like Facebook Fan Page merupakan salah satu optimasi blog terbaik guna meningkatkan reputasi dan traffic blog kita, widget ini dilet...

Bagaimana Cara Membuat “ Community Link Feed “

by Administrator Tags tutorial - Rabu, Februari 15, 2012

<div dir="ltr" style="text-align: left;" trbidi="on">Walaupun tidak begitu banyak yang mendaftar atau memangfaatkan “ <span class="Apple-style-span" style="color: red;">community link feed</span> “ sebagai ajang promosi untuk blog teman-teman ( lihat di samping kanan bawah blog ini – pada halaman depan/from page), namun setidaknya ada beberapa teman yang bertanya , Bagaimana cara membuat widget “ <span class="Apple-style-span" style="color: red;">Comunity Link Feed</span> “ tersebut ??.<div><br />
</div><div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpa0JvHiGTpCIjv59tlZfplJPQKMqG7kE2i0yLi3r7gfZ0lCYKOxo3nNqUIdN3pX24Od61ZtlWUJEbTdybccAz2nXzeZLsui7PV9gfuMO3-_351zTfzgnqQTc5nfaEe45Z7ogpQG8Bprc/?imgmax=800" /></div><div><br />
</div><br />
<br />
Untuk membuatnya ada tiga langkah yang harus kita miliki/ gunakan. pertama memangfaatkan fasilitas g<span class="Apple-style-span" style="color: red;">oogle doc</span> ( tentunya harus memiliki akun gmail ), kedua, mempunyai akun di <span class="Apple-style-span" style="color: red;">bookmark Deliciou</span>, ketiga , memangfaatkan feed dari f<span class="Apple-style-span" style="color: red;">eedburner.</span><br />
<br />
Untuk detail atau penjelasan langkah-langkah selanjutnya bisa anda baca pada tutorial mas Nataludin “<span class="Apple-style-span" style="color: #333333; font-family: arial, sans-serif; font-size: x-small; line-height: 20px;"><a href="http://www.casal71.co.cc/2009/08/membuat-community-feed-link-pada.html" style="color: red; font-weight: bold; text-decoration: underline;" target="_blank">membuat community feed link untuk blogger</a>  “</span>Widget “ <span class="Apple-style-span" style="color: red;">communtity link feed</span> “ ini sendiri bukan barang asing untuk pengguna wordpress, dan sangat bermangfaat untuk ajang mempromosikan blog/artikel secara gratis.</div>

Walaupun tidak begitu banyak yang mendaftar atau memangfaatkan “ community link feed “ sebagai ajang promosi untuk blog teman-teman ( lihat...

Memberi gambar background pada Cbox

by Administrator Tags tutorial - Selasa, Februari 14, 2012

<div dir="ltr" style="text-align: left;" trbidi="on"><img alt="Memberi gambar background pada Cbox" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRTO8h8JEG3nI6RYPqZIEFTnNrKd081eTXkHNPQlmxRoQQT3_SRBU9g6J8ASVCZeBs18mByFSb5kYQ-OXWOQxctTqR4-PQwt1aN-z2za3Mn1ereZa01O4XsxbsWDT-NzKKoLxP-LTKbVU/s400/background+cbox.jpeg" /><br />
<br />
Sebelum Memberi gambar background pada Cbox,silahkan kamu membuat buku tamunya dulu<a href="http://cbox.ws/" target="_blank"> <span class="Apple-style-span" style="color: red;">klik disini</span></a><span class="Apple-style-span" style="color: red;">,</span> setelah jadi kamu pilih style presets<br />
<div><br />
</div><div><br />
</div><div><br />
</div>Lalu pilih style yang transparan, atur warna text dan link sesuai yang kamu inginkan lalu save,seperti gambar dibawah ini:<br />
<div><br />
</div><div><img alt="Memberi gambar background pada Cbox" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN82OVglkW2fsxkUZ-V3Pn4Hl4WyHGu_-n2wLcD4659q078kvLVP2ro-GxJMcatzFQip4Ff_A4ecWmuUJyokwHc7fXwXKN6SekxL-zVkyqXkG2SwFiolqGulT8aq5ftRKky8rW9Alo8k4/s400/transparent+cbox.jpeg" /></div><div><br />
</div>Setelah selesei edit kode yang kamu dapat dari cbox tadi! kode cbox biasanya seperti dibawah ini:<br />
<div><br />
</div><div><div style="background-color: white; border: 1px solid #ccc; height: 110px; overflow: auto; padding: 5px; width: 500px;"><span class="Apple-style-span" style="color: lime; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; font-size: 13px; line-height: 20px;"><br />
<span style="color: red;"><div id="cboxdiv" style="text-align: center; line-height: 0"></span><br />
<div><iframe frameborder="0" width="220" height="305" src="http://www5.cbox.ws/box/?boxid=616173&amp;boxtag=fp1wb6&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-616173" style="border:#000000 1px solid;" id="cboxmain5-616173"></iframe></div><br />
<div><iframe frameborder="0" width="220" height="75" src="http://www5.cbox.ws/box/?boxid=616173&amp;boxtag=fp1wb6&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-616173" style="border:#000000 1px solid;border-top:0px" id="cboxform5-616173"></iframe></div><br />
</div><br />
</span></div></div><br />
<div style="background-color: white; border: 1px solid #ccc; height: 110px; overflow: auto; padding: 5px; width: 500px;"><span class="Apple-style-span" style="color: lime; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; font-size: 13px; line-height: 20px;"><div id="cboxdiv" style="text-align: center; line-height: 0;background-position:center;background:url(<span style="color: #33ff33;">url gambar kamu</span>);width:<span style="color: red;">220</span>px;height:<span style="color: red;">305</span>px;background-repeat:no-repeat;"></span></div><br />
Pada kode yang berwarna <span class="Apple-style-span" style="color: lime;">hijau</span> silahkan ganti dengan <span class="Apple-style-span" style="color: red;">url gambar</span> yang kamu inginkan,dan ukuran yang berwarna <span class="Apple-style-span" style="color: red;">merah</span> silahkan sesuaikan dengan ukuran cbok kamu,nih ada beberapa gambar background yang bisa kamu pakai juga.<br />
<br />
<div style="background-color: white; border: 1px solid #ccc; height: 110px; overflow: auto; padding: 5px; width: 500px;"><span class="Apple-style-span" style="color: lime; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; font-size: 13px; line-height: 20px;">http://www.bestiphonewallpapers.com/bulkupload/081109/Cartoon/PinkHelloKitty.jpg<br />
http://www.dreamstime.com/blue-background-thumb2315107.jpg<br />
http://www.dreamstime.com/floral-background-thumb4863792.jpg</span></div><br />
setelah semua selesei silahkan pasang di blog sobat,kamu bisa membuat buku tamumu secara tersembunyi juga boleh..selamat mencoba!<br />
<br />
<br />
<div style="text-align: right;">Source : http://infonetmu.blogspot.com</div></div>

Sebelum Memberi gambar background pada Cbox,silahkan kamu membuat buku tamunya dulu klik disini , setelah jadi kamu pilih style presets ...

Cara Membuat Related Post Di Blogger

by Administrator Tags tutorial - Selasa, Februari 14, 2012

<div dir="ltr" style="text-align: left;" trbidi="on"><img height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirs_IjhtCV_MyBlsDxBhw_qsx3vYqkmn9Rv9exhvhgMHwhH7UK5sXSJ8H3V1pgx4-h2JcDnTebiTwcSstuWE3RbVR41aNuIP_DjPVA1xTrBn8PsWA4xF54oeFRrvo2y78Sf26-K_YGBbI/s200/related_posts_widget.png" width="200" /><br />
1. Login ke blog kamu,klik rancangan,edit html jangan lupa centang expand template, lalu kamu cari kode ]]></b:skin> dan letakkan kode berikut tepat diatas kode ]]></b:skin><br />
<br />
<div style="background-color: white; border: 1px solid #ccc; height: 80px; overflow: auto; padding: 5px; width: 500px;"><br />
/* Related Post */<br />
.related_posts{margin-top:5px;padding:0 10px;border:1px solid #B7E8FF;background:#E0F5FF;}<br />
.related_posts h4{color:#111;font:normal 19px/19px Arial, sans-serif;letter-spacing:-0.5px;padding:7px 0;border-bottom:solid 1px #fafafa;}<br />
.related_posts a{color:#000;}<br />
.related_posts ul{padding:0;}<br />
.related_posts ul li{list-style:none;padding:4px 5px 4px 17px;border-bottom:1px solid #f9f9f9;line-height:18px;background:url(http://4.bp.blogspot.com/-q-HyNrgjvAE/TzQx3btIV4I/AAAAAAAABbU/PXVhFzfCOwg/s400/star.gif) no-repeat 0 7px;}</div><br />
<br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; font-size: small;"><span class="Apple-style-span" style="font-size: 13px;">2. Langkah berikutnya kamu cari kode <span class="Apple-style-span" style="color: red;"><div class=’post-footer-line post-footer-line-1′></span> kalau tidak ada, alternatifnya cari kode ini <span class="Apple-style-span" style="color: red;"><p class=’post-footer-line post-footer-line-1′></span> dan letakkan kode berikut tepat diatas kode tersebut.</span></span><br />
<br />
<div style="background-color: white; border: 1px solid #ccc; height: 80px; overflow: auto; padding: 5px; width: 500px;"><br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<div class='related_posts'><br />
<div class='widget-content'><br />
<h4>Related Post:</h4><br />
<div id='data2007'/><br/><br/><br />
<script type='text/javascript'><br />
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;<br />
var maxNumberOfPostsPerLabel = 10;<br />
var maxNumberOfLabels = 2;<br />
maxNumberOfPostsPerLabel = 10;<br />
maxNumberOfLabels = 2;<br />
function listEntries10(json) {<br />
var ul = document.createElement(&#39;ul&#39;);<br />
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?<br />
json.feed.entry.length : maxNumberOfPostsPerLabel;<br />
for (var i = 0; i &lt; maxPosts; i++) {<br />
var entry = json.feed.entry[i];<br />
var alturl;<br />
for (var k = 0; k &lt; entry.link.length; k++) {<br />
if (entry.link[k].rel == &#39;alternate&#39;) {<br />
alturl = entry.link[k].href;<br />
break;<br />
}<br />
}<br />
var li = document.createElement(&#39;li&#39;);<br />
var a = document.createElement(&#39;a&#39;);<br />
a.href = alturl;<br />
if(a.href!=location.href) {<br />
var txt = document.createTextNode(entry.title.$t);<br />
a.appendChild(txt);<br />
li.appendChild(a);<br />
ul.appendChild(li);<br />
}<br />
}<br />
for (var l = 0; l &lt; json.feed.link.length; l++) {<br />
if (json.feed.link[l].rel == &#39;alternate&#39;) {<br />
var raw = json.feed.link[l].href;<br />
var label = raw.substr(homeUrl3.length+13);<br />
var k;<br />
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);<br />
var txt = document.createTextNode(label);<br />
var h = document.createElement(&#39;b&#39;);<br />
h.appendChild(txt);<br />
var div1 = document.createElement(&#39;div&#39;);<br />
div1.appendChild(h);<br />
div1.appendChild(ul);<br />
document.getElementById(&#39;data2007&#39;).appendChild(div1);<br />
}<br />
}<br />
}<br />
function search10(query, label) {<br />
var script = document.createElement(&#39;script&#39;);<br />
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;<br />
+ label +<br />
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);<br />
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);<br />
document.documentElement.firstChild.appendChild(script);<br />
}<br />
var labelArray = new Array();<br />
var numLabel = 0;<br />
<b:loop values='data:posts' var='post'><br />
<b:loop values='data:post.labels' var='label'><br />
textLabel = &quot;<data:label.name/>&quot;;<br />
var test = 0;<br />
for (var i = 0; i &lt; labelArray.length; i++)<br />
if (labelArray[i] == textLabel) test = 1;<br />
if (test == 0) {<br />
labelArray.push(textLabel);<br />
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?<br />
labelArray.length : maxNumberOfLabels;<br />
if (numLabel &lt; maxLabels) {<br />
search10(homeUrl3, textLabel);<br />
numLabel++;<br />
}<br />
}<br />
</b:loop><br />
</b:loop><br />
</script><br />
</div><br />
</div><br />
</b:if></div><br />
3. Simpan template kamu. selamat mencoba  :D<br />
<br />
</div>

1. Login ke blog kamu,klik rancangan,edit html jangan lupa centang expand template, lalu kamu cari kode ]]></b:skin> dan letakkan ...

Yahoo News Slider

by Administrator Tags tutorial - Selasa, Februari 14, 2012

<div dir="ltr" style="text-align: left;" trbidi="on"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIAkEjp-c2hBEa50g43LhEnFlrwUBOU29O6d_x8_Czh47HBrJrSxBxLnSbWsJsyvsvqMmcsO9UpnvAnochWzupXU-6xXQkii2395Bq-Qn4YrFpjQBImaKV6jchrBXDMb5QgZjsnmdWuU4/s1600/Yahoo+News+Slider.jpg" /><br />
<br />
<br />
Sebenarnya widget ini sudah agak lama terparkir, hanya saja baru saat ini sempat dibuat tutorialnya. Yahoo News Slider, mungkin ini penyebutan yang agak tepat, mengingat widget ini memang diadopsi dari content slider news yang terdapat di situs yahoo. Untuk melihat demo dari Yahoo News Slider ini, silahkan buka link berikut : <a href="http://yahoo-news-slider.blogspot.com/" target="_blank"><span class="Apple-style-span" style="color: red;">LIVE DEMO</span></a>.<br />
<br />
Berikut tutorial singkat cara memasang <a href="http://yahoo.com/" target="_blank"><span class="Apple-style-span" style="color: red;">Yahoo</span></a> News Slider di Blog Anda :<br />
<br />
<b><span class="Apple-style-span" style="font-family: arial, sans-serif;"><span class="Apple-style-span" style="font-size: x-small; line-height: 20px;">Pertama, <span class="Apple-style-span" style="font-weight: normal;">buka tab edit HTML blog Anda (tidak perlu dicentang), lalu masukkan kode CSS di bawah ini tepat sebelum kode ]]></b:skin> :</span></span></span></b> <br />
<span class="Apple-style-span" style="color: #333333; font-family: arial, sans-serif;"><span class="Apple-style-span" style="font-size: x-small; line-height: 20px;"><b><br />
</b></span></span><br />
<div style="background-color: white; border: 1px solid #ccc; height: 80px; overflow: auto; padding: 5px; width: 500px;"><br />
/* Yahoo Slider Wrapper ----------------------------------------------- */ div.jqans-wrapper {-x-system-font:none;font-family:arial,helvetica,clean,sans-serif;font-size:12px;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:normal;line-height:1.231;color:#666666;} div.jqans-wrapper img {border: 0;} div.jqans-wrapper ul,div.jqans-wrapper li,div.jqans-wrapper h1,div.jqans-wrapper p {list-style:none;margin: 0;padding: 0;} div.jqans-wrapper {list-style:none;position: relative;overflow: hidden;} div.jqans-wrapper ul {position: relative;left: 0;width: auto;list-style-type: none;overflow: hidden;z-index: 1;} div.jqans-wrapper li {list-style:none;float: left;display: inline;} /* Yahoo Slider Content ----------------------------------------------- */ div.jqans-wrapper.default .jqans-stories ul, div.jqans-wrapper.default .jqans-stories li {height: 110px;} div.jqans-wrapper.default .jqans-stories-selector ul, div.jqans-wrapper.default .jqans-stories-selector li {height: 10px;} div.jqans-wrapper.default, div.jqans-wrapper.default .jqans-container {width: 428px;background:#fff;} div.jqans-wrapper.default li {width: 107px;} div.jqans-wrapper.default a {text-decoration: none;font-weight: normal;color: #363636;outline: none;} div.jqans-wrapper.default strong {color: #000;} /* wrapper */ div.jqans-wrapper.default {border: 1px solid #ccc;border-width: 1px 1px 0 1px;margin: 0 0 0.5em;} /* container */ div.jqans-wrapper.default .jqans-container {min-height: 270px;text-align: center;padding-top: 4px;} div.jqans-wrapper.default .jqans-container a {font-weight: bold;color:#000;} div.jqans-wrapper.default .jqans-container img {width:418px;height:200px;} /* headline */ div.jqans-wrapper.default .jqans-headline {text-align: left;margin-left:10px;margin-bottom: 4px;font:normal 13px Arial;} div.jqans-wrapper.default .jqans-content h1 {text-align:left;color:#16387c;margin: 1px 9px;font:bold 18px Arial;letter-spacing:-.0001em;line-height:1.1em; height:22px;overflow:hidden;} div.jqans-wrapper.default .jqans-content p {text-align: left;color: #333;margin: 1px 9px;font:normal 12px Arial;line-height:1.3em;height:30px;overflow:hidden;} /* stories */ div.jqans-wrapper.default .jqans-stories {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBjSOveNGv0RNatJ9l34vHFN00QuEh0eVpqYIUyStTSOsfS7rcXBQ7qOJE75y07jm3jSXQaSDo4tsXOUj0EAxyHRlAnscToPqGuMJKJyiMKat5ePghfLqOcnAO7GqAgbpB2pGblfIJ22I/s1600/bg_stories.gif);background-repeat: repeat-x;background-position: top left;} div.jqans-wrapper.default .jqans-stories li {overflow: hidden;text-align: center;font-size: 11px;color: #fff;line-height:1.2em;} div.jqans-wrapper.default .jqans-stories li.selected {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUrLZlj0ChrwnbI_DmUznr_Js_z4alqdfgmxgc4T8PEWKJy0Rp4-L_m12i0QAll7jJBJXBc3KwAA-SoYfsXFo425gzdIzpllj3_Oeh8bEfZuq6mSGekFaLM5GiIFAPJod5jQYvV54DyhI/s1600/bg_selected.gif);background-repeat: no-repeat;background-position: top center;} div.jqans-wrapper.default .jqans-stories li.selected a {color:#fff;} div.jqans-wrapper.default .jqans-stories li img {margin-top: 22px;width:92px; height:45px;border-right:1px solid #fff;border-bottom:1px solid #fff;border-left:1px solid #555;border-top:1px solid #555;} div.jqans-wrapper.default .jqans-stories li p {display: none;} div.jqans-wrapper.default .jqans-stories li h3 {margin:0;padding:1px 10px;color:#000; font-size:11px;font-weight:normal;font-family:Arial;height:28px;overflow:hidden;line-height:1.2em;} div.jqans-wrapper.default .jqans-stories-selector li.selected div {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUrLZlj0ChrwnbI_DmUznr_Js_z4alqdfgmxgc4T8PEWKJy0Rp4-L_m12i0QAll7jJBJXBc3KwAA-SoYfsXFo425gzdIzpllj3_Oeh8bEfZuq6mSGekFaLM5GiIFAPJod5jQYvV54DyhI/s1600/bg_selected.gif);background-repeat: no-repeat;background-position: top center;} /* pagination */ div.jqans-wrapper.default .jqans-pagination {border: 1px solid #ccc;border-width: 1px 0;margin: 0;padding: 4px 4px 4px 4px;background: #f2f2f2;text-align: left;clear: both;width: 420px;overflow: hidden;} div.jqans-wrapper.default .jqans-pagination-count {float: left;font:normal 11px Arial;color:#666;} div.jqans-wrapper.default .jqans-pagination-controls {float: right;} div.jqans-wrapper.default .jqans-pagination-controls a {display: inline-block;width: 22px;height: 13px;text-indent: -9999px;background: no-repeat bottom center;*float:left;} div.jqans-wrapper.default .jqans-pagination-controls-back a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAWGhALy9fvbc2MNYqP6llZz9sxRiAl0ec9sWysabUq0wdjYkg61e79WsJxLujUhpqqI20-Un-RA760tFbUqBLluKynbNpJ5RdhoF16XNfftKhtqLPTcgvcEhE1FPba9lnZuKAbfjuFrk/s1600/previous.gif);} div.jqans-wrapper.default .jqans-pagination-controls-next a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicQn7V0gy_-Xfonwh_EjirJWoVNb8g-pOd_bcrLRoBmtbhWhqpxTtEMGUcJdxgkq6LT9z51DaTqp7Q8ms5eqiCpg0NHydFnlCsy3xhRrXoS13testR7xzqy4KqVr-pLLe5EgNjzg43S-c/s1600/next.gif);}<br />
<div><br />
</div></div><br />
<br />
<b>Kedua</b>, Anda harus memasukkan javascript code berikut setelah kode ]]></b:skin> :<br />
<br />
<div style="background-color: white; border: 1px solid #ccc; height: 80px; overflow: auto; padding: 5px; width: 500px;"><br />
<script src='http://themestoday.googlecode.com/files/jquery.min.js'/> <script type='text/javascript'> //<![CDATA[ (function(a){a.fn.accessNews=function(b){var c={title:"TODAY - ",subtitle:"Choose the Trending Topics Today", slideBy:4,speed:"normal",slideShowInterval:3000,slideShowDelay:3000,theme:"default",continuousPaging:true,contentTitle:"h3",contentSubTitle:"abbr",contentDescription:"p",onLoad:null,onComplete:null};return this.each(function(){b=jQuery.extend(c,b);var k=jQuery(this);var h=k.children();var i;var j;var f;var e={_wrapper:'<div class="jqans-wrapper '+b.theme+'"></div>',_container:'<div class="jqans-container"></div>',_headline:jQuery("<div class='jqans-headline'></div>").html(["<p><strong>",b.title,"</strong> ",b.subtitle,"</p>"].join("")),_content:jQuery("<div class='jqans-content'></div>"),_stories:'<div class="jqans-stories"></div>',_first:jQuery(h[0]),init:function(){if(b.onLoad){b.onLoad.call(a(this))}k.wrap(this._wrapper);k.before(this._container);var l=(h.length*this._first.outerWidth(true));k.css("width",l);if(b.title.length){this.append(this._headline)}this.append(this._content);this.selector(l);this.set(0);d.init();g.init();k.wrap(this._stories);if(b.onComplete){b.onComplete.call(a(this))}},selector:function(n){var m="";for(var l=1;l<=h.length;l++){m+="<li><div/></li>"}var p=jQuery('<div class="jqans-stories-selector"></div>');p.append("<ul>"+m+"</ul>");j=jQuery(p.find("ul"));f=j.children();p.css("width",n);k.before(p)},append:function(l){this.get().append(l)},get:function(){return k.parents("div.jqans-wrapper").find("div.jqans-container")},set:function(n){var o=this.get();var r=jQuery(h[n]);var m=jQuery(f[n]);var q=jQuery("div.jqans-content",o);var p=jQuery("<img></img>");var l=jQuery("<div></div>");var s=jQuery(b.contentTitle+" a",r).attr("title")||jQuery(b.contentTitle,r).text();p.attr("src",jQuery("img",r).attr("longdesc")||jQuery("img",r).attr("src"));l.html("<h1>"+s+"</h1><p>"+jQuery(b.contentDescription,r).html()+"</p>");q.empty();q.append(p);q.append(l);h.removeClass("selected");r.addClass("selected");f.removeClass("selected");m.addClass("selected")}};var d={loaded:false,_animating:false,_totalPages:0,_currentPage:1,_storyWidth:0,_slideByWidth:0,init:function(){if(h.length>b.slideBy){this._totalPages=Math.ceil(h.length/b.slideBy);this._storyWidth=jQuery(h[0]).outerWidth(true);this._slideByWidth=this._storyWidth*b.slideBy;this.draw();this.loaded=true}},draw:function(){var n=jQuery('<div class="jqans-pagination"></div>').html(['<div class="jqans-pagination-count"><span class="jqans-pagination-count-start">1</span> - <span class="jqans-pagination-count-end">',b.slideBy,'</span> of <span class="jqans-pagination-count-total">',h.length,'</span> Featured News</div><div class="jqans-pagination-controls"><span class="jqans-pagination-controls-back"><a href="#" title="Back">&lt;&lt; Back</a></span><span class="jqans-pagination-controls-next"><a href="#" title="Next">Next &gt;&gt;</a></span></div>'].join(""));k.after(n);var m=jQuery(".jqans-pagination-controls-next > a",n);var l=jQuery(".jqans-pagination-controls-back > a",n);m.click(function(){var o=d._currentPage+1;d.to(o);return false});l.click(function(){var o=d._currentPage-1;d.to(o);return false})},to:function(p){if(this._animating){return}this._animating=true;var q=k.parent("div").next(".jqans-pagination");var l=jQuery(".jqans-pagination-count-start",q);var s=jQuery(".jqans-pagination-count-end",q);if(p>this._totalPages){p=b.continuousPaging?1:this._totalPages}if(p<1){p=b.continuousPaging?this._totalPages:1}var r=(p*b.slideBy)-b.slideBy;var n=(p*b.slideBy);if(n>h.length){n=h.length}var o=parseInt(k.css("left"));var m=(p*this._slideByWidth)-this._slideByWidth;l.html(r+1);s.html(n);o=(m*-1);k.animate({left:o},b.speed);j.animate({left:o},b.speed);e.set(r);this._currentPage=p;this._animating=false}};var g={init:function(){this.attach();this.off();i=setTimeout(function(){g.on()},b.slideShowDelay)},on:function(){this.off();i=setInterval(function(){g.slide()},b.slideShowInterval)},off:function(){clearInterval(i)},slide:function(){var o=jQuery("li.selected",k);var m=o.next("li");var n=0;if(!m.length){m=jQuery(h[0]);n=1}var p=h.index(m);if(d.loaded){var l=(p)%b.slideBy;if(l===0){n=(Math.ceil(p/b.slideBy))+1}if(n>0){d.to(n)}}e.set(p)},attach:function(){var l=jQuery(k).parent("div.jqans-wrapper");l.hover(function(){g.off()},function(){g.on()})}};e.init();h.hover(function(){e.set(h.index(this))},function(){})})}})(jQuery); //]]> </script> <script type='text/javascript'> jQuery(document).ready(function() {jQuery(&#39;#newsslider&#39;).accessNews({}); jQuery(&#39;#newsslider2&#39;).accessNews({title : &quot;BREAKING NEWS:&quot;, subtitle:&quot;stories from the internet&quot;, speed : &quot;slow&quot;, slideBy : 4, slideShowInterval: 100000, slideShowDelay: 100000});}); </script><br />
<div><br />
</div></div><br />
<br />
<b>Langkah terakhir</b>, silahkan save lalu tambahkan kode javascript berikut di elemen halaman yang Anda diinginkan :<br />
<br />
<div style="background-color: white; border: 1px solid #ccc; height: 80px; overflow: auto; padding: 5px; width: 500px;"><br />
<ul id="newsslider"> <li> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyK7cMhEyVjLG3gpao-WBKyr1bfcH7rm6xlJAUQ5FqHudTcubOq7KpYRJcF8rVcX9f6O35U352Efgq_six9RyFnTxNu4TnEcfxrF9u2ICLxxdsfCLuPjjCBb-GCf2EzdQ62lw9QD9R7qo/s1600/Facebook+Mark+Zuckerberg.jpg"/></a> <h3><a href="#">Facebook Has Lost 6 million Users in U.S</a></h3> <p>Independent monitoring sites showed that the Inside Facebook has lost 6 million users in the U.S. and 100,000 users... <a href="#"> more &raquo; </a></p> </li> <li> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoLjpio_hHbYV-1lnnkWD8GvO1oQagHVX04AKBb6c95M47ElQVfrhzMtv0n_6m8KMtOO71Pngv-QGx97kyI2BOtzOEHVL2xyGjwFfWZ9dQFJmt43Jax2UPzCTLzUFzJ2Y_UacAnVWasEE/s1600/Rossi+Crash.jpg"/></a> <h3><a href="#">Rossi wasn't trying to pass Stoner</a></h3> <p>Valentino Rossi says he was not even trying to overtake Casey Stoner when he took the Honda rider out of second in the Spanish..... <a href="#">more &raquo;</a></p> </li> <li> <a class="title" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd6Nojhxj0MKrDmCBPzVetPnQtMSx_bEAUMFgD_SxK-XedIBdJR4rKT9_l0jX4NXwCW2tnB5FoOODN1J_p6n1JLb-faIOh_u3pgcy46flcgcpEulKQFUu0kFzCVH0Bj0zF5SDAAyv3pUE/s1600/Muammar+Gaddafi.jpg" /></a> <h3><a href="#">Gadhafi Attacks Continue Despite Coalition Bombing</a></h3> <p>Forces loyal to Moammar Gadhafi resumed attacks on Libya’s third-largest city early Thursday despite aerial bombardments.... <a href="#">Gadhafi Attacks &raquo;</a></p> </li> <li> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv-mZTjThARt36nI0HhB6D-8IF2wms1qt5X6-9WjkbGZYQAyy3G1EBbzwJG1PEkfXjJHfs-L_AAe47EZX4gx8Ke9oI9egFeB1Ga1DzYO5hp8rBDLk-ppWgEDeqs9w_3Aofp7Yg9GyWXxY/s1600/Japan+Tsunami.jpg"/></a> <h3><a href="#">Developments in Japan's Earthquake, Tsunami and Nuclear Crisis</a></h3> <p>Highly radioactive water has been found seeping into the Pacific Ocean from a newly discovered crack in a maintenance pit on the edge.... <a href="#">Japan Crisis &raquo; </a></p> </li> <li> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyK7cMhEyVjLG3gpao-WBKyr1bfcH7rm6xlJAUQ5FqHudTcubOq7KpYRJcF8rVcX9f6O35U352Efgq_six9RyFnTxNu4TnEcfxrF9u2ICLxxdsfCLuPjjCBb-GCf2EzdQ62lw9QD9R7qo/s1600/Facebook+Mark+Zuckerberg.jpg"/></a> <h3><a href="#">Facebook and Skype Discussing Potential Partnership</a></h3> <p>Facebook Inc., the world’s biggest social-networking company, is holding talks with Skype Technologies SA about offering... <a href="#"> Fecebook Discussion &raquo; </a></p> </li> <li> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS-CxWVLKSP-htkapRcCQIU7FV34E_paRmEsN3Pxf20HoYgwoAQIDTQ0z12Nfr9ielH14JvZsb-CQYMc1Chg6Fye-wn9iDZOdSZ3iBk-V-1KN5xdETuq4x3BXPrJoGVRXO8szUf-CHoAU/s1600/Carlos+Slim+Picture.jpg"/></a> <h3><a href="#">10 Top List of Richest People in the World</a></h3> <p>Forbes, a leading source for reliable business news and financial information, make a new released list of richest people in the world.... <a href="#">Richest People &raquo;</a></p> </li> <li> <a class="title" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd6Nojhxj0MKrDmCBPzVetPnQtMSx_bEAUMFgD_SxK-XedIBdJR4rKT9_l0jX4NXwCW2tnB5FoOODN1J_p6n1JLb-faIOh_u3pgcy46flcgcpEulKQFUu0kFzCVH0Bj0zF5SDAAyv3pUE/s1600/Muammar+Gaddafi.jpg" /></a> <h3><a href="#">Gadhafi Attacks Continue Despite Coalition Bombing</a></h3> <p>Forces loyal to Moammar Gadhafi resumed attacks on Libya’s third-largest city early Thursday despite aerial bombardments.... <a href="#">Gadhafi Attacks &raquo;</a></p> </li> <li> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv-mZTjThARt36nI0HhB6D-8IF2wms1qt5X6-9WjkbGZYQAyy3G1EBbzwJG1PEkfXjJHfs-L_AAe47EZX4gx8Ke9oI9egFeB1Ga1DzYO5hp8rBDLk-ppWgEDeqs9w_3Aofp7Yg9GyWXxY/s1600/Japan+Tsunami.jpg"/></a> <h3><a href="#">Developments in Japan's Earthquake, Tsunami and Nuclear Crisis</a></h3> <p>Highly radioactive water has been found seeping into the Pacific Ocean from a newly discovered crack in a maintenance pit on the edge.... <a href="#">Japan Crisis &raquo; </a></p> </li> <li> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyK7cMhEyVjLG3gpao-WBKyr1bfcH7rm6xlJAUQ5FqHudTcubOq7KpYRJcF8rVcX9f6O35U352Efgq_six9RyFnTxNu4TnEcfxrF9u2ICLxxdsfCLuPjjCBb-GCf2EzdQ62lw9QD9R7qo/s1600/Facebook+Mark+Zuckerberg.jpg"/></a> <h3><a href="#">Facebook and Skype Discussing Potential Partnership</a></h3> <p>Facebook Inc., the world’s biggest social-networking company, is holding talks with Skype Technologies SA about offering... <a href="#"> Fecebook Discussion &raquo; </a></p> </li> <li> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS-CxWVLKSP-htkapRcCQIU7FV34E_paRmEsN3Pxf20HoYgwoAQIDTQ0z12Nfr9ielH14JvZsb-CQYMc1Chg6Fye-wn9iDZOdSZ3iBk-V-1KN5xdETuq4x3BXPrJoGVRXO8szUf-CHoAU/s1600/Carlos+Slim+Picture.jpg"/></a> <h3><a href="#">10 Top List of Richest People in the World</a></h3> <p>Forbes, a leading source for reliable business news and financial information, make a new released list of richest people in the world.... <a href="#">Richest People &raquo;</a></p> </li> <li> <a class="title" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd6Nojhxj0MKrDmCBPzVetPnQtMSx_bEAUMFgD_SxK-XedIBdJR4rKT9_l0jX4NXwCW2tnB5FoOODN1J_p6n1JLb-faIOh_u3pgcy46flcgcpEulKQFUu0kFzCVH0Bj0zF5SDAAyv3pUE/s1600/Muammar+Gaddafi.jpg" /></a> <h3><a href="#">Gadhafi Attacks Continue Despite Coalition Bombing</a></h3> <p>Forces loyal to Moammar Gadhafi resumed attacks on Libya’s third-largest city early Thursday despite aerial bombardments.... <a href="#">Gadhafi Attacks &raquo;</a></p> </li> <li> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv-mZTjThARt36nI0HhB6D-8IF2wms1qt5X6-9WjkbGZYQAyy3G1EBbzwJG1PEkfXjJHfs-L_AAe47EZX4gx8Ke9oI9egFeB1Ga1DzYO5hp8rBDLk-ppWgEDeqs9w_3Aofp7Yg9GyWXxY/s1600/Japan+Tsunami.jpg"/></a> <h3><a href="#">Developments in Japan's Earthquake, Tsunami and Nuclear Crisis</a></h3> <p>Highly radioactive water has been found seeping into the Pacific Ocean from a newly discovered crack in a maintenance pit on the edge.... <a href="#">Japan Crisis &raquo; </a></p> </li> </ul><br />
<div><br />
</div></div><br />
Selesai, silahkan lihat hasilnya.</div>

Sebenarnya widget ini sudah agak lama terparkir, hanya saja baru saat ini sempat dibuat tutorialnya. Yahoo News Slider, mungkin ini penye...

Cara Memasang Google Plus Widget

by Administrator Tags tutorial - Selasa, Februari 14, 2012

<div dir="ltr" style="text-align: left;" trbidi="on"><br />
Google Plus merupakan jejaring sosial punya Mbah <a href="http://google.com/" target="_blank"><span class="Apple-style-span" style="color: red;">Google</span></a>. Memang harus diakui, Google Plus ini tidak sefamiliar Facebook, twitter, dan lainnya (paling tidak untuk saat ini). Nah, untuk memudahkan Anda membangun jaringan atau circle di Google Plus, ada baiknya Anda meletakkan widget Google Plus di blog Anda. Berikut langkah-langkah yang harus Anda lakukan :<br />
<br />
Pertama, Anda terlebih dahulu harus masuk kehalaman Google Plus, lalu ambil ID Google Plus Anda. Berikut contoh ID Google Plus : https://plus.google.com/u/0/<span class="Apple-style-span" style="color: red;">107027008490478634206</span>/posts. ID Google Plus adalah bagian yang berwarna merah.<br />
<br />
Kedua, masuk terlebih dahulu ke alamat url ini : <a href="http://widgetsplus.com/" target="_blank"><span class="Apple-style-span" style="color: red;">Widget Plus</span></a>. Setelah itu, klik Get Widget seperti gambar dibawah ini :<br />
<br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPPL5cZ6LejEydXOxkIyrrTddQgJUl2UN4FL2UzRNWQ067N8w5jw-ROkuZ4Zn1DHoFgQaJd7pwyPRl6EujWiNtxkQo1qIkT3lLusLt2HA2Zct4dSrWq8lVAxETRffcE4kt4gdS77BSb5g/s1600/Google+Plus+1.png" /><br />
Ketiga, masukkan ID Google Plus Anda di bagian yang diminta, lalu tekan Get Code.<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgixn37e8Cze9RopsIMpUlORQMyRdLlXZg805QMhby4lJOS2bOzypgRTVo863oNRR-GhtWuf9sNf0p-mMYlldg8vmCLwOnNYH3_zWQ0bkUerfsAKjFTer1wjxNQOe8ocPDCWad6gHb9Epw/s1600/Google+Plus+2.png" /><br />
Selesai, silahkan ambil script code, lalu simpan di sidebar atau kolom lain diblog Anda. Selamat mencoba dan semoga sukses mambangun jaringan dengan Google Plus Anda.<br />
<br />
<br />
<br />
<div style="text-align: right;">source :  http://catalog-tutorial.blogspot.com</div></div>

Google Plus merupakan jejaring sosial punya Mbah Google . Memang harus diakui, Google Plus ini tidak sefamiliar Facebook, twitter, dan lain...

Cara Buat Tukeran Link Otomatis

by Administrator Tags tutorial - Jumat, Desember 16, 2011

<div dir="ltr" style="text-align: left;" trbidi="on"><br />
Bagi kawan yang belum tahu caranya membuat dan ingin juga memasang, maka silahkan ikuti langkah dibawah ini:<br />
<br />
Daftar dulu <a href="http://www.blenza.com/linkies/"><b><i>disini</i></b></a>, gratis kok, proses pendaftaran sama dengan pendaftaran layanan lainnya, dan lakukan sampai melakukan konfirmasi dari email yang diterima. Saya tidak akan menjelaskan detil untuk hal ini, karena jika anda sudah bisa mendaftar sebagai blogger maka tidak akan sukar melakukan pendaftaran ini. setelah anda mendaftar anda akan mendapatkan kode html..  lalu sisipkan kode html tersebut di Rancangan > tambah gadget > HTML/Java Script.. <br />
<br />
contoh script yang didapatkan: <div dir="ltr" style="text-align: left;" trbidi="on"><br />
<script src="http://www.blenza.com/linkies/autolink.php?owner=ridho1991&amp;postid=22Oct2011a" type="text/javascript"><br />
</script></div><br />
<div><br />
</div><br />
berikut hasil nya jika sudah selesai terpasang  :<br />
<br />
<div dir="ltr" style="text-align: left;" trbidi="on"><script src="http://www.blenza.com/linkies/autolink.php?owner=ridho1991&postid=22Oct2011a" type="text/javascript">
</script></div><br />
<br />
Selamat Mencoba...</div>

Bagi kawan yang belum tahu caranya membuat dan ingin juga memasang, maka silahkan ikuti langkah dibawah ini: Daftar dulu disini , gratis ...

Cara Buat Status YM di Blog

by Administrator Tags tutorial - Jumat, Desember 16, 2011

<div dir="ltr" style="text-align: left;" trbidi="on"><br />
Dalam postingan yang singkat kali ini saya akan membahas bagaimana Cara Buat Status Yahoo Messenger di Blog.Punya Yahoo Messenger atau YM ?Pasti kamu yang suka chatting punya yang namanya YM atau Yahoo Messenger.Yahoo Messenger bisa kita aplikasikan loh kedalam blog kita ? ya sekedar buat chatting kepada pengunjung blog kita atau bisa juga buat tanya jawab tentang blog kita .coba lihat Status Yahoo Messenger yang sedang online di bawah ini :<br />
<div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq91F1Ma80OH7EqkD0EosgutOYt-RIZ_jr6x6x1P_SFLPUZO1TzmjwSmHmrzjW4okFgFLPwotaCQRwh_augm5qTygWSHhLFGdCzGjZe7MWrcOzHZ418EfUCrtNuEmmGsYpRbgXBwH3e2c/s320/online.gif" /></div><div><br />
</div><div>dan coba lihat Status Yahoo Messenger yang sedang offline dibawah ini :</div><div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZybmi4W5qvKjhyEsfpYXyJ0uwvyu6kN-9fP7GhmsqyUJ6H5pjD5TWkGoSBF0IXQjM7eIpLIAjE9cL-3uKmFmeKxbdaG1ULqZuzVyNptIJDc7KPovc7So1Rt6C_fr0BPWd0EkeFPkcdfg/s320/ofline.gif" /></div><div><br />
</div><div><div>kamu bisa memasang Status Yahoo Messenger kaya di atas dengan mudah, silakan ikuti langkah-langkah Cara Buat Status Yahoo Messenger di Blog dibawah ini :</div><div><br />
</div><div>1.Login ke Blogger.com</div><div><br />
</div><div>2.kemudian klik Tata Letak dan klik lagi Elemen Halaman kemudian pilih Tambah Gadget</div><div><br />
</div><div>3.Setelah muncul jendela baru silakan pilih HTML/Javascript,Lalu copy dan paste kode berikut ini kedalam kolom HTML/Javascript Tersebut.</div><div><br />
</div><div><center><a href="http://messenger.yahoo.com/edit/send/?.target=<span class="Apple-style-span" style="color: blue;">ID-YM</span>"><img src="http://opi.yahoo.com/yahooonline/u=ridho.hilmawan/m=g/t=<span class="Apple-style-span" style="color: lime;">14</span>/l=us/opi.jpg" alt="Status YM" border="0" /></a></center></div><div><br />
</div><div>4.Ganti tulisan <span class="Apple-style-span" style="color: blue;">ID-YM</span> yang berwarna biru dengan ID Yahoo Messenger Kamu.selain itu kamu juga bisa mengganti tampilan Status Yahoo Messenger kamu dengan merubah angka <span class="Apple-style-span" style="color: lime;">14</span> yang berwarna hijau dengan angka 1-14 menurut tampilan icon YM yg kamu inginkan .silakan dicoba.</div><div><br />
</div><div>selesai selamat mencoba Cara Buat Status Yahoo Messenger di Blog.</div></div><div><br />
</div></div>

Dalam postingan yang singkat kali ini saya akan membahas bagaimana Cara Buat Status Yahoo Messenger di Blog.Punya Yahoo Messenger atau YM ?...

Cara Pasang Widget Feedjit

by Administrator Tags tutorial - Jumat, Desember 16, 2011

<div dir="ltr" style="text-align: left;" trbidi="on"><br />
Salah satu kebutuhan pemilik blog adalah apa dan kata kunci atau dari mana pengunjung blognya dapat sampai di blognya .untuk itu Feedjit adalah solusinya.Wiget Feedjit ini sangat berguna untuk sebuah blog dan untuk mengetahui dari mana datangnya pengunjung blog kamu .Wiget Feedjit ini dapat di dapatkan secara gratis .Selain untuk itu semua Wiget Feedjit juga bisa untuk membandingkan keyword atau kata kunci apa yang paling banyak membawa pengunjung datang ke blog kamu. pengen Pasang Wiget Feedjit ? silakan ikuti langkah-langkah Cara Pasang Widget Feedjit berikut ini:<br />
<br />
1.Klik <a href="http://feedjit.com/">http://feedjit.com/</a><br />
<br />
2.Lihat Bagian bawah ada 4 contoh Widget Feedjit yang bisa kamu pilih.<br />
<br />
3.Kalo pengen ngerubah ukuran atau tampilanya klik aja Click here to Customize It!<br />
<br />
4.Kalo udah Copy kode HTML Widget Feedjit nya ke blog kamu . Caranya Login ke blogger Lalu Klik Tata Letak Kemudian Klik tambah Gadget Lalu pilih HTML/javascript Lalu paste kodenya disitu . Jangan lupa klik Simpan<br />
<div><br />
</div></div>

Salah satu kebutuhan pemilik blog adalah apa dan kata kunci atau dari mana pengunjung blognya dapat sampai di blognya .untuk itu Feedjit ad...

Cara Menggunakan Google Webmaster Tool

by Administrator Tags tutorial - Jumat, Desember 16, 2011

<div dir="ltr" style="text-align: left;" trbidi="on"><br />
Google Webmaster Tool adalah alat yang disediakan google untuk melihat dan menilai blog kita .Dengan menggunakan Google Webmaster Tool kita dapat lebih mudah melakukan langkah-langkah SEO Yang harus di jalankan. Google Webmaster Tool dapat kita dapatkan secara gratis dan mudah, yang harus kita miliki hanya akun google. Pasa pakar SEO juga sangat menganjurkan menggunakan Google Webmaster Tool. Karena dari tadi saya ngomongin Google Webmaster Tool berarti dalam postingan kali ini saya akan menerangkan dan menjelaskan Cara Menggunakan Google Webmaster Tool Silakan ikuti langkah-langkah berikut Untuk Menggunakan Google Webmaster Tool :<br />
<br />
1.Login Ke <a href="https://www.google.com/webmasters/tools">https://www.google.com/webmasters/tools</a>. Jika anda sudah login ke blogger maka situs ini akan login secara otomatis dengan akun google kamu.<br />
<br />
2.Setelah muncul tampilan dashboard isikan alamat blog kamu di kotak teks lalu klik Add Site.<br />
<br />
3.Setelah kamu mengklik Add Site maka URL blog kamu ditambahkan ke Google Webmaster Tool. walaupun begitu kamu perlu memverifikasi URL blog kamu terlebih dahulu .Tujuanya untuk meyakinkan apakah kamu pemilik dari blog yang kamu daftarkan.<br />
<br />
4.Kemudian pilih verifikasi Dengan Meta Tad.<br />
<br />
5.Setelah muncul Kode Meta Tag untuk Verifikasi Copy kode tersebut ke blog kamu,Caranya Login ke blogger lalu klik Tata Letak lalu pilih Edit HTML. Setelah itu cari kode <head> biar lebih gampang cari kode tersebut Gunakan tombol CTRL+F .Klo udah ketemu kode <head> nya paste kode Meta Tag dari Google Webmaster Tool di bawahnya. kalo udah klik save template.<br />
<br />
6.Setelah itu balik lagi ke halaman Google Webmaster Tool lalu klik verify . setelah blog kamu Terverifikasi maka status blog kamu di Google Webmaster Tool menjadi verified.</div>

Google Webmaster Tool adalah alat yang disediakan google untuk melihat dan menilai blog kita .Dengan menggunakan Google Webmaster Tool kita...