Advertise

Tampilkan postingan dengan label Modifikasi. Tampilkan semua postingan
Tampilkan postingan dengan label Modifikasi. Tampilkan semua postingan

Modifikasi Label - Tag Seperti Menu Navigasi Ala WordPress

Tutorial kali ini saya akan memodifikasi tampilan tag atau label pada postingan, untuk blogger biasanya label dipisahkan dengan menggunakan tanda koma[,] contohnya seperti ini : Tutorial blogger, Modifikasi label, Tag Ala Wordpress. dst, Pemisah antara tag atau label ini bisa kita modifikasi seperti menu navigasi.

Lihat screen shoot gambar dibawah ini :

Jika anda tertarik untuk membuat tag atau label seperti menu navigasi silahkan ikuti tutorialnya di bawah ini ::

Pertama Masuk pada Edit HTML - Expand Template Widget
Selanjutnya kita sembunyikan dulu comment - Author - dan Label dengan cara menambahkan kode dibawah ini pada bagian body.

.post-comment-link a{display:none;}
.post-author{display:none;}
.post-labels{display:none;}

Untuk mempercepat pengerjaan saya menggabungnya kode diatas pada bagian Tag, jadi hasil kode keseluruhan seperti berikut :

.post-comment-link a{display:none;}
.post-author{display:none;}
.post-labels{display:none;}

div.tag{font-size:11px;padding-top:5px; color:#999999; margin-top:10px;}
.post-tag{font-family:Georgia; font-size:12px; margin-top:15px;}
.post-tag a:link, .post-tag a:visited{color:#444; font-style:italic;}
.post-tag a:hover {color:#ff0000; font-style:italic;}

Masukan kode di atas, pada bagian body tepatnya diatas kode ]]></b:skin>

Selanjutnya cari koda <data:post.body/>
Masukan kode di bawah ini, dibawah kode <data:post.body/>

<div class='post-tag'> <b style='background:#ff0000; -moz-border-radius:5px; -webkit-border-radius:5px; padding:8px 10px; color:#fff; margin-right:10px;'>Tag</b>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url+ &quot;?max-results=5&quot;' rel='tag' style='border-right:solid 1px #CCCCCC; padding-right:8px; margin-right:8px;'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
</b:loop>
</b:if>
<b:if cond='data:post.allowComments'>
<a class='comment' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b style='font-style:normal; padding:0px; font-size:16px;margin:0px;'><data:post.numComments/></b></a>
</b:if>
</div>

Sekarang pratinjau terlebih dahulu kalau sudah cocok silahkan disimpan.

NB :: Anda bisa mengcustom tampilan tag navigasi ini pada bagian kode diatas sesuai selera anda. selamat mencoba.

Membuat Buttom Next Page,Home,Back Page dengan CSS3

Postingan ini saya coba menjawab pertanyaan [Rizky2009] yang menanyakan cara membuat navigasi Next Page - Home - Back Page dengan menggunakan Button CSS3, untuk contohnya bisa lihat ilustrasi gambar dibawah, atau link next page di bagian bawah.

next page buttom css3 style

Langsung pada cara membuat Button Next Page - Home - Back Page Dengan CSS3.

Pertama pastikan anda sudah memasang Button CSS3 pada template anda agar button bisa diterapkan, Untuk lebih jelasnya baca postingan sebelumnya yaitu :

"Membuat Tombol Dengan CSS3 - Buttom CSS3 Style"

Sekarang masuk pada Edit HTML > Expand Template Widget
Cari kode seperti dibawah ini

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#8592; Back Page</a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Next Page &#8594;</a>
</span>
</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'>Home Page</a>

</div>

Untuk lebih cepat gunakan [Ctrl + F] untuk menemukan kode diatas.
Setelah itu hapus kode diatas dan ganti dengan kode di bawah ini :

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<p><a class='buttom' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#8592; Back Page</a></p>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<p><a class='buttom' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Next Page &#8594;</a></p>
</span>
</b:if>

<p><a class='buttom' expr:href='data:blog.homepageUrl'>Home Page</a></p>

</div>

Pratinjau terlebih dahulu, kalau sudah cocock bisa langsung disimpan.
selamat mencoba.

Modifikasi Page Number Dengan CSS3

Postingan ini sebagai tambahan untuk Navigasi Page Number 123 yang sebelumnya telah saya bahas silahkan dilihat kembali pembuatan Page Number 123 untuk blogger. Sekarang saya coba Memodifikasi page number 123 ini dengan menggunakan CSS3, yang pasti akan lebih menarik dibandingkan dengan navigasi page number sebelumnya.

Contohnya seperti gambar di bawah ini ::

modifikasi pagenumber dengan CSS3
Dengan Memasangkan CSS3 pada page number, page number terlihat seperti menggunakan background image (Gradasi dua warna) seperti yang anda lihat pada gambar di atas. padahal itu hanya permainan dari CSS3 mungkin itu yang menjadi unggulan untuk CSS3. Betul tidak bang [Hendro].

Langsung saja pada cara pemasangan page number dengan CSS3 ::

Pertama masuk pada Dashboard > Rancangan > Element Halaman > Tambah Gadget > Pilih HTML/JavaScript.

Masukan Script di bawah ini ::


<style>

.showpageArea {
padding:2px;margin-top:8px;margin-bottom:8px;
}
.showpageArea ul{
margin: 0 2px;
padding: 8px;padding-top:6px; padding-bottom:6px;
text-align: center;
font-size: 12px;
color:#333;
}

.showpageArea li{
padding: 8px;padding-top:6px; padding-bottom:6px;
margin: 0 2px;
list-style-type: none;
display: inline;
padding-bottom: 1px;
}

.showpageArea a, .showpageArea a:visited{
margin: 0 2px;
padding: 8px;padding-top:6px; padding-bottom:6px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
-moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
-webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
color:rgba(0,0,0,0.9);
text-shadow:1px 1px 0px rgba(255,255,255,0.8);
border:1px solid rgba(0,0,0,0.5);
background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(255,255,255,1)),to(rgba(185,185,185,1)));
background:-moz-linear-gradient(top,rgba(255,255,255,1),rgba(185,185,185,1));
text-decoration: none;
color:#000;
}

