tutorialvai: 2016

Senin, 18 Januari 2016

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

<div class='post-header'>
<div class='post-header-line-1'/>
</div>


<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'>
<data:post.body/>
<div style='clear: both;'/> 
</div>

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span> </td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>

<span class='post-comment-link'>
<b:include cond='data:blog.pageType not in {"item","static_page"} and data:post.allowComments' data='post' name='comment_count_picker'/>
</span>


<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType not in {"item","static_page"} and data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</span>

<span class='post-icons'>

<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='//img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>


<b:include data='post' name='postQuickEdit'/>
</span>


<div class='post-share-buttons goog-inline-block'>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
</div>

</div>

<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>
</b:loop>
</b:if>
</span>
</div>

<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span>
</div>
<b:if cond='data:post.authorAboutMe'>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:post.authorPhoto.url'>
<img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
</b:if>
<div>
<a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</div>
<span itemprop='description'><data:post.authorAboutMe/></span>
</div>
</b:if>
</div>
</div>
</b:includable>

Rabu, 13 Januari 2016

membuat widget shared keren

Cara Membuat Social Share Button Keren

Cara Membuat Social Share Button Keren. Sobat Blogger, widget Social Share Button atau bisa disebut widget tombol berbagi, berhubung bahwa kegunaan widget ini sangat efektif untuk kemajuan blog dalam hal share artikel, maka saya akan memberi anda tutorial membuat widget social share. Dalam widget ini menggunakan empat kode jaringan yang populer seperti media sosial berbagi ke (facebook, twitter, google + dan linkedin) dan menggunakan slide-in dan slide-out, untuk melihat tampilannya silahkan anda lihat gambar di bawah ini.

Untuk penempatannya sendiri widget ini akan saya pasangkan di bawah posting blog dan jika anda tertarik dengan widget ini silahkan ikuti tutorialnya.

Cara Menambahkan Widget Social Share Button :
1. Buka akun blogger anda.
2. Pilih menu > template > klik edit Html
3. Copy code dibawah ini dan letakan tepat di atas kode </head>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

4. Selanjutnya copy code dibawah ini dan letakan tepat di atas </head> , Simpan template.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>  <style type='text/css'>/*<![CDATA[*//*-----Social Sharing CSS code widget by www.digitalhubinc.com----*/@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";#sbuttons {    border-radius: 5px;    padding: 14px 7px;    background: white;    width: 680px;    overflow: hidden;    margin: 2px auto 0;    box-shadow:0 2px 3px rgba(71, 71, 71, 0.31);}.button {    background: #DCE0E0;    position: relative;    display: block;    float: left;    height: 40px;    margin: 0 7px;    overflow: hidden;    width: 150px;    border-radius: 3px;    -o-border-radius: 3px;    -ms-border-radius: 3px;    -moz-border-radius: 3px;    -webkit-border-radius: 3px;}.icon {    display: block;    float: left;    position: relative;    z-index: 3;    height: 100%;    vertical-align: top;    width: 38px;    -moz-border-radius-topleft: 3px;    -moz-border-radius-topright: 0px;    -moz-border-radius-bottomright: 0px;    -moz-border-radius-bottomleft: 3px;    -webkit-border-radius: 3px 0px 0px 3px;    border-radius: 3px 0px 0px 3px;    text-align: center;}.icon i {    color: #fff;    line-height: 42px;}.slide {    z-index: 2;    display: block;    margin: 0;    height: 100%;    left: 38px;    position: absolute;    width: 112px;    -moz-border-radius-topleft: 0px;    -moz-border-radius-topright: 3px;    -moz-border-radius-bottomright: 3px;    -moz-border-radius-bottomleft: 0px;    -webkit-border-radius: 0px 3px 3px 0px;    border-radius: 0px 3px 3px 0px;}.slide p {    font-family: Open Sans;    font-weight: 400;    border-left: 1px solid #fff;    border-left: 1px solid rgba(255,255,255,0.35);    color: #fff;    font-size: 16px;    left: 0;    margin: 0;    position: absolute;    text-align: center;    top: 10px;    width: 100%;}.button .slide {    -webkit-transition: all 0.2s ease-in-out;    -moz-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out;}.facebook iframe {    display: block;    position: absolute;    right: -16px;    top: 10px;    z-index: 1;}.twitter iframe {    width: 90px !important;    right: 5px;    top: 10px;    z-index: 1;    display: block;    position: absolute;}.google #___plusone_0 {    width: 70px !important;    top: 10px;    right: 15px;    position: absolute;    display: block;    z-index: 1;}.linkedin .IN-widget {    top: 10px;    right: 2px;    position: absolute;    display: block;    z-index: 1;}.facebook:hover .slide {    left: 150px;}.twitter:hover .slide {    top: -40px;}.google:hover .slide {    bottom: -40px;}.linkedin:hover .slide {    left: -150px;}.facebook .icon, .facebook .slide {    background: #305c99;}.twitter .icon, .twitter .slide {    background: #00cdff;}.google .icon, .google .slide {    background: #d24228;}.linkedin .icon, .linkedin .slide {    background: #007bb6;}    /*]]>*/</style>  </b:if>

