Showing posts with label content. Show all posts
Showing posts with label content. Show all posts

Thursday, December 8, 2016

Cara Membuat Tabbed Content di Sidebar Blog

Cara Membuat Tabbed Content di Sidebar Blog


Cara Membuat Tabbed Content di Sidebar Blog
Menampilkan atau membuat Tabbed Content Widget di Sidebar Blog bagus buat navigasi dan internal link blog, sekaligus mempercantik dan menghemat ruang.

Apa itu Tabbed Content? Jawabannya, seperti yang Anda lihat di gambar ilustrasi posting ini. Cara membuat tabbed widget semacam ini sangat mudah. Tinggal pasang kode yang sudah disediakan Blogger Central.

1. Klik "Layout" > "Add A Gadget"
2. Pilih "HTML/Javascript"
3. Kotak "title" (judul) kosongkan, jangan diisi apa pun.
4. Copy + Paste kode berikut ini di kotak konten:

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb !important;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 12px;
 padding: 3px 5px;
 border: 1px solid #bbb;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
 cursor:pointer;
}
html .tabber h2.active {
 background: #fff;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #bbb;
 padding: 10px;
 background: #fff;
 clear:both;
 margin:0;
}
.codewidget, #codeholder {
 display:none;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $(#codeholder).bloggerTabber ({
  tabCount : 3
 });
});
</script>

<!-- to make sure the widget works, do not alter the code below -->
<div id=codeholder><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">tabber widget</a></p></div>

5. Hapus javascript yang berwarna merah jika di dalam template Anda sudah ada. Jangan dobel, nanti "berantem" :)

6. Ubah angka 3 menjadi 4-5 atau berapa pun jika ingin menambah jumlah tab.
7. Save!

8. Tambahkan 3 widget (Add a Gadget) di bawah Tabbed Widget yang sudah dibuat tadi. Lihat gambar berikut ini:



Demikian  Cara Membuat Tabbed Content di Sidebar Blog. Untuk lebih jelas dan rinci, silakan ke TKP. Good Luck!

Go to link Download



Read more »






Posted by



at


























Labels:
,
,
,
,
,
,

















          

        

          

        

Tuesday, November 1, 2016


          

        










Cara Membuat Featured Post Content Slider Image



Cara Membuat Featured Post Content Slider Image

Cara Membuat Featured Post Content Slider Image di Halaman Depan Blog yang SEO & User Friendly. 

SEBELUMNYA CB pernah share tentang Featured Content Slider di Homepage Blog Tidak Bagus buat SEO. Di sana disebutkan, hasil survei soal gambar slider / carousel image di sejumlah blog/website di halaman depan (homepage) ternyata buruk buat SEO dan jelek pula kegunaannya (tidak user friendly), hanya bikin silau mata! Yang ngeklik juga cuma 1%, kecil bingit!

Namun, jika masih merasa butuh menampilkan Featured Post Content Slider Image/Gambar di Home, maka pastikan dua hal ini:
  1. Slider tidak otomatis bergerak (automatic slides)! Matikan fungsi otomatis gerakannya!
  2. Pastikan judul postingnya menggunakan Heading Tag H2 atau H3. Jika menggunakan H1, silakan ganti.
Kedua hal itulah sumber masalah Featured Post Content Slider Image yang menjadikannya tidak seo dan user friendly.

FUNGSI FEATURED POST/IMAGE SLIDER
Featured Post Content Slider Image/Gambar sering digunakan oleh situs web/blog toko online, blog jasa/produk, dan situs berita. Toko Online atau web bisnis biasnaya menampilkan produk/jasa. Situs berita menampilkan Headline News.

Posting berikut ini sekadar "menyimpan" tips desain blog tentang cara Membuat Featured Post Content Slider Image yang di-share Maskolis baik Versi 1 maupun Versi 2. Jika ingin menampilkan satu posting saja di Featured Post di halaman depan tanpa slider, silakan cek  Cara Membuat Featured Post Tanpa Slider ala New Johny Wuss.

