Firman Webs

Home All post

Post Snippet Pengganti Script Auto Readmore Blogger

Monday, 20 January 2014

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8xE1RsfzIRKdYHUCGdiINJ3be4D98slUZ60-GDFYEDNhv7eg1scPP_RFzoBdffuCZBlitubm8v8Zw5Nx04zbwefL0Te3z76wKG3mCR6aE1bvC2EnjHZduslfyFpbDRWj3TWvfJ9NpY4/s1600/post-snippet.gif" class="center"><img alt="Post Snippet Pengganti Script Auto Readmore Blogger" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8xE1RsfzIRKdYHUCGdiINJ3be4D98slUZ60-GDFYEDNhv7eg1scPP_RFzoBdffuCZBlitubm8v8Zw5Nx04zbwefL0Te3z76wKG3mCR6aE1bvC2EnjHZduslfyFpbDRWj3TWvfJ9NpY4/s1600/post-snippet.gif" title="Post Snippet Pengganti Script Auto Readmore Blogger" width="550" /></a>Post Snippet Pengganti Script Auto Readmore Blogger – banyak metode untuk memotong teks artikel yang ditampilkan pada homepage. Cara yang paling banyak digunakan dan popupler adalah menggunakan script auto read more, namun ada juga yang masih menggunakan cara manual dengan metode jump break yang disediakan pihak blogger pada area posting mode Compose dan tag <code></code> pada posting mode HTML. Alternatife lain yang akan saya bahas pada tutorial ini adalah menggunakan metode <code>data:post.snippet</code> untuk memotong post artikel dan <code>data:post.thumbnailUrl</code> untuk memanggil gambar dari post tersebut. Cara ini menurut saya lebih simple karena tidak memerlukan javascript untuk memotong artikel secara otomatis. Namun setiap metode pasti memiliki kelemahan masing-masing, begitu pula dengan cara ini. Jika suatu post tidak memiliki thumbnail maka jumlah karakter yang akan ditampilkan adalah 140 karakter dan jika post yang memiliki thumbnail maka karakter yang ditampilkan adalah 100 karakter. Entah bagaimana untuk mengubah dan menentukan jumlah batasan karakter tersebut saya sendiri masih mencari tahu akan hal ini. Untuk penerapannya kedalam template, sebagai patokan saya menggunakan default template blogger agar lebih mudah dan bisa dimengerti. Untuk yang sudah menggunakan script auto read more bisa menyesuaikan. Langkahnya cari kode <code><b:includable id='post' var='post'></code> maka dibawahnya akan terdapat dua kode <code><data:post.body/></code>, kemudian replace kode <code><data:post.body/></code> yang kedua dengan kode berikut ini:<pre><data:post.body/> <b:else/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <data:post.body/> <b:else/> <b:if cond='data:post.hasJumpLink'> <data:post.body/> <b:else/> <b:if cond='data:post.snippet'> <b:if cond='data:post.thumbnailUrl'> <div class='thumb'> <a expr:href='data:post.url' expr:title='data:post.title' expr:alt='data:post.title'><img expr:src='data:post.thumbnailUrl'/></a> </div> <b:else/> <div class='thumb'> <a expr:href='data:post.url' expr:title='data:post.title' expr:alt='data:post.title'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyPod3GKxBs188Z2Y_RvvHGsXXV2yrGGt8THbUXGX_fts5jOZOc1ZC7hKxOoK6AKRkVzXSnvc-nnlu1mAWG_HjyyEvmYYbicFpWhAu9kvNTWQL3fGqjXLvT0MbFc_UlftQ5Xn7RxOY0VY/h120/no-image.jpg'/></a> </div> </b:if> <data:post.snippet/> <div class='jump-link'> <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a> </div> <b:else/> <data:post.body/> </b:if> </b:if> </b:if> </b:if></pre>Untuk mengatur tampilannya anda bisa menambahkan kode CSS seperti dibawah ini dan taruh di atas kode <code>]]></b:skin></code> <pre>.thumb img{float:left;margin-right:10px;width:72px;height:72px} .jump-link{display:inline;float:right;padding:5px;background:#ddd;margin-top:20px}</pre>Diatas hanya dasarnya, untuk merubah tampilan lebih lanjut atur pada bagian CSS dengan penambahan background, border, dll agar lebih sesuai dengan yang di inginkan.

Post Snippet Pengganti Script Auto Readmore Blogger – banyak metode untuk memotong teks artikel yang…

Cara Membuat Widget Recent Post By Tag Label

Friday, 17 January 2014

