Membuat Label Vertikal dengan Gambar Thubnail per kategori Blogger - Hallo sahabat 5BAB5, Pada Artikel yang anda baca kali ini dengan judul Membuat Label Vertikal dengan Gambar Thubnail per kategori Blogger, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger, Artikel Label, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Label Vertikal dengan Gambar Thubnail per kategori Blogger
link : Membuat Label Vertikal dengan Gambar Thubnail per kategori Blogger

Membuat Label Vertikal dengan Gambar Thubnail per kategori Blogger

Membuat Label Vertikal dengan Gambar Thubnail Blogger Per kategori

Dalam Membuat Label dengan gambar merupakan suatu nilai plus untuk Blog karena tampilan lebih menarik atau membuat para pengunjung ingin melihat posting lainya apa bila gambar dan yang anda postikan menarik dan gambar juga keren pasti pengunjung mengeklik atau mengunjungi postingan anda yang postikan dengan label tersebut, Tidak Hanya Itu
Dengan Membuat Sebuah Label dengan Gambar dan Menarik, juga dapat meningkatkan traffik blog anda.
Dalam Membuat Label di blog google atau blogspot.com juga menyediakan tapi tampilan hanya dengan tulisan saja.
Pada Posting kali ini akan membuat label dengan Gambar, jadi bedanya dengan yang disediakan blogger hanya pada gambar, jika di blogger tidak ada gambar.

Dengan adanya label yang kita pilih atau per kategori dapat tampilan blog kita sesuka hati atau bisa dibilang, ingin menampilkan kategori ini saja, karena artikel ini mungkin bagus pasti pengunjung ingin melihat detailnya. dengan begitu jika pasti akan meningkatkan traffik karena artikel yang kita pilih menarik dan jika orang mengunjungi blog kita kita mempunyai label dengan gambar dan menampilkan artikel yang menarik ditampilkan di atas postingan atau dibawah, kemungkinan besar pengunjung akan melihat artikel tersebut

untuk langkah langkah dalam pembuatan tersebut sebagai berikut :

Sebelum Membuat sebuah label dengan gambar per kategori
langkah pertama kita buat CSS terlebih dahulu,

Belum Tahu CSS, silahkan anda klik pada kategori CSS di Blog ini
atau klik disini.

berikut CSS label gambar per kategori :

img.label_thumb{padding:2px;border:1px solid #e8e8e8;transition:all 0.15s ease-in-out 0s;position:absolute;top:0;left:0;float:left;height:46px;width:56px;opacity:10;}img.label_thumb:hover{background:#FFD62C;border:1px solid #FFD62C;}.label_with_thumbs{float:left;width:100%;min-height:60px;margin:0;padding:0;}ul.label_with_thumbs li{padding:0 0 3px 68px;position:relative;min-height:53px;margin:0 0 6px 0;border-bottom:1px dotted #e2e2e2;}ul.label_with_thumbs li:last-child{border-bottom:none;}.label_with_thumbs li{list-style:none;font-size:11px;color:#999;}.label_with_thumbs .title-label a{float:left;display:inline-block;font-weight:bold;font-size:13px;margin:0 0 3px;padding:0;color:#555;width:100%;}.label_with_thumbs a:hover{color:#0099cc;}.label_with_thumbs strong{padding-left:0px;}a.comment-label{font-size:11px;color:#999;}a.more-label{font-size:11px;color:#999;}

Letakan kode CSS diatas tepat diatas ]]></b:skin>

 untuk blogger kode ]]></b:skin> bisa anda  buka pada pengaturan Dasbor :

1. Login Blog Anda
2. Pilih menu Tema klik edit HTML
3. untuk mempercepat pencarian kode tersebut klik CTRL+F paste "]]></b:skin>"

Langkah ke 2 :
kita buat Javascript,
dimana Javascript berfungsi memanggil data yang akan kita tampilkan pada blog kita, contoh disini adalah data Artikel Blog.
Untuk Javascript label feed sebagai berikut :

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGQVXPIWGVbe7LLUdRwU_oNkiy4jJtuof70iWudgO9OGSGGMc6-znwyEl4UwUTYgkvU2FE-zNui1cOTbY5UHuXOa51udP7RGJrtWwu_EmoaLgKe0JUlvqJ7syDxUREyTlnFcy3GJ3GeVo/s1600/picture_not_available.png';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'" alt="'+posttitle+'" title="'+posttitle+'"/></a>');document.write('<div class="title-label"><a href="'+posturl+'" target ="_top">'+posttitle+'</a></div>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+'-'+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a class="comment-label" href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a class="more-label" href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

Copy Paste Javascript diatas letakan diatas kode </head>
 langkah 1 dan 2 sudah lalu Simpan atau Save,

Langkah selanjutkan kita akan menampilkan dari Javascript dan CSS yang kita buat tadi.
Berikut langkah langkah menampilkan Label Feed dengan Gambar :

1. Login Blogger
2. Pilih Menu Layout atau Tata Letak
3. Tambah Widget HTML --> letakan Label Feed sesukan Anda
4. Paste Sorce Code dibawah ini :

<script type="text/javascript">var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = false;var numchars = 100;</script>
<script type="text/javascript" src="URLBlogAnda/feeds/posts/default/-/Label Anda?published&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

Keterangan  :

untuk var numposts = 4; merupakan jumlah post artikel yang ingin anda tampilkan.

Selesai,

Selamat Mencoba,,

Demikianlah Artikel Membuat Label Vertikal dengan Gambar Thubnail per kategori Blogger

Sekianlah artikel Membuat Label Vertikal dengan Gambar Thubnail per kategori Blogger kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Label Vertikal dengan Gambar Thubnail per kategori Blogger dengan alamat link https://5bab5.blogspot.com/2017/09/membuat-label-vertikal-dengan-gambar.html

Tweet