CB share di sini dua jenis Featured Post Content Slider Image sebagaimana tampak dalam ilustrasi gambarnya. 
Cara Membuat Featured Post Content Slider Image
VERSI 1 - Thumbnail di Bawah Gambar Utama

 Featured Post Content Slider Image

Cara Membuatnya:
1. Template > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin> 

#featuredContent{float:left;width:407px;margin-right:10px;display:inline}
#featured-slider{position:relative;overflow:hidden;width:407px;height:245px}
#featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:407px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFxJfrZ-bABtQlArlIYZfydfJX4MsYizMPsmEt-Zlzq1ghf1ugubst3RHhqzeK61F27db7uh3upOhO4rvQgWrgaIgDMjBqfTkPkkWLZ4rXsrej_OonVV_dLBCCX1-mp2tNH9aQ1IQ4IQGl/s1600/transparant.png)}
#featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
#featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
#paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}
#paginate-featured-slider ul{width:415px;padding-bottom:0;list-style:none}
#paginate-featured-slider ul li{display:inline;width:75px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
#paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
#paginate-featured-slider a img{border-top:4px solid #f0f0f0}
#paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}

.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
word-wrap: break-word; overflow: hidden;} 
.slide {color: #666666;line-height: 1.3em;}
.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.slide li {margin:0;padding-top:0;
padding-right:0;padding-bottom:.25em;
padding-left:0px;text-indent:0px;line-height:1.3em;}

.slide .widget {margin:0px 0px 6px 0px;}

Angka berwarna merah adalah ukuran Panjang dan Lebar Slider. Silahkan sesuaikan dengan "kondisi" template Anda. Demikian pula angka berwarna merah di kode no. 3 di bawah ini.
3. Copas kode berikut ini di atas kode <head> 

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js type=text/javascript/> // Kode ini gak perlu diikutkan jika di template Anda sudah ada, cek ada dengan Ctrl+F lalu ketik jquery dan tekanEnter

<script src=http://yourjavascript.com/222517121138/contentslider.js type=text/javascript/>
<script type=text/javascript>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhNVIRD3E8W8fepYUTZssrecd0O8Hpnrv0WPKczZOQBwIiY83muTVTfxrXHaCpIrMqLjB-PbfVRKvUgcCEKyXqUkuS-5sTJn7mvRZyJ62pkgLLs0_qmRAcSMUFLuqpbP99Ok-prAYguEY/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 100;
summaryTitle = 25;

numposts3 = 5;

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 showrecentposts3(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts3; 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;

    //cmtext = (text != no) ? <i><font color="+acolor+">(+pcm+ +text+)</font></i> : ;


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    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 ;

    var trtd = <div class="contentdiv"><a href="+posturl+"><img width="407" height="240" class="alignnone" src="+img[i]+"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="+posturl+">+posttitle+</a></h2><p>+removeHtmlTag(postcontent,summaryPost)+...</p></div></div>;
    document.write(trtd);


    j++;
}

}

function showrecentposts4(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts3; 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;

    //cmtext = (text != no) ? <i><font color="+acolor+">(+pcm+ +text+)</font></i> : ;


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    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 ;

    var trtd = <li><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="+img[i]+"/></a></li>;
    document.write(trtd);

    j++;
}

}

//]]>
</script>

4. Copas kode berikut ini di bawah kode <div id=main-wrapper> atau yang sejenisnya.

<b:if cond=data:blog.url == data:blog.homepageUrl>
      <div id=slide-wrapper>
<b:section class=slide id=slide preferred=yes/>
      </div>
</b:if>

5. Save Template!

6. Klik "Layout" dan akan tampak Widget Baru di atas "Blog Posts" seperti tampak dalam gambar di bawah ini. Jika tidak ada, cobra "Refresh Page" (Tekan F5). 

Featured Post Content Slider Image

6. Klik "Edit" dan Copas kode berikut ini ke dalam "Content".

<div id=featuredContent>
<div class=sliderwrapper id=featured-slider>
<script>
document.write("<script src="/feeds/posts/default/-/Label?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3"></script>");
</script>
</div>
<div id=paginate-featured-slider>
<ul>
<script>
document.write("<script src="/feeds/posts/default/-/Label?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4"></script>");
</script>
</ul>
<div class=clear></div>
</div>
<script type=text/javascript>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>

