Membuat Menu Bar dan Sub Menu Pada Blog

Cara Memasukkan Posting Artikel ke dalam Menu Blog - Cara memasukkan postingan artikel baru ke dalam menu blog atau cara agar / supaya / membuat posting artikel baru bisa masuk ke dalam / di menu blog - Beberapa hari yang lalu, ada seorang blogger yang bertanya lewat pesan di fb-ku tentang bagaimana Cara Memasukkan Posting Artikel ke dalam Menu Blog. Sebenarnya hal ini sangatlah mudah, oleh karena itu jarang blogger yang membahasnya, tapi walaupun begitu demi sebuah persahabatan saya akan mengulasnya di sini, toh saya juga tidak akan rugi, hehehe.. Karena ada kata bijak yang mengatakan, kalau kita mau mengamalkan ilmu kita maka itu akan menjadikan ilmu kita semakin bertambah, bukan berkurang. Weh weh weh, malah ceramah, sorry deh... wkwkwk..

 

Oke langsung saja saya mulai tutorial kali ini tentang bagaimana memasukkan posting artikel ke menu blog kita. Selamat membaca...

Sebelum kita mengetahui bagaimana caranya memasukkan posting artikel ke menu blog, maka alangkah baiknya kita buat dulu menu di blog kita. Kebanyakan blog menggunakan menu horisontal, maka kali ini saya juga akan menjelaskan bagaimana caranya membuat menu navigasi horisontal dengan mudah.

-----------------------------------------------------------------------------------------------------------------------------

Apa itu Navigasi ? Navigasi adalah menu untuk penentu arah atau penunjuk posisi. Setiap blogatau situs menurut saya harus bahkan wajib memiliki menu navigasi sebagai penuntun untuk pengunjung blog kita.

Lalu bagaimana membuat menu tersebut? Berikut tutorial mudahnya

 

 

Cara Membuat Navigasi Horizontal Drop Down :

1. Masuk blogger >> Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).

2. Cari kode ]]></b:skin> kemudian pastekan kode di bawah ini tepat di atas kode ]]></b:skin>

#NavbarMenu{background:#000000; width:960px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;}
#NavbarMenuleft{width:700px; float:left; margin:0; padding:0;}
#search{width:240px; font-size:11px; float:right; margin:0; padding:0;}
#nav{margin:0; padding:0;}
#nav ul{float:left; list-style:none; margin:0; padding:0;}
#nav li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;}
#nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}
#nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#000000; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;}
#nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:3px 10px;}
#nav li{float:left; padding:0;}
#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;}
#nav li ul a{width:140px;}
#nav li ul ul{margin:-24px 0 0 170px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;}
#nav li:hover, #nav li.sfhover{position:static;}
#searchbox{padding:0; margin:0;}
#search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd; font:normal 11px arial, verdana, Times New Roman;}
#search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;}
#top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;}
#top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;}
#top a:hover{color:#cc0000; text-decoration: underline;}
#top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;}
.topleft {width: 304px; float: left; margin: 0; padding:0;}
.topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;}
.topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}

3. Setelah Itu Cari Kode

<b:widget id='Header1' locked='true'

Contoh :

<b:section class='art-header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='RezDown7 (Header)' type='Header'/>
</b:section>

4. Copy-Paste Kode HTML yang tersedia dibawah ini tepat di bawah kode </b:section> jika ingin menempatkan Di Bawah Header. Jika ingin menempatkan di atas header paste kode di bawah ini tepat Di Atas kode

<b:section class='art-header' id='header' maxwidgets='1' showaddelement='no'>

Berikut ini kodenya