<a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvWA0F7dVFoUKhu9T-41h_SpaEbRfLfxkutbfWBMvpENtTeU9k5ZTosLgWxGIbf1048rAlu_PW0pTph9Bj11lfomyNbaAPg5D697gZmEqFnFwETxEbsap36Fo3JzJIf6LwcA3zBI1KkgQ/s1600/Recent-Post-By-Tag-Label.gif"><img alt="Cara Membuat Widget Recent Post By Tag Label" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvWA0F7dVFoUKhu9T-41h_SpaEbRfLfxkutbfWBMvpENtTeU9k5ZTosLgWxGIbf1048rAlu_PW0pTph9Bj11lfomyNbaAPg5D697gZmEqFnFwETxEbsap36Fo3JzJIf6LwcA3zBI1KkgQ/s550/Recent-Post-By-Tag-Label.gif" title="Cara Membuat Widget Recent Post By Tag Label" width="550" /></a>Cara Membuat Widget Recent Post By Tag Label – maksud dari widget ini adalah untuk menampilkan daftar posting terbaru berdasarkan masing-masing label. Widget ini biasanya digunakan pada template magazine untuk menampilkan artikel-artikel terbaru pada post homepage berdasarkan label yang digunakan, atau bisa juga untuk diterapkan pada sidebar untuk menampilkan recent post berdasarkan label tertentu. Bahkan bisa juga digunakan untuk menampilkan daftar posting terakhir yang di publish layaknya seperti recent post biasa atau yang umum digunakan, semua tergantung dari pengaturan untuk kebutuhan seperlunya dari blog tersebut. Untuk yang masih bingung penerapannya, berikut uraian tutorialnya untuk memasang widget recent post by tag label baik itu pada sidebar maupun di bagian bawah list post homepage. 1. Pertama, copy kode berikut ini lalu taruh di atas kode <code></head></code> <pre><script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){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)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/>';summ=summary_img}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}function labelthumbs(json){document.write('<ul class="taglabel">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href}if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}var thumburl;try{thumburl=entry.media$thumbnail.url}catch(error){s=entry.content.$t;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!="")){thumburl=d}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKhedygQ_B4FZpYAvzzDh_zRsAmEtVk1Tn4wKQA9cWkASWphjldYOYyYhq9PdzFUKYO3POWghcSyHJ0KzRlRcwZ2PvS-khC1jMfpWAfi_2OvheoTWmV-kFGlAQE34azrum1l7O6h1t1P5/'}var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)document.write('<a href="'+posturl+'"><img alt="'+posttitle+'" title="'+posttitle+'" class="label_thumb" src="'+thumburl+'"/></a>');document.write('<a href="'+posturl+'" title="'+posttitle+'">'+posttitle+'</a> ');if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('')}else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('')}}var towrite='';var flag=0;document.write(' ');if(showpostdate==true){towrite=towrite+cdday+'-'+monthnames[parseInt(cdmonth,10)]+'-'+cdyear;flag=1}if(showcommentnum==true){if(flag==1){towrite=towrite+' | '}if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext=''+commenttext+'';towrite=towrite+commenttext;flag=1}if(displaymore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" title="'+posttitle+'">More »</a>';flag=1}document.write(towrite);document.write('</li>');if(displayseparator==true)if(i!=(numposts-1))document.write('')}document.write('</ul>')} //]]> </script></pre>2. Kemudian copy lagi kode berikut ini dan taruh di atas kode <code>]]></b:skin></code> <pre>img.label_thumb{float:left;border:1px solid #aaa;margin-right:5px;height:55px;width:55px;padding:5px} .taglabel{float:left;width:100%;padding:0;margin:0} ul.taglabel li{padding:5px 0;min-height:73px}</pre>3. Selanjutnya pasang kode berikut ini pada Widget HTML/Javascript. <pre><script type='text/javascript'>     var numposts = 5; // Jumlah Post yang di tampilkan     var showpostthumbnails = true; // Ganti "false" untuk tidak menampilkan [Thumbnail]     var displaymore = false; // Ganti "true" untuk menampilkan link [More]     var displayseparator = false;     var showcommentnum = false; // Ganti "true" untuk menampilkan [Komentar]     var showpostdate = false; // Ganti "true" untuk menampilkan [Tanggal]     var showpostsummary = true; // Ganti "false" untuk tidak menampilkan [Deskripsi Post]     var numchars = 60; // Character Deskripsi yang di tampilkan </script> <script type="text/javascript" src="/feeds/posts/default/-/NAMA_LABEL?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script></pre><blockquote class="atas">Perhatikan pada baris ini:<pre> <script type="text/javascript" src="/feeds/posts/default/-/NAMA_LABEL?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script></pre>Apabila ingin merubah recent post menjadi default(tidak berdasarkan sebuah label), ganti baris kode tersebut dengan kode berikut ini:<pre> <script type="text/javascript" src="/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script></pre></blockquote>Jika ingin memasang di bagian bawah post homepage namun belum terdapat elemen kolom widget, maka buat terlebih dahulu kolom widget untuk tempat penyimpanan kode, langkah-langkah membuatnya seperti berikut ini. Agar lebih simple maka saya bagi menjadi 2 kolom widget yang sejajar atau berdampingan dan 1 kolom widget dibawahnya. Untuk CSSnya sama seperti tadi, taruh diatas <code>]]></b:skin></code> <pre>#label-left .widget ul,#label-right .widget ul,#label-bottom .widget ul{margin-top:-10px!important} #label-left .widget,#label-right .widget,#label-bottom .widget{position:relative;display:block;border:1px solid #aaa;float:left;padding:1%} #label-left .widget,#label-right .widget{width:47%} #label-bottom .widget{width:97.3%} #label-left .widget li,#label-right .widget li,#label-bottom .widget li{font-family:Electrolize,sans-serif!important} #label-left h2,#label-right h2,#label-bottom h2{border-bottom:2px solid #63C4F1;background:#111;font:bold 18px Electrolize,sans-serif;color:#63C4F1;position:relative;display:block;top:-17px;right:-7px;padding:5px} #label-left .widget{margin-right:5px} #label-bottom .widget{margin-top:20px} #label-left h2:before,#label-right h2:before,#label-bottom h2:before{content:&#39;&#39;;position:absolute;top:0;left:-12px;width:0;height:0;border-color:transparent transparent #111;border-style:solid;border-width:0 0 10px 12px} #label-left .widget ul,#label-right .widget ul,#label-bottom .widget ul{list-style:none;margin:0;padding:0} #label-left .widget ul li,#label-right .widget ul li,#label-bottom .widget ul li{font-size:13px;font-family:Oswald,sans-serif;border-bottom:1px solid #aaa;margin:0 auto;padding:5px} #label-left .widget li:last-child,#label-right .widget li:last-child,#label-bottom .widget li:last-child{border-bottom:none}</pre><blockquote class="atas">Perhatikan pada baris ini jika ingin menyesuikan lebar widget <pre>#label-left .widget,#label-right .widget{width:47%} #label-bottom .widget{width:97.3%}</pre></blockquote>Selanjutnya cari kode berikut ini: <pre><b:section class='main' id='main' showaddelement='no'> ....................bla bla bla................... </b:section></pre>Jika di lihat secara keseluruhan tampilan lengkapnya struktur kode tersebut seperti dibawah ini: <a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_WSY-t7pR2nFcZYRVa9ev-SpL_ry8xusOiEbDCzF40U-AOAgAqcIT2jISi1F8wek1cC5oOdCi8aWI4bgz-bhqAE4e_AqXlqCwEBey1siD5CHb0p1Xmh36m37uI0jN-BsTZ_jHFJDMSzE/s1600/main-section.gif"><img alt="Cara Membuat Widget Recent Post By Tag Label" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_WSY-t7pR2nFcZYRVa9ev-SpL_ry8xusOiEbDCzF40U-AOAgAqcIT2jISi1F8wek1cC5oOdCi8aWI4bgz-bhqAE4e_AqXlqCwEBey1siD5CHb0p1Xmh36m37uI0jN-BsTZ_jHFJDMSzE/s640/main-section.gif" title="Cara Membuat Widget Recent Post By Tag Label" width="550"/></a>Perhatikan kode <code></b:section></code>, jika sudah ketemu copy kode berikut ini lalu paste tepat dibawahnya kode tersebut. <pre><b:if cond='data:blog.url == data:blog.homepageUrl'> <b:section class='label-left' id='label-left' preferred='yes'/> <b:section class='label-right' id='label-right' preferred='yes'/> <b:section class='label-bottom' id='label-bottom' preferred='yes'/> </b:if></pre>Sekarang lihat pada halaman tata letak blog, disitu sudah terdapat 3 elemen widget. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdyQTXoGAgeoQIcOlH-mg5PewqGaNdCqqCyJybnk4E3j30HWGB9UNDuKWFD3uClQ_IyFhuFnahFjIAhAKYQDT_i9h-3BX8hPwU13FzmyiA9-WgSzUe0-hhUKgSlFQtRsVgQnrMYvyzynE/s1600/widget-bawah-post.gif" class="center"><img alt="Cara Membuat Widget Recent Post By Tag Label" height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdyQTXoGAgeoQIcOlH-mg5PewqGaNdCqqCyJybnk4E3j30HWGB9UNDuKWFD3uClQ_IyFhuFnahFjIAhAKYQDT_i9h-3BX8hPwU13FzmyiA9-WgSzUe0-hhUKgSlFQtRsVgQnrMYvyzynE/s320/widget-bawah-post.gif" title="Cara Membuat Widget Recent Post By Tag Label" width="320" /></a>Selanjutnya tinggal pasang kode yang terdapat pada point 3 kedalam widget HTML/Javascript. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjod3rFWbkAOMS8kj60Ug4w7AcrelyACA7Gyn0l6ZlUQJXK4-CTQTxSIEedVVQNkY5YRHhJHWhIp_tVx0R9WicU0zpglOEnJOtcAhT-dIBtCFXu8Jnq9cJLDSxRcEjYgUQWJuLGUIpxM_8/s1600/tambah-widget-html.gif" class="center"><img alt="Cara Membuat Widget Recent Post By Tag Label" height="303" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjod3rFWbkAOMS8kj60Ug4w7AcrelyACA7Gyn0l6ZlUQJXK4-CTQTxSIEedVVQNkY5YRHhJHWhIp_tVx0R9WicU0zpglOEnJOtcAhT-dIBtCFXu8Jnq9cJLDSxRcEjYgUQWJuLGUIpxM_8/s320/tambah-widget-html.gif" title="Cara Membuat Widget Recent Post By Tag Label" width="320" /></a>Langkah terakhir Simpan dan selesai.

Cara Membuat Widget Recent Post By Tag Label – maksud dari widget ini adalah untuk menampilkan dafta…

Cara Memasang Auto Post Slider Carousel di Blog

Tuesday, 14 January 2014

