tag:blogger.com,1999:blog-89889231692525819172024-03-20T16:27:47.186+07:00CB BootstrapSEO Friendly Responsive Blogger TemplateCB Bloggerhttp://www.blogger.com/profile/06788684849400740675noreply@blogger.comBlogger14125tag:blogger.com,1999:blog-8988923169252581917.post-36845274330372793562017-03-11T01:13:00.000+07:002017-03-11T01:13:07.646+07:00Sample Posting dengan Semua Elemen Teks<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio0VGPij-H1OCE-OjZf3MEQ4kXHL19FR3yupivr83M3HQhq0Ar7JSQ6lxY9aUqGwUy1tb4CaRqJGWgASR19gM8bvM1Q1mxM3_AUShLTrsuuhO9cenfMad72yPoglzIZaUiIpaTNYrTJzFE/s1600/blog+blogger+blogging.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Sample Posting dengan Semua Elemen Teks" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio0VGPij-H1OCE-OjZf3MEQ4kXHL19FR3yupivr83M3HQhq0Ar7JSQ6lxY9aUqGwUy1tb4CaRqJGWgASR19gM8bvM1Q1mxM3_AUShLTrsuuhO9cenfMad72yPoglzIZaUiIpaTNYrTJzFE/s1600/blog+blogger+blogging.jpg" title="Sample Posting dengan Semua Elemen Teks" /></a></div>
<b>Sample Posting dengan Semua Elemen Teks. Non tu mundial movimento, de via vices tempore.</b><br />
<br />
Litteratura. Asia svedese auxiliary ha sia, un iala illo unic uso.<br />
<br />
Ma esser debitores duo. Lista americano da non, summario publicava tu que, non ma como signo extrahite. De uso commun finalmente. Es international concretisation duo.<br />
<br />
Al infra synonymo que. E per resultato periodicos, uso un patre anque personas, ille americano vocabulario tu qui.<br />
<br />
Union parlar occidental su web. Malo occidental duo lo. Illo texto connectiones es uno, su magazines intermediari sed. <a href="http://www.contohblog.com/" rel="nofollow" target="_blank">Contoh Blog</a> (Link Color Tester).<br />
<br />
<b>BOLD</b><br />
<b>E uso debitores encyclopedia, pro tu etiam vocabulos publicate. Da pro contos gymnasios, lo rapide message uno. Sia ma ille pardona incorporate. In qui parola vocabulario. Terra greco-latin duo su, uso clave moderne europeo se.</b><br />
<br />
<i>ITALIC</i><br />
<i> Non es nomina linguistas historiettas. Pote laborava sed e. Union tamben le pan, sia texto moderne auxiliary ha. Ha nos traducite continentes, duo iste association representantes ha.</i><br />
<br />
<blockquote class="tr_bq">
QUOTES: E que usos preparation, lo prime interlingua per, al via programma conferentias. O web latente supervivite interlingua, cinque involvite duo o, sed un studio lateres programma. Campo spatios complete per in, parlar original non es. Web iala excellente paternoster il, web super incorporate es.</blockquote>
<b><br /></b><b>BULLET LIST</b><br />
Auxiliary instruction ma pro:<br />
<ul>
<li>Movimento intermediari del ha. </li>
<li>Vista vocabulos ma uso, </li>
<li>da como resultato web. </li>
<li>Web lo debe medical distinguer, </li>
<li>Nos clave supervivite es. </li>
</ul>
<br />
Sia de avantiate incorporate. Que lo language professional principalmente, uno in tote origine denomination, latente greco-latin uno lo. Il iala rapide comprende del. De uso membros immediatemente.<br />
<br />
<b>NUMBERED LIST</b><br />
Del ha publication immediatemente. Ma sia esseva nostre, pro lo europeo linguage conferentias.<br />
<ol>
<li>Brevissime angloromanic uso in, </li>
<li>su linguistas methodicamente sed. </li>
<li>Appellate intention qui su. </li>
<li>Pro e toto subjecto, le malo debitas </li>
<li>Litteratura uno, que vices europa traduction un. </li>
<li>Ma web magazines </li>
<li>Grammatica, sine celos language de nos. </li>
</ol>
<br />
Pan da libera quales, pardona populos concretisation se qui. Tu tres supervivite via, esser studio dictionario web tu. Nos basate voluntate su.<br />
<div>
<br /></div>
<h2>
H2: Da con medio articulos independente, patre national (Heading)</h2>
<h3>
H3: Utilitate duo ha, russo technic populos al per. (Subheading)</h3>
<h4>
H4: Campo involvite addresses il pro, toto cinque representantes es pan. (Minor Heading)</h4>
Lo uso integre historia. Via lo esseva capital. Servi basate cadeva su con, duce servi debitas web ha. Nos studio nostre historiettas tu. Scientific philologos pan su, hodie linguas sia o. Web ma iala commun intermediari, pan debitores anglo-romanic al.<br />
<br />
Duo vocabulario greco-latin o. Sed tempore instruite anglo-romanic ha, texto pardona ha via. Russo tamben message es que. Uno infra principalmente al. Sia se tempore initialmente introduction, in non durante hereditage, medical publicate millennios su pro.<br />
<b><br /></b>
<b>DEMO COLLAPSE</b><br />
<button class="btn btn-info" data-target="#demo" data-toggle="collapse" type="button">Simple collapsible</button>
<br />
<div class="collapse" id="demo">
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<br />
Uso scriber extrahite professional o. Pro tu medio voluntate, sia un subjecto extrahite millennios, su pan articulos simplificate. Un sia major movimento. Computator anteriormente duo le. Tu uno vista rapide disuso.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://placehold.it/450x250" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="http://placehold.it/450x250" border="0" src="https://placehold.it/450x250" title="http://placehold.it/450x250" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">http://placehold.it/450x250</td></tr>
</tbody></table>
<br />
Demikian Sample Posting dengan Semua Elemen Teks.*<br />
<br />CB Bloggerhttp://www.blogger.com/profile/06788684849400740675noreply@blogger.com0tag:blogger.com,1999:blog-8988923169252581917.post-89013559497110802112016-11-07T23:00:00.000+07:002017-02-04T14:09:57.628+07:00Recent Posts with Thumbnail Image Magazine Style<b>Cara</b> membuat atau memasang widget Recent Posts with Thumbnail Image Magazine Style. Bisa menampilkan posting terbaru semua label, bisa juga posting terbaru per label atau berdasarkan kategori.<br />
<br />
Ini penampakan Recent Posts with Thumbnail Image Magazine Style:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwixVlqsg4bQ5cbz4rOp9840owawzV0Xhirq2Qdt8ho-VxieUua_wNHJEoboJGuxVCmRB5hPovV5j7Rp6FRyWvAxoG2B5of9-S_sul5S6XW9gZdJlfOpyDlUZAM0Jue_JROcCfMX4ANCOn/s1600/recent-post-by-label-blogger-magazine-style.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Recent Posts with Thumbnail Image Magazine Style" border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwixVlqsg4bQ5cbz4rOp9840owawzV0Xhirq2Qdt8ho-VxieUua_wNHJEoboJGuxVCmRB5hPovV5j7Rp6FRyWvAxoG2B5of9-S_sul5S6XW9gZdJlfOpyDlUZAM0Jue_JROcCfMX4ANCOn/s400/recent-post-by-label-blogger-magazine-style.JPG" title="Recent Posts with Thumbnail Image Magazine Style" width="400" /></a></div>
<b><br /></b>
<b>KODE CSS & JavaScript</b><br />
Simpan di atas kode <b></head></b><br />
<br />
<button class="btn btn-info" data-target="#demo" data-toggle="collapse" type="button">BUKA KODE</button>
<br />
<div class="collapse" id="demo">
<br />
<span style="color: #bf9000;"><style></span><br />
<span style="color: #bf9000;">.onecol { margin:0 auto}</span><br />
<span style="color: #bf9000;">.onecol .catbox-row { margin:0 0 15px 0; }</span><br />
<span style="color: #bf9000;">.onecol .catbox {width:100%; float:left; display:inline; padding-bottom:5px;}</span><br />
<span style="color: #bf9000;">.onecol .catbox-even { margin:0 15px 0 0; }</span><br />
<span style="color: #bf9000;">.onecol .catbox-even .catbox-title { }</span><br />
<span style="color: #bf9000;">.onecol .catbox ul {float:right;width:100%;padding-left:2px;}</span><br />
<span style="color: #bf9000;">.onecol .catbox li {margin: 5px 0 0 2px;font-family:Oswald;font-size: 16px;float: left;width: 49%;padding:0 0 5px 0;list-style: none;border-bottom: 1px dotted #ddd;}</span><br />
<span style="color: #bf9000;">.onecol .catbox li:last-child,.twocol .catbox li:last-child {border:none}</span><br />
<span style="color: #bf9000;">.onecol .catbox li a {color:#666}</span><br />
<span style="color: #bf9000;">.onecol .catbox li.first { display:block; padding:0 0 10px 0;border:none; background:none; }</span><br />
<span style="color: #bf9000;">.onecol .catbox li.first a { background:none;font-size:20px;line-height:normal;font-weight:500;}</span><br />
<span style="color: #bf9000;">.onecol .catbox .entry-thumb {margin-right: 20px;</span><span style="color: #bf9000;">width: 100%;</span><span style="color: #bf9000;">height: 170px;</span><span style="color: #bf9000;">max-width: </span><span style="color: red;">260</span><span style="color: #bf9000;">px;}</span><br />
<span style="color: #bf9000;">.onecol .catbox .entry-title { font-size:0.9em; line-height:15px;margin-right: 20px;}</span><br />
<span style="color: #bf9000;">.onecol .catbox .entry-excerpt { clear:both; display:none; }</span><br />
<span style="color: #bf9000;">.onecol .catbox .entry-meta {display:none; margin-top:5px; }</span><br />
<span style="color: #bf9000;">.catlist{height:auto;width:100%}</span><br />
<span style="color: #bf9000;">.catlist img{width:80px;height:70px;float: left;margin-right: 10px;}</span><br />
<span style="color: #bf9000;">.meta-date{display:none}</span><br />
<span style="color: #bf9000;">@media screen and (max-width: 800px){</span><br />
<span style="color: #bf9000;">.onecol .catbox{width:95%;margin-left:5px;}</span><br />
<span style="color: #bf9000;">.onecol .catbox li{width:100%;margin-left:5px;}</span><br />
<span style="color: #bf9000;">.onecolumn #content{width:100%}</span><br />
<span style="color: #bf9000;">}</span><br />
<span style="color: #bf9000;">@media screen and (max-width:600px){</span><br />
<span style="color: #bf9000;">.onecol .catbox .entry-thumb {margin-right: 15px;width: 100%;height: 170px;margin-bottom: 10px;}</span><br />
<span style="color: #bf9000;">}</span><br />
<span style="color: #bf9000;"></style></span><br />
<span style="color: #bf9000;"><script></span><br />
<span style="color: #bf9000;">//<![CDATA[</span><br />
<span style="color: #bf9000;">imgr=new Array();imgr[0]="http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";showRandomImg=true;aBold=true;summaryPosta=300;summaryPost=130;summaryPosti=60;summaryPostu=80;summaryTitle=25;numposts=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","Mei","Jun","Jul","Agust","Sep","Okt","Nop","Des"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;if(i==0){var trtd='<li class="first"><img class="entry-thumb wp-post-image" src="'+img[i]+'"/><h2 class="entry-title"><a href="'+posturl+'">'+posttitle+'</a></h2><p class="entry-meta"><span class="meta-date">'+daystr+'</span><span class="meta-sep">|</span><span class="meta-comments"><a href="'+posturl+'">'+pcm+' Komentar</a></span></p><div class="clear"></div></li>';document.write(trtd)}if((i>0)&&(i<numposts)){var trtd='<li class="catlist"><img src="'+img[i]+'"/><a href="'+posturl+'">'+posttitle+'</a> <span class="meta-date">'+daystr+'</span></li>';document.write(trtd)}j++}document.write('')}</span><br />
<span style="color: #bf9000;">//]]></span><br />
<span style="color: #bf9000;"></script></span><br />
<br /></div>
<br />
<br />
<b>Kode HTML</b><br />
Simpan di bawah <div id='main-wrapper'><br />
<b><br /></b>
<b>1. Kode Menampilkan Posting Terbaru Semua Label</b><br />
<br />
<span style="color: #bf9000;"><b:if cond='data:blog.url == data:blog.homepageUrl'> </span><br />
<span style="color: #bf9000;"><div class='onecol'></span><br />
<span style="color: #bf9000;"><div class='catbox catbox-even' id='catbox1-0'></span><br />
<span style="color: #bf9000;"><!-- Widget Title Here--></span><br />
<span style="color: #bf9000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><ul><span class="Apple-tab-span" style="white-space: pre;"> </span></span><br />
<span style="color: #bf9000;"><script>document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);</script></span><br />
<span style="color: #bf9000;"></ul></span><br />
<span style="color: #bf9000;"></div></span><br />
<span style="color: #bf9000;"></div></span><br />
<span style="color: #bf9000;"><div class='clear'/></span><br />
<span style="color: #bf9000;"></b:if></span><br />
<span style="color: #bf9000;"><br /></span>
<b>2. Kode Menampilkan Posting Terbaru Berdasarkan Label</b><br />
<div>
<b><br /></b></div>
<div>
<span style="color: #bf9000;"><b:if cond='data:blog.url == data:blog.homepageUrl'> </span><br />
<span style="color: #bf9000;"><div class='onecol'></span><br />
<span style="color: #bf9000;"><div class='catbox catbox-even' id='catbox1-0'></span><br />
<span style="color: #bf9000;"><!-- Widget Title Here--></span><br />
<span style="color: #bf9000;"><ul><span class="Apple-tab-span" style="white-space: pre;"> </span></span><br />
<span style="color: #bf9000;"><script>document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/</span><span style="color: red;">Label</span><span style="color: #bf9000;">?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);</script></span><br />
<span style="color: #bf9000;"></ul></span><br />
<span style="color: #bf9000;"></div></span><br />
<span style="color: #bf9000;"></div></span><br />
<span style="color: #bf9000;"><div class='clear'/></span><br />
<span style="color: #bf9000;"></b:if></span></div>
<div>
<b><br /></b></div>
<div>
<b>SAVE!</b></div>
CB Bloggerhttp://www.blogger.com/profile/06788684849400740675noreply@blogger.com0tag:blogger.com,1999:blog-8988923169252581917.post-79114631643986844842016-11-06T20:22:00.004+07:002017-03-11T00:54:53.499+07:00Cara Membuat Template Blog Sendiri dengan Bootstrap<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUPs7CIPVc45KdAykUmQN7RShf_HROLz5gtkDeYIM4bU3VFKs7_w_blpTrtOeDbA-87_ipCxsFrUg5maQJ1rvgXlUzCXRt4xlNb0iILhDHUlayJX_Cj2S0u-rPr96a_I7bRj1Nn_yXv0zO/s1600/bootstrap.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara Membuat Template Blog Sendiri dengan Bootstrap" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUPs7CIPVc45KdAykUmQN7RShf_HROLz5gtkDeYIM4bU3VFKs7_w_blpTrtOeDbA-87_ipCxsFrUg5maQJ1rvgXlUzCXRt4xlNb0iILhDHUlayJX_Cj2S0u-rPr96a_I7bRj1Nn_yXv0zO/s1600/bootstrap.jpg" title="Cara Membuat Template Blog Sendiri dengan Bootstrap" /></a></div>
Cara Membuat Template Blog Sendiri dengan Bootstrap sangat mudah. Banyak panduan dari desainer template blog using bootstrap yang berbagi cara Cara Membuat Template Blog Sendiri dengan Bootstrap.<br />
<br />
Kode-kode botstrap sendiri terdiri dari CSS, HTML, dan JavasScript yang sudah dibuat untuk mendesain template blog responsive (mobile friendly).<br />
<br />
Cara Membuat Template Blog Sendiri dengan Bootstrap yaitu menggabungkan kode-kode Bootstrap dengan kode template blogger (XML). Kita bisa menggunakan template bawaan blogger untuk mengambil kode-kode blogger yang digabungkan dengan bootstrap.<br />
<br />
Cara Membuat Template Blog Sendiri dengan Bootstrap<br />
<br />
1. Buat Blog Baru! Jangan Diterapkan di Blog yang Sudah Jadi.<br />
2. Pilih template bawaan blogger, yang mana saja.<br />
3. Kalo sudah jadi, klik Theme > Edit HTML > Hapus SEMUA kode<br />
4. Masukkan kode ini:<br />
<br />
<pre style="background: url("styles/default/xenforo/gradients/category-23px-light.png") center top repeat-x rgb(240, 247, 252); border-radius: 5px; color: #141414; direction: ltr; font-family: Consolas, "Courier New", Courier, monospace; font-size: 10pt; line-height: 1.24; max-height: 500px; min-height: 30px; overflow: auto; padding: 10px; word-wrap: normal;"><?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:skin><![CDATA[
/*
Name: Tulis Nama Templatenya
Author: Nama Kamu
URL: Website/ blog Kamu
*/
]]></b:skin> <!-- End Style -->
</head>
<body>
<!-- Header -->
<div class='bs-example'> <!-- Blog Navigation Start -->
<nav class='navbar navbar-default'>
<div class='container-fluid'>
<!-- Brand and toggle get grouped for better mobile display -->
<div class='navbar-header'>
<button class='navbar-toggle collapsed' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'/>
<span class='icon-bar'/>
<span class='icon-bar'/>
</button>
<a class='navbar-brand' href='#'>
<img alt='Brand' src='Logo kamu / atau bisa diganti dengan tulisan disini'/>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
<ul class='nav navbar-nav'>
<li class='active'><a href='#'>Link <span class='sr-only'>(current)</span></a></li>
<li><a href='#'>Link</a></li>
<li class='dropdown'>
<a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown <span class='caret'/></a>
<ul class='dropdown-menu' role='menu'>
<li><a href='#'>Action</a></li>
<li><a href='#'>Another action</a></li>
<li><a href='#'>Something else here</a></li>
<li class='divider'/>
<li><a href='#'>Separated link</a></li>
<li class='divider'/>
<li><a href='#'>One more separated link</a></li>
</ul>
</li>
<li><a href='/?m=1'>Mobile View</a></li>
</ul>
<form class='navbar-form navbar-left' expr:action='data:blog.homepageUrl + &quot;search&quot;' role='search'>
<div class='form-group'>
<input class='form-control' name='q' placeholder='Search' type='text'/>
</div>
<button class='btn btn-default' type='submit'>Submit</button>
</form>
<ul class='nav navbar-nav navbar-right'>
<li><a href='#'>Link</a></li>
<li class='dropdown'>
<a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown <span class='caret'/></a>
<ul class='dropdown-menu' role='menu'>
<li><a href='#'>Action</a></li>
<li><a href='#'>Another action</a></li>
<li><a href='#'>Something else here</a></li>
<li class='divider'/>
<li><a href='#'>Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div> <!-- Blog Navigation End -->
<div class='container outer-wrapper'> <!-- Blog Outer Wrapper Start -->
<div class='blog-header'> <!-- Blog Header Start -->
<div class='container'>
<b:section class='header' id='header1' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Header)' type='Header'/>
</b:section>
</div>
</div>
<div class='row'>
<div class='col-md-8 blog-main'> <!-- Blog Main Wrapper Start -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
<aside class='col-xs-4 blog-sidebar'> <!-- Blog Sidebar Wrapper Start -->
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'/>
</b:section>
</aside> <!-- Blog Sidebar Wrapper End -->
</div> <!-- Blog Row End -->
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'/>
</div> <!-- Blog Content Wrapper End -->
<footer class='blog-footer'> <!-- Blog Footer Start -->
<p>Blog template built for <a href='http://getbootstrap.com'>Bootstrap</a> by <a href='https://twitter.com/AchmadMuharya'>@AchmadMuharya</a>.</p>
<p>
<a href='#'>Back to top</a>
</p>
</footer> <!-- Blog Footer End -->
</body> <!-- End Body -->
</HTML></pre>
<br />
5. Pasang CDN<br />
Untuk memasangnya, buka <a href="http://getbootstrap.com/getting-started/" rel="nofollow" target="_blank">Get Boostrap Get Started</a>.<br />
<br />
- Copas kode CSS (berakhiran min.css) di bawah kode <head><br />
- Copas kode JS (berakhiran min.js) di atas kode </body><br />
- Tambahkan kode link ke jQuery di atas kode </head> atau </body><br />
<br />
<pre style="background: url("styles/default/xenforo/gradients/category-23px-light.png") center top repeat-x rgb(240, 247, 252); border-radius: 5px; color: #141414; direction: ltr; font-family: Consolas, "Courier New", Courier, monospace; font-size: 10pt; line-height: 1.24; max-height: 500px; min-height: 30px; overflow: auto; padding: 10px; word-wrap: normal;"><script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/></pre>
<br />
6. Simpan di atas kode </head><br />
<br />
<pre style="background: url("styles/default/xenforo/gradients/category-23px-light.png") center top repeat-x rgb(240, 247, 252); border-radius: 5px; color: #141414; direction: ltr; font-family: Consolas, "Courier New", Courier, monospace; font-size: 10pt; line-height: 1.24; max-height: 500px; min-height: 30px; overflow: auto; padding: 10px; word-wrap: normal;"><style type='text/css'>
/*<![CDATA[
/*Navigation*/
.navbar {
border-radius:0;
}
/*Nav Brand*/
.navbar-brand img {
width: 32px;
height: 32px;
}
.navbar-brand {
padding: 10px 20px;
}
/*Blog Wrapper*/
.blog-header {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-main {
font-size: 18px;
line-height: 1.5;
}
.blog-sidebar {
margin:0;
}
/*Headings*/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
margin-top: 0;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333;
}
/*Posts*/
.post .post-title {
margin-bottom:0;
}
.post-body {
margin:0 0 .75em;
line-height:1.6em;
}
/*Post Image*/
.post table.tr-caption-container td {
border:none;
padding:8px;
}
.post table.tr-caption-container, .post table.tr-caption-container img, .post img {
max-width:100%;
height:auto;
}
.post td.tr-caption {
color: #333;
font-size: 80%;
padding: 8px 8px 8px !important;
background-color: #eee;
font-style: italic;
}
img {
display: inline-block;
max-width: 100%;
height: auto;
}
table.tr-caption-container {
padding:4px;
margin-bottom:.5em
}
td.tr-caption {
font-size:80%
}
.post table caption {
border:none;
font-style:italic;
}
.post table caption {
border:1px solid #d8dde1;
padding:.2em .5em;
text-align:left;
vertical-align:top;
}
/*Post Footer*/
.post-footer {
margin:.75em 0;
letter-spacing:.1em;
line-height:1.4em;
font-size: 12px;
}
/*Post Meta*/
.blog-post-meta {
margin: 10px 0 5px;
color: #999;
font-size: 15px;
}
.blog-post-meta a {
color: #999;
border-bottom: 1px solid #eee;
padding-bottom: 4px;
}
.blog-post-meta a:hover {
border-bottom: 1px solid #23527c;
}
.timestamp-link {
cursor:help;
border-bottom: 1px solid #eee;
padding-bottom: 4px;
}
.timestamp-link:hover {
border-bottom: 1px solid #23527c;
}
/*Breadcrumbs and Date Header Font-size*/
.breadcrumb, .date-header {
font-size: 13px;
}
/*SideBar*/
.sidebar .widget ul, .sidebar .widget ol {
margin-top:0
}
.sidebar h2, .sidebar h3, .footer h2 {
color: #333;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
margin: 0 0 20px 0;
position: relative;
padding: 8px 15px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
/*Popular Posts*/
.popular-posts ul, .popular-posts li {
margin:0;
padding:0;
list-style:none
}
.popular-posts li {
margin-bottom:.6em
}
.PopularPosts .item-snippet {
font-size:12px;
color:#333;
max-height:45px;
overflow:hidden;
}
.PopularPosts .item-thumbnail {
transition: all 0.15s ease-in-out 0s;
margin:0 8px 0 0;
display:inline;
opacity:10;
}
.PopularPosts .item-thumbnail a img {
height:69px;
width:69px;
display:block;
margin:0;
padding:2px;
border:1px solid #e8e8e8 !important;
}
.PopularPosts .item-thumbnail a img:hover {
background:#00AFAF;
border:1px solid #00AFAF !important;
}
.PopularPosts .widget-content ul li {
padding:3px 0px !important;
border-bottom:1px solid #e2e2e2;
}
/*Footer*/
.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-color: #f9f9f9;
border-top: 1px solid #e5e5e5;
}
.blog-footer a {
border-bottom: 1px solid #eee;
padding-bottom: 4px;
}
.blog-footer a:hover {
border-bottom: 1px solid #23527c;
}
/*Comments*/
#comments h4 {
margin:1em 0;
font-weight:bold;
line-height:1.4em;
text-transform:uppercase;
letter-spacing:.2em;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.feed-links {
display:none;
}
/*Responsive*/
/*Override Bootstrap's default container.*/
@media (min-width: 1200px) {
.container {
width: 970px;
}
}
@media screen and (max-width: 960px) {
.blog-main, .blog-sidebar {
float: none;
display: block;
width: auto;
}
}
/*]]>*/
</style></pre>
<br />
<b>7. Save!</b><br />
<a href="https://www.bersosial.com/threads/bagian-1-bikin-template-blogger-sendiri-dengan-bootstrap.20418/" rel="nofollow" target="_blank"><br /></a>
<a href="https://www.bersosial.com/threads/bagian-1-bikin-template-blogger-sendiri-dengan-bootstrap.20418/" rel="nofollow" target="_blank">Sumber</a><br />
<b><br /></b>
<b>Cara Lainnya Membuat Template Blog Sendiri dengan Bootstrap:</b><br />
<br />
<ul>
<li><a href="http://blogromeltea.blogspot.co.id/2017/02/cara-membuat-template-blog-bootstrap.html" rel="nofollow" target="_blank">Cara Lain</a></li>
<li><a href="http://sastrodesign.blogspot.co.id/2015/03/cara-membuat-template-blogger-dengan-bootstrap.html" rel="nofollow" target="_blank">Cara Lain1</a></li>
<li><a href="http://www.malasngoding.com/membuat-template-blog-sederhana-dengan-bootstrap/" rel="nofollow" target="_blank">Cara Lain2</a></li>
</ul>
<br />
<br />CB Bloggerhttp://www.blogger.com/profile/06788684849400740675noreply@blogger.com1tag:blogger.com,1999:blog-8988923169252581917.post-44521171602618394282016-09-28T19:00:00.002+07:002016-09-28T20:36:05.194+07:00Kotak Berlangganan (RSS Subscription Box) Bootstrap Blogger<b>WIDGET Kotak Berlangganan (RSS Subscription Box) Bootstrap Blogger. </b>Dipasang di sidebar blog. Memudahkan pengunjung atau pembaca berlangganan gratis dan aman posting terbaru atau update tulisan di blog kita.<br />
<br />
Penampakannya:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfalJSHyalk6RtL1iBwCKAhV0u5IBrfJ_IKA_s2eb2WqM8lzqWGswtknI8Cdzx_tgmvVjtFax2y5VBwEMBeax6Sa7ueO8HohHQF1040u16r2voCehfwFeZjchiJJWanysFOT42_ciE0Rda/s1600/kotak-berlangganan-bs-blogger.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Kotak Berlangganan (RSS Subscription Box) Bootstrap Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfalJSHyalk6RtL1iBwCKAhV0u5IBrfJ_IKA_s2eb2WqM8lzqWGswtknI8Cdzx_tgmvVjtFax2y5VBwEMBeax6Sa7ueO8HohHQF1040u16r2voCehfwFeZjchiJJWanysFOT42_ciE0Rda/s1600/kotak-berlangganan-bs-blogger.JPG" title="Kotak Berlangganan (RSS Subscription Box) Bootstrap Blogger" /></a></div>
<br />
Untuk memasang kotak berlangganan ini, daftarkan dulu blog Anda ke <a href="http://feedburner.google.com/" rel="nofollow" target="_blank">Feeburner</a> untuk mendapatkan ID RSS Feed blog Anda.<br />
<br />
<b>KODENYA:</b><br />
<br />
<div class='well'><br />
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=contohblognih&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true' target='popupwindow'><br />
<fieldset><br />
<div class='form-group'><br />
<input class='form-control' id='follow-by-email-address' name='email' placeholder='Email address...' type='text'/><br />
</div><br />
<div class='form-group'><br />
<input class='btn btn-info btn-block' id='follow-by-email-submit' type='submit' value='Submit'/> <input name='uri' type='hidden' value='contohblognih'/> <input name='loc' type='hidden' value='en_US'/><br />
</div><br />
</fieldset><br />
</form><br />
</div><br />
<br />
Demikian Kotak Berlangganan (RSS Subscription Box) Bootstrap Blogger.*<br />
<br />CB Bloggerhttp://www.blogger.com/profile/06788684849400740675noreply@blogger.com0tag:blogger.com,1999:blog-8988923169252581917.post-59196836457975114702016-09-28T17:23:00.001+07:002016-09-28T17:23:40.158+07:00Menyembunyikan pesan 'Showing post with label..." di Halaman LabelMenyembunyikan pesan 'Showing post with label..." di Halaman Label, namun hanya muncul di halaman pencarian yang tidak ada.<br />
<br />
Caranya mengunakan kode CSS dan Tag Kondisional halaman label (label pages). Pesan 'Showing posts with label ... - Show all posts' adalah default (bawaan) blogger. Kodenya bersumber di <span style="color: red;">.status-msg-wrap,.status-msg-body</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio0VGPij-H1OCE-OjZf3MEQ4kXHL19FR3yupivr83M3HQhq0Ar7JSQ6lxY9aUqGwUy1tb4CaRqJGWgASR19gM8bvM1Q1mxM3_AUShLTrsuuhO9cenfMad72yPoglzIZaUiIpaTNYrTJzFE/s1600/blog+blogger+blogging.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Menyembunyikan pesan 'Showing post with label..." di Halaman Label" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio0VGPij-H1OCE-OjZf3MEQ4kXHL19FR3yupivr83M3HQhq0Ar7JSQ6lxY9aUqGwUy1tb4CaRqJGWgASR19gM8bvM1Q1mxM3_AUShLTrsuuhO9cenfMad72yPoglzIZaUiIpaTNYrTJzFE/s1600/blog+blogger+blogging.jpg" title="Menyembunyikan pesan 'Showing post with label..." di Halaman Label" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcaYbCv9fYMC668tng9keN9k85OPyO_m15Izz9x_xiOvAcqmcVflsqr85K60ELer_PNvjr6-L9wlnGr24CTrAPwj5zRGsFcK3uMORWhrC0brSXVebMQI8qGmhsxTjYGtdM7tBbyiExt63M/s1600/showing+posts+with+label+blogger.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Menyembunyikan pesan 'Showing post with label..." di Halaman Label" border="0" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcaYbCv9fYMC668tng9keN9k85OPyO_m15Izz9x_xiOvAcqmcVflsqr85K60ELer_PNvjr6-L9wlnGr24CTrAPwj5zRGsFcK3uMORWhrC0brSXVebMQI8qGmhsxTjYGtdM7tBbyiExt63M/s320/showing+posts+with+label+blogger.JPG" title="Menyembunyikan pesan 'Showing post with label..." di Halaman Label" width="320" /></a></div>
<br />
Simpan di atas kode <b></head></b><br />
<br />
<span style="color: red;"><b:if cond='data:blog.searchLabel'></span><br />
<span style="color: red;"><style></span><br />
<span style="color: red;">.status-msg-wrap,.status-msg-body {display: none;}</span><br />
<span style="color: red;"></style></span><br />
<br />
Save!<br />
Demikian cara Menyembunyikan pesan 'Showing post with label..." di Halaman Label.*<br />
<br />CB Bloggerhttp://www.blogger.com/profile/06788684849400740675noreply@blogger.com0tag:blogger.com,1999:blog-8988923169252581917.post-86139471851509840762016-09-28T16:56:00.000+07:002017-03-13T16:56:18.704+07:00Simple Search Box for Blogger Built with Boostrap. It works!<b>Simple Search Box for Blogger Built with Boostrap. It works!</b><br />
<b><br /></b>
<b>KOTAK </b>pencarian simple --default bs-- untuk template blogger. Kode khusus pencarian sudah dimasukan, jadi bekerja dengan baik.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqv_FH_IphWIob-R0j9LLJOFckV4BBUu0biG5KmTs2N1LxpYL5f2jKI94esfOBqohzlux2qQXpSJU0OYR7bWj-B-XCy4AchphgJQqeUy36CIG9T9wKPb8Me5YjLAXfi0346GWqPWAw7It0/s1600/kotak-pencarian-simple-keren-blogger-bs.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Simple Search Box for Blogger Built with Boostrap. It works!" border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqv_FH_IphWIob-R0j9LLJOFckV4BBUu0biG5KmTs2N1LxpYL5f2jKI94esfOBqohzlux2qQXpSJU0OYR7bWj-B-XCy4AchphgJQqeUy36CIG9T9wKPb8Me5YjLAXfi0346GWqPWAw7It0/s320/kotak-pencarian-simple-keren-blogger-bs.JPG" title="Simple Search Box for Blogger Built with Boostrap. It works!" width="320" /></a></div>
<br />
<br />
<blockquote class="tr_bq">
<form class='navbar-form' role='search' action='/search?q='><br /> <div class='input-group'><br /> <input class='form-control' name='q' placeholder='Search' type='text'/><br /> <div class='input-group-btn'><br /> <button class='btn btn-default' type='submit'><i class='fa fa-search'/></button><br /> </div><br /> </div><br /> </form></blockquote>
<br />
Untuk tampilan seperti gambar ilustrasi, silakan ke <a href="http://jsfiddle.net/66Ynx/" rel="nofollow" target="_blank">sumbernya</a>.<br />
<b><br /></b>
<b>KODE LAIN</b><br />
1. Layout > Add a Gadget<br />
2. Masukkan:<br />
<br />
<blockquote class="tr_bq">
<form role='search' action='/search?q='><br /> <div class='input-group'><br /> <input class='form-control' name='q' placeholder='Search' type='text'/><br /> <div class='input-group-btn'><br /> <button class='btn btn-default' type='submit'><i class='fa fa-search'/></i></button><br /> </div><br /> </div><br /> </form><br /><style><br />.input-group-btn:last-child > .btn {<br /> margin-left: -1px;<br /> height: 45px;<br /> background: #2b5797;<br /> color: #fff;}<br /></style></blockquote>
CB Bloggerhttp://www.blogger.com/profile/06788684849400740675noreply@blogger.com0tag:blogger.com,1999:blog-8988923169252581917.post-32403832004651302292016-09-27T19:52:00.001+07:002016-09-27T19:52:07.201+07:00Kode untuk Menyembunyikan Posting di Halaman Depan Blogger<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixps9SvpCcH0q27M5O8UcciaW7h3qHEx2qNUgM0o7GrcHJ1CJoCpCAy1VIUajX6Fd_AFrYNp4GBe26Z3MH_Tpn3DE9vnwyyzwYYEdMpPC9QMUYa7ur8s196DzUOA50hXZ1Fx24CGlX5qPO/s1600/blog+blogger+blogging.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Kode untuk Menyembunyikan Posting di Halaman Depan Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixps9SvpCcH0q27M5O8UcciaW7h3qHEx2qNUgM0o7GrcHJ1CJoCpCAy1VIUajX6Fd_AFrYNp4GBe26Z3MH_Tpn3DE9vnwyyzwYYEdMpPC9QMUYa7ur8s196DzUOA50hXZ1Fx24CGlX5qPO/s1600/blog+blogger+blogging.jpg" title="Kode untuk Menyembunyikan Posting di Halaman Depan Blogger" /></a></div>
<b>Kode untuk Menyembunyikan Posting di Halaman Depan Blogger.</b><br />
<b><br /></b>
<b>DAFTAR </b>posting di halaman depan adalah widget Blog Post. Kode HTML-nya .post. Berikut ini kode dan cara menyembunyikan semua posting di halaman depan, termasuk menyembunyikan sidebarnya.<br />
<br />
Posting dan sidebar widget hanya muncul di halaman dalam (single post/single page).<br />
<b><br /></b>
Simpan di bawah kode <b>]]></b:skin></b><br />
<b><br /></b>
<span style="color: #bf9000;"><b:if cond='data:blog.url == data:blog.homepageUrl'></span><br />
<span style="color: #bf9000;"><style type='text/css'></span><br />
<span style="color: #bf9000;">.post, .sidebar, #blog-pager {display:none;}</span><br />
<span style="color: #bf9000;">body#layout .sidebar {display:inline;margin-top:200px;}</span><br />
<span style="color: #bf9000;"></style></span><br />
<span style="color: #bf9000;"></b:if></span><br />
<br />
Demikian Kode untuk Menyembunyikan Posting di Halaman Depan Blogger.*<br />
<br />CB Bloggerhttp://www.blogger.com/profile/06788684849400740675noreply@blogger.com0tag:blogger.com,1999:blog-8988923169252581917.post-79378108151746475742016-09-27T01:54:00.000+07:002016-09-27T01:54:17.522+07:00Cara Membuat Template Blog dengan Bootstrap - CB Bootstrap Documentation<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUPs7CIPVc45KdAykUmQN7RShf_HROLz5gtkDeYIM4bU3VFKs7_w_blpTrtOeDbA-87_ipCxsFrUg5maQJ1rvgXlUzCXRt4xlNb0iILhDHUlayJX_Cj2S0u-rPr96a_I7bRj1Nn_yXv0zO/s1600/bootstrap.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara Membuat Template Blog dengan Bootstrap - CB Bootstrap Documentation" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUPs7CIPVc45KdAykUmQN7RShf_HROLz5gtkDeYIM4bU3VFKs7_w_blpTrtOeDbA-87_ipCxsFrUg5maQJ1rvgXlUzCXRt4xlNb0iILhDHUlayJX_Cj2S0u-rPr96a_I7bRj1Nn_yXv0zO/s1600/bootstrap.jpg" title="Cara Membuat Template Blog dengan Bootstrap - CB Bootstrap Documentation" /></a></div>
<b>Cara Membuat Template Blog dengan Bootstrap - CB Bootstrap Documentation</b><br />
<br />
<b>Bootstrap History</b><br />
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source product in August 2011 on GitHub. In June 2014 Bootstrap was the No.1 project on GitHub!<br />
<br />
<b>Why Use Bootstrap?</b><br />
Advantages of Bootstrap:<br />
<br />
<ol>
<li>Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap</li>
<li>Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops</li>
<li>Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework</li>
<li>Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera).</li>
</ol>
<br />
<br />
<b>Where to Get Bootstrap?</b><br />
There are two ways to start using Bootstrap on your own web site.<br />
<br />
<b>You can:</b><br />
<br />
<ol>
<li>Download Bootstrap from getbootstrap.com</li>
<li>Include Bootstrap from a CDN</li>
</ol>
<br />
Link to CDN:<br />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><br />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><br />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><br />
<b><br /></b>
<b>Situs untuk Belajar Bootstrap:</b><br />
<br />
<ul>
<li><a href="http://www.getbootstrap.com/" rel="nofollow" target="_blank">www.getbootstrap.com</a></li>
<li><a href="http://www.startbootstrap.com/" rel="nofollow" target="_blank">www.startbootstrap.com</a></li>
<li><a href="http://www.w3schools.com/bootstrap/default.asp" rel="nofollow" target="_blank">www.w3schools.com/bootstrap/default.asp</a></li>
</ul>
<br />
<div>
<br /></div>
CB Bloggerhttp://www.blogger.com/profile/06788684849400740675noreply@blogger.com0tag:blogger.com,1999:blog-8988923169252581917.post-33464434908989778862016-09-23T17:47:00.000+07:002016-09-27T09:36:51.885+07:00Auto Read Mode dengan Thumbnail No Image di Blogger<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLZDSqCQlGuVlYeb2-im_I8GF4_bXW9EKkdeFIXksRcZCkUYGTokQb53G2tqJl4ZLDqVUv91JBkL8YHSs3s_v8DraOhjGRMtU_PxqLkj8vFjC5hyphenhyphenR3j8wyEejxLvXwWWdL-orSZKKe_WOQ/s1600/no-image.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Auto Read Mode dengan Thumbnail No Image di Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLZDSqCQlGuVlYeb2-im_I8GF4_bXW9EKkdeFIXksRcZCkUYGTokQb53G2tqJl4ZLDqVUv91JBkL8YHSs3s_v8DraOhjGRMtU_PxqLkj8vFjC5hyphenhyphenR3j8wyEejxLvXwWWdL-orSZKKe_WOQ/s1600/no-image.png" title="Auto Read Mode dengan Thumbnail No Image di Blogger" /></a></div>
Auto readmore adalah tampilan halaman depan blogger berupa judul, cuplikan gambar (thumbnail image), dan cuplikan tulisan dari bagian awal posting.<br />
<br />
Template bawaan blogger menampilkan tulisan secara penuh di halaman depan. Untuk meringkasnya, agar tampilan posting lebih user friendly, maka gunakan kode auto readmore.<br />
<br />
Untuk membuat Auto readmore dengan default thumbnail, yaitu ada gambar cadangan jika posting tidak menggunakan foto/gambar, Anda hanya perlu melakukan dua langkah mudah, setelah masuk ke Template > Edit HTML.<br />
<br />
1. Tambahkan JavaSript<br />
2. Tambahkan HTML<br />
<br />
<b>Menambahkan JavaScript</b><br />
Copas kode dibawah ini sebelum kode </head><br />
<br />
<span style="color: #bf9000;"><script type='text/javascript'>
// ganti angka dibawah untuk mengatur jumlah karakter
summary_noimg = 350;
summary_img = 280;
// ganti angka dibawah untuk merubah ukuran thumbnail
img_thumb_height = 200;
img_thumb_width = 200;
// ganti dengan gambar sesuai selera anda
img_thumb_nosrc = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG1MSTVDho3ihFN-P3gU2ef6TF8tbqf7my3xQiTslPRjtIf3LMkDQ8phntQnyiMLJGsdbg4wECuWjE0u6UDVAKMAPtDkMVJYlNT-jeY67CxohN_cSyy0DW1vE0TzegLKkjU6AKvRIVl-OP/s1600/default.png";
</script>
<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;
// this block of code is used to add default thumbnail to post without images
if(img.length<=1) {
imgtag = '<div style="clear:both; margin:0 10px 10px 0px;float:left;"><img src="'+img_thumb_nosrc+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';
summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script></span><br />
<br />
<b>Menambahkan Kode HTML</b><br />
Cari kode <b><data:post.body/></b> dan ganti kode yang <u>kedua</u> dengan kode di bawah ini:<br />
<br />
<span style="color: #bf9000;"><b:if cond='data:blog.pageType != "static_page"'> </span><br />
<span style="color: #bf9000;"> <b:if cond='data:blog.pageType != "item"'> </span><br />
<span style="color: #bf9000;"> <div expr:id='"summary" + data:post.id'></span><br />
<span style="color: #bf9000;"><data:post.body/></span><br />
<span style="color: #bf9000;"></div> </span><br />
<span style="color: #bf9000;"> <script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script> </span><br />
<span style="color: red;"> <span class='rmlink' style='float:right;margin-top:10px'>
<a expr:href='data:post.url'>
Read More &#187;
</a>
</span> </span><br />
<span style="color: #bf9000;"> <b:else/> </span><br />
<span style="color: #bf9000;"> <data:post.body/> </span><br />
<span style="color: #bf9000;"> </b:if></span><br />
<span style="color: #bf9000;"> <b:else/> </span><br />
<span style="color: #bf9000;"> <data:post.body/> </span><br />
<span style="color: #bf9000;"></b:if></span><br />
<br />
<i>Untuk menghapus tulisan Readmore, cukup hapus kode warna merah.</i><br />
<br />
Simpan template!<br />
<br />
Demikian cara menambahkan auto readmore dengan default thumbnail di halaman depan blogger.<br />
<br />
<i><a href="http://blog.kangismet.net/2012/10/auto-readmore-dengan-thumbnail-no-image-di-blogspot.html" rel="nofollow" target="_blank">Sumber</a></i><br />
<br />CB Bloggerhttp://www.blogger.com/profile/06788684849400740675noreply@blogger.com0tag:blogger.com,1999:blog-8988923169252581917.post-27210674607588022802016-09-22T08:16:00.001+07:002016-09-28T23:41:14.808+07:00Mengatasi List Style Bullet & Numbered List di Template Blog Bootstrap<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUPs7CIPVc45KdAykUmQN7RShf_HROLz5gtkDeYIM4bU3VFKs7_w_blpTrtOeDbA-87_ipCxsFrUg5maQJ1rvgXlUzCXRt4xlNb0iILhDHUlayJX_Cj2S0u-rPr96a_I7bRj1Nn_yXv0zO/s1600/bootstrap.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Mengatasi List Style Bullet & Numbered List di Template Blog Bootstrap" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUPs7CIPVc45KdAykUmQN7RShf_HROLz5gtkDeYIM4bU3VFKs7_w_blpTrtOeDbA-87_ipCxsFrUg5maQJ1rvgXlUzCXRt4xlNb0iILhDHUlayJX_Cj2S0u-rPr96a_I7bRj1Nn_yXv0zO/s1600/bootstrap.jpg" title="Mengatasi List Style Bullet & Numbered List di Template Blog Bootstrap" /></a></div>
Mengatasi List Style Bullet & Numbered List di Template Blog <a href="http://getbootstrap.com/" rel="nofollow" target="_blank">Bootstrap</a>. Secara, kode CSS Bootstrap menghilangkan style angka dan bullet di list (daftar) posting.<div>
<br /></div>
<div>
Untuk mengatasinya, cari kode <b>ul, ol, li {list-style-type:none}</b> dan ubah menjadi <b>ul, ol, li {}</b></div>
<div>
<br /></div>
<div>
Cara lainnya, yang lebih baik, copas atau pasang kode berikut ini di atas kode <b>]]></b:skin></b></div>
<div>
<br /><span style="background: rgb(255, 255, 255); border: 0px; color: #cc0000; font-family: "Open Sans", sans-serif; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">.post ul,.post ol{margin:20px;margin-top:5px}</span><br style="background-color: white; color: #555555; font-family: "Open Sans", sans-serif; font-size: 14px; margin: 0px; padding: 0px;" /><span style="background: rgb(255, 255, 255); border: 0px; color: #cc0000; font-family: "Open Sans", sans-serif; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">.post ol li{list-style-type:Decimal;padding-left:1px;margin:5px 0 0 20px}</span><br style="background-color: white; color: #555555; font-family: "Open Sans", sans-serif; font-size: 14px; margin: 0px; padding: 0px;" /><span style="background: rgb(255, 255, 255); border: 0px; color: #cc0000; font-family: "Open Sans", sans-serif; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">.post ul li{list-style-type:Disc;padding-left:1px;margin:5px 0 0 20px}</span><br style="background-color: white; color: #555555; font-family: "Open Sans", sans-serif; font-size: 14px; margin: 0px; padding: 0px;" /><span style="background: rgb(255, 255, 255); border: 0px; color: #cc0000; font-family: "Open Sans", sans-serif; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">.widget .post-body ul {padding: 0 1em;margin: 0.5em;line-height: 1.3;}</span><br />
<span style="background: rgb(255, 255, 255); border: 0px; color: #cc0000; font-family: "Open Sans", sans-serif; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><br /></span>
<div>
Bullet & Number List adalah bagian dari elemen posting blog yang dianjurkan digunakan agar posting menjadi user friendly.</div>
</div>
<div>
<b><br /></b></div>
<div>
<b>Contoh Bullet List:</b></div>
<div>
<ul>
<li>List Satu</li>
<li>List Dua</li>
<li>Tiga List</li>
<li>Empat List</li>
<li>List Kelima</li>
</ul>
</div>
<div>
<br /></div>
<div>
<b>Contoh Numbered List:</b></div>
<div>
<div>
<ol>
<li>List Satu</li>
<li>List Dua</li>
<li>Tiga List</li>
<li>Empat List</li>
<li>List Kelima</li>
</ol>
</div>
</div>
<div>
Demikian cara Mengatasi List Style Bullet & Numbered List di <a href="https://startbootstrap.com/" target="_blank">Template Blog Bootstrap</a>.*</div>
<div>
<br /></div>
CB Bloggerhttp://www.blogger.com/profile/06788684849400740675noreply@blogger.com0tag:blogger.com,1999:blog-8988923169252581917.post-68438566033180395412016-09-21T17:43:00.005+07:002016-09-28T23:41:14.814+07:00Free Bootstrap Blogger Template Here: Start Bootstrap<b>Free Bootstrap Blogger Template Here: Start Bootstrap. </b>Forever free, open source, and easy to use.<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ZJ8yZTe3iFuc_Hv2DeK_mxxdnaVJ-2tgCoBm0AxgOSOBxPVFvlxF12qTTSP4sZieooDlp5LnyjOCRGwZWEWlQ-HRkBh7xnsuumW_pZUlgG0mZm0K2E58O1xA-sNt8Y1d3aZrN0tC5ktZ/s1600/free-bootstrap-blogger-templates.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Free Bootstrap Blogger Template Here: Start Bootstrap" border="0" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ZJ8yZTe3iFuc_Hv2DeK_mxxdnaVJ-2tgCoBm0AxgOSOBxPVFvlxF12qTTSP4sZieooDlp5LnyjOCRGwZWEWlQ-HRkBh7xnsuumW_pZUlgG0mZm0K2E58O1xA-sNt8Y1d3aZrN0tC5ktZ/s320/free-bootstrap-blogger-templates.JPG" title="Free Bootstrap Blogger Template Here: Start Bootstrap" width="320" /></a></div>
<div>
<br /><br />Start Bootstrap is a collection of free to download Bootstrap themes and templates. Our themes are open source and you can use them for any purpose, even comercially!<div>
<a href="https://www.blogger.com/goog_1065886222"><br /></a></div>
<div>
<a href="https://startbootstrap.com/" rel="nofollow" target="_blank">https://startbootstrap.com/</a></div>
</div>
CB Bloggerhttp://www.blogger.com/profile/06788684849400740675noreply@blogger.com0tag:blogger.com,1999:blog-8988923169252581917.post-49972841460346039272016-09-19T23:22:00.002+07:002016-09-28T23:41:14.811+07:00Bootstrap Responsive Navigation Menu BarBy responsive we mean that the navigation bar adjusts itself to the available view port size. Say it will be extended to the full width when viewed in bigger screen like desktop/laptops and collapse itself to fit to the smaller screens of mobiles/tablets.<div>
<div style="background-color: white; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; margin-bottom: 30px; margin-top: 30px; text-align: justify;">
Just take a look at the below image, which depicts clearly of how our navigation bar at the top looks on <strong>different devices</strong>.</div>
<div class="separator" style="background-color: white; clear: both; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; text-align: center;">
<img alt="twitter-bootstrap-custom-responsive-navigation-menu-bar" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYDzRNEALQOMHSJhC8g6x1p4-NMlxh34GRkgfng8RRmPDS_ctKM2d-ph-nxXesmJZXiiM11StkfFxgYK6SeoNY_Z4OsacEgPjSewTdwYacfusPXb2I8WF5-YRRlzD9CbKeQfh_d5wizss7/s1600/twitter-bootstrap-custom-responsive-navigation-menu-bar.png" style="background: none !important; border: none !important; box-shadow: transparent 0px 0px 0px !important; margin-bottom: 30px; margin-top: 30px; padding: 0px !important;" title="Twitter Bootstrap Custom Responsive Navigation Menu" width="95%" /></div>
<h2 style="background-color: white; font-family: arial; font-size: 1.3em; font-stretch: normal; font-weight: normal; line-height: normal; margin: 30px 0px; position: relative;">
Plan Your Responsive Navigation Menu</h2>
<div style="background-color: white; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; margin-bottom: 30px; margin-top: 30px; text-align: justify;">
First we’ll plan the design of our navigation bar. Once we’ve planned, it will be easier to put it into action. For the demo, I’ve planned to create a navbar at the top of the page, with the brand-name/logo at the left side and the menus at the right side of the bar.</div>
<div style="background-color: white; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; margin-bottom: 30px; margin-top: 30px; text-align: justify;">
Come! let’s walk through the steps one-by-one to make our goal.</div>
<h2 style="background-color: white; font-family: arial; font-size: 1.3em; font-stretch: normal; font-weight: normal; line-height: normal; margin: 30px 0px; position: relative;">
Step 1: Make the Page Responsive</h2>
<div style="background-color: white; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; margin-bottom: 30px; margin-top: 30px; text-align: justify;">
The first and foremost step to make our page responsive is to tell the page to span to the full width of the viewport available. So we'll add the below tag within the section of the html page.</div>
<pre class="prettyprint lang-html codebk" style="background-color: aliceblue; border: none; color: #4e5153; font-size: 14px; line-height: 1.6em; margin-bottom: 30px; margin-top: 30px; overflow: auto; padding: 15px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><meta name="viewport" content="width=device-width, initial-scale=1.0">
</pre>
<h2 style="background-color: white; font-family: arial; font-size: 1.3em; font-stretch: normal; font-weight: normal; line-height: normal; margin: 30px 0px; position: relative;">
Step 2: Create the Navigation Bar</h2>
<div style="background-color: white; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; margin-bottom: 30px; margin-top: 30px; text-align: justify;">
Let's write the actual html markup for the navbar. Since I’m using HTML5, I’ll add <nav> element to create navigation bar. But it will work if you use the below given markup with <div> element.</div>
<strong style="background-color: white; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px;">HTML Markup</strong><span style="background-color: white; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px;"></span><pre class="prettyprint lang-html codebk" style="background-color: aliceblue; border: none; color: #4e5153; font-size: 14px; line-height: 1.6em; margin-bottom: 30px; margin-top: 30px; overflow: auto; padding: 15px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!--header section -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand Name</a>
</div>
<!-- menu section -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="# ">Home</a></li>
<li><a href="# ">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
</div>
</nav>
</pre>
<div style="background-color: white; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; margin-bottom: 30px; margin-top: 30px; text-align: justify;">
Our Navbar will now look like this.</div>
<div class="separator" style="background-color: white; clear: both; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; text-align: center;">
<img alt="Bootstrap Default Navbar" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKpX4F9hug_csvM4_A7rPvYWd-6PGvYhvZRsFz-NC2brtwnGD3UeqnqVjSOGXn33ATIlRTo255C7aoaddErvrrUvrYS3FyQn00l71Bs8xIoMrn4ai9E_wufJ-FV8CqH5IVLgFDbuTpAp8N/s1600/navbar-default.png" style="background: none !important; border: none !important; box-shadow: transparent 0px 0px 0px !important; margin-bottom: 30px; margin-top: 30px; padding: 0px !important;" title="Bootstrap Default Navbar" width="90%" /></div>
<div style="background-color: white; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; margin-bottom: 30px; margin-top: 30px; text-align: justify;">
We have used the css class <strong>“navbar-default”</strong> with <nav> element to create the above default navbar. The navbar is supposed to be made of two sections. One is the navigation header which contains the site logo or name and the other contains the menu itself.</div>
<div style="background-color: white; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; margin-bottom: 30px; margin-top: 30px; text-align: justify;">
In the menu section we’ve used <strong>"navbar-collapse"</strong> class to shrink the menus and make it stack one after another for mobile devices. Since we want the menu at the right side of the navbar, we’ve added the class <strong>"navbar-right"</strong>. If you don't want the menu to be pulled up to the right side, you can neglect the class "navbar-right". Also note that it’s a must to include<strong>role="navigation"</strong> to make your navbar accessible.</div>
<h2 style="background-color: white; font-family: arial; font-size: 1.3em; font-stretch: normal; font-weight: normal; line-height: normal; margin: 30px 0px; position: relative;">
Step 3: Customize our Twitter Bootstrap Navbar</h2>
<div style="background-color: white; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; margin-bottom: 30px; margin-top: 30px; text-align: justify;">
The default navbar is ok, but I want more spice to this. So I'm going to customize this plain design with some appealing colors and gradient. If our requirement is minimal, there is a quick and dirty method to customize the bootstrap classes. We can override the native bootstrap classes in a separate stylesheet and link them next to the bootstrap stylesheet in our html page.</div>
<div style="background-color: white; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; margin-bottom: 30px; margin-top: 30px; text-align: justify;">
So I'm going to create a stylesheet named "custom.css" and write some css styles to make the navbar look better.</div>
<strong style="background-color: white; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px;">Custom.css File Code</strong><span style="background-color: white; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px;"></span><pre class="prettyprint codebk" style="background-color: aliceblue; border: none; color: #4e5153; font-size: 14px; line-height: 1.6em; margin-bottom: 30px; margin-top: 30px; overflow: auto; padding: 15px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;">.navbar {
background-image: linear-gradient(#54B4EB, #2FA4E7 60%, #1D9CE5);
background-repeat: no-repeat;
border-bottom: 1px solid #178ACC;
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
border-radius: 0px;
}
.navbar-default {
background-color: #2FA4E7;
border-color: #1995DC;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus ,
.navbar-default .navbar-nav > li > a {
color: #FFF;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #FFF;
background-color: #178ACC;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #178ACC;
}
.navbar-default .navbar-toggle {
border-color: #178ACC;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #FFF;
}
</pre>
<div style="background-color: white; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; margin-bottom: 30px; margin-top: 30px; text-align: justify;">
After customizing, now this is how our final navigation bar looks. A few tweaks to the native bootstrap classes and here we have turned the plain navbar into an eye candy.</div>
<div class="separator" style="background-color: white; clear: both; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; text-align: center;">
<img alt="Bootstrap Custom Navbar" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUJwMibirtIs0ILTuwZForRgnu6s3qP2ycxDftDsdJYS_yrXrNmTFmxOgqRCDad9o-URlq4TjxlbjmE1-R3h8xDAmY2wY_cnv6zNgmlD8kwNmYf4LuII98s4jTP_jOENEy3ZdlMKpqpFhL/s1600/navbar-custom.png" style="background: none !important; border: none !important; box-shadow: transparent 0px 0px 0px !important; margin-bottom: 30px; margin-top: 30px; padding: 0px !important;" title="Bootstrap Custom Navbar" width="90%" /></div>
<h2 style="background-color: white; font-family: arial; font-size: 1.3em; font-stretch: normal; font-weight: normal; line-height: normal; margin: 30px 0px; position: relative;">
Create Fixed Navbar at the top</h2>
<div style="background-color: white; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; margin-bottom: 30px; margin-top: 30px; text-align: justify;">
If you want this navbar to fixed to the top of the page, while you scroll down the page, all you have to do is to add one more class <strong>"navbar-fixed-top"</strong> to the <nav> element.</div>
<strong style="background-color: white; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px;">HTML Markup</strong><span style="background-color: white; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px;"></span><pre class="prettyprint lang-html codebk" style="background-color: aliceblue; border: none; color: #4e5153; font-size: 14px; line-height: 1.6em; margin-bottom: 30px; margin-top: 30px; overflow: auto; padding: 15px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- html markup goes here -->
</nav>
</pre>
<h2 style="background-color: white; font-family: arial; font-size: 1.3em; font-stretch: normal; font-weight: normal; line-height: normal; margin: 30px 0px; position: relative;">
Create Fixed Navbar at the bottom</h2>
<div style="background-color: white; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; margin-bottom: 30px; margin-top: 30px; text-align: justify;">
Is it possible to fix the navbar to the bottom of the page? Yes, you can. Just add the class<strong>"navbar-fixed-bottom"</strong> to the <nav> element.</div>
<strong style="background-color: white; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px;">HTML Markup</strong><span style="background-color: white; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px;"></span><pre class="prettyprint lang-html codebk" style="background-color: aliceblue; border: none; color: #4e5153; font-size: 14px; line-height: 1.6em; margin-bottom: 30px; margin-top: 30px; overflow: auto; padding: 15px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<!-- html markup goes here -->
</nav>
</pre>
<span style="background-color: white; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px;">Source:</span><br />http://www.kodingmadesimple.com/2014/04/bootstrap-custom-responsive-navbar-tutorial.html</div>
<div>
<strong style="background-color: white; color: #4e5153; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px;"><br /></strong></div>
CB Bloggerhttp://www.blogger.com/profile/06788684849400740675noreply@blogger.com1tag:blogger.com,1999:blog-8988923169252581917.post-2160973035927060392016-09-19T23:16:00.000+07:002016-09-28T23:41:14.805+07:00Blog is Online Diary & Business<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB0uI8sl1k8jkcOw4Z9R0pcoHS7G-ZwHsbYDe9sowiBLYkUuJMpfS_omHtlWYlbUE8AubY7mDiUd3ezqplhCj4OGaXPmgm_fYGNJ9TjfsH0mJo-AtVcH2InKSmE7oHaBrn2M0Av59Ca95A/s1600/11431115-beautiful-muslim-woman-using-laptop-while-sitting-relaxed-on-bench-at-summer-park.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Blog is Online Diary & Business" border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB0uI8sl1k8jkcOw4Z9R0pcoHS7G-ZwHsbYDe9sowiBLYkUuJMpfS_omHtlWYlbUE8AubY7mDiUd3ezqplhCj4OGaXPmgm_fYGNJ9TjfsH0mJo-AtVcH2InKSmE7oHaBrn2M0Av59Ca95A/s1600/11431115-beautiful-muslim-woman-using-laptop-while-sitting-relaxed-on-bench-at-summer-park.jpg" title="Blog is Online Diary & Business" width="320" /></a></div>
Lorem ipsum dolor sit amet, dolore feugiat accusam ad qui, duo ei eros facilisis consulatu, usu modo facete qualisque id. Has ad timeam deseruisse, per mutat nominati disputando in, posse tamquam constituto ex pro. Blog is Online Diary & Business.<br />
<div>
<br /></div>
<div>
Mei te quis exerci hendrerit, eos ex accumsan pertinax. Quo fabellas suavitate accommodare id, cu sed ferri repudiandae. Mel ut postea suscipit.<br />
<br />
Justo malorum voluptua ut quo, detraxit corrumpit suscipiantur ne per, ut natum audire mediocrem cum. Cum at illud harum, ut populo noster facilis quo. Fuisset suscipiantur ad sed, duo cu dolorem patrioque urbanitas. Ei ius harum omnes populo. Mea an melius officiis pertinax, ubique mandamus deseruisse ius ne.<br />
<br />
Te aliquip detraxit tincidunt vim, te pertinacia moderatius sit, his ex labitur expetenda. Dicat patrioque qui ei, ex eum facete propriae apeirian. Mentitum dignissim accommodare eos ei, te eam quod facilisi suavitate, malis facilisi euripidis vim et. Ea cetero pertinax sensibus pri, harum lucilius voluptatum ne est, ea unum ornatus usu.<br />
<br />
Graecis nominavi invidunt mel ne. Modo tempor periculis nam cu, eu augue ornatus nominavi eum. Vim id viris mediocrem. Quo percipit vulputate et. An meis accusata principes mea.<br />
<br />
Usu case utroque no, sed eu corpora probatus assentior. Mel malis dolor dicant ne, ut has alienum pertinacia. Ius saperet feugait an, agam ubique contentiones pro ad. Mei augue appetere ne, ut mei affert pericula posidonium, clita graeco iriure eu ius. Antiopam corrumpit eos in, mel detraxit consetetur at.</div>
CB Bloggerhttp://www.blogger.com/profile/06788684849400740675noreply@blogger.com3tag:blogger.com,1999:blog-8988923169252581917.post-87476897971833395022016-09-19T21:57:00.003+07:002016-09-28T23:41:14.816+07:00Mengenal Bootstrap untuk Desain Template Blogger<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgKMoa49XO4cE78yS7sNI7hkSegZH_HYa-fuubdUobhac_Di9vBY_3T1DyPxk2hzTfpd_Q8zAEY2duH5uvi78PBDvIznoc3o_3EayEvthhyphenhyphenGGdzu_t2isZNiyD7WcCWCvZKMvZGtX_61JX/s1600/bootstrap.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Mengenal Bootstrap untuk Desain Template Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgKMoa49XO4cE78yS7sNI7hkSegZH_HYa-fuubdUobhac_Di9vBY_3T1DyPxk2hzTfpd_Q8zAEY2duH5uvi78PBDvIznoc3o_3EayEvthhyphenhyphenGGdzu_t2isZNiyD7WcCWCvZKMvZGtX_61JX/s1600/bootstrap.jpg" title="Mengenal Bootstrap untuk Desain Template Blogger" /></a></div>
<b>Mengenal Bootstrap untuk Desain Template Blogger. From Wikipedia Indonesia.</b><br />
<br />
<b>BOOTSTRAP</b> adalah Aplikasi sumber terbuka yang berupa framework atau kerangka kerja untuk membangun website dinamis dengan menggunakan bahasa script CSS.<br />
<div>
<br /></div>
<div>
BOOTSTRAP memudahkan developer dan designer untuk membuat sebuah aplikasi web menjadi cepat dan mudah dibandingkan dengan membuatnya dari awal.<br />
<br />
<div>
<b>Kerangka Kerja Aplikasi</b><br />
<div>
Kerangka Kerja (Framework) secara sederhana diartikan sebagai kumpulan dari fungsi-fungsi/prosedur-prosedur dan class-class untuk tujuan tertentu yang sudah siap digunakan sehingga bisa lebih mempermudah dan mempercepat pekerjaan seorang programer, tanpa harus membuat fungsi atau class dari awal.<br />
<br />
<b>Fitur Umum Framework:</b><br />
<ul>
<li>Mempercepat dan mempermudah pembangunan sebuah aplikasi web.</li>
<li>Relatif memudahkan dalam proses maintenance karena sudah ada pola tertentu dalam sebuah framework (dengan syarat programmer mengikuti pola standar yang ada)</li>
<li>Umumnya framework menyediakan fasilitas-fasilitas yang umum dipakai sehingga kita tidak perlu membangun dari awal.</li>
<li>Lebih bebas dalam pengembangan jika dibandingkan CMS</li>
</ul>
<div>
<br /></div>
<b>Bootstrap</b>Bootstrap dirilis oleh Twitter. Raksasa mikroblogging tersebut melalui blognya mengumumkan kehadiran platform baru yang menyediakan seperangkat alat menggunakan CSS dan konvensi HTML untuk menciptakan aplikasi.</div>
<div>
<br /></div>
<div>
Platform ini awalnya dikembangkan pada ajang Hackweek, sebuah perhelatan developer yang diadakan Twitter. Standarisasi platform tersebut sudah disempurnakan sejak saat itu. Kini, disebutkan Twitter kini mereka memiliki kerangka kerja yang konsisten untuk mengembangkan aplikasi.</div>
<div>
<br /></div>
<div>
Bootstrap digambarkan sebagai CSS sederhana namun dibangun dengan pre-processor yang menyediakan lebih banyak daya dan fleksibilitas ketimbang CSS standar. Di blog tersebut disebutkan dua keuntungan dari platform ini.</div>
<div>
<br /></div>
<div>
"Bootstrap sangat mudah diimplementasikan. Hanya menaruhnya di kode yang telah Anda buat. Setelah selesai, Bootstrap hanya akan berisi CSS. Artinya tidak akan ada gambar yang berlebihan, Flash atau Javascript. Yang ada hanyalah CSS yang sederhana namun powerful untuk kebutuhan pengembangan web Anda," jelas Twitter.</div>
<div>
<br /></div>
<div>
Ini adalah bagian dari upaya pembaruan yang dilakukan Twitter agar lebih memfasilitasi para developer, terutama menyediakan standar bagi para pembuat aplikasi.*</div>
</div>
</div>
<div>
<br /></div>
CB Bloggerhttp://www.blogger.com/profile/06788684849400740675noreply@blogger.com0