5. Langkah selanjutnya copy kode dibawah ini dan letakan tepat dibawah code <data:post.body/>

 <div style='border-bottom: 1px solid #CCCCCC; padding: 10px 10%;margin:5px;'/><div id='sbuttons'><div class='facebook button'><i class='icon'><i class='icon-facebook'></i></i><div class='slide'><p>facebook</p></div><fb:share-button type='button_count'/> </div> <div class='twitter button'><i class='icon'><i class='icon-twitter'></i></i><div class='slide'><p>twitter</p></div><a class='twitter-share-button' data-via='digitalhubinc' href='https://twitter.com/share'>Tweet</a><script>!function(d,s,id){      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;      if(!d.getElementById(id)){        js=d.createElement(s);        js.id=id;        js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);  </script>  </div> <div class='google button'><i class='icon'><i class='icon-google-plus'></i></i><div class='slide'><p> google+</p></div><!-- Place this tag where you want the +1 button to render. --><div class='g-plusone' data-size='medium'></div><!-- Place this tag after the last +1 button tag. --><script type='text/javascript'>    (function() {      var po = document.createElement(&#39;script&#39;);      po.type = &#39;text/javascript&#39;;      po.async = true;      po.src = &#39;https://apis.google.com/js/plusone.js&#39;;      var s = document.getElementsByTagName(&#39;script&#39;)[0];      s.parentNode.insertBefore(po, s);    }    )();  </script>  </div>  <div class='linkedin button'><i class='icon'><i class='icon-linkedin'></i></i><div class='slide'><p>linkedin</p></div><script data-counter='right' type='IN/Share'></script><script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US</script></div></div><div style='border-bottom: 1px solid #CCCCCC; padding: 5px 10%;margin:2px;'/> </b:if>

6. Selipkan code <b:if cond='data:blog.pageType == "item"'> di antar kedua code tag.

Contoh :

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
Widget code social....bla bla bla

Catatan : Biasanya code <data:post.body/> , lebih dari satu silahkan anda sesuiakan penempatannya, maka misalkan anda meletakan di code pertama tidak muncul, maka di ulang di kode kedua dan selanjtnya.

hapus semua posting

Cari kode berikut ini : ( gunakan ctrl+F biar mudah )

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Rubahlah kode tersebut sehingga jadi seperti ini :
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div style='clear: both;'/>
</b:if>
</b:includable>
Simpan template dan lihat hasilnya. Mudah bukan....

menghilangkan tulisan web di mobile

Berikut adalah tutorialnya.

1. Buka Blogger.com >> Template >> Cadangkan / Pulihkan (Demi keamanan jika terjadi galat) >> Edit HTML >> Centang Expand Template Widget
2. Cari kode <div class='mobile-desktop-link'> dengan menekan CTRL + F dan hapus hingga kode</div> yang ada dibawahnya.
3. Silahkan anda pratinjau terlebih dahulu, jika tidak terjadi masalah dengan template blog anda, klik simpan!

menhgilangkan langganan entri atom

Login ke akun blogger sobat.
Pada Dasbor blogger klik Template > Edit HTML > Lanjutkan.
Beri tanda centang pada Expand Template Widget
Cari kode di bawah ini, gunakan fungsi Find (Ctrl+F) biar mudah.
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
Hapus semua kode diatas.
Lalu klik Simpan Templates

Senin, 11 Januari 2016

menhapus tulisan beranda

Bagaimana sih cara menghapus tulisan Home atau Beranda di bawah postingan?
ada sebagian orang yang sesudah membuat blog ada tulisan Home atau beranda di bawah posting dan bagaimana sih carannya?, di posting ini saya akan menjelaskan cara menghapus tulisan Home atau Beranda yang ada di bawah posting. langsung saja jelaskan cara menghapus tulisan home atau beranda yang ada di bawah postingan:

Masuk ke akun blogger anda.
Klik menu Template.
Lalu klik tombol Edit HTML.

Centang Expand Template Widget.

Cari Kode Berikut : <data:homeMsg/> Dengan cara Menekan tombol CTRL+F.
Setelah menemukan kode tersebut hapus kode tersebut.
Setelah terhapus Klik Tombol Simpan Template.
Setelah menekan tombol Simpan Template Tulisan Home atau Beranda akan terhapus otomatis.

Selasa, 05 Januari 2016

erikut ini akan saya jelaskan caranya membuat widget Artikel Terbaru yang bergerak dari atas ke bawah yang disertai dengan gambar.
1. Log in dulu di Blogger
2. Setelah ada di dashboard blogger pilih Tata letak / Layout
3. Pilih Add Gadget / Tambahkan Gadget
4. Cari HTML/JavaScript
5. Copy paste script yang ada di bawah ini

Ini Contoh tampilan widgetnya

<style type="text/css">
#rp_plus_img{height:377px;overflow:hidden;border:solid 1px #fff;padding:6px 6px 24px 5px;background-color:transparent;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#;
border:solid 1px #ffffff;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://theplick.googlecode.com/files/newsticker-plick.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1000;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});

</script>
<ul id="rp_plus_img"><script>
var numposts = 25;
var numchars = 40;</script>
<script src="http://khiansantang.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt">
</script> </ul>
<center><script language="javascript" src="http://gallerydunia.googlecode.com/files/google_translate.js">
</script></center>
<small><a href="http://khiansantang.blogspot.com" target="_blank">Khiansantang</a></small>

6. Jangan lupa di save
kemudian lihat hasilnya........ (^_^)

Keterangan :
Merah ---> Ganti dengan nama blog kamu
Biru -----> Jumlah posting yang akan dimunculkan dalam widget
Kuning --> Jumlah karakter yang akan ditampilkan
Hijau -----> Tinggi widget, atur sesuai kebutuhan

artikel terbaru

<script type="text/javaScript">
imgr = new Array();
imgr[0] = "http://photoserver.ws/images/xkRt4c7bf67561042.jpg";
imgr[1] = "http://photoserver.ws/images/xkRt4c7bf67561042.jpg";
imgr[2] = "http://photoserver.ws/images/xkRt4c7bf67561042.jpg";
imgr[3] = "http://photoserver.ws/images/xkRt4c7bf67561042.jpg";
imgr[4] = "http://photoserver.ws/images/xkRt4c7bf67561042.jpg";
showRandomImg = true;
boxwidth = 220;
cellspacing = 8;
borderColor = "";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = false;
icon = " ";
text = "Komentar";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5 ;
home_page = "http://gagaje.blogspot.com/";
</script>
<script src="http://rhoedalismev2.googlecode.com/files/removeHtmlT.js" type="text/javascript"></script>

Keterangan :

•   Kode berwarna ungu adalah ukuran Sidebar, sesuaikan dengan ukuran Sidebar Sobat
•   Kode berwarna biru adalah ukuran huruf
•   Kode berwarna hijau adalah jumlah post yang ingin ditampilkan
•   Ganti Kode berwarna merah dengan alamat blog Sobat

Mudah bukan, itulah persembahan dari seorang NEWBIE, semoga bermanfaat :)

Senin, 04 Januari 2016

memasang berbagi

Login ke Blogger, Klik Design/Rancangan > Edit HTML.
Beri tanda centang pada Expand Template Widget.

Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
Cari kode <data:post.body/>, Tekan Ctrl + F pada keyboard untuk menggunakan fasilitas pencarian browser, lalu ketikkan kode yang dicari, pilih kode <data:post.body/> yang nomor dua.
Jika sudah ketemu Copy script di bawah ini dan paste di dibawah kode <data:post.body/> yang ke dua. (kalau masih nggak jadi, pilih yang partama)



<div class="addthis_toolbox addthis_default_style ">

<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>

<a class="addthis_button_tweet"></a>

<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>

<a class="addthis_counter addthis_pill_style"></a>

</div>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e8062ca66617053"></script>
Terakhir klik SIMPAN / SAVE TEMPLATE.

Sekian Tutorial tentang Memasang Tombol Share Dibawah Postingan.

Semoga artikel saya ini dapat bermanfaat..Komentnya jangan lupa kawan..

membuat related post

http://www.masyadi.com/2014/07/cara-membuat-related-post-keren-ala.htmlhttp://www.masyadi.com/2014/07/cara-membuat-related-post-keren-ala.html

Minggu, 03 Januari 2016

tab klasik

Menubar atau bisa juga di sebut navigasi menu berfungsi sebagai tempat link agar pengunjung blog mudah mengunjungi halaman penting blog kalian. Untuk memasang menubar pada template klasik sangatlah sederhana dan mudah. Ikuti langkah-langkah di bawah ini:

1. Login ke Blogger

2. Tata Letak

3. Tambah Gadget HTML / Javascript

4. Pasang kode di bawah ini

<div id="navcontainer">
<ul id="navlist">
<li><a href="http://istiawanblog.blogspot.com">Home</a></li>
<li><a href="http://istiawanblog.blogspot.com/search/label/tips%20karir">Tips Karir</a></li>
<li><a href="http://istiawanblog.blogspot.com/search/label/kesehatan">Kesehatan</a></li>
<li><a href="http://istiawanblog.blogspot.com/search/label/tutorial">Tutorial Blog</a></li>
</ul>
</div>

5. Simpan

tampilan mobile eltelu

Bagaimana caranya agar artikel yang diterbitkan hanya ditampilkan judul dan jumlah komentarnya saja apabila dibuka dengan menggunakan perangkat seluler atau dibuka dalam tampilan versi mobile? Kurang lebih seperti inilah maksud dari pertanyaan yang diajukan oleh Sobat Blogger kepada saya dalam artikel ‘Tanya Jawab’ beberapa hari yang lalu.

Pada artikel sebelumnya yang berjudul “Mengubah Model Bidang Posting Halaman Beranda Tampilan Selular (Blogspot Versi Mobile)”, saya telah menguraikan sebuah teknik yang dapat digunakan untuk mengubah tampilan halaman Blogspot versi seluler. Dimana salah satu maksud dan tujuan dari penerapan teknik tersebut adalah untuk melakukan optimalisasi pada tampilan mobile, karena menurut pengalaman saya ketika membuka halaman blog dengan menggunakan perangkat seluler, penayangan halaman masih terasa cukup lama. Hal ini disebabkan karena fitur tampilan halaman beranda versi mobile yang diberikan oleh Blogger menampilkan cuplikan berupa gambar dan juga cuplikan artikel yang diterbitkan.

Dengan pertimbangan untuk melakukan optimalisasi, saya pun berinisiatif melakukan perubahan pada model bidang posting halaman beranda untuk tampilan versi seluler, dalam hal ini adalah dengan cara menghilangkan cuplikan gambar yang semestinya ditampilkan. Sehingga akhirnya model bidang posting halaman beranda pada tampilan seluler hanya menampilkan judul, cuplikan artikel, dan jumlah komentar seperti yang tampak pada gambar di bawah ini.

Model Tampilan Beranda Blog Versi Mobile

Namun ternyata pada kenyataannya teknik tersebut menjadi kurang efektif ketika saya menambahkan daftar artikel terkini (recent post) sesuai dengan label pada tampilan blog versi seluler, karena akhirnya halaman menjadi terlalu panjang. Sehingga saya pun kembali melakukan perubahan model bidang posting halaman beranda tampilan versi seluler, dalam hal ini dengan meniadakan cuplikan konten artikel dan juga tombol ‘Baca selengkapnya’ seperti yang tampak pada gambar pertama. Dengan demikian akhirnya tampilan halaman pun menjadi lebih ringkas, apabila dibandingkan dengan tampilan sebelumnya seperti yang tampak pada gambar yang kedua.

Nah, menanggapi pertanyaan Sobat Blogger seperti yang telah saya sampaikan di atas, maka berikut ini adalah uraian cara yang digunakan untuk mengubah model bidang posting halaman beranda blog versi seluler agar hanya menampilkan judul dan jumlah komentar yang ada. Dimana sebenarnya teknik yang digunakan adalah serupa dengan teknik yang sebelumnya.

Pertama, buka editor template dengan mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’> ‘Expand Template Widget’.

Kedua, cari kode <b:includable id='mobile-index-post' var='post'> dan kemudian hapus rangkaian kode di bawahnya sampai dengan kode yang terletak di atas </b:includable>, seperti yang tampak pada contoh di bawah ini.

<b:includable id='mobile-index-post' var='post'>

  <div class='mobile-date-outer date-outer'>   <-- hapus dari sini

       ----------------- kode -----------------

  </div>   <-- hapus sampai sini

</b:includable>

Ketiga, salin kode di bawah ini dan kemudian sisipkan pada bagian kode yang telah dihapus tadi.

<div class='mobile-date-outer date-outer'>

  <div class='mobile-post-outer'>

    <a expr:href='data:post.url'>

      <h3 class='mobile-index-title entry-title'>

      <div class='mobile-bingkai-judul'>

        <b><data:post.title/></b>

       </div>

      </h3>

    </a>

    <div class='mobile-index-comment'>

      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

        <b:if cond='data:post.allowComments'>

          <b:if cond='data:post.numComments == 0'>

           <a expr:href='data:post.url'>0 komentar</a>

          </b:if>

          <b:if cond='data:post.numComments != 0'>

            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

          </b:if>

        </b:if>

      </b:if>

    </div>

  </div>

</div>

Keempat, cari kode ]]></b:skin> dan kemudian sisipkan rangkaian kode berikut ini tepat di atasnya.

/* Bidang Posting Tampilan Beranda Versi Selular

------------------------------------------------------------- */

.mobile-date-outer {

  background: #ffffff;

}

.mobile-index-title {

  width: 100%;

}

.mobile-index-contents {

  width: 100%;

}

.mobile-bingkai-judul {

  background-color: #fff2cc; 

  border: 1px solid #0000ff;

  height: auto; margin: 0px; 

  overflow: hidden; padding: 2px;  

  width: 99,99%; text-align: justify;

}

Kelima, simpan template Anda.

Perlu diperhatikan bahwa untuk kode yang terdapat pada langkah keempat sebenarnya adalah serupa dengan kode yang digunakan dalam teknik sebelumnya. Perbedaannya adalah jika dalam teknik sebelumnya terdapat kode CSS yang digunakan untuk mengatur setelan tombol ‘Baca selengkapnya’, sedangkan dalam teknik ini kode CSS yang digunakan untuk mengatur setelan tombol ‘Baca selengkapnya’ ditiadakan karena memang pada kenyataannya tombol tersebut tidak turut ditampilkan di halaman beranda versi seluler. Sehingga apabila menerapkan teknik ini, maka ada baiknya Anda juga membuka dan mempelajari artikel sebelumnya yang berjudul “Mengubah Model Bidang Posting Halaman Beranda Tampilan Selular (Blogspot Versi Mobile)” sebagai referensi.

Semoga berguna serta bermanfaat, dan selamat mencoba.

Salam.

tutorialvai

Cari Blog Ini

Entri Populer