.showpageArea a:hover, .showpageArea a:active{
margin: 2px 2px;
padding: 8px;padding-top:6px; padding-bottom:6px;
border: 1px solid #940f04;
color: #940f04;
background-color: #fff;
}

.showpagePoint {font-size:12px;
padding: 8px;padding-top:6px; padding-bottom:6px;
margin-right:3px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
-moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
-webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
color:rgba(0,0,0,0.9);
text-shadow:1px 1px 0px rgba(255,255,255,0.8);
border:1px solid rgba(0,0,0,0.5);
background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(255,255,255,1)),to(rgba(185,185,185,1)));
background:-moz-linear-gradient(top,rgba(255,255,255,1),rgba(185,185,185,1));
color: #940f04;
background-color:#fff;
}

.showpageArea a.disablelink, .showpageArea a.disablelink:hover{
background-color:none;
cursor: pointer;
color: #940f04;
font-weight: normal !important;
}

.showpageArea a.prevnext{
color: #000;
font-weight: bold;
}

</style>

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=2;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding:4px;margin:2px;border: 0px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

Untuk meng-Eksekusinya silahkan klik Simpan.

NB :: Script Page Number ini Sekaligus revisi untuk script page number sebelumnya. Script ini lebih cepat dalam loading, serta pengaturan paddingnya telah saya rubah sehigga posisi atau jarak number dengan kotak tidak terlalu dekat. Anda juga bisa mengcustom warna gradasinya dari kode CSS3 di atas. Selamat mencoba.

Modifikasi Satu Widget Menjadi Double Fungsi Untuk Penyimpanan Script

Kalau ngomongin widget tentu identik dengan tampilan blogger baik sidebar Footer maupun Header, yang selalu mendapatkan posisi istimewa untuk menampilkan widget karean biasanya para blogger selalu mempercantik tampilannya dengan memasang widget widget tersebut, Baik dengan Related Post , Resent post, Recent Comment, Top Post, Tab View ataupun yang lainya yang tentu memerlukan space atau ruang pada template anda.

Disini saya tidak akan membahas script atau HTML yang aneh aneh karena saya yakin sudah banyak master blogger yang memposting Script script seperti itu.

Kali ini saya coba untuk meminimalkan pemasangan script script yang dianggap penting untuk di simpan pada widget/Gadget sidebar blog anda. tujuanya untuk menghemat widget yang di pasang. lihat screen shoot di samping ini.

untuk membuat tampilan seperti ini cara cukup mudah dan tidak terlalu rumit.