<a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhyphenhyphenpXfZsisCS4ccb4BKkfk5pqmgFH8C2yPBMaXI6PcnysZlXZMs-pP5VSnM-ErqAJvlW9G_PZPNR2uhwgxIUKhdudoca6qa4_DmPKnj7CsUC8ZMKO55LeWGVTakZC6IYkTrpeL8yAkAhM/s1600/auto-post-slider-carousel.jpg"><img alt="Cara Memasang Auto Post Slider Carousel di Blog" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhyphenhyphenpXfZsisCS4ccb4BKkfk5pqmgFH8C2yPBMaXI6PcnysZlXZMs-pP5VSnM-ErqAJvlW9G_PZPNR2uhwgxIUKhdudoca6qa4_DmPKnj7CsUC8ZMKO55LeWGVTakZC6IYkTrpeL8yAkAhM/s520/auto-post-slider-carousel.jpg" title="Cara Memasang Auto Post Slider Carousel di Blog" width="520" /></a>Cara Memasang Auto Post Slider Carousel di Blog – terdapat berbagai macam jenis slider yang dapat kita terapkan ke dalam blog dan salah satunya adalah Slider Carousel. Slider Carousel merupakan slider yang sudah tiga kali saya terapkan ke dalam template blog yang beberapa waktu lalu saya bagikan. Pada tutorial ini akan saya bahas penerapan Slider Carousel ke dalam template agar sewaktu siapa saja bagi yang ingin menggunakan slider untuk memodifikasi template blognya supaya lebih mudah. Slider Carousel merupakan slider bergaya horisontal yang menampilkan thumbnail dari setiap posting secara otomatis yang dapat kita set agar menampilkan posting terbaru atau bisa juga post by tag label. Agar lebih jelasnya, berikut tutorial Cara Memasang Auto Post Slider Carousel di Blog. 1. Pada Dashboard blog masuk ke Edit HTML template. 2. Kemudian taruh kode berikut ini diatas kode <code></head></code> <pre><script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/Slider-Carousel.js'/></pre>3. Selanjutnya copy kode CSS berikut ini lalu taruh di atas kode <code>]]></b:skin></code> <pre>#featured-wrap{border-bottom:1px solid #000;box-shadow:0 1px 0 0 #333;background:#111;position:relative;height:175px;margin:0 auto} #featured{border:2px solid #444;outline:1px solid #000;position:relative;width:88%;height:150px;overflow:hidden;top:10px;margin:0 auto} #featured ul{width:9999px} #featured ul,#featured li{list-style:none;padding:0;margin:0;overflow:hidden} #featured li{width:150px;display:inline-block;float:left;height:150px;background:#222;border-left:1px solid #111;border-right:1px solid #333;} .thumb-featured{width:140px;height:100px;margin:5px auto;overflow:hidden;border:1px solid #000} .thumb-featured img{display:block;width:134px;height:94px;border:3px solid #444;} .title-featured{text-align:center;position:relative;margin-top:-20px} .title-featured h4{font-size:90%;max-height:45px;overflow:hidden} .arrow{position:absolute;display:block;background:#111 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC1i-5uOpnLzQMjhRe1xLY3B-2UyJWQWuy6Riug7VGGiwqhMzlJqhyphenhypheniHv7J5LJ5iNU79N5Wzfi2AevCEDJmRdMP1tf2LXoAfmzMJqB-PMIA-q4peWPZOjvVKT8nB66ADXELjFAuXuP4f4/h120/icon-sprite.png)no-repeat;background-position:0 50%;width:35px;height:60px;top:50px;text-indent:-9999px;border:1px solid #000;box-shadow:0 0 0 1px rgba(51, 51, 51, 1)inset} .arrow.back{background-position:0 50%;left:10px} .arrow.forward{background-position:100% 50%;right:10px} span.slideloading{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUe0SwgMIrq9NPtTeFN6Tz3ONCSVo1KvgbSZ4Pt6S4sbfdMR1-9Cnga4-69FbY97ysx8SSM8kD2HAlJrz9Cx1fbCX44dA0xKMQxEaHgxWCfIq8ddt73utRYorxEV9XfLqmh-GjMEIJrVc/h42/loading.gif);background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;margin:50px auto}</pre>4. Jika ingin membuat Slider Carousel tampil di bawah header seperti pada <a href="http://mas-andes.blogspot.com/2013/12/bluesforyou-blogger-template.html" target="_blank" title="Bluesforyou Blogger Template">template Bluesforyou</a> maka cari kode <code><div id='main-wrapper'></code> lalu taruh kode berikut ini tepat di atasnya. <pre><b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='featured-wrap'> <div id='featured'> Loading... </div> </div> </b:if></pre>Jika ingin membuat Slider Carousel tampil di atas footer seperti pada <a href="http://mas-andes.blogspot.com/2013/12/bluesmulus-blogger-template.html" target="_blank" title="Bluesmulus Blogger Template">template Bluesmulus</a> maka cari kode <code><div id='footer-wrapper'></code> lalu taruh kode yang ada pada point 4 tepat di atasnya. 5. Langkah terakhir Simpan template. Demikian akhir dari tutorial Cara Memasang Auto Post Slider Carousel di Blog, apabila ingin merubah tampilan slider maka ubah saja dan sesuaikan pada kode CSS.

Cara Memasang Auto Post Slider Carousel di Blog – terdapat berbagai macam jenis slider yang dapat ki…

List Icon Font Awesome dan CSS Value Content V4.0.3

