Cara Membuat Recent Post Dengan Thumbnail/Gambar

Cara Membuat Recent Post Dengan Thumbnail/Gambar - 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

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.

Widget ini paling banyak dicari, karena menurut penelitian blogger indonesia, mereka menyukai tampilan yang simple dan keren, dan dilengkapi dengan thumbnail, jumlah komentar. 

Tanpa basa basi berbicara panjang lebar kaya kereta exspres, mulai aja yuk cara memasangnya.. 

• Selalu ingat untuk Login dulu ke blogger sobat, 
• Lalu pada Dasboard blogspot sobat pilih Tata Letak, 
• Selanjutnya, pilih Tambah Widget => HTML/Javascript, Lalu, copas dan masukan kode script di bawah ini, 

<script language="JavaScript">

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 = "http://koisine.blogspot.com/"; </script> <script src="https://sites.google.com/site/anasceria/recentposts_thumbnail.js" type="text/javascript"></script>

• Yang terakhir, Simpan aja deh.

Catatan : untuk tulisan yang bercetak tebal alias bold, mangga untuk diganti dengan alamat blog sobat.

Sekian sudah artikel mengenai Cara Membuat Recent Post Dengan Thumbnail/Gambar pada kesempatan kali ini, semoga artikel ini dapat bermanfaat dan dapat menjadi inspirasi yang baik.

Terima kasih.

Source : http://koisine.blogspot.com

Read More

Membuat Widget Popular Post dengan Animasi

Membuat Widget Popular Post dengan Animasi - 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….

Sobat.. pada postingan saya mengenai tutorial blog kali ini, saya akan sharing ke sobat semuanya mengenai cara Membuat Widget Popular Post dengan Animasi pada blogspot, postingan ini untuk terus melengkapi postingan-postingan saya  sebelumnya mengenai tutorial blog guna mempercantik tampilan blog. Gambar dibawah ini adalah contoh Widget Popular Post dengan Animasi. Jika sobat ingin melihat versi demonya silakan sobat klik disini (Sok atuh di klik)

Baiklah sob… tanpa panjang lebar lagi, kita langsung saja ke tutorialnya. 

1. Silakan sobat login ke akun blog sobat.

2. Kemudian pilih Design > Page Elements

3. Jika pada blog sobat belum terpasang widget popular post, silakan sobat tambahkan dengan mengklik “Add Gadget” dimana saja yang sobat inginkan dan jangan lupa akhiri dengan mengklik tombol save

4. Selanjutnya silakan sobat klik lagi “Add Gadget” dan tambahkan gadget  HTML/Javascriptkemudian copas kode dibawah ini dan akhiri dengan mengklik tombol save.

<style type="text/css" media="screen">

#PopularPosts1 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;
}
#PopularPosts1 ul {
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#PopularPosts1 li {
 width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
}
#PopularPosts1 li .item-title a {
 text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {
 float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}