<div id='outer'>
<div id='navbarmenu'>
<div id='navbarmenuleft'>
<ul id='nav'>
<li><a href='http://www.warnarozack.blogspot.com'>Home</a></li>
<li><a href='#'>Artikel Seru</a>
<ul>
<li><a href='http://www.warnarozack.blogspot.com/search/label/Artikel Pendidikan'>Pendidikan</a></li>
</ul></li>
<li><a href='#'>Tutorial</a>
<ul>
<li><a href='http://www.warnarozack.blogspot.com/search/label/Tutorial Blog'>Blog</a></li>
<li><a href='http://www.warnarozack.blogspot.com/search/label/Tutorial Facebook'>Facebook</a></li>
<li><a href='http://www.warnarozack.blogspot.com/search/label/Tutorial Twitter'>Twitter</a></li>
</ul></li>
<li><a href='http://www.warnarozack.blogspot.com/search/label/Peluang Bisnis'>Peluang Bisnis</a></li>
<li><a href='http://warnarozack.blogspot.com/2011/11/tukar-link-di-blogaul.html'>Tukar Link</a></li>
<li><a href='#'>Download</a>
<ul>
<li><a href='http://warnarozack.blogspot.com/2011/10/download-aplikasi-aplikasi-komputer.html'>Aplikasi</a></li>
<li><a href='http://warnarozack.blogspot.com/2011/10/download-e-book.html'>E-book</a></li>
<li><a href='http://warnarozack.blogspot.com/2011/10/download-video-video-keren.html'>Video</a></li>
<li><a href='http://warnarozack.blogspot.com/2011/10/download-qasidah-habib-syech.html'>Qasidah</a></li>
</ul></li>
<li><a href='http://warnarozack.blogspot.com/2011/10/informasi-kontak.html'>Kontak</a></li>
</ul>
</div></div></div>

Kemudian Save Template!!

Jadi dech..

-----------------------------------------------------------------------------------------------------------------------------

Ket : kode syntac html di atas adalah kode -kode yang saya gunakan untuk membuat menu dalam blog saya ini.

Nah, bagaimana sobat? Sampai di sini sudah faham?

Oke lanjut...

Nah, dari kode-kode syntac menu di atas, maka terlihat kalau saya menggunakan dua jenis link arahan dalam membuat menu blog yang akan saya perjelas lagi berikut ini:

 <div id='outer'>
<div id='navbarmenu'>
<div id='navbarmenuleft'>
<ul id='nav'>
<li><a href='http://www.warnarozack.blogspot.com'>Home</a></li>
<li><a href='#'>Artikel Seru</a>
<ul>
<li><a href='http://www.warnarozack.blogspot.com/search/label/Artikel Pendidikan'>Pendidikan</a></li>
</ul></li>
<li><a href='#'>Tutorial</a>
<ul>
<li><a href='http://www.warnarozack.blogspot.com/search/label/Tutorial Blog'>Blog</a></li>
<li><a href='http://www.warnarozack.blogspot.com/search/label/Tutorial Facebook'>Facebook</a></li>
<li><a href='http://www.warnarozack.blogspot.com/search/label/Tutorial Twitter'>Twitter</a></li>
</ul></li>
<li><a href='http://www.warnarozack.blogspot.com/search/label/Peluang Bisnis'>Peluang Bisnis</a></li>
<li><a href='http://warnarozack.blogspot.com/2011/11/tukar-link-di-blogaul.html'>Tukar Link</a></li>
dst...

Ket :

Tulisan yang bergaris bawah adalah link arahan.

Tulisan yang berwarna biru adalah menu utama.

dan tulisan yang berwarna ungu adalah submenu.

Nah, dari kode-kode tersebut terlihat bahwa saya menggunakan dua jenis link arahan.

Berikut dua jenis link arahan yang saya gunakan dalam kode tersebut :

1. Link arahan nama label, ditandai dengan penulisan format link sebagai berikut:

http://www.domainanda.com/search/label/Nama Label

dalam menu blog ini, salah satunya saya menggunakan

http://www.warnarozack.blogspot.com/search/label/Artikel Pendidikan

2. Link arahan menuju suatu posting, ditandai dengan penulisan format link sebagai berikut :

http://www.domainanda.com/direktori file/nama file.html

dalam menu blog ini, salah satunya saya menggunakan

http://warnarozack.blogspot.com/2011/11/tukar-link-di-blogaul.html

dari penjelasan dia atas kita tahu bahwa kalau kita sedang posting artikel, kemudian kita masukkan artikel tersebut ke dalam nama label  yang sudah kita pasang di menu, maka otomatis postingan tersebut akan masuk ke dalam menu blog. Istilah lain label di sini adalah kategori.

