Featured Post Today
print this page
Latest Post
Showing posts with label BLOGER. Show all posts
Showing posts with label BLOGER. Show all posts

Membuat Kotak Pencari/Search di Blogspot


Sore hari yang mendung, mungkin sebentar lagi hujan. Daripada sebentar lagi listrik mati, mending saya tulis saja artikel ini walaupun mungkin temen-temen semua sudah tahu semua, Saya yakin temen-temen semua pasti sudah tidak asing lagi dengan yang namanya search box. Karena kita rata-rata mencari alamat website atau informasi dengan tool ini.

Secara singkat, search box adalah sebuah tool yang digunakan untuk mencari data-data atau alamat website dengan memasukkan kata kunci yang ingin kita cari. Namun search box atau kotak pencari yang biasa kita gunakan hanya memungkinkan kita untuk mencari data di mesin pencari seperti Google, Yahoo, dan MSN. Lalu bagaimana kalau kita ingin mencari data hanya pada blog kita saja?

Mungkin sekarang sudah banyak template yang sudah disediakan kotak pencari atau search box. Tapi bagi template yang tidak dilengkapi dengan fasilitas ini. Anda juga bisa memasangnya sendiri dengan cara sebagai berikut:

1. Login ke Blogger. Klik menu Design -> Page Elements. Lalu klik pada Add a Gadget.

2. Klik Add a Gadget -> HTML/Java script


3. Masukkan kode dibawah ini kedalam kotak dan klik Save
<p align="left">
<form id="searchthis" action="ALAMAT URL BLOG/search" style="display:inline;" method="get">
<strong>NAMA KOTAK<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>
Ganti ALAMAT URL BLOG dengan alamat URL blog Anda. Misalnya, http://creatingwebsite-maskolis.blogspot.com dan ganti NAMA KOTAK dengan nama yang ingin Anda tampilkan pada kotak. Misalnya, Cari >artikel disini, Cari disini, dan lain-lain.

4. Jika sudah selesai, klik Save lalu klik View Blog untuk melihat tampilannya di blog.


Jika Anda merasa kotaknya terlalu panjang atau pendek. Anda bisa mengubah ukurannya dengan mengganti nilai pada size. Anda juga bisa mengganti nama tombol Search dengan nama lain misalnya, Cari atau lanjut. Sebagai contoh, saya mengganti "size=30" dan "value=cari" maka hasilnya akan seperti yang dibawah ini.

sumber : maskolis.com
Semoga bermanfaat

0 comments

Cara Memasang Breadcrumb di Blogspot


Artikel saya kali ini akan membahas tentang fitur navigasi yang terletak di atas atau bisa juga di bawah judul postingan, yang biasa kita kenal dengan nama breadchumb. Pengertianbreadcrumb sendiri kurang lebihnya adalah suatu navigasi yang berisikan kategori atau label dari postingan dan bisanya selalu di awali dengan tombol menuju home (halaman depan blog).


Pada dasarnya Breadcrumb merupakan navigasi seo sebaris dengan tautan internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat. 

Jadi simple-nya seperti ini : search engine selalu membaca label atau tags setiap postingan blog, karena saat ini google sudah tidah menggunakan meta tag keyword lagi untuk mengindeks suatu website/blog, maka yang jadi perhitungan google saat ini adalah meta description dan label (kategori). Maka dari itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google.