#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
}
#PopularPosts1 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.tags span,
.tags a {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}
a img {
    border: 0;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

Nah Sobat, Widget Popular Post dengan Animasi sekarang sudah jadi. Silakan sobat simpan terlebih dahulu settingan pada Page Elements tadi kemudian liat hasilnya.

Saya rasa cukup sampai disini dulu postingan saya mengenai cara Membuat Widget Popular Post dengan Animasi kali ini, semoga bermanfaat.

Source : http://www.merdiyanse7.com

Read More

Cara Memasang Tombol 'Back to Top' pada Blog

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.

Letak tombol ini berada di pojok kanan bawah layar monitor dan melayang. Untuk memasang tombol ini, Anda dapat menyimak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Elemen Laman > Tambah Gadget.

3. Pilih HTML/JavaScript.

4. Copy dan paste kode di bawah ini di kolom Konten.


<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>


5. Anda dapat mengganti Kembali ke Atas dengan judul yang Anda inginkan.

6.Bila ingin menggunakan gambar Anda sendiri, silakan ganti http://i1186.photobucket.com/albums/z370/lanonadex/Up.png dengan url gambar Anda.
7. Klik tombol SIMPAN.

8. Pindahkan elemen ke posisi paling bawah.

9. Klik tombol SIMPAN.

10. Selesai.

Source : http://lanoblog.blogspot.com

Read More

Cara Pasang Widget Facebook Like Fan Page di Blogger

widget like Facebook Fan Page 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.
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.

gambar diatas merupakan contoh widget like fan page yang sudah terpasang di blog, ditandai dengan lingkaran merah.

tanpa panjang lebar lagi, berikut cara-cara memasang widget ini ke dalam blog anda :

1. pastikan anda sudah memiliki Facebook Fan Page.
2. selanjutnya kunjungi situs http://developers.facebook.com/docs/reference/plugins/like-box
   copy-paste link ini ke browser anda.
3. disana terdapat kolom bernama Facebook Page URL. copy-paste kan URL Facebook Fan Page Anda ke kolom tersebut.
4. 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 Get Code.
5. berikutnya muncul kotak dialog kode plugin like box anda. kopilah kode tersebut yang terdapat pada kotak iframe.
6. Login ke blogger anda, klik tab design/rancangan.
7. klik tambah gadget dan pilihlan HTML/javascript.
8. pastekan kode yang telah anda copy tadi.
9. klik Save
10. cek dengan klik lihat blog.

mudah sekali kan cara memasang Widget Like Facebook Fan Page.
anda dapat meletakkannya dimana saja yang anda mau.
semoga bermanfaat dan sukses selalu ^^

Read More

Bagaimana Cara Membuat “ Community Link Feed “

Walaupun tidak begitu banyak yang mendaftar atau memangfaatkan “ community link feed “ 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 “ Comunity Link Feed “ tersebut ??.

Untuk membuatnya ada tiga langkah yang harus kita miliki/ gunakan. pertama memangfaatkan fasilitas google doc ( tentunya harus memiliki akun gmail ), kedua, mempunyai akun di bookmark Deliciou, ketiga , memangfaatkan feed dari feedburner.

Untuk detail atau penjelasan langkah-langkah selanjutnya bisa anda baca pada tutorial mas Nataludin “membuat community feed link untuk blogger  “Widget “ communtity link feed “ ini sendiri bukan barang asing untuk pengguna wordpress, dan sangat bermangfaat untuk ajang mempromosikan blog/artikel secara gratis.

Read More

Memberi gambar background pada Cbox

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

Lalu pilih style yang transparan, atur warna text dan link sesuai yang kamu inginkan lalu save,seperti gambar dibawah ini:

Setelah selesei edit kode yang kamu dapat dari cbox tadi! kode cbox biasanya seperti dibawah ini:

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<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>
<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>
</div>
<!-- END CBOX -->

<div id="cboxdiv" style="text-align: center; line-height: 0;background-position:center;background:url(url gambar kamu);width:220px;height:305px;background-repeat:no-repeat;">

Pada kode yang berwarna hijau silahkan ganti dengan url gambar yang kamu inginkan,dan ukuran yang berwarna merah silahkan sesuaikan dengan ukuran cbok kamu,nih ada beberapa gambar background yang bisa kamu pakai juga.

http://www.bestiphonewallpapers.com/bulkupload/081109/Cartoon/PinkHelloKitty.jpg
http://www.dreamstime.com/blue-background-thumb2315107.jpg
http://www.dreamstime.com/floral-background-thumb4863792.jpg

setelah semua selesei silahkan pasang di blog sobat,kamu bisa membuat buku tamumu secara tersembunyi juga boleh..selamat mencoba!

Source : http://infonetmu.blogspot.com

Read More

Cara Membuat Related Post Di Blogger

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>

/* Related Post */
.related_posts{margin-top:5px;padding:0 10px;border:1px solid #B7E8FF;background:#E0F5FF;}
.related_posts h4{color:#111;font:normal 19px/19px Arial, sans-serif;letter-spacing:-0.5px;padding:7px 0;border-bottom:solid 1px #fafafa;}
.related_posts a{color:#000;}
.related_posts ul{padding:0;}
.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;}

2. Langkah berikutnya kamu cari kode <div class=’post-footer-line post-footer-line-1′> kalau tidak ada, alternatifnya cari kode ini <p class=’post-footer-line post-footer-line-1′> dan letakkan kode berikut tepat diatas kode tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related_posts'>
<div class='widget-content'>
<h4>Related Post:</h4>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 10;
var maxNumberOfLabels = 2;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 2;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

3. Simpan template kamu. selamat mencoba  :D

Read More

Yahoo News Slider

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 : LIVE DEMO.

Berikut tutorial singkat cara memasang Yahoo News Slider di Blog Anda :

Pertama, buka tab edit HTML blog Anda (tidak perlu dicentang), lalu masukkan kode CSS di bawah ini tepat sebelum kode ]]></b:skin> :

/* 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/AVvXsEgLbAPuuMyiZ3p0sOLREr-vMNVNs4srXbcaTpn4qjkL6V0uxOp7Uz8zTPm3ihyphenhyphennWbjl2Rr0-h5s3SzLOPfzP35YCYHW3Of8sx1Jeh18vtI_JK-7UzYCNZ0RhrGDcMvKKNNLzVJPmKSt7Ik/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/AVvXsEhtTHllOfJ2XmI7vyuf7wgsWKr7K17Q16HDW1MUbGfmHEP1_LryJRo0b_k2eU2qhDV7Lu9jQCH5WlBstgqJcSc4W2H0RtzeqjorUHyqBHiJPjWqjIdmzalL8gvGlCa0StaWNW0vIv7pg8M/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/AVvXsEhtTHllOfJ2XmI7vyuf7wgsWKr7K17Q16HDW1MUbGfmHEP1_LryJRo0b_k2eU2qhDV7Lu9jQCH5WlBstgqJcSc4W2H0RtzeqjorUHyqBHiJPjWqjIdmzalL8gvGlCa0StaWNW0vIv7pg8M/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/AVvXsEhREJ0GVMV_BWZh1eVeFzBWI2YeVnvoClv0hpYC0DPx_K2g7AjGqqhT1WyENxuxbF7h2oh3HdKUlJsfeDBXrI55VpC6IclIx7uk0GixgZW73tE3CEjcBe1fCS8RvaECfFwJRhVjzRj6Eog/s1600/previous.gif);} div.jqans-wrapper.default .jqans-pagination-controls-next a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCUoHMyJyYHX0KQz_Vipw9lMuS_yxVwYFH0Z3eNc_fkON6057Mc42QdzSiZ20EfGhrx8i8u4Pq3m9YKMeo6tD3Nb2tYxa20mBY5WcSlYfhtaapkTLHyDZOdDU3kHsO195zp0EbVKHEdEM/s1600/next.gif);}

Kedua, Anda harus memasukkan javascript code berikut setelah kode ]]></b:skin> :

<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>

Langkah terakhir, silahkan save lalu tambahkan kode javascript berikut di elemen halaman yang Anda diinginkan :

<ul id="newsslider"> <li> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj46CfzWuHswW6B6e0A5MZZQZFJDzayEfVWiCI6v6x5v1INVNRNa1r9Bu365DjcG84LdbubDemDbU3FzA5gaLTQoc8RfhOxCvz1sXl25zO3BO6H4S6ubp4rRSxuSafbLUj0Qx2G7g1BonI/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/AVvXsEiRMaAUnRC5jqJv7QaGLdeIjNhubbkT-uMzsoaS_6Vb3_uLSecconuZmLM1vSvFUsNK5c48LmTmlYQdyGZbs9t0zXP6MnCHFsHZtaMDM1NLlu4F7vOoBUd3dc6g0u7yU47NFSgFL7UeOFY/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/AVvXsEgl5PoEtxZA-K5RYPCiqomfHOgyrz9zGMJBPi7cCBFK7Fk8AH2EM07V6ekXpM7W4Z8aaebP7Xr4xwkqo3ps8Q_IkmvwPqud4iHSdbxMwCnUX518ElofRrUvAzCAHZN-iszgxoMTJSjnPIU/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/AVvXsEix80WIAlBxrz_x1N_BYc8uxMs6q0ZyH1bH5r2VY4YXBE-c9-6WFbYpJ8yfBsNuacl0or60nQ6zwY87bCXsV-uKTs5MtLNKMlK6x78zghiyuOe6VQIroJo02lPK8bVPKpUy4QQBwiLHWx4/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/AVvXsEj46CfzWuHswW6B6e0A5MZZQZFJDzayEfVWiCI6v6x5v1INVNRNa1r9Bu365DjcG84LdbubDemDbU3FzA5gaLTQoc8RfhOxCvz1sXl25zO3BO6H4S6ubp4rRSxuSafbLUj0Qx2G7g1BonI/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/AVvXsEha1aca2ktely0gXWOjJAauQpxOXBr_cDDoLj32RLCVk988ZjtH8ekvWWTjPSCbtRpsIorw1HxLmtsod6EoSLtVDHYSjXGS-j0iTUREEQ4DuVrynTKg3uknMhtopmZCxGrXfi0HbD7LC5I/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/AVvXsEgl5PoEtxZA-K5RYPCiqomfHOgyrz9zGMJBPi7cCBFK7Fk8AH2EM07V6ekXpM7W4Z8aaebP7Xr4xwkqo3ps8Q_IkmvwPqud4iHSdbxMwCnUX518ElofRrUvAzCAHZN-iszgxoMTJSjnPIU/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/AVvXsEix80WIAlBxrz_x1N_BYc8uxMs6q0ZyH1bH5r2VY4YXBE-c9-6WFbYpJ8yfBsNuacl0or60nQ6zwY87bCXsV-uKTs5MtLNKMlK6x78zghiyuOe6VQIroJo02lPK8bVPKpUy4QQBwiLHWx4/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/AVvXsEj46CfzWuHswW6B6e0A5MZZQZFJDzayEfVWiCI6v6x5v1INVNRNa1r9Bu365DjcG84LdbubDemDbU3FzA5gaLTQoc8RfhOxCvz1sXl25zO3BO6H4S6ubp4rRSxuSafbLUj0Qx2G7g1BonI/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/AVvXsEha1aca2ktely0gXWOjJAauQpxOXBr_cDDoLj32RLCVk988ZjtH8ekvWWTjPSCbtRpsIorw1HxLmtsod6EoSLtVDHYSjXGS-j0iTUREEQ4DuVrynTKg3uknMhtopmZCxGrXfi0HbD7LC5I/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/AVvXsEgl5PoEtxZA-K5RYPCiqomfHOgyrz9zGMJBPi7cCBFK7Fk8AH2EM07V6ekXpM7W4Z8aaebP7Xr4xwkqo3ps8Q_IkmvwPqud4iHSdbxMwCnUX518ElofRrUvAzCAHZN-iszgxoMTJSjnPIU/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/AVvXsEix80WIAlBxrz_x1N_BYc8uxMs6q0ZyH1bH5r2VY4YXBE-c9-6WFbYpJ8yfBsNuacl0or60nQ6zwY87bCXsV-uKTs5MtLNKMlK6x78zghiyuOe6VQIroJo02lPK8bVPKpUy4QQBwiLHWx4/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>

Selesai, silahkan lihat hasilnya.

Read More

Cara Memasang Google Plus Widget

Google Plus merupakan jejaring sosial punya Mbah Google. 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 :

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/107027008490478634206/posts. ID Google Plus adalah bagian yang berwarna merah.

Kedua, masuk terlebih dahulu ke alamat url ini : Widget Plus. Setelah itu, klik Get Widget seperti gambar dibawah ini :



Ketiga, masukkan ID Google Plus Anda di bagian yang diminta, lalu tekan Get Code.

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.

source :  http://catalog-tutorial.blogspot.com

Read More

Cara Buat Tukeran Link Otomatis

Bagi kawan yang belum tahu caranya membuat dan ingin juga memasang, maka silahkan ikuti langkah dibawah ini:

Daftar dulu disini, 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..

contoh script yang didapatkan: <div dir="ltr" style="text-align: left;" trbidi="on">
<script src="http://www.blenza.com/linkies/autolink.php?owner=ridho1991&amp;postid=22Oct2011a" type="text/javascript">
</script></div>

berikut hasil nya jika sudah selesai terpasang  :

Selamat Mencoba...

Read More

Cara Buat Status YM di Blog

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 :

dan coba lihat Status Yahoo Messenger yang sedang offline dibawah ini :

kamu bisa memasang Status Yahoo Messenger kaya di atas dengan mudah, silakan ikuti langkah-langkah Cara Buat Status Yahoo Messenger di Blog dibawah ini :

1.Login ke Blogger.com

2.kemudian klik Tata Letak dan klik lagi Elemen Halaman kemudian pilih Tambah Gadget

3.Setelah muncul jendela baru silakan pilih HTML/Javascript,Lalu copy dan paste kode berikut ini kedalam kolom HTML/Javascript Tersebut.

<center><a href="http://messenger.yahoo.com/edit/send/?.target=ID-YM"><img src="http://opi.yahoo.com/yahooonline/u=ridho.hilmawan/m=g/t=14/l=us/opi.jpg" alt="Status YM" border="0" /></a></center>

4.Ganti tulisan ID-YM yang berwarna biru dengan ID Yahoo Messenger Kamu.selain itu kamu juga bisa mengganti tampilan Status Yahoo Messenger kamu dengan merubah angka 14 yang berwarna hijau dengan angka 1-14 menurut tampilan icon YM yg kamu inginkan .silakan dicoba.

selesai selamat mencoba Cara Buat Status Yahoo Messenger di Blog.

Read More

Cara Pasang Widget Feedjit

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:

1.Klik http://feedjit.com/

2.Lihat Bagian bawah ada 4 contoh Widget Feedjit yang bisa kamu pilih.

3.Kalo pengen ngerubah ukuran atau tampilanya klik aja Click here to Customize It!

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

Read More

Cara Menggunakan Google Webmaster Tool

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 :

1.Login Ke https://www.google.com/webmasters/tools. Jika anda sudah login ke blogger maka situs ini akan login secara otomatis dengan akun google kamu.

2.Setelah muncul tampilan dashboard isikan alamat blog kamu di kotak teks lalu klik Add Site.

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.

4.Kemudian pilih verifikasi Dengan Meta Tad.

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.

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.

Read More