Selanjutnya, misalnya ada pengunjung yang masuk ke dalam menu "Tukar Link" di blog saya ini, maka pengunjung tersebut akan diarahkan menuju linkhttp://warnarozack.blogspot.com/2011/11/tukar-link-di-blogaul.html yang kemudian masuk ke postingan yang berjudul "Tukar Link di Blogaul", postingan tersebut masuk di label Admin. Jadi bila saya posting artikel kemudian saya masukkan ke label Admin, maka artikel baru tersebut tidak akan masuk di menu "Tukar Link" dikarenakan dalam menu Tukar Link tersebut saya menggunakan link arahan menuju suatu posting (http://warnarozack.blogspot.com/2011/11/tukar-link-di-blogaul.html), bukan menuju suatu Nama Label. Tapi sebaliknya, apabila saya memasukkan postingan baru tersebut ke dalam nama label yang sudah saya pasang di menu, maka postingan tersebut akan masuk di menu, misalnya postingan tersebut saya masukkan ke Label "Artikel Pendidikan", maka postingan tersebut akan masuk di menu Artikel Seru > Pendidikan.

dari penjelasan saya di atas, pasti muncul suatu pertanyaan "Lho, beberapa nama label (kategori) kan sudah dibuat, tapi kenapa yang dimasukkan ke dalam menu, tidak masuk di bagian widget kategori?

Itu mudah saja, kuncinya adalah disembunyikan. Jadi beberapa nama label yang sudah saya pasang di menu blog, di bagian widget kategori saya sembunyikan, jadi tidak muncul dua kali di halaman blog, berikut ini caranya :

Masuk ke Dasbor > Rancangan > Klik edit pada widget Kategori > Pada bagian Tampilkan, klik edit > Centang pada nama label yang tidak masuk menu blog (akan mencul di Kategori) > Klik Selesai > Simpan.

Saya kira cukup penjelasannya mengenai Cara Memasukkan Posting Artikel ke dalam Menu Blog, kurang lebihnya saya mohon ma'af...

Salam sukses...

SUMBER: http://www.amronbadriza.com

Read More..

Membuat Menu Slide Show Pada Blog

Berminat? Silahkan anda coba!

Langsung saja pada langkah-langkah pembuatan Content Slider Image otomatis ini :