Sunday, 29 December 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaxGbO8ABWT7XZFkSTHOVkJxQWSvySMMeEAeXLekR2aV5zZMFcwCbaFivdWgrBBYgcCf5SdU3HTr8aetTvhsZhIf0MvO9vSbODfsJN0P2l2G54Xd9qjWw6qAzkUWMIaq2fJbhnvotacXE/s1600/font-awesome.gif" class="center" ><img alt="List Icon Font Awesome dan CSS Value Content V4.0.3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaxGbO8ABWT7XZFkSTHOVkJxQWSvySMMeEAeXLekR2aV5zZMFcwCbaFivdWgrBBYgcCf5SdU3HTr8aetTvhsZhIf0MvO9vSbODfsJN0P2l2G54Xd9qjWw6qAzkUWMIaq2fJbhnvotacXE/s640/font-awesome.gif" title="List Icon Font Awesome dan CSS Value Content V4.0.3"/></a>List Icon Font Awesome dan CSS Value Content V4.0.3 sedikit mau berbagi setelah lama tidak menjamah dunia blogging dan mengupdate blog ini. Pada artikel ini bagi yang suka bermain main dengan desain blog maka pilihan tepat untuk menambah pernak-pernik pada elemen-elemen tertentu hingga sampai yang mendetail dengan menggunakan Font Awesome untuk melengkapi maupun mempercantik blog. Font Awesome versi 4.0.3 merupakan update dari versi sebelumnya, dan terdapat 11 icon baru pada Font Awesome V4.0.3 dan juga pembaharuan nama icon. Font Awesome merupakan font web yang mengagumkan dan mengandung semua ikon dari kerangka Twitter Bootstrap, dan sekarang lebih banyak lagi icon-icon lain hanya dengan menambah satu styleshet pada template maka anda bisa menggunakan 369 icon. Agar bisa menggunakan Font Awesome, maka anda perlu menambahkan styleshet dibawah ini kemudian menyimpannya di atas kode <code></head></code><pre><link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/></pre>Cara penggunaanya didalam HTML anda hanya perlu menambahkan tag <code></code> kemudian class dari nama icon yang dipilih. Misal untuk cara penulisannya seperti dibawah ini: fa-html5 <pre> fa-html5</pre>Untuk memperbesar ukuran, maka anda hanya perlu menambahkan class <code>fa-lg</code>, <code>fa-1x</code>, <code>fa-2x</code>, <code>fa-3x</code>, <code>fa-4x</code>, <code>fa-5x</code> dan berikut contohnya: fa-html5 fa-html5 fa-html5 fa-html5 fa-html5<pre> fa-html5 fa-html5 fa-html5 fa-html5 fa-html5 </pre>Gunakan class <code>fa-ul</code> dan <code>fa-li</code> untuk mempermudah dalam membuat daftar list dan menentukan nama icon. <ul class="fa-ul"> <li>fa-check-square</li> <li>fa-check-square</li> <li>fa-spinner fa-spin</li> <li>fa-square</li></ul><pre> <ul class="fa-ul"> <li>fa-check-square</li> <li>fa-check-square</li> <li>fa-spinner fa-spin</li> <li>fa-square</li> </ul> </pre>Gunakan class <code>pull-right</code> atau <code>pull-left</code> untuk membuat icon berada di sebelah kanan atau sebelah kiri, sedangkan <code>fa-border</code> adalah untuk membuat border pada icon tersebut. Ini adalah contoh agar icon berada disebelah kiri, agar berada disebelah kanan maka ganti pull-left dengan pull-right. <pre> Ini adalah contoh agar icon berada disebelah kiri, agar berada disebelah kanan maka ganti pull-left dengan pull-right. </pre>Gunakan class <code>fa-spin</code> untuk membuat icon agar bisa berputar. Ini biasa di kombinasikan pada icon fa-spinner, fa-refresh, dan fa-gigi agar bisa berputar dengan baik. Namun sayangnya animasi CSS3 ini tidak support di IE8 - IE9. <pre> </pre>Untuk memutar atau membalik icon, gunakan class <code>fa-rotate-*</code> dan <code>fa-flip-*</code>. Ganti tanda bintang (*) dengan nilai berapa derajat icon tersebut akan di rotate.   normal   fa-rotate-90   fa-rotate-180   fa-rotate-270   fa-flip-horizontal   icon-flip-vertical <pre> &nbsp; normal &nbsp; fa-rotate-90 &nbsp; fa-rotate-180 &nbsp; fa-rotate-270 &nbsp; fa-flip-horizontal &nbsp; icon-flip-vertical </pre>Diatas adalah cara dimana untuk menuliskan Font Awesome didalam sebuah markup HTML, masih banyak lagi tips trik lainnya yang bisa digunakan didalam Font Awesome. Untuk lebih jelasnya bisa mencoba dan berkreasi sendiri agar bisa lebih memahami bermain-main dengan berbagai komponen Bootstrap. Bahkan dengan cara lain anda juga bisa untuk menambahkan icon Font Awesome didalam CSS pada pseudo elemen <code>:before</code> dengan menuliskan value content dari icon tersebut. Berikut skema penggunaan Font Awesome pada pseudo elemen CSS: <pre> .element{ position: relative; } /* ganti tulisan berwarna merah pada value content */ .element:before { content: "\f000"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; /*--custom pada CSS--*/ color: #000; font-size: 18px; padding-right: 0.5em; position: absolute; top: 10px; left: 0; } </pre>Setelah mengetahui cara penggunaan dari Font Awesome baik itu pada CSS maupun HTML maka berikut adalah list dari icon Font Awesome versi 4.0.3 beserta CSS value content. <h3>List Icon Font Awesome dan CSS Value Content V4.0.3</h3> <ul class="kiri"> <li>  fa-glass "\f000" </li> <li>  fa-music "\f001" </li> <li>  fa-search "\f002" </li> <li>  fa-envelope-o "\f003" </li> <li>  fa-heart "\f004" </li> <li>  fa-star "\f005" </li> <li>  fa-star-o "\f006" </li> <li>  fa-user "\f007" </li> <li>  fa-film "\f008" </li> <li>  fa-th-large "\f009" </li> <li>  fa-th "\f00a" </li> <li>  fa-th-list "\f00b" </li> <li>  fa-check "\f00c" </li> <li>  fa-times "\f00d" </li> <li>  fa-search-plus "\f00e" </li> <li>  fa-search-minus "\f010" </li> <li>  fa-power-off "\f011" </li> <li>  fa-signal "\f012" </li> <li>  fa-cog "\f013" </li> <li>  fa-trash-o "\f014" </li> <li>  fa-home "\f015" </li> <li>  fa-file-o "\f016" </li> <li>  fa-clock-o "\f017" </li> <li>  fa-road "\f018" </li> <li>  fa-download "\f019" </li> <li>  fa-arrow-circle-o-down "\f01a" </li> <li>  fa-arrow-circle-o-up "\f01b" </li> <li>  fa-inbox "\f01c" </li> <li>  fa-play-circle-o "\f01d" </li> <li>  fa-repeat "\f01e" </li> <li>  fa-refresh "\f021" </li> <li>  fa-list-alt "\f022" </li> <li>  fa-lock "\f023" </li> <li>  fa-flag "\f024" </li> <li>  fa-headphones "\f025" </li> <li>  fa-volume-off "\f026" </li> <li>  fa-volume-down "\f027" </li> <li>  fa-volume-up "\f028" </li> <li>  fa-qrcode "\f029" </li> <li>  fa-barcode "\f02a" </li> <li>  fa-tag "\f02b" </li> <li>  fa-tags "\f02c" </li> <li>  fa-book "\f02d" </li> <li>  fa-bookmark "\f02e" </li> <li>  fa-print "\f02f" </li> <li>  fa-camera "\f030" </li> <li>  fa-font "\f031" </li> <li>  fa-bold "\f032" </li> <li>  fa-italic "\f033" </li> <li>  fa-text-height "\f034" </li> <li>  fa-text-width "\f035" </li> <li>  fa-align-left "\f036" </li> <li>  fa-align-center "\f037" </li> <li>  fa-align-right "\f038" </li> <li>  fa-align-justify "\f039" </li> <li>  fa-list "\f03a" </li> <li>  fa-outdent "\f03b" </li> <li>  fa-indent "\f03c" </li> <li>  fa-video-camera "\f03d" </li> <li>  fa-picture-o "\f03e" </li> <li>  fa-pencil "\f040" </li> <li>  fa-map-marker "\f041" </li> <li>  fa-adjust "\f042" </li> <li>  fa-tint "\f043" </li> <li>  fa-pencil-square-o "\f044" </li> <li>  fa-share-square-o "\f045" </li> <li>  fa-check-square-o "\f046" </li> <li>  fa-arrows "\f047" </li> <li>  fa-step-backward "\f048" </li> <li>  fa-fast-backward "\f049" </li> <li>  fa-backward "\f04a" </li> <li>  fa-play "\f04b" </li> <li>  fa-pause "\f04c" </li> <li>  fa-stop "\f04d" </li> <li>  fa-forward "\f04e" </li> <li>  fa-fast-forward "\f050" </li> <li>  fa-step-forward "\f051" </li> <li>  fa-eject "\f052" </li> <li>  fa-chevron-left "\f053" </li> <li>  fa-chevron-right "\f054" </li> <li>  fa-plus-circle "\f055" </li> <li>  fa-minus-circle "\f056" </li> <li>  fa-times-circle "\f057" </li> <li>  fa-check-circle "\f058" </li> <li>  fa-question-circle "\f059" </li> <li>  fa-info-circle "\f05a" </li> <li>  fa-crosshairs "\f05b" </li> <li>  fa-times-circle-o "\f05c" </li> <li>  fa-check-circle-o "\f05d" </li> <li>  fa-ban "\f05e" </li> <li>  fa-arrow-left "\f060" </li> <li>  fa-arrow-right "\f061" </li> <li>  fa-arrow-up "\f062" </li> <li>  fa-arrow-down "\f063" </li> <li>  fa-share "\f064" </li> <li>  fa-expand "\f065" </li> <li>  fa-compress "\f066" </li> <li>  fa-plus "\f067" </li> <li>  fa-minus "\f068" </li> <li>  fa-asterisk "\f069" </li> <li>  fa-exclamation-circle "\f06a" </li> <li>  fa-gift "\f06b" </li> <li>  fa-leaf "\f06c" </li> <li>  fa-fire "\f06d" </li> <li>  fa-eye "\f06e" </li> <li>  fa-eye-slash "\f070" </li> <li>  fa-exclamation-triangle "\f071" </li> <li>  fa-plane "\f072" </li> <li>  fa-calendar "\f073" </li> <li>  fa-random "\f074" </li> <li>  fa-comment "\f075" </li> <li>  fa-magnet "\f076" </li> <li>  fa-chevron-up "\f077" </li> <li>  fa-chevron-down "\f078" </li> <li>  fa-retweet "\f079" </li> <li>  fa-shopping-cart "\f07a" </li> <li>  fa-folder "\f07b" </li> <li>  fa-folder-open "\f07c" </li> <li>  fa-arrows-v "\f07d" </li> <li>  fa-arrows-h "\f07e" </li> <li>  fa-bar-chart-o "\f080" </li> <li>  fa-twitter-square "\f081" </li> <li>  fa-facebook-square "\f082" </li> <li>  fa-camera-retro "\f083" </li> <li>  fa-key "\f084" </li> <li>  fa-cogs "\f085" </li> <li>  fa-comments "\f086" </li> <li>  fa-thumbs-o-up "\f087" </li> <li>  fa-thumbs-o-down "\f088" </li> <li>  fa-star-half "\f089" </li> <li>  fa-heart-o "\f08a" </li> <li>  fa-sign-out "\f08b" </li> <li>  fa-linkedin-square "\f08c" </li> <li>  fa-thumb-tack "\f08d" </li> <li>  fa-external-link "\f08e" </li> <li>  fa-sign-in "\f090" </li> <li>  fa-trophy "\f091" </li> <li>  fa-github-square "\f092" </li> <li>  fa-upload "\f093" </li> <li>  fa-lemon-o "\f094" </li> <li>  fa-phone "\f095" </li> <li>  fa-square-o "\f096" </li> <li>  fa-bookmark-o "\f097" </li> <li>  fa-phone-square "\f098" </li> <li>  fa-twitter "\f099" </li> <li>  fa-facebook "\f09a" </li> <li>  fa-github "\f09b" </li> <li>  fa-unlock "\f09c" </li> <li>  fa-credit-card "\f09d" </li> <li>  fa-rss "\f09e" </li> <li>  fa-hdd-o "\f0a0" </li> <li>  fa-bullhorn "\f0a1" </li> <li>  fa-bell "\f0f3" </li> <li>  fa-certificate "\f0a3" </li> <li>  fa-hand-o-right "\f0a4" </li> <li>  fa-hand-o-left "\f0a5" </li> <li>  fa-hand-o-up "\f0a6" </li> <li>  fa-hand-o-down "\f0a7" </li> <li>  fa-arrow-circle-left "\f0a8" </li> <li>  fa-arrow-circle-right "\f0a9" </li> <li>  fa-arrow-circle-up "\f0aa" </li> <li>  fa-arrow-circle-down "\f0ab" </li> <li>  fa-globe "\f0ac" </li> <li>  fa-wrench "\f0ad" </li> <li>  fa-tasks "\f0ae" </li> <li>  fa-filter "\f0b0" </li> <li>  fa-briefcase "\f0b1" </li> <li>  fa-arrows-alt "\f0b2" </li> <li>  fa-users "\f0c0" </li> <li>  fa-link "\f0c1" </li> <li>  fa-cloud "\f0c2" </li> <li>  fa-flask "\f0c3" </li> <li>  fa-scissors "\f0c4" </li> <li>  fa-files-o "\f0c5" </li> <li>  fa-paperclip "\f0c6" </li> <li>  fa-floppy-o "\f0c7" </li> <li>  fa-square "\f0c8" </li> <li>  fa-bars "\f0c9" </li> <li>  fa-list-ul "\f0ca" </li> <li>  fa-list-ol "\f0cb" </li> <li>  fa-strikethrough "\f0cc" </li> <li>  fa-underline "\f0cd" </li> <li>  fa-table "\f0ce" </li> <li>  fa-magic "\f0d0" </li> <li>  fa-truck "\f0d1" </li> <li>  fa-pinterest "\f0d2" </li> <li>  fa-pinterest-square "\f0d3" </li> <li>  fa-google-plus-square "\f0d4" </li> <li>  fa-google-plus "\f0d5" </li> <li>  fa-money "\f0d6" </li> <li>  fa-caret-down "\f0d7" </li> <li>  fa-caret-up "\f0d8" </li> <li>  fa-caret-left "\f0d9" </li> <li>  fa-caret-right "\f0da" </li> <li>  fa-columns "\f0db" </li> <li>  fa-sort "\f0dc" </li> <li>  fa-sort-asc "\f0dd" </li> <li>  fa-sort-desc "\f0de" </li> <li>  fa-envelope "\f0e0" </li> <li>  fa-linkedin "\f0e1" </li> <li>  fa-undo "\f0e2" </li> <li>  fa-gavel "\f0e3" </li> <li>  fa-tachometer "\f0e4" </li> <li>  fa-comment-o "\f0e5" </li> <li>  fa-comments-o "\f0e6" </li> <li>  fa-bolt "\f0e7" </li> <li>  fa-sitemap "\f0e8" </li> <li>  fa-umbrella "\f0e9" </li> <li>  fa-clipboard "\f0ea" </li> <li>  fa-lightbulb-o "\f0eb" </li> <li>  fa-exchange "\f0ec" </li> <li>  fa-cloud-download "\f0ed" </li> <li>  fa-cloud-upload "\f0ee" </li> <li>  fa-user-md "\f0f0" </li> <li>  fa-stethoscope "\f0f1" </li> <li>  fa-suitcase "\f0f2" </li> <li>  fa-bell-o "\f0a2" </li> <li>  fa-coffee "\f0f4" </li> <li>  fa-cutlery "\f0f5" </li> <li>  fa-file-text-o "\f0f6" </li> <li>  fa-building-o "\f0f7" </li> <li>  fa-hospital-o "\f0f8" </li> <li>  fa-ambulance "\f0f9" </li> <li>  fa-medkit "\f0fa" </li> <li>  fa-fighter-jet "\f0fb" </li> <li>  fa-beer "\f0fc" </li> <li>  fa-h-square "\f0fd" </li> <li>  fa-plus-square "\f0fe" </li> <li>  fa-angle-double-left "\f100" </li> <li>  fa-angle-double-right "\f101" </li> <li>  fa-angle-double-up "\f102" </li> <li>  fa-angle-double-down "\f103" </li> <li>  fa-angle-left "\f104" </li> <li>  fa-angle-right "\f105" </li> <li>  fa-angle-up "\f106" </li> <li>  fa-angle-down "\f107" </li> <li>  fa-desktop "\f108" </li> <li>  fa-laptop "\f109" </li> <li>  fa-tablet "\f10a" </li> <li>  fa-mobile "\f10b" </li> <li>  fa-circle-o "\f10c" </li> <li>  fa-quote-left "\f10d" </li> <li>  fa-quote-right "\f10e" </li> <li>  fa-spinner "\f110" </li> <li>  fa-circle "\f111" </li> <li>  fa-reply "\f112" </li> <li>  fa-github-alt "\f113" </li> <li>  fa-folder-o "\f114" </li> <li>  fa-folder-open-o "\f115" </li> <li>  fa-smile-o "\f118" </li> <li>  fa-frown-o "\f119" </li> <li>  fa-meh-o "\f11a" </li> <li>  fa-gamepad "\f11b" </li> <li>  fa-keyboard-o "\f11c" </li> <li>  fa-flag-o "\f11d" </li> <li>  fa-flag-checkered "\f11e" </li> <li>  fa-terminal "\f120" </li> <li>  fa-code "\f121" </li> <li>  fa-reply-all "\f122" </li> <li>  fa-mail-reply-all "\f122" </li> <li>  fa-star-half-o "\f123" </li> <li>  fa-location-arrow "\f124" </li> <li>  fa-crop "\f125" </li> <li>  fa-code-fork "\f126" </li> <li>  fa-chain-broken "\f127" </li> <li>  fa-question "\f128" </li> <li>  fa-info "\f129" </li> <li>  fa-exclamation "\f12a" </li> <li>  fa-superscript "\f12b" </li> <li>  fa-subscript "\f12c" </li> <li>  fa-eraser "\f12d" </li> <li>  fa-puzzle-piece "\f12e" </li> <li>  fa-microphone "\f130" </li> <li>  fa-microphone-slash "\f131" </li> <li>  fa-shield "\f132" </li> <li>  fa-calendar-o "\f133" </li> <li>  fa-fire-extinguisher "\f134" </li> <li>  fa-rocket "\f135" </li> <li>  fa-maxcdn "\f136" </li> <li>  fa-chevron-circle-left "\f137" </li> <li>  fa-chevron-circle-right "\f138" </li> <li>  fa-chevron-circle-up "\f139" </li> <li>  fa-chevron-circle-down "\f13a" </li> <li>  fa-html5 "\f13b" </li> <li>  fa-css3 "\f13c" </li> <li>  fa-anchor "\f13d" </li> <li>  fa-unlock-alt "\f13e" </li> <li>  fa-bullseye "\f140" </li> <li>  fa-ellipsis-h "\f141" </li> <li>  fa-ellipsis-v "\f142" </li> <li>  fa-rss-square "\f143" </li> <li>  fa-play-circle "\f144" </li> <li>  fa-ticket "\f145" </li> <li>  fa-minus-square "\f146" </li> <li>  fa-minus-square-o "\f147" </li> <li>  fa-level-up "\f148" </li> <li>  fa-level-down "\f149" </li> <li>  fa-check-square "\f14a" </li> <li>  fa-pencil-square "\f14b" </li> <li>  fa-external-link-square "\f14c" </li> <li>  fa-share-square "\f14d" </li> <li>  fa-compass "\f14e" </li> <li>  fa-caret-square-o-down "\f150" </li> <li>  fa-caret-square-o-up "\f151" </li> <li>  fa-caret-square-o-right "\f152" </li> <li>  fa-eur "\f153" </li> <li>  fa-gbp "\f154" </li> <li>  fa-usd "\f155" </li> <li>  fa-inr "\f156" </li> <li>  fa-jpy "\f157" </li> <li>  fa-rub "\f158" </li> <li>  fa-krw "\f159" </li> <li>  fa-btc "\f15a" </li> <li>  fa-file "\f15b" </li> <li>  fa-file-text "\f15c" </li> <li>  fa-sort-alpha-asc "\f15d" </li> <li>  fa-sort-alpha-desc "\f15e" </li> <li>  fa-sort-amount-asc "\f160" </li> <li>  fa-sort-amount-desc "\f161" </li> <li>  fa-sort-numeric-asc "\f162" </li> <li>  fa-sort-numeric-desc "\f163" </li> <li>  fa-thumbs-up "\f164" </li> <li>  fa-thumbs-down "\f165" </li> <li>  fa-youtube-square "\f166" </li> <li>  fa-youtube "\f167" </li> <li>  fa-xing "\f168" </li> <li>  fa-xing-square "\f169" </li> <li>  fa-youtube-play "\f16a" </li> <li>  fa-dropbox "\f16b" </li> <li>  fa-stack-overflow "\f16c" </li> <li>  fa-instagram "\f16d" </li> <li>  fa-flickr "\f16e" </li> <li>  fa-adn "\f170" </li> <li>  fa-bitbucket "\f171" </li> <li>  fa-bitbucket-square "\f172" </li> <li>  fa-tumblr "\f173" </li> <li>  fa-tumblr-square "\f174" </li> <li>  fa-long-arrow-down "\f175" </li> <li>  fa-long-arrow-up "\f176" </li> <li>  fa-long-arrow-left "\f177" </li> <li>  fa-long-arrow-right "\f178" </li> <li>  fa-apple "\f179" </li> <li>  fa-windows "\f17a" </li> <li>  fa-android "\f17b" </li> <li>  fa-linux "\f17c" </li> <li>  fa-dribbble "\f17d" </li> <li>  fa-skype "\f17e" </li> <li>  fa-foursquare "\f180" </li> <li>  fa-trello "\f181" </li> <li>  fa-female "\f182" </li> <li>  fa-male "\f183" </li> <li>  fa-gittip "\f184" </li> <li>  fa-sun-o "\f185" </li> <li>  fa-moon-o "\f186" </li> <li>  fa-archive "\f187" </li> <li>  fa-bug "\f188" </li> <li>  fa-vk "\f189" </li> <li>  fa-weibo "\f18a" </li> <li>  fa-renren "\f18b" </li> <li>  fa-pagelines "\f18c" </li> <li>  fa-stack-exchange "\f18d" </li> <li>  fa-arrow-circle-o-right "\f18e" </li> <li>  fa-arrow-circle-o-left "\f190" </li> <li>  fa-caret-square-o-left "\f191" </li> <li>  fa-dot-circle-o "\f192" </li> <li>  fa-wheelchair "\f193" </li> <li>  fa-vimeo-square "\f194" </li> <li>  fa-try "\f195" </li> <li>  fa-plus-square-o "\f196" </li></ul> <div style='clear:both'></div>Demikian mengenai List Icon Font Awesome dan CSS Value Content V4.0.3 selanjutnya silahkan bereksperimen seperti yang sedang ngetrend saat ini. Sweet greetings and congratulations from <a href="http://mas-andes.blogspot.com" title="http://mas-andes.blogspot.com">http://mas-andes.blogspot.com</a> welcome coming new year 2014. <style type='text/css' scoped='scoped'>.clear{clear:both} ul{list-style:none} .kiri li{width:40%;float:left;padding:5px 20px} .css-value{float:right} </style>