Catatan:
1. Ganti Label dengan nama label posting yang akan ditampilkan di Featured Post Content Slider Image.
2. Jika ingin menampilkan Posting Terbaru otomatis muncul di sana, maka HAPUS kode /-/Label sehingga menjadi begini: .... feeds/posts/default?max-results ...

7. Save!!! 
Featured Post Content Slider Image mestinya sudah muncul.

Cara Membuat Featured Post Content Slider Image
VERSI 2 - Thumbnail Image di Samping Gambar Utama

Featured Post Content Slider Image


CARA MEMBUAT
Tahapan Membuatnya kurang lebih sama dengan cara di atas, cuma beda kode dikit.

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>

#featured{width:640px;height:250px;position:relative;margin:0;padding:0}
#featured ul.ui-tabs-nav{position:absolute;top:0;right:0;list-style:none;width:240px;height:250px;margin:0;padding:0}
#featured ul.ui-tabs-nav li{position:relative;line-height:1.3em;padding:0}
#featured ul.ui-tabs-nav li span{font:bold 12px Arial;line-height:1.3em;color:#000;margin:0;padding:0}
#featured .ui-tabs-panel{width:400px;height:250px;background:#ddd;position:relative;overflow:hidden}
#featured .ui-tabs-panel img{width:400px;height:250px}
#featured .ui-tabs-hide{display:none}
#featured li.ui-tabs-nav-item a{display:block;width:215px;height:57px;color:#000;overflow:hidden;background:#ddd;border-left:10px solid #999;line-height:1.4em;outline:none;margin:0 0 2px;padding:2px 10px 2px 5px}
#featured li.ui-tabs-nav-item a:hover{border-left:10px solid #555;background:#ccc}
#featured li.ui-tabs-selected{position:absolute}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{background:#aaa;display:block;border-left:10px solid #444}
#featured ul.ui-tabs-nav li img{width:75px;height:48px;float:left;background:#333;border:none;margin:4px 7px 4px 0;padding:0}
#featured .ui-tabs-panel .info{position:absolute;top:179px;left:0;height:71px;width:400px;background:#000;opacity:0.80;filter:alpha(opacity=80)}
#featured .info a{text-decoration:none;color:#eee}
#featured .info a:hover{color:#FE9A2E;text-decoration:underline}
#featured .info h2{font-size:15px;font-family:Arial, serif;color:#fff;overflow:hidden;margin:0;padding:5px}
#featured .info p{font-family:Arial;font-size:11px;line-height:15px;color:#f0f0f0;margin:0 5px}

.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left; 
word-wrap: break-word; overflow: hidden;} 
.slide {color: #666666;line-height: 1.3em;} 
.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;} 
.slide li {margin:0;padding-top:0; 
padding-right:0;padding-bottom:.25em; 
padding-left:0px;text-indent:0px;line-height:1.3em;} 
.slide .widget {margin:0px 0px 6px 0px;}  

3. Copas kode berikut di atas kode </head>

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js type=text/javascript/> // Kode ini gak perlu diikutkan jika di template Anda sudah ada, cek ada dengan Ctrl+F lalu ketik jquery dan tekanEnter

<script src=http://yourjavascript.com/511211242172/jquery-ui.min.js type=text/javascript/>
<script type=text/javascript>
    $(document).ready(function(){
        $(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 4000, true);
    });
</script>

<script type=text/javascript>
//<![CDATA[
   imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhNVIRD3E8W8fepYUTZssrecd0O8Hpnrv0WPKczZOQBwIiY83muTVTfxrXHaCpIrMqLjB-PbfVRKvUgcCEKyXqUkuS-5sTJn7mvRZyJ62pkgLLs0_qmRAcSMUFLuqpbP99Ok-prAYguEY/s1600/no+image.jpg";

showRandomImg = true;

aBold = true;

summaryPost = 70;
summaryTitle = 20;

numposts1 = 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 showrecentposts4(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 
Go to link Download



Read more »






Posted by



at


























Labels:
,
,
,
,
,
,

















        

      









Subscribe to:
Posts (Atom)