1. Langkah pertama, login ke akun blogger anda.
2. Setelah itu masuk ke template >> Edit HTML, kemudian centang expand widget templates
3. Demi keamanan dan kenyamanan anda backup dulu template anda.
4. Langkah berikutnya, letakkan kode berikut ini diatas kode ]]></b:skin> :                      
   #featuredContent{float:left;width:407px;margin-right:10px;display:inline}
   #featured-slider{position:relative;overflow:hidden;width:407px;height:245px}
   #featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:407px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPIz3tIjcpQdZ6V_khOKe-lp5Fbcsc4VM19GG-ye1xvxO2nnEZFxvqCdjBL4CzM6G21qNp_Mgns_Eset1dtTh7hGcHg_Gu0L6G9nAvU3sR11wevW76W2BqS1RQ-pZvS07MjB-CYVtMXCYq/s1600/transparant.png)}
   #featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
   #featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
   #featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
   #paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}
   #paginate-featured-slider ul{width:415px;padding-bottom:0;list-style:none}
   #paginate-featured-slider ul li{display:inline;width:75px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
   #paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
   #paginate-featured-slider a img{border-top:4px solid #f0f0f0}
   #paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}
   .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left; word-wrap: break-word; overflow: hidden;} 
   .slide {color: #666666;line-height: 1.3em;} .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;} 
   .slide li {margin:0;padding-top:0; padding-right:0;padding-bottom:.25em; padding-left:0px;text-indent:0px;line-height:1.3em;} 
   .slide .widget {margin:0px 0px 6px 0px;}
   Tulisan warna Orange diatas adalah panjang dan lebar slider pada demo, silahkan sesuaikan ukurannya.
5. Cari Kode </head> lalu letakan kode di bawah ini tepat diatasnya!             
   
   

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'type='text/javascript'/><script src='http://yourjavascript.com/222517121138/contentslider.js' type='text/javascript'/><script type='text/javascript'>
   //<![CDATA[
   imgr = new Array();
   imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuv018XYMuooC5lPJypTeM-swWbd-ihlEv-OGcHoHvQZh4iApMt9pnz9mco9UAw9oeck41zW5tD3xqEhoY5fIjzYj-J6sybF9iOtQTA76HzHDma3_fJbtYU3G5azUiDXD0Amh1NhvAIsc/s1600/no+image.jpg";
   showRandomImg = true;
   aBold = true;
   summaryPost = 100;
   summaryTitle = 25;
   numposts3 = 5;
   function removeHtmlTag(strx,chop){
   var s = strx.split("<");
   for(var i=0;i<s.length;i++){
   if(s[i].indexOf(">")!=-1){
   s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
   }
   }
   s = s.join("");
   s = s.substring(0,chop-1);
   return s;
   }
   function showrecentposts3(json) {
   j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
   img = new Array();
   for (var i = 0; i < numposts3; i++) {
   var entry = json.feed.entry[i];
   var posttitle = entry.title.$t;
   var pcm;
   var posturl;
   if (i == json.feed.entry.length) break;
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'alternate') {
   posturl = entry.link[k].href;
   break;
   }
   }
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
   pcm = entry.link[k].title.split(" ")[0];
   break;
   }
   }
   if ("content" in entry) {
   var postcontent = entry.content.$t;}
   else
   if ("summary" in entry) {
   var postcontent = entry.summary.$t;}
   else var postcontent = "";
   postdate = entry.published.$t;
   if(j>imgr.length-1) j=0;
   img[i] = imgr[j];
   s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
   if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
   //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
   
   var month = [1,2,3,4,5,6,7,8,9,10,11,12];
   var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
   var day = postdate.split("-")[2].substring(0,2);
   var m = postdate.split("-")[1];
   var y = postdate.split("-")[0];
   for(var u2=0;u2<month.length;u2++){
   if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
   }
   }
   var daystr = day+ ' ' + m + ' ' + y ;
   var trtd = '<div class="contentdiv"><a href="'+posturl+'"><img width="407" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
   document.write(trtd);
   
   j++;
   }
   }
   function showrecentposts4(json) {
   j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
   img = new Array();
   for (var i = 0; i < numposts3; i++) {
   var entry = json.feed.entry[i];
   var posttitle = entry.title.$t;
   var pcm;
   var posturl;
   if (i == json.feed.entry.length) break;
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'alternate') {
   posturl = entry.link[k].href;
   break;
   }
   }
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
   pcm = entry.link[k].title.split(" ")[0];
   break;
   }
   }
   if ("content" in entry) {
   var postcontent = entry.content.$t;}
   else
   if ("summary" in entry) {
   var postcontent = entry.summary.$t;}
   else var postcontent = "";
   postdate = entry.published.$t;
   if(j>imgr.length-1) j=0;
   img[i] = imgr[j];
   s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
   if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
   //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
   
   var month = [1,2,3,4,5,6,7,8,9,10,11,12];
   var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
   var day = postdate.split("-")[2].substring(0,2);
   var m = postdate.split("-")[1];
   var y = postdate.split("-")[0];
   for(var u2=0;u2<month.length;u2++){
   if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
   }
   }
   var daystr = day+ ' ' + m + ' ' + y ;
   var trtd = '<li><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>';
   document.write(trtd);
   j++;
   }
   }
   //]]>
   </script>

   
   

   Keterangan :
   Kode script warna merah (paling atas) adalah kode script jQuery.min.js  yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js, walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satujQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
   Angka 5 yang berwarna Ungu : Jumlah post yang ditampilkan dalam slider
   Angka 407 dan 240 yang berwarna hijau : Panjang dan lebar image besar
   Angka 75 dan 50 yang berwarna kuning : Panjang dan lebar image kecil
6. Kemudian cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya : 
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'/>
</div>
 </b:if> 
7. Setelah langkah diatas, save templates. Kemudian klicklayout >> add gadget yang berada di atas posting blog masukkan kode ini pada kotak HTML/Javascript :    
<div id='featuredContent'>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
</script>
</div>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</ul>
<div class='clear'></div>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>
Lalu Save

Read More..

Cara Membuat Popular Post Warna Warni di Blog