List Icon Font Awesome dan CSS Value Content V4.0.3 sedikit mau berbagi setelah lama tidak menjama…

CSS Animasi Menu Dropdown Blogger

Friday, 13 December 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgDZspUq4KcyH65wiA6nKiTM_91PTlDZOMKqifJ-4zGNx8YvSI3WyhPXeQ3fgYJTORlUv_Ln6fOGgRo9gvsBumWGNS0VHnkTUfE3rKFQ9jSIyoqMZxnOHg0NYl7pu3p0PBUDuorxTWNGo/s1600/animasi-menu-css.gif" class="center" style="margin-left: 1em; margin-right: 1em;"><img alt="CSS Animasi Menu Dropdown Blogger" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgDZspUq4KcyH65wiA6nKiTM_91PTlDZOMKqifJ-4zGNx8YvSI3WyhPXeQ3fgYJTORlUv_Ln6fOGgRo9gvsBumWGNS0VHnkTUfE3rKFQ9jSIyoqMZxnOHg0NYl7pu3p0PBUDuorxTWNGo/s320/animasi-menu-css.gif" title="CSS Animasi Menu Dropdown Blogger" width="320" /></a>CSS Animasi Menu Dropdown Blogger – pada tutorial ini setelah lama tidak membahas tentang menu navigasi blogger maka sekarang sedikit akan saya jelaskan tentang CSS animasi dropdown menu yang terpasang pada <a href="http://mas-andes.blogspot.com/2013/11/darkforyou-blogger-template.html" target="_blank">template Darkforyou</a> dan <a href="http://mas-andes.blogspot.com/2013/12/bluesforyou-blogger-template.html" target="_blank">Bluesforyou</a>. Untuk membuat animasi menu dropdown ini tidak memerlukan adanya jquery dan disinilah letak kehebatan fitur CSS transition untuk membuat animasi CSS yang berjalan secara halus dengan mengatur efek pada transition-delay. Berikut lebih jelasnya untuk memasang CSS Animasi Menu Dropdown Blogger ke dalam blog. 1. Login ke akun blogger lalu masuk ke Edit HTML template. 2. Lalu taruh kode CSS berikut ini di atas kode <code>]]></b:skin></code><pre>.menu,.menu ul{list-style:none;margin:0;padding:0} .menu{background:#252525;height:35px;width:100%;border-bottom:2px solid #181818;border-top:2px solid #303030} .menu li{background:#252525} .menu &gt; li{display:block;float:left;position:relative;box-shadow:2px 0 0 0 rgba(51,51,51,1)} .menu a{border-left:3px solid rgba(0,0,0,0);color:gray;display:block;font-family:Electrolize,sans-serif;font-size:18px;line-height:35px;text-decoration:none;text-transform:uppercase;padding:0 25px} .menu a:first-letter{color:#0091d6} .menu li:hover{background-color:#1c1c1c} .menu li:hover &gt; a{border-left:3px solid #0091d6;color:#fff} .submenu{left:0;max-height:0;position:absolute;top:100%;z-index:0;perspective:400px;width:200%} .submenu li{opacity:0;transform:rotateY(90deg);transition:opacity .4s, transform .5s;border-bottom:2px solid #181818;border-top:2px solid #303030} .menu .submenu li:hover a{border-left:3px solid #454545;color:#fff} .menu &gt; li:hover .submenu,.menu &gt; li:focus .submenu{max-height:2000px;z-index:10} .menu &gt; li:hover .submenu li,.menu &gt; li:focus .submenu li{opacity:1;transform:none} .menu li:hover .submenu li:nth-child(1){transition-delay:0s} .menu li:hover .submenu li:nth-child(2){transition-delay:50ms} .menu li:hover .submenu li:nth-child(3){transition-delay:100ms} .menu li:hover .submenu li:nth-child(4){transition-delay:150ms} .menu li:hover .submenu li:nth-child(5){transition-delay:200ms} .menu li:hover .submenu li:nth-child(6){transition-delay:250ms} .menu li:hover .submenu li:nth-child(7){transition-delay:300ms} .menu li:hover .submenu li:nth-child(8){transition-delay:350ms} .submenu li:nth-child(1){transition-delay:350ms} .submenu li:nth-child(2){transition-delay:300ms} .submenu li:nth-child(3){transition-delay:250ms} .submenu li:nth-child(4){transition-delay:200ms} .submenu li:nth-child(5){transition-delay:150ms} .submenu li:nth-child(6){transition-delay:100ms} .submenu li:nth-child(7){transition-delay:50ms} .submenu li:nth-child(8){transition-delay:0s} .menu &gt; li:nth-child(1) {border-right:2px solid #111} .menu &gt; li:nth-child(2),.menu &gt; li:nth-child(3),.menu &gt; li:nth-child(4),.menu &gt; li:nth-child(5),.menu &gt; li:nth-child(6),.menu &gt; li:nth-child(7),.menu &gt; li:nth-child(8){border-right:2px solid #111;border-left:2px solid #333} </pre>3. Selanjutnya untuk menampilkan menu ini dibawah header, jika menggunakan struktur template HTML5 maka cari kode <code></header></code> lalu taruh kode berikut ini tepat di bawahnya. Cara lain, bisa juga dengan menaruh kode berikut tepat di atas kode <code><div id='main-wrapper'></code> atau <code><article id='main-wrapper'></code><pre><nav> <ul class='menu'>     <li><a expr:href='data:blog.homepageUrl'>Home</a></li>     <li><a href='#'>Menu 1</a>         <ul class='submenu'>             <li><a href='#'>Submenu a</a></li>             <li><a href='#'>Submenu b</a></li>             <li><a href='#'>Submenu c</a></li>             <li><a href='#'>Submenu d</a></li>             <li><a href='#'>Submenu e</a></li>             <li><a href='#'>Submenu f</a></li>             <li><a href='#'>Submenu g</a></li>             <li><a href='#'>Submenu h</a></li>         </ul>     </li>     <li class='active'><a href='#'>Menu 2</a>         <ul class='submenu'>             <li><a href='#'>Submenu a</a></li>             <li><a href='#'>Submenu b</a></li>             <li><a href='#'>Submenu c</a></li>             <li><a href='#'>Submenu d</a></li>             <li><a href='#'>Submenu e</a></li>             <li><a href='#'>Submenu f</a></li>             <li><a href='#'>Submenu g</a></li>             <li><a href='#'>Submenu h</a></li>         </ul>     </li>     <li><a href='#'>Menu 3</a>         <ul class='submenu'>             <li><a href='#'>Submenu a</a></li>             <li><a href='#'>Submenu b</a></li>             <li><a href='#'>Submenu c</a></li>             <li><a href='#'>Submenu d</a></li>             <li><a href='#'>Submenu e</a></li>             <li><a href='#'>Submenu f</a></li>             <li><a href='#'>Submenu g</a></li>             <li><a href='#'>Submenu h</a></li>         </ul>     </li>     <li><a href='#'>Menu 4</a></li>     <li><a href='#'>Menu 5</a></li> </ul> </nav> </pre>4. Langkah terakhir Simpan template. Demikian tutorial sederhana untuk membuat CSS Animasi Menu Dropdown Blogger. Harapan saya setelah anda mengenal satu per satu elemen kode pada template maka anda bisa berkreasi sendiri untuk membuat tampilan blog seperti keinginan kreasi masing-masing.

CSS Animasi Menu Dropdown Blogger – pada tutorial ini setelah lama tidak membahas tentang menu navig…

Page Number Navigation Blogger Valid HTML5

Wednesday, 11 December 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAxgNn1soH_8W_tcUfH6Lo504Lg16hE5uWsqwJr4D6U_j8HxhiI5mx7wWyOIbJKtBZb9u3Erm4hjIoqRVwuXZcUDqMPgbdrlXqAbAE0NJf_HwvFcSswx9v7hIgWW_ElAGFnjSbZRJ8gpI/s1600/page-number-valid-HTML5.gif" class="center"><img alt="Page Number Navigation Blogger Valid HTML5" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAxgNn1soH_8W_tcUfH6Lo504Lg16hE5uWsqwJr4D6U_j8HxhiI5mx7wWyOIbJKtBZb9u3Erm4hjIoqRVwuXZcUDqMPgbdrlXqAbAE0NJf_HwvFcSswx9v7hIgWW_ElAGFnjSbZRJ8gpI/s320/page-number-valid-HTML5.gif" title="Page Number Navigation Blogger Valid HTML5" width="320" /></a>Page Number Navigation Blogger Valid HTML5 – untuk yang mengalami masalah validasi HTML5 pada widget number navigation yang terdapat pada bagian bawah list post homepage, berikut tutorial yang akan saya bahas pada tutorial ini agar nanti pada saat validasi HTML5 tidak terdeteksi masalah error pada widget number navigation. Pada saat validasi biasanya dibagian page number terdeteksi error pada kode <code>&</code> yang terdapat pada JS, sedangkan untuk mengatasi masalah tersebut sangatlah sepele dan bisa langsung kita atasi dengan mudah. Berikut cara sederhana untuk mengatasi page number navigation yang belum valid HTML5. Cari bagian kode <code>&</code> yang terdeteksi error lalu jika sudah ditemukan ganti dengan kode <code>&amp;</code>, kode tersebut biasanya tidak hanya satu namun ada beberapa kode. Selanjutnya ubah pada keseluruhan kode yang di perlukan agar tidak terjadi lagi error saat validasi HTML5. Atau jika ada yang belum memasang dan ingin menggunakan widget number navigation pada blog berikut cara membuat Page Number Navigation Blogger Valid HTML5. 1. Login ke akun blogger lalu masuk ke Edit HTML template. 2. Copy kode CSS berikut ini lalu taruh diatas kode <code>]]></b:skin></code><pre>.showpageArea{position:relative;display:block;padding:0;margin:0 7px 40px 0} .showpageArea a{position:relative;background:#111;color:#fff;padding:10px;top:0;float:left} .showpageOf,.showpagePoint{position:relative;color:#63C4F1;background:#111;padding:10px;float:left} .showpageOf{display:none;float:right}</pre>3. Selanjutnya cari kode berikut ini.<pre><b:section class='main' id='main' showaddelement='no'> ............................................... </b:section></pre>Tampilan lengkapnya kode tersebut seperti pada screenshot dibawah ini <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_WSY-t7pR2nFcZYRVa9ev-SpL_ry8xusOiEbDCzF40U-AOAgAqcIT2jISi1F8wek1cC5oOdCi8aWI4bgz-bhqAE4e_AqXlqCwEBey1siD5CHb0p1Xmh36m37uI0jN-BsTZ_jHFJDMSzE/s1600/main-section.gif" class="center"><img alt="Page Number Navigation Blogger Valid HTML5" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_WSY-t7pR2nFcZYRVa9ev-SpL_ry8xusOiEbDCzF40U-AOAgAqcIT2jISi1F8wek1cC5oOdCi8aWI4bgz-bhqAE4e_AqXlqCwEBey1siD5CHb0p1Xmh36m37uI0jN-BsTZ_jHFJDMSzE/s640/main-section.gif" title="Page Number Navigation Blogger Valid HTML5" width="640" /></a>4. Lalu copy kode berikut ini kemudian paste di bawah kode <code></b:section></code><pre><b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;error_page&quot;'> &lt;script type='text/javascript'&gt; var home_page_url = location.href; var pageCount=15; var displayPageNum=10; var upPageWord =&#39;Previous&#39;; var downPageWord =&#39;Next&#39;; function showpageCount(json) { var thisUrl = home_page_url; var htmlMap = new Array(); var thisNum = 1; var postNum=1; var itemCount = 0; var fFlag = 0; var eFlag = 0; var html= &#39;&#39;; var upPageHtml =&#39;&#39;; var downPageHtml =&#39;&#39;; for(var i=0, post; post = json.feed.entry[i]; i++) {var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1);var title = post.title.$t;if(title!=&#39;&#39;){ if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; }if(title!=&#39;&#39;) postNum++; htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;&amp;amp;max-results=&#39;+pageCount; } }itemCount++;}for(var p =0;p&lt; htmlMap.length;p++){ if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){ if(fFlag ==0 &amp;&amp; p == thisNum-2){ if(thisNum==2){ upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; }else{ upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; } fFlag++; } if(p==(thisNum-1)){ html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;; }else{ if(p==0){ html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;}else{ html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; }}if(eFlag ==0 &amp;&amp; p == thisNum){ downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; eFlag++; }}} if(thisNum&gt;1){ html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;; }html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span class=&quot;showpageOf&quot;&gt;Pages [&#39;+(postNum-1)+&#39;]&lt;/span&gt;&#39;+html; if(thisNum&lt;(postNum-1)){ html += downPageHtml; }if(postNum==1) postNum++; html += &#39;&lt;/div&gt;&#39;; var pageArea = document.getElementsByName(&quot;pageArea&quot;); var blogPager = document.getElementById(&quot;blog-pager&quot;); if(postNum &lt;= 2){ html =&#39;&#39;; }for(var p =0;p&lt; pageArea.length;p++){ pageArea[p].innerHTML = html; }if(pageArea&amp;&amp;pageArea.length&gt;0){ html =&#39;&#39;; }if(blogPager){ blogPager.innerHTML = html; }} function showpageCount2(json) { var thisUrl = home_page_url; var htmlMap = new Array(); var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1; var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;; thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable; var thisNum = 1; var postNum=1; var itemCount = 0; var fFlag = 0; var eFlag = 0; var html= &#39;&#39;; var upPageHtml =&#39;&#39;; var downPageHtml =&#39;&#39;; var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;; var thisUrl = home_page_url; for(var i=0, post; post = json.feed.entry[i]; i++) { var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1); var title = post.title.$t; if(title!=&#39;&#39;){ if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } if(title!=&#39;&#39;) postNum++; htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;&amp;amp;max-results=&#39;+pageCount; }}itemCount++;} for(var p =0;p&lt; htmlMap.length;p++){ if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){ if(fFlag ==0 &amp;&amp; p == thisNum-2){ if(thisNum==2){ upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; }else{ upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; }fFlag++;} if(p==(thisNum-1)){ html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;; }else{ if(p==0){ html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;; }else{ html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; }} if(eFlag ==0 &amp;&amp; p == thisNum){ downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; eFlag++; }}} if(thisNum&gt;1){ if(!isLablePage){ html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;; }else{ html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;; }} html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span class=&quot;showpageOf&quot;&gt; page(&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html; if(thisNum&lt;(postNum-1)){ html += downPageHtml; } if(postNum==1) postNum++; html += &#39;&lt;/div&gt;&#39;; var pageArea = document.getElementsByName(&quot;pageArea&quot;); var blogPager = document.getElementById(&quot;blog-pager&quot;); if(postNum &lt;= 2){ html =&#39;&#39;; } for(var p =0;p&lt; pageArea.length;p++){ pageArea[p].innerHTML = html; } if(pageArea&amp;&amp;pageArea.length&gt;0){ html =&#39;&#39;; } if(blogPager){ blogPager.innerHTML = html; }} &lt;/script&gt; &lt;script&gt; var thisUrl = home_page_url; if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){ if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){ var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;)); }else{ var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;amp;max&quot;)); }} var home_page = &quot;/&quot;; if (thisUrl.indexOf(&quot;?q=&quot;)==-1){ if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){ document.write(&#39;&lt;script src=&quot;&#39;+home_page+&#39;feeds/posts/summary?alt=json-in-script&amp;amp;callback=showpageCount&amp;amp;max-results=99999&quot; &gt;&lt;\/script&gt;&#39;) }else{document.write(&#39;&lt;script src=&quot;&#39;+home_page+&#39;feeds/posts/full/-/&#39;+lblname1+&#39;?alt=json-in-script&amp;amp;callback=showpageCount2&amp;amp;max-results=99999&quot; &gt;&lt;\/script&gt;&#39;) }} &lt;/script&gt; </b:if> </b:if> </b:if></pre>5. Terakhir Simpan template. Selesai sudah untuk membuat Page Number Navigation Blogger Valid HTML5, dan apabila ingin merubah warna pada widget silahkan kreasikan sendiri pada bagian CSS.

Page Number Navigation Blogger Valid HTML5 – untuk yang mengalami masalah validasi HTML5 pada widget…

Bluesmulus Blogger Template

Sunday, 8 December 2013

Bluesmulus Blogger Template – seiring berjalannya waktu kesibukan semakin bertambah, hingga akhirnya waktu untuk bloggingpun semakin sempit. Sudah lama rasanya ingin update artikel blog ini dan akhirnya sekarang tercapai juga. Lama tidak menulis artikel rasanya masih kaku sama seperti saat pertama kali publish artikel di blog. Pada kesempatan kali ini kembali saya persembahkan sebuah template platform blogger dengan desain yang sederhana, simple dan minimalis yang pastinya valid HTML5 dan CSS3. Jika sekilas di perhatikan pada template ini memang lumayan mirip dengan <a href="http://mas-andes.blogspot.com/2013/12/bluesforyou-blogger-template.html" target="_blank" title="Bluesforyou Blogger Template">template Bluesforyou</a> yang sudah saya publish pada tempo hari sebelumnya. <a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbrx7MWCG9P1HK3AiqcHZc0rGQgbeVqwEl2doLYxHKnfkkwHoZ2BxgNKoL2we7nhjLEeuF13VEA1A648RXpuXLyU1-2iPDBjr1MGfN_oIhjObXCZ9NLFAGARNtUwHtakgrVUegdT8tjx0/s1600/Bluesmulus-blogger-template.jpg"><img alt="Bluesmulus Blogger Template" height="412" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbrx7MWCG9P1HK3AiqcHZc0rGQgbeVqwEl2doLYxHKnfkkwHoZ2BxgNKoL2we7nhjLEeuF13VEA1A648RXpuXLyU1-2iPDBjr1MGfN_oIhjObXCZ9NLFAGARNtUwHtakgrVUegdT8tjx0/s640/Bluesmulus-blogger-template.jpg" title="Bluesmulus Blogger Template" width="640" /></a>Berikut beberapa fitur dari Bluesmulus Blogger Template: 1. Valid HTML5 dan CSS3 2. Score SEO 100% in Chkme.com 3. Auto post Slideshow 4. Auto post featured Carousel 5. Custom error 404 page 6. Post by tag label, dll. <a class="button" href="http://bluesmulus.blogspot.com/" rel="nofollow" target="_blank">Preview</a> <a class="button" href="http://faceblog-evolutions.googlecode.com/files/Bluesmulus-theme.txt" rel="nofollow" target="_blank">Download</a> Cara menambahkan widget Post by tag label pada homepage <a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjovvhuVLS_t93qe2otJsoHxR_85nTewnZdtMXAcwtti0XjJuJh2vJpTRUJD6A3rgzD3R4ZFZevZK5AlVQXDrdAP3iIgB19hSFJgTl2xX2VMjrI8Yze6gQeilukD5MNgvyYBQC_akM9Oeo/s1600/post-by-label.gif"><img alt="Bluesmulus Blogger Template" height="284" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjovvhuVLS_t93qe2otJsoHxR_85nTewnZdtMXAcwtti0XjJuJh2vJpTRUJD6A3rgzD3R4ZFZevZK5AlVQXDrdAP3iIgB19hSFJgTl2xX2VMjrI8Yze6gQeilukD5MNgvyYBQC_akM9Oeo/s640/post-by-label.gif" title="Bluesmulus Blogger Template" width="640" /></a>Taruh kode berikut ini kedalam widget HTML/Javascript: <pre><script type='text/javascript'>     var numposts = 5; // Jumlah Post yang di tampilkan     var showpostthumbnails = true; // Ganti "false" untuk tidak menampilkan [Thumbnail]     var displaymore = false; // Ganti "true" untuk menampilkan link [More]     var displayseparator = false;     var showcommentnum = false; // Ganti "true" untuk menampilkan [Komentar]     var showpostdate = false; // Ganti "true" untuk menampilkan [Tanggal]     var showpostsummary = true; // Ganti "false" untuk tidak menampilkan [Deskripsi Post]     var numchars = 60; // Character Deskripsi yang di tampilkan </script> <script type="text/javascript" src="/feeds/posts/default/-/CSS?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script></pre><blockquote class="atas">Teks berwarna merah adalah nama label, ganti dengan label blog anda.</blockquote> [ <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Ae9fip_SOgtKAUQwwCqEmlITJQiTej_LhwoMbeSIeWFRpU5Ngx6E_0EL2JsIS_nyN8uLYFNwswo1DdXTT-0jcKHn2ngEdtIpMyPdQKOklOo6jj8GEMRtDb1Y1xqreQz9TZZrVbHsh7sz/s1600/installasi-template.gif" rel="nofollow" target="_blank">Petunjuk Install Template</a> ]

Bluesmulus Blogger Template – seiring berjalannya waktu kesibukan semakin bertambah, hingga akhirnya…

Bluesforyou Blogger Template

Saturday, 30 November 2013

Bluesforyou Blogger Template – elemen template Bluesforyou tidak jauh berbeda dengan template <a href="http://mas-andes.blogspot.com/2013/11/darkforyou-blogger-template.html" target="_blank">Darkforyou</a>, untuk custom segala keperluannya sama persis dengan template sebelumnya bisa di lihat pada halaman demo. Bluesforyou Blogger Template terdapat dua versi yakni light version (versi terang) dan dark version (versi gelap). Pada template versi gelap saya lebih suka bermain CSS untuk mengatur desain layout dan membuat tampilan lebih peka dan memperhalus warna, sedangkan pada template yang versi terang saya kolaborasikan dengan image untuk mambuat varian pada layout template. Bluesforyou blogger merupakan release kedua dari template sebelumnya, untuk membuat template ini saya menggunakan kerangka template sebelumnya agar lebih mudah dan merubah seperlunya saja pada bagian-bagian tertentu. Terutama pada bagian homepage yang menggunakan mode grid. Bluesforyou Blogger Template antara dua versi tersebut terdapat perbedaan yang sangat mencolok, karena pada light version Bluesforyou Blogger Template saya menggunakan konsep gambar. Untuk fitur kedua template tersebut masih sama dengan template yang sebelumnya, berikut untuk lebih rinci dan detailnya serta screenshot dari Bluesforyou Blogger Template. Light Version<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi78eRibUg_vLe3vaYPijDOL-FIlELdUNxjcg3NJhrLkx0NFXSF_ItBqvqDljxHBR6ovrw_0wQWzo_KxGkn4m9cLeFV-VuQNJJbN4itdJBW7r7BFhkCmUXBJOcD15U4PN9I4iUqS1sNsZM/s1600/Light-Bluesforyou.jpg" class="center"><img alt="Bluesforyou Blogger Template" height="412" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi78eRibUg_vLe3vaYPijDOL-FIlELdUNxjcg3NJhrLkx0NFXSF_ItBqvqDljxHBR6ovrw_0wQWzo_KxGkn4m9cLeFV-VuQNJJbN4itdJBW7r7BFhkCmUXBJOcD15U4PN9I4iUqS1sNsZM/s640/Light-Bluesforyou.jpg" title="Bluesforyou Blogger Template" width="640" /></a><a class="button" href="http://light-bluesforyou.blogspot.com/" rel="nofollow" target="_blank">Preview</a> <a class="button" href="http://faceblog-evolutions.googlecode.com/files/Bluesforyou%20%5BLight%5D.txt" rel="nofollow" target="_blank">Download</a> <blockquote class="atas">UPDATE 04 DESEMBER 2013 [Perbaikan Layout, dll]</blockquote> Dark Version<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9MINimqvg_fXea7UYsdSgHYfk7HeAxLHnOzUQ2xJd2QAXl6skgh2uA6XYmz1nsu8BnVNaaVlNbAsdnZmZbKI-Rlw3VGIxVCYa-wetXC56UKOVb5mcAQONRFAQM7RWyx9h9T9EnslWUV0/s1600/Dark-Bluesforyou.jpg" class="center"><img alt="Bluesforyou Blogger Template" height="376" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9MINimqvg_fXea7UYsdSgHYfk7HeAxLHnOzUQ2xJd2QAXl6skgh2uA6XYmz1nsu8BnVNaaVlNbAsdnZmZbKI-Rlw3VGIxVCYa-wetXC56UKOVb5mcAQONRFAQM7RWyx9h9T9EnslWUV0/s640/Dark-Bluesforyou.jpg" title="Bluesforyou Blogger Template" width="640" /></a><a class="button" href="http://dark-bluesforyou.blogspot.com/" rel="nofollow" target="_blank">Preview</a> <a class="button" href="http://faceblog-evolutions.googlecode.com/files/Bluesforyou%20%5BDark%5D.txt" rel="nofollow" target="_blank">Download</a> <blockquote class="atas">UPDATE 04 DESEMBER 2013 [Perbaikan Layout, dll]</blockquote> Berikut beberapa fitur dari Bluesforyou Blogger Template 1. Valid HTML5 dan CSS3 2. Score SEO 100% in Chkme.com 3. Auto post featured 4. Custom error 404 page 5. Fast Loading, dll (lainnya lihat sendiri di halaman demo). [ <a class="tooltip" href="http://dark-bluesforyou.blogspot.com/2013/11/intruksi-install-template-darkforyou.html" rel="nofollow" target="_blank" title="Instruksi Installasi Template">Instruksi Installasi Template</a> ]

Bluesforyou Blogger Template – elemen template Bluesforyou tidak jauh berbeda dengan template Darkfo…