Langsung saja pada langkah-langkah pembuatan breadchumb ini : :

  • Seperti biasa anda harus login ke Blogger.
  • Langsung tuju Edit HTML.
  • Klik Expand Template Widget.
  • Letakkan kode berikut ini tepat sebelum  kode ]]></b:skin>
    .breadcrumbs{
    padding:5px 5px 5px 0;
    margin:0;font-size:95%;
    line-height:1.4em;
    border-bottom:4px double #cadaef}
  • Setelah itu, cari kode seperti ini :
    <div class='post hentry'>
  • Letakkan kode berikut ini tepat setelah kode <div class='post hentry'>
    <b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>
    Simpan Template.

Itu dulu teman-teman penjelasan dari saya, waktu sudah menunjukkan jam 23.41 menit WIB, jadi udah waktunya tidur nih. Besok saya akan lanjutkan kembali dengan tutorial yang lain.

sumber : maskolis.com
1 comments

Membuat Recent Post Berdasarkan Kategori


Sebuah blog belum lengkap jika belum ada widget recent post di sidebar. Seperti kita ketahui recent post berfungsi untuk menampilkan postingan terbaru di blog. Dengan memasang Recent posts di blog maka pengunjung dapat dengan cepat mengetahui topik apa yang sedang dibahas di blog kita. Pada postingan sebelumnya saya sudah pernah membahas tentang cara membuat recent post thumbnail + spy. Kali ini saya akan memberikan tutorial membuat recent post berdasar kategori. Sebenarnya tidak ada yang istimewa di widget ini. Sama seperti Recent Post pada umumnya, widget ini menampilkan beberapa post di blog kita yang bisa pengunjung sortir berdasar kategori.
recent post

Gambar diatas adalah contoh widget recent post berdasarkan kategori. Jika teman-teman ingin melihat contoh widget ini bisa dilihat di sidebar blog ini. Baiklah kita langsung aja ke cara pasangnya:
  1. Masuk ke blogger dengan akun anda.
  2. Kemudian pilih halaman tata letak (Layout)
  3. Pilih elemen laman >> pilih add a gadget (tambah gadget)
  4. Kemudian pilih HTML/Javascript
  5. Copy paste code di bawah ini
    <div style="overflow:auto;width:100%px;height:300px;padding:10px;border:1px solid #000000">
    <span id="pbl_labels"></span>
    <div id="pbl_posts"> Recent Posts </div>
    <script type="text/javascript">
    var jumlah_maksimum_post = 10;
    var dengan_ringkasan = true;
    var jumlah_karakter_ringkasan = 100;
    </script>
    <script src="https://masolis-javascript.googlecode.com/svn/trunk/recent-post.js">
    </script>
    <script src="http://alamat.bloganda.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed">
    </script></div>
    Keterangan :
    -  Ganti huruf yang warna merah dengan alamat blog anda
    -  var jumlah_maksimum_post = 10 adalah jumlah maksimum post yang ingin ditampilkan
    -  var dengan_ringkasan = true ganti "true" dengan "false" jika tidak mau disertai ringkasan
    -  var jumlah_karakter_ringkasan = 100 adalah jumlah karakter ringkasan post Anda
  6. Terakhir yang mesti anda lakukan adalah simpan atau save
Sangat mudah bukan? Anda tinggal menambahkan gadget, masukkan kodenya tanpa harus edit HTML. Demikian tadi tutorial cara membuat recent post berdasarkan kategori, jika ada kesulitan jangkan sungkan untuk mengisi kotak komentar yang ada dibawah. Selamat mencoba dan semoga bermanfaat.
0 comments

membuat breaking news


Pada artikel kali ini saya akan menjelaskan bagaimana membuat breaking news atau berita berjalan yang biasanya terdapat di bawah navigasi menu pada sebuah blog atau biasa disebut newsticker. Banyak sudah artikel yang membahas mengenai newsticker ini di internet, misalnya dengan menambah efek marquee sehingga teks tersebut dapat berjalan, tapi kali ini saya akan menjelaskan cara memasang breking news dengan sentuhan jQuery sehingga hasilnya akan lebih menarik dan yang pasti dapat mempercatik blog anda.

news ticker maskolis

Pertama kali saya melihat tampilan breaking news ini pada template Sporty Magazine 2 buatan Borneo Template, waktu itu template masih berbayar sekarang sepertinya sudah gratis di download. Disini saya akan memodifikasi sedikit tampilannya sehingga tampilannya seperti tampak pada gambar diatas, demonya anda bisa lihat disini. (http://martin-big.blogspot.com)

Ternyata cara memasangnya sangat gampang sekali, dan jika Anda tertarik berikut ini langkah-langkah untuk membuatnya :
  1. Login ke blogger dengan akun anda
  2. Kemudian klik Tata Letak > pilih Edit HTML
  3. Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
  4. Letakkan kode berikut di atas kode ]]></b:skin>
    1. /* News Ticker Wrapper 
    2. ---------------------------------------------*/  
    3. .newspic {background:#000 url(http://4.bp.blogspot.com/-vqHATrTDsY8/TvguMe2lBTI/AAAAAAAAEUk/L8UwRygGp9s/s1600/news.gif) no-repeat top left;width:970px;margin:0 auto;padding:0 auto;height:32px;color:#fff;}  
    4. .news {width970px;margin:0 auto;padding:0 auto;line-height1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}  
    5. .news a:link, .news a:visited{color:#fff;text-decoration:none;}  
    6. .news a:hover {color:#ddd;text-decoration:underline;}  
  5. Masih dalam dalam posisi Edit HTML. Sekarang letakkan kode berikut ini di atas kode </head>
    <script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'></script>
    <script type='text/javascript'>
    //<![CDATA[
    var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};

    var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
    //]]>
    </script>
    <style type='text/css'>
    .titlefield{ /*CSS for RSS title link in general*/
    text-decoration: none;}
    .labelfield{ /*CSS for label field in general*/
    color:#aaa;font-size: 100%;}
    .datefield{ /*CSS for date field in general*/
    color:#aaa;font:normal 14px Arial;text-transform:none;}
    #example1{ /*Demo 1 main container*/
    width: 780px;
    height: 14px;
    border: 0px solid #aaa;
    padding: 0px;
    font:bold 16px Arial;
    text-transform:none;
    text-align:left;
    background-color:transparent;}
    code{ /*CSS for insructions*/
    color: #fff;}
    #example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}
    #example1 a:hover {color:#C8D3F2;text-decoration:none;}
    </style>
  6. Kemudian cari kode dibawah ini, atau kode yang biasa dipakai untuk meletakkan navigasi menu
    <div class='menu horizontal'>
    ...........................................
    ...........................................
    </div>
  7. Jika sudah ketemu letakkan kode berikut tepat dibawah kode </div> yang dipakai untuk menutup kode navigasi menu pada template Anda.
    <div class='newspic'>

    <div style='float:left;width:780px;padding:6px 0 6px 180px; position:relative; overflow:hidden;'>
    <script type='text/javascript'>
    var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
    cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://maskolis.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
    cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
    cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
    cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
    cssfeed.entries_per_page(1)
    cssfeed.init()
    </script>
    </div>
    <div style='clear:both;'/>
    </div>
  8. Ganti URL yang saya beri warna merah dengan URL blog anda dan jika blog anda masih baru newsticker ini biasanya tidak mau jalan karena google belum mengenal feed di blog Anda. Solusinya gampang Anda mesti buat API key sendiri di googlecode, atau langsung saja disini. Masukkan URL blog anda, kemudian ganti kode javascript paling atas pada langkah nomer 5 dengan kode yang barusan dapet dari googlecode (bener nggak sih ngomongku...... )
  9. Langkah terakhir save/simpan, lihat dibawah navigasi menu anda, kalau cara memasangnya sudah benar pasti akan muncul breaking news itu.
Agar lebih ramping simpan kode javascript newsticker diatas (no.5) di tempat penyimpanan googlecodeAnda. Mudah kan? Jika ada yang mau ditanyakan silahkan isi pada kolom komentar dibawah. 
Selamat mencoba dan semoga bermanfaat.

sumber : maskolis.com
0 comments

Widget label Cloud Unik Dan Elegant



Widget label cloud biasanya hanya menggunakan label biasa dan tidak menarik untuk diklik pengunjung, oleh karena itu pemakaian widget yang unik dan elegan dapat menarik perhatian pengunjung untuk mengklik dan melihat isi label tersebut. Dan kali ini saya menerangkan cara mengubah widget label agar menjadi unik dan elegan untuk dipasang pada blog kita.
Mari Kita simak cara mengubah widget label Cloud Unik Dan Elegan dibawah ini :

  • Silahkan masuk ke dasbor blog anda
  • Kemudian Pilih Template >> Edit HTML >> Prooced
  • Setelah jendela Edit HTML Terbuka silahkan anda cari kode berikut : 
]]></b:skin>
  • Setelah ketemu silahkan Copy Kode berikut ini dan letakkan tepat diatas kode ]]></b:skin>.