Cara Membuat Popular Post Warna Warni di Blog - Mungkin bagi anda yang menyukai bidang teknologi dan merupakan seorang pencinta gadget, tentunya anda pernah mengunjungi situs Engadget, salah satu portal berita tentang teknologi terkemuka di Dunia. Jika anda memperhatikan semua unsur pada saat anda berkunjung ke Engadget, pasti anda pernah melihat widget plugin most commented yang terpasang di sidebar seperti ini, berbentuk vertikal ke bawah dan berpenampilan warna-warni, namun sayangnya plugin ini hanya tersedia untuk blog berplatform wordpress. Namun jangan khawatir, karena sekarang saya akan memberikan solusinya bagi para blogger yang menggunakan platform blogspot, yaitu dengan menggunakan widget popular post default dari blogger dan menambahkan kode script yang bisa merubah penampilan popular post tersebut, meskipun mungkin akan sedikit berbeda tampilanya dengan yang tertera di situs Engadget.

Sebelumnya saya juga telah membahas artikel yang berkaitan tentang cara membuat artikel terbaru atau recent post yang bergerak slide show secara vertikal ke bawah. Mungkin ini akan sedikit berbeda dengan widget recent post slide yang sudah saya buat sebelumnya, karena widget kali ini adalah popular post atau artikel populer yang berwarna-warni tanpa efek slide, dan warna setiap popular postnya akan berbeda-beda (tidak duplikat) hingga 10 artikel (karena memang batas widget popular post hanya 10 artikel saja). Widget warna-warni ini juga sangat cocok sekali untuk diterapkan pada template-template yang berwarna 'terang' dan ramai seperti misalnya Johny Genit, Template buatan maskolis.

Bisa diliihat pada gambar yang tertera diatas, seperti yang saya kemukakan tadi bahwa widget ini akan bisa menampilkan popular post hingga 10 artikel, dan disebelah judul artikelnya akan ditampilkan nomor urut dari 1 sampai 10 yang menandakan ke-populeran artikel tersebut. Selain itu, warna-warna yang ditampilakan pada widget ini juga bisa di modifikasi dan diubah-ubah sesuai minat dan interesting rekan-rekan blogger. Well, bagi anda yang berminat, silahkan disimak yang berikut ini.

1. Login ke Blogger.

2. Pilih Tata Letak.

3. Pilih Add Gadget.

4. Pilih Entri Populer.

5. Lalu anda setting widget 'Entri Populer' seperti di bawah ini.

• Hilangkan centang pada Thumbnail Gambar dan Cuplikan.
• Pilih berapa entri atau artikel yang ingin ditampilkan (tergantung minat dan kebutuhan anda).

6. Klik 'simpan'.

7. Masih di Tata Letak, pilih Add Gadget.

8. Pilih HTML/JavaScript.

9. Lalu letakkan kode di bawah ini ke dalam box 'konten'.

<style type='text/css'>

/*----- popular post warna warni by warnarozack.blogspot.com-----*/

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}

#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}

#PopularPosts1 ul li:first-child:after,

#PopularPosts1 ul li:first-child + li:after,

#PopularPosts1 ul li:first-child + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}

#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}

#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}

#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}

#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}

#PopularPosts1 ul li:first-child:after{content:"1"}

#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

</style>

10. Klik 'simpan', dan selesai 

Bagaimana? mudah bukan membuat widget popular post ber-warna warni seperti pada situs Engadget. Demikian Cara Membuat Popular Post Warna Warni di Blog, semoga bermanfaat dan selamat mencoba.

Read More..

Cara Menggati Bentuk Krusor Di Blogspot

Cara mengubah cursor mouse pada blog | cara mengganti bentuk panah mouse di blog | tips mempercantik kursor mouse pada blog - Ada yang belum tau yang namanya cursor? kalau belum tau biar saya beri tau, cursor biasanya ada di komputer dan itu menurut saya ialah panah yang menunjukan atau gampangannya jari kita di komputer, bahasa awamnya sih mouse itu loh yang putih bentuk panah yang ada di komputer. Dah kenalan kan yang namanya cursor itu siapa? nah cursor di komputer bisa kita ubah, di blog pun juga bisa kita ubah seperti halnya Cara Membuat Cursor/Mouse Blog Bertabur Bintang Paling Gampang berguna untuk memodifikasi tampilan cursor di blog.