silahkan ikuti caranya di bawah ini.

Modifikasi Satu Widget Menjadi Double Fungsi Untuk Penyimpanan Script

Langkah pertama siapkan script yang ingin anda pasang pada widget sidebar.
Sebagai contoh saya menggunakan script Recent Posting dan Recent Comment.

Masuk pada Dashboard Blog anda.
Pilih Rancangan >> Tambah Gadget >> pilih HTML/JavaScript.
Masukan Script dan kode HTML di bawah ini.

<script src="http://sites.google.com/site/anasku2000/post-terakhir.js"></script>
<script>var numposts = 5; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://chugygogog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>


<style type="text/css">

.double-side{
font-size:14px;
float:right;
font-weight:bold;
color:white;
background:;
padding:0px;
}

</style>


<h2><span class="double-side"><a href="Alamat RSS Feed Anda">
<span style="background-border:1px solid #000;padding:2px;">RSS Feeds </span></a>
</span>Recent Comment</h2>

<style type="text/css"></style>
<script src="http://sites.google.com/site/anasku2000/post-terakhir.js"></script>
<script>var numposts = 5; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://chugygogog.blogspot.com/feeds/comments/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>

Ganti alamat Recent Post dan Recent Comment yang dicetak merah tebal ganti juga alamat RSS Feeds Anda Yang Hijau Tebal di atas sesuai dengan alamat feeds blog anda.

Beri judul widget Anda Dengan Recent Post.
Selanjutnya Anda Simpan.
Selamta mencoba.

Modifikasi Search Box Auto Hide Dengan Background

Memasang kotak pencarian atau search box di blogger akan memberikan kemudahan bagi pengunjung untuk mencari dan melihat postingan di blog anda. Dan untuk kali ini saya coba memposting cara membuat search box menggunakan Auto Hide denga menambahkan backkground warna ataupun background image.

Untuk Auto Hide tentunya anda sudah jadi saya tidak perlu menjelaskan lagi. Untuk search box sebenarnya dari blogger sendiri sudah menyediakanya. namun kita tidak bisa meng custom tampilan dari search box tersebut ataupun merubahnya. Tapi dengan cara di bawah ini anda bisa merubah tampilan dari search box di blog anda.

Contoh search box auto hide seperti di bawah ini

Langsung saja pada pokok bahasan membuat atau me - modifikasi search box auto show hide.

Masuk ke Blogger
Pilih Tata Letak (Rancangan) - Tambah Gadget - HTML/JavaScript
Masukan Kode HTML di Bawah ini.

<style type="text/css">

#searchboxo{

background:#f3f3f3;
border:1px solid #6B7171 ;
width:240px;
height:25px;
margin:0px;
padding:4px;
}

#searchboxo form input.searchinput{

float:left;
padding:2px;
padding-top:2px;
margin-left:2px;
width:140px;
height:19px;
color:#000;
font-size:14px;
border:1px solid #6B7171;
background:#fff;
}

#searchboxo form input.submitbutton{

float:right;
width:85px;
height:25px;
margin-right:2px;
padding-bottom:4px;
font-variant:small-caps;
text-align:center ;
cursor:pointer;
border:1px solid #6B7171;
background-color:#6B7171;
color:#FFFFFF;
font-weight:bold;
font-size:12px}

</style>
<div id='searchboxo'>
<form action='/search' id='searchform' method='get'>
<input class="searchinput" id="searchbox" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Type text to search&quot;;}" onfocus="if (this.value == &quot;Type text to search&quot;) {this.value = &quot;&quot;;}" type="text" value="Type text to search" />
<input class="submitbutton" type="submit" value="Search" />
</form>
</div></div>


Jika sudah klik simpan.

Anda bisa meng custom tampilan dari search box auto hide ini. Saya coba menjelaskan sedikit kode HTML diatas.

#searchboxo{
ini kode paling dasar untuk background search box.

#searchboxo form input.searchinput{
Ini adalah kode dimana teks muncul pada kotak pencarian.

#searchboxo form input.submitbutton{
Ini adalah kode dimana pointer atau menyentuh kotak SEARCH.

Anda bisa mengganti ukuran lebarnya sesuai dengan blog anda. dan anda juga bisa mengganti background dengan warna lain ataupun dengan backgroung image.
Jika anda memahami kode HTML tentunya ini bukan hal sulit. Selamat mencoba.