/*-----Widget by www.echo-pitulas.blogspot.com----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}
.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out; 
-o-transition: all 0.5s ease-out; 
-webkit-transition: all 0.5s ease-out; 
-ms-transition: all 0.5s ease-out; 
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg); 
-o-transform: rotate(7deg); 
-webkit-transform: rotate(7deg); 
-ms-transform: rotate(7deg); 
transform: rotate(7deg); 
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1; 
}
.label-size a  {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover  {
text-decoration: none; 
  • Setelah kode diatas terpasang simpan pengaturan anda kemudian keluar/close dari edit HTML
  • Kemudian masuk ke layout >> Add Gadget >> Label
  • Pilih seperti dibawah ini dan save pengaturan label.
 

    • Kemudian atur letak tag cloud sesuai template anda.
    • Terakhir simapan semua perubahan, dan chek hasilnya.
    NB :
    Jika Sahabat blogger ingin mengubah warna kotaknya agar sesuai dengan warna template sahabat silahkan ganti kodeyang berwarna merah dengan kode warna yang sesuai dengan warna template blog sahabat.


    0 comments

    Semua Link terbuka di tab baru

    Kali ini saya men-share-kan pengamalan saya dalam mengutak-atik blog agar bisa dinikmati dengan nyaman dan optimal serta bermanfat untuk semua orang. Dan kali ini tentangCara Membuat Link Tab terbuka Otomatis ketika Tab yang tebuka diklik tanpa menutup tab yang sebelumnya atau bahasa kerennya Otomatic Open New Tab with One Click.

    Dengan cara ini tampilan tab awal tidak tertutup dengan tampilan baru ketika kita ingin mendalami atau ingin lebih mengetahui lebih jauh lagi suatu blog atau website. Menurut saya nih, ini jadi lebih seru karena bila kita ingin balik ke halaman semula, kita tidak berlu mengklik perintah undo atau meng-klik menu yang dituju.tapi tinggal menutup tab yang terbaru muncul tadi. Dan kita tinggal melihat tab yang terdahulu kita buka.

    Wah, ribet rasanya nih. Lebih baik sohib tinggal praktekkan saja dengan mengklik suatu menu di Blog Pandawa Lima ini agar lebih jelas. Dan menurut saya lagi nih, ini sedikit menghemat bandwicth atau pulsa. Semoga demikian ya. Dan semoga ini bisa menambah khazanah Ilmu Pengetahuan dan bermanfaat buat semua orang terutama sohib Pandawa Lima. Walaupun postingan seperti ini sudah banyak bila sobib mencarinya dim internet dengan mesin pencari seperti Google.

    Nah, jika sohib berminat, silahkan ikuti arahannyasebagai berikut :
    • Buka menu desain/design pada blog Sohib
    • Pilih menu EDIT HTML
    • Centang Expand Template Widget
    • Cari kode <head>
    • Kalau sudah Ketemu Copy kode ini : <base target='_blank'/>
    • Lalu taruh kode tersebut di bawah kode <head>
    • Setelah itu, klik Partinjau. Ini berguna untuk mengetahui apakah kode script terebut sukses atau error/bermasalah.
    • lalu save
    Nah, Untuk mengujinya berhasil atau tidak, silahkan buka situs sohib. Yaitu, setiap dibuka atau diklik semua link di blog sohib sudah otomatis membuka tab baru atau otomatis semua link di blog sohib open new link tab.

    Semoga bermanfaat ya...
    0 comments

    Cara membagi gadget menjadi dua kolom

    Cara membagi gadget menjadi dua kolom | Ada kalanya ketika kita sudah merasa pas dengan template yang kita pilih, ternyata kita masih saja merasa ada yang masih kurang dengan tampilan blog kita.Tapi memang betul...., setiap template memiliki kelebihan dan kekurangannya masing - masing. Mungkin dari segi konten sudah bagus tapi tampilan warna kurang pas, dari segi tampilan dan konten sudah serasi tapi karena sudah padat, mungkin kita masih butuh ruang lagi. Lalu bagai mana....?

    OK..., seperti yang dirasakan oleh salah satu sobat blogger dan atas permintaannya mungkin trik membagi gadget sidebar menjadi dua kolom akan membantu mengurangi masalah diatas. Untuk itu kali ini akan saya jelaskan lagi cara membagi gadget sidebar menjadi dua kolom, seperti pada gambar berikut :



    Tapi yang jelas trik yang saya berikan ini digunakan untuk membagi gadget menjadi dua kolom. Baik gadget yang ada pada bagian Sidebar (bagian samping), header (atas), maupun footer (bawah).

    Bila anda berminat silahkan anda ikuti langkah - langkah dibawah ini :

    1. Login ke blogger dengan ID anda.
    2. Klik Rancangan.
    3. Dan KLik tab Edit HTML.

    4. Cari kode di bawah ini atau yang mirip dengan kode ini :
    ]]></b:skin>
    5. Copy kode di bawah ini dan taruh tepat sebelum kode ]]></b:skin> :
    #kolom-kiri {width: 49%;float: left;}#kolom-kanan {width: 49%;float: right;}
    6. Cari kode pada bagian sidebar, misalnya seperti kode berikut :
    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'><b:widget id='Label99' locked='false' title='Labels' type='Label'/> </b:section>
    </div>
    Catatan:
    Pada bagian sidebar, setiap template belum tentu memiliki "id" yang sama. Dan pada langkah ini, saya berikan contoh dengan id='sidebar-wrapper'.

    Tapi yang jelas... seperti yang saya katakan diatas, trik yang saya berikan ini digunakan untuk membagi gadget menjadi dua kolom. Baik gadget yang ada pada bagian Sidebar (bagian samping), header (atas), maupun footer (bawah).

    Dan yang perlu diperhatikan adalah bentuk kode dari konten yang berisi gadget, yaitu seperti berikut :
    <div id=' .......... '>
    <b:section class='sidebar' id='sidebar' preferred='yes'><b:widget id='HTML' locked='false' title='' type='HTML'/> </b:section>
    </div>
    7. Sisipkan kode dibawah ini diantara </b:section> dan </div> :
    <b:section class='sidebar' id='kolom-kiri' showaddelement='yes'>
    <b:widget id='Text500' locked='false' title='kolom-kiri' type='Text'/>
    </b:section>
    <b:section class='sidebar' id='kolom-kanan' showaddelement='yes'>
    <b:widget id='Text501' locked='false' title='kolom-kanan' type='Text'/>
    </b:section>
    <div style="clear: both;"></div>
    Sehingga tampak seperti berikut :
    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'><b:widget id='Label99' locked='false' title='Labels' type='Label'/> </b:section>
    <b:section class='sidebar' id='kolom-kiri' showaddelement='yes'>
    <b:widget id='Text500' locked='false' title='kolom-kiri' type='Text'/>
    </b:section>
    <b:section class='sidebar' id='kolom-kanan' showaddelement='yes'>
    <b:widget id='Text501' locked='false' title='kolom-kanan' type='Text'/>
    </b:section>
    <div style="clear: both;"></div>

    </div>
    8. SIMPAN TEMPLATE

    Selesai...., silahkan anda lihat hasilnya....
    Selamat mencoba dan Semoga bermanfaat....


    0 comments

    Modifikasi Popular Post untuk Template Gallery


    Saya akan mengulas satu persatu fitur yang ada pada template demo sebelum nanti saya bagikan, sehingga diharapkan Anda dapat menciptakan atau membuat template sendiri dengan modifikasi widget default yang yang sudah disediakan oleh blogger. Widget dari blogger yang saya modifikasi kali ini adalah Popular Post, sebuah widget yang berfungsi untuk menampilkan postingan atau artikel mana yang paling banyak diminati para pengunjung. Secara default widget Popular Post ini sudah menarik karena sudah ada fitur thumbnail dan summary. Tapi menurut saya sih kondisional, widget itu bisa langsung dipasang pada blog yang lebih banyak menggunakan artikel daripada gambar, jika widget default itu dipasang pada blog yang bertipe gallery sepertinya kurang cocok.

    popular


    Nah, kali ini saya mencoba untuk memodifikasi widget tersebut agar cocok dipasang pada blog yang mempunyai konten gallery. Gambarnya seperti diatas, hanya menampilkan thumbnail dan judul dengan posisi horisontal. Jika anda tertarik, berikut ini cara membuatnya :
    1. Login ke Blogger dengan akun Anda
    2. Setelah itu masuk ke template >> klik Edit HTML jangan lupa centang Expand Widget Templates.
    3. Lalu masukkan kode berikut ini diatas ]]></b:skin> :
      .PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}
      .PopularPosts ul{padding:5px 0}
      .PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}
      .PopularPosts .item-content{position:relative;float:left;margin:0}
      .PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}
      .PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}
      .PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}
      .PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}
      Kode warna merah diatas adalah panjang dan lebar gambar thumbnail, Anda bisa ganti dan sesuaikan dengan lebar sidebar pada template, seperti yang terlihat pada sidebar blog ini.
    4. Kemudian masuk ke layout >> add a gadget pilih Popular Post pada baris kelima.
    5. Setelah muncul halaman Popular Post, setting seperti pada gambar dibawah ini :

      popular

      Yang perlu diperhatikan adalah centang hanya thumbnail, biarkan kotak snippet kosong tidak perlu dicentang. Judul dan jumlah post yang ingin ditampilkan terserah Anda.
    6. Setelah langkah diatas, masuk lagi ke Edit HTML (centang Expand Widget Templates), cari kode berikut :
      <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
      <b:includable id='main'>
        <b:if cond='data:title'><h2><data:title/></h2></b:if>
        <div class='widget-content popular-posts'>
          <ul>
            <b:loop values='data:posts' var='post'>
            <li>
              <b:if cond='data:showThumbnails == &quot;false&quot;'>
                <b:if cond='data:showSnippets == &quot;false&quot;'>
                  <!-- (1) No snippet/thumbnail -->
                  <a expr:href='data:post.href'><data:post.title/></a>
                <b:else/>
                  <!-- (2) Show only snippets -->
                  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                  <div class='item-snippet'><data:post.snippet/></div>
                </b:if>
              <b:else/>
                <b:if cond='data:showSnippets == &quot;false&quot;'>
                  <!-- (3) Show only thumbnails -->
                  <div class='item-thumbnail-only'>
                    <b:if cond='data:post.thumbnail'>
                      <div class='item-thumbnail'>
                        <a expr:href='data:post.href' target='_blank'>
                          <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                        </a>
                      </div>
                    </b:if>
                    <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                  </div>
                  <div style='clear: both;'/>
                <b:else/>
                  <!-- (4) Show snippets and thumbnails -->
                  <div class='item-content'>
                    <b:if cond='data:post.thumbnail'>
                      <div class='item-thumbnail'>
                        <a expr:href='data:post.href' target='_blank'>
                          <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                        </a>
                      </div>
                    </b:if>
                    <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                    <div class='item-snippet'><data:post.snippet/></div>
                  </div>
                  <div style='clear: both;'/>
                </b:if>
              </b:if>
            </li>
            </b:loop>
          </ul>
          <b:include name='quickedit'/>
        </div>
      </b:includable>
      </b:widget>
    7. Setelah ketemu, ganti dengan kode berikut ini :

      <b:widget id='PopularPosts1' locked='false' title='Most Product View' type='PopularPosts'>
      <b:includable id='main'>
        <b:if cond='data:title'><h2><data:title/></h2></b:if>
        <div class='widget-content popular-posts'>
          <ul>
            <b:loop values='data:posts' var='post'>
            <li>
              <b:if cond='data:showThumbnails == &quot;false&quot;'>
                <b:if cond='data:showSnippets == &quot;false&quot;'>
                  <!-- (1) No snippet/thumbnail -->
                  <a expr:href='data:post.href'><data:post.title/></a>
                <b:else/>
                  <!-- (2) Show only snippets -->
                  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                  <div class='item-snippet'><data:post.snippet/></div>
                </b:if>
              <b:else/>
                <b:if cond='data:showSnippets == &quot;false&quot;'>
                  <!-- (3) Show only thumbnails -->
                  <div class='item-content'>
                    <b:if cond='data:post.thumbnail'>
                      <div class='item-thumbnail'>
                        <a expr:href='data:post.href' target='_blank'>
                          <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                        </a>
                      </div>
                    </b:if>
                    <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                  </div>
                  <div style='clear: both;'/>
                <b:else/>
                  <!-- (4) Show snippets and thumbnails -->
                  <div class='item-content'>
                    <b:if cond='data:post.thumbnail'>
                      <div class='item-thumbnail'>
                        <a expr:href='data:post.href' target='_blank'>
                          <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                        </a>
                      </div>
                    </b:if>
                    <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                    <div class='item-snippet'><data:post.snippet/></div>
                  </div>
                  <div style='clear: both;'/>
                </b:if>
              </b:if>
            </li>
            </b:loop>
          </ul>
          <b:include name='quickedit'/>
        </div>
      </b:includable>
      </b:widget>
    8. Terakhir, save templates lihat hasilnya.
    Modifikasi widget Popular Post dari blogger ini tidak hanya untuk blog gallery saja, Anda juga bisa memakainya pada blog yang bukan gallery seperti yang terlihat di sidebar pada blog ini. Demikian tadi tutorial memodifikasi tampilan Popular Post untuk template Gallery jika masih ada yang kurang paham silahkan tinggalkan pesan di kotak komentar maaf kalau sudah ada tutorial seperti ini sebelumnya, selamat mencoba dan semoga bermanfaat

    sumber : http://www.maskolis.com/2012/05/modifikasi-popular-post-untuk-template.html
    0 comments

    Widget Slide Panel dengan JQuery dan CSS3


    widget slide panel
    Ini adalah widget yang sederhana, namun cukup efektif untuk sekedar meringkas bagian-bagian yang biasanya dianggap terlalu panjang atau terlalu lebar. Kamu bisa menggunakan widget ini untuk meletakkan foto, video, daftar teman atau apapun, yang menurutmu terasa sedikit mengganggu penampilan.
    Pertama-tama masuklah ke halaman tata letak widget kemudian tambahkan sebuah elemen halaman HTML/JavaScript. Salin kode di bawah ini, kemudian letakkan di dalam formulirnya:
    <style type="text/css">
    /*
    Juli 2011 :: Taufik Nurrohman
    Visit: http://hompimpaalaihumgambreng.blogspot.com
    */
    #paneltovik {display:block}
    
    #panel {
      background-color:#96BC43;
      border:2px solid #a7cc54;
      border-width:2px 2px 0 2px;
      height:250px;
      overflow:auto;
      margin:0;
      padding:10px;
      color:#111;
      font:normal 12px Times,Serif;
      -webkit-box-shadow:inset 0 0 7px #222;
      -moz-box-shadow:inset 0 0 7px #222;
      box-shadow:inset 0 0 7px #222;
      display:none;
    }
    
    .tombolpanel {
      position:relative;
      cursor:pointer;
      text-shadow:1px 1px 2px #000;
      padding:7px 15px;
      background-color:#333;
      border-top:3px solid #a7cc54;
      color:#e5e5e5;
      text-align:center;
      font:bold 14px Times,Sans-Serif;
      font-style:italic;
      -webkit-box-shadow:0 -1px 2px #222;
      -moz-box-shadow:0 -1px 2px #222;
      box-shadow:0 -1px 2px #222;
      -webkit-border-radius:0 0 14px 14px;
      -moz-border-radius:0 0 14px 14px;
      border-radius:0 0 14px 14px;
    }
    
    .tombolpanel:hover {color:#ccc}
    
    .tombolpanel:after {
      content:'';
      position:absolute;
      top:100%;
      margin-top:-10px;
      left:5%;
      width:0;
      height:0;
      display:block;
      border-width:20px;
      border-style:solid;
      border-color:#333 #333 transparent #333;
    }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('.tombolpanel').click(function() {
            $('#panel').slideToggle('slow');
            $('.tombolpanel span.in').toggle();
        });
    });
    </script>
    <div id="paneltovik">
      <div id="panel">
    
        ... KONTEN DI SINI ...
    
      </div>
      <div class="tombolpanel">
        <span class="in">Buka Panel</span>
        <span class="in" style="display:none;">Tutup Panel</span>
      </div>
    </div>
    Kode yang Saya beri garis bawah adalah JQuery. Sebelum menambahkan widget ini sebaiknya periksa dulu isi templatemu. Jika templatemu sudah dilengkapi dengan JQuery, buang kode tersebut dari widget.
    Klik Simpan dan lihat hasilnya:
    sumber : http://www.dte.web.id
    0 comments
     
    Support : Creating Website | Johny Template | Mas Template
    Copyright © 2011. Kang Pri Kepoh - All Rights Reserved
    Template Created by Creating Website Published by Mas Template
    Proudly powered by Blogger