Bosankan liat cursor/panah mouse begitu-begitu mulu? bagaimana kalau diubah pasti tambah keren apalagi di pasang di blog tercinta sobat, bisa nambah menarik ditambah dengan Cara Memasukan Lagu ke Blog|Tips Memasukan Lagu di Blog Dengan Mudah . Lantas bagaimana sih cara mengubah bentuk cursor mouse pada blog? di artikel BlogRion cara mengubah cursor pada blog ini akan dijelaskan perihal mengubah bentuk cursor panah mouse pada blog tepatnya blog blogspot seperti tutorial dibawah ini :

Cara Mengganti Bentuk Cursor Mouse Blog

1. Loggin Blogger 
2. Masuk ke Dashboard
3. Pilih tata letak
4. Tambah Gadget / Widget
5. Pilih HTML/Javascript
6. Copy pastekan code dibawah ini

<style type="text/css"> body{cursor: url("http://i186.photobucket.com/albums/x100/amoebios_4m/nexuiz_default_cursor_1c.png"), auto;} </style><a href="http://ri-on.blogspot.com/2013/04/mengganti-cursor-kursor-mouse-blog.html" title="Cara Mengganti Cursor di Blog | Mengubah Tampilan Kursor Blog">Kursor Blog</a>

Url yang berwarna Biru adalah link gambar kursor, bisa diganti dengan link dibawah atau upload gambar kursor atau cari link gambar kursor tersebut. 

 

http://i1200.photobucket.com/albums/bb321/aNyA_zdej28/FBML%20Vocaloid/C-GUMI.png

http://i186.photobucket.com/albums/x100/amoebios_4m/nexuiz_default_cursor_1c.png

http://i44.photobucket.com/albums/f13/LONG65/Element2.gif

http://i1013.photobucket.com/albums/af252/oneuglycoffin/PhotoshopEdits/cuppycakecursor.png

URL : http://downloads.totallyfreecursors.com/thumbnails/aliendance.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/monkey-ani.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/tail2.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/banana1.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/bullseye-ani.gif

Cukup simpel dan gag susah-susah amat kan? untuk gambar cursor mouse blog yang lebih menarik dan seperti selera sobat, maka sobat bisa mencari link gambar yang lain yang tersebar di jagat internet ini. Ada yang belum berhasil dan masih bingung? tanyakan aja di kotak komentar artikel cara merubah tampilan cursor blog ini!. Sampai disini dulu tutorial sederhana Cara Mengganti Bentuk Cursor Panah Mouse Pada Blog.  Mudah Bukan ?

Read More..

Apa Saja Tips Untuk Meningkatkan Penghasilan dari Adfly ?

Bisnis online semakin berkembang seiring dengan pesatnya perkembangan teknologi informasi di dunia. Di internet, Anda dapat menemukan beragam metode bisnis online yang dapat dikerjakan seperti jualan produk, program affiliasi, paid review, layanan iklan, hingga survey online. Beragam bisnis online yang ada di internet juga semakin membuka peluang Anda untuk mendapatkan penghasilan darinya. Akan tetapi, Anda perlu waspada karena tidak semua bisnis online itu jujur!

Read More..

Kode warna Dalam HTML

Warna banyak gunanya, apalah artinya hidup tanpa warna, monoton hanya hitam dan putih, waw..... gak ceria dong.
Kadang kita mengalami kesulitan dalam mencari kode warna

Read More..

4 Gaya Menulis Di Blog Yang Perlu Kita Ketahui

Gaya Menulis Di Blog – Menulis merupakan inti dari kegiatan blogging. Dengan menulis, kita dapat membagikan hal yang bermanfaat bagi pembaca, baik bersumber dari pengalaman pribadi dan orang lain. Menulis dan mempublikasikan tulisan di blog ibarat darah yang dipompa oleh jantung yang menghidupkan manusia. Tanpa sirkulasi darah yang dipompa lancar oleh jantung, manusia akan mati. Begitu juga dengan blog kita, tanpa menulis dan mempublikasikannya maka blog akan terasa mati.

Gaya menulis mencerminkan kedewasaan dan kepribadian penulisnya. Oleh karena itu, gaya menulis di blog harus kita sesuaikan dengan minat, topik, dan target pembaca blog kita.

Read More..