NUSANTARA - ANGKASA NEWS AGENCY GLOBAL: ABNS PANDUAN BLOG

Showing posts with label ABNS PANDUAN BLOG. Show all posts

14:32:00

Cara pasang kotak komentar Facebook di Blogspot (Sempurna)

Kotak komentar Facebook. Siapa yang tak kenal ? mungkin para master sudah pada tau tapi dunia blogger juga masih ada yang newbie. Tutorial kali ini akan membahas tentang bagaimana cara membuat kotak komentar Facebook di bawah setiap artikel. Banyak blog tutorial lain yang sudah share cara seperti ini tapi belum sempurna. Belum sempurna? Maksud saya masih ada kelemahannya, seperti semua komentar muncul di setiap postingan, jadi kita tidak tahu postingan mana yang terkomentari dan tidak ada fitur reply di komentarnya, dan juga jika ada yang mengomentari artikel kita, kita tidak tahu karena tidak ada notifikasi jadi harus cek manual di setiap artikel.

Demo :

Yang kali ini sudah SEMPURNA nah kenapa sudah sempurna ? yap, karena semua masalah itu sudah di fix, komentar hanya muncul pada satu artikel yang di komentari, ada fitur replaynya, dan notifikasinya juga automatis. sudah ngertikan ? kalau sudah langsung TKP aja okk. ekh sebelumnya sobat harus buat aplikasi komentar Facebook dulu untuk mendapatkan app id yang akan di gunakaan nanti, untuk caranya silahkan ikuti tutor berikut :

1. Buka developers Facebook

2. Lalu klik create new app di sudut kanan atas

3. Nanti akan muncul kolom seperti ini (klik untuk perbesar gambar)

4. Isi app Display name dengan Kotak komentar atau yang lain. tidak usah isi app namespace, dan centang juga I agree to the...

5. Jika sudah klik lanjutkan.

6. Selanjutnya kalian akan di bawah ke halaman edit app

7. Scroll agak kebawah sampai ketemu tulisan Website, klik tulisan tersebut lalu isi dengan alamat website sobat seperti gambar di bawah ini, di akhir alamat blog kasih tanda / jadi http://example.com/ (klik untuk perbesar gambar)

8. Jika sudah klik simpan perubahan

9. Catat app id yg ada di halaman tersebut (di dekat nama app)

Nah sekarang kan sudah dapat App id masing masing sekarang kita ke langkah selanjutnya yaitu pemasangan kotak komentarnya di bawah artikel, simak caranya baik baik ya.

1. Sudah pasti kalian login ke akun blogger masing masing

2. Dari dashboard pilih rancangan => edit HTML

3. Lalu centang juga Expand Template Widget

4. Lalu taruh kode berikut di BAWAH kode <data:post.body/>.

<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#appId=App Id kamu&xfbml=1'/><fb:comments expr:href='data:post.url' numposts='5' width='590'/>
</b:if>

5. Ganti App id yang berwarna Merah dengan App id yang sobat catat tadi dan ganti angka 590 dengan lebar yang kamu ingin kan

6. Lalu taruh lagi langkah di bawah ini di BAWAH <head> atau di ATAS <b:skin><![CDATA[

<meta content='ID FACEBOOK' property='fb:admins'/>
<meta content='APP ID' property='fb:app_id'/>

7.Ganti APP ID dengan ID yang di dapat dari facebook tadi, dan ganti ID Facebook dengan ID sobat, misalnya id facebook saya adalah http://www.facebook.com/ari.v.cellios (jangan lupa di add ya hehehe), ganti ID FACEBOOK dengan yang berwarna merah. Setelah itu yang wajib harus dilakukan adalah save template. Kalau ada yang kurang jelas silahkan tanya ya.

(Ari-Software/Berbagai-Sumber-Lain/ABNS)

22:02:00

Cara Membuat Recent Posts Slider Image Otomatis

Saya pernah share beberapa cara membuat slider konten, namun kesemuanya itu hanya dapat berjalan secara manual. Artinya sipengguna harus memasang beberapa foto atau link dengan script tertentu untuk membuatnya berjalan.

Saya kira hal tersebut tidak efektif dan cukup melelahkan kalau kita harus bolak balik mengedit script yang telah dipasang. Sekarang kita akan sedikit lega, karena slider konten dapat kita pasang secara otomatis, baik itu kita arahkan untuk posting atau label tertentu pada situs kita. Baiklah...sekarang mari kita bahas cara membuat slider konten otomatis. Ikuti langkah berikut:

1. Log in ke blogger
2. Klik Ranangan Klik Edit HTML.
3. Masukkan kode berikut di atas kode ]]></b:skin>

/*Carousel*/
#carousel{border-radius:5px;width:960px;height:330px;border-bottom:1px solid #222;position:relative;display:block;background-image:url(http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Menu-Navigation-Effect/pattern_40.gif)}
#carousel .container{position:absolute;left:23px;width:99%;height:330px;overflow:hidden}
#carousel #previous_button{position:absolute;width:25px;height:330px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG2BH8A8TSac_PiQEVw8Sa-KRBT_igRo5iFW1Ho6kLWClid1lcm5YlfJ-hyodmwFjzFgv3GHnMd7pg2W8djNgLN8Dfaaap37IYVO0a0YRz1BHRhnfYt1aOR_qbUg2UcnBPuDspVxHd2PU/s1600/previous.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:25px;height:330px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiutly9025w4cNlsWHxwpgy0B-Ox70S-XZeWHuX_qEXpVA3DZbZeb4BNs_-24JaeRsTV5zHI5Lze0EUdVNYJCkthawZg2g0KIPvw8SNCWDG9kxqq8-rS-_GpfrQMVa8C7bhb82rlxryEMQ/s1600/next.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel #previous_button:hover,#carousel ul li:hover{cursor:move;filter:alpha(opacity=70);opacity:.7}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#111 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRn6te6lRYedFVcofkCAmxj9nQBPAyjpiEbxjJNCW3zLxNsAF6RKH3WwjjHIb-wH_M-5Olj9VgZtuYdmsdMzgd8BiU4bbn5Mk18r5rcFJgLbq_sc3uLkKb3xlQhk-oNpgsElbzBDSKGjQ/s1600/sliderbg.png) repeat-x top;display:inline;float:left;text-align:center;font-family:arial;font-weight:700;font-size:.9em;line-height:1.2em;width:200px;height:300px;margin:0 1px 20px 12px;padding:6px}
#carousel ul li a.slider_title{text-shadow: 0px 0px 1px #000;color:#555;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#2FC9FF}

4. Selanjutnya masukkan kode berikut di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://ut2a-4down-blogspot-com.googlecode.com/files/carouselakaUTta.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpBoS1A-pzbATlK6Qwo3zr0w2SaCRABZyqFMhf5bJ2qoPNC22dh4jbmbHCvBksl-X8W8WkJ_jV3IFE0nn9leMaQY4R6gZqyirD455zMB1jhax2wNG3e2eV2yg8ZSRbun_lcwHwDO2L0_fu/s1600/no-video.gif";showRandomImg=true;aBold=true;summaryPost=200;summaryTitle=20;numposts1=12;numposts2=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();document.write('<ul>');for(var i=0;i<numposts1;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","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 class="car"><div class="thumb"><a href="'+posturl+'"><img width="200" height="250" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';document.write(trtd);j++}document.write('</ul>')}
//]]>
</script>

Keterangan:

- Bila kode <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> sudah terdapat pada template anda, maka kode ini tidak usah dipasang. Karna bila ada dua kode tersebut, slider konten tidak akan berjalan.
- Silahkan edit kode berikut dari kod di atas untuk menyetel opsi tampilan slider.
SummaryPost = 200; panjang pengantar artikel yang ditampilkan pada slider konten
SummaryTitle = 20; panjang dari judul yang ditampilkan pada slider konten
Numposts1 = 12; jumlah posting yang terlihat dari slider konten.
- Bila ingin merubah ukuran image, silahkan edit
img width="200" untuk ukuran tinggi widget
height="250" untuk ukuran tinggi widget

5. Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini diatasnya :

<b:if cond='data:blog.pageType != "item"'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>document.write(" <script src=\"http://ta-movie87.blogspot.com/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$("#carousel .container").jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,
visible: 4,
start: 0,
circular: true,
btnPrev: "#previous_button",
btnNext: "#next_button"
});
})})(jQuery)
</script>
</b:if>

- Silahkan ganti teks yang berwarna MERAH diatas,dengan URL Blog sobat.
- Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer.

6. Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Image itu akan muncul di blog Anda.

Demikian tutorial Cara Membuat Recent Posts Slider Image Otomatis. Selamat mencoba dan semoga bermanfaat bagi semua. Amin...

(ut2a-4down/Berbagai-Sumber-Lain/ABNS)

21:27:00

cara Membuat Slider Show Posting Bergerak Otomatis

Agar blog anda terlihat menarik dengan menambahkan kode di bawah ini untuk membuat slide show diatas,agar tampilan blog anda semakin menarik silahkan pasang kode nya di bawah ini:

Langkah-langkahnya adalah:

1. buka blogger
2. klik template
3. klik edit html-kemudian klik ctrl+f-lalu cari kode berikut ]]></b:skin>
4. lalu pastekan kode di bawah ini tepat diatas kode ]]></b:skin>

#featured-wrap{border-bottom:1px solid #000;box-shadow:0 1px 0 0 #333;background:#111;position:relative;height:175px;margin:0 auto}<br />
#featured{border:2px solid #444;outline:1px solid #000;position:relative;width:88%;height:150px;overflow:hidden;top:10px;margin:0 auto}<br />
#featured ul{width:9999px}<br />
#featured ul,#featured li{list-style:none;padding:0;margin:0;overflow:hidden}<br />
#featured li{width:150px;display:inline-block;float:left;height:150px;background:#222;border-left:1px solid #111;border-right:1px solid #333;}<br />
.thumb-featured{width:140px;height:100px;margin:5px auto;overflow:hidden;border:1px solid #000}<br />
.thumb-featured img{display:block;width:134px;height:94px;border:3px solid #444;}<br />
.title-featured{text-align:center;position:relative;margin-top:-20px}<br />
.title-featured h4{font-size:90%;max-height:45px;overflow:hidden}<br />
.arrow{position:absolute;display:block;background:#111 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqbTQfcX2O8kE-FiG9-STSXovYvT3Xk21IgC2wjzbEivKUiXNA7hYMUbqnH58ZCMtjHhJX5sZVRAWWrdtrTmQ96SsDa3ahAce8PF7nwD8zfjirjkWyTiHWgU0EVMJYzexh6ccIxUsKlxo/h120/icon-sprite.png)no-repeat;background-position:0 50%;width:35px;height:60px;top:50px;text-indent:-9999px;border:1px solid #000;box-shadow:0 0 0 1px rgba(51, 51, 51, 1)inset}<br />
.arrow.back{background-position:0 50%;left:10px}<br />
.arrow.forward{background-position:100% 50%;right:10px}<br />
span.slideloading{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-nyCASffiKntmO3B_Om-MM9534K1n2FbxnP-DQnUCh_vqBEL7zyuRGU6Uz_MoXY0lGlk3mFk1dlGoRcRTUAczzbTxmztlqQfnwBLyO_c7ZrUuoPGeOLDXfFlhOIZ7sy8T5rylveUiv3I/h42/loading.gif);background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;margin:50px auto}<br />
<br />

5. Copy lagi kode di bawah ini dan pastekan di atas kode </head>

6.Cara menempatkan tampilan featured slide show nya mau di tempatkan di mana jika mau di tempatkan di bagian atas silahkan Copy kode yang ada di bawah ini dan pastekan di bawah kode <div id='main-wrapper'>

Dan kalau mau memasang slider show posting nya di bagian bawah / footer silahkan kopi kode yang ada di bawah ini dan pastekan di bawah kode <footer id='footer-wrapper'>

7. Lalu simpan template
8. Selesai.

(Belajar-Komputer-81/Berbagai-Sumber-Lain/ABNS)

20:59:00

Cara Membuat Author Box (Kotak Admin) Di Blog

Saat ini sedang banyak blog yang isinya copy paste, dan tidak pula memberikan link aktif sumber ia mendapatkan artikel tersebut, sayapun memiliki blog copas --> diandiki.blogspot.com . Namun saya selalu memberikan link aslinya , jadi tidak melanggar peraturan, jika teman-teman mau melihat klik Disini

Untuk mengantisipasi banyak artikel copas tanpa memberikan link asli, sebaiknya kita memberikan peringatan dibawah postingan blog dalam bentuk kotak admin. Jika teman teman ingin melihat bentuk dari kotak admin tersebut teman-teman bisa melihat gambar di bawah ini atau bisa melihat langsung dibawah postingan blog saya.

Jika anda tertarik , lanjut baca artikel ini

1. Kilik menu template di blog anda --> klik html

Jika anda sulit menemukan pemula dan sulit untuk menemukan kode di edit html, bisa melihat caranya Disini

2 Anda cari kode berikut terlebih dahulu

]]></b:skin>

3. Letakkan Kode berikut Sebelum Kode di atas

/* kotak admin yusdanyun blogspot */
.admin-tulisan{display:block;width:aut

o;background:#000099;border:2px solid

#FF0000;box-shadow:0 1px 3px

#000;-moz-box-shadow:0 1px 3px

#000;-webkit-box-shadow:0 1px 3px

#000;padding:0;margin:30px 0 10px

0;font:normal 12px Arial,

Sans-Serif;color:#FFFFFF;}
.admin-tulisan

.kontainer{padding:5px;}
.admin-tulisan

h4{background:#8A9C04;border:none;bord

er-bottom:1px solid

#699019;color:#fff;text-transform:norm

al;text-shadow:0 1px 0 rgba(0, 0, 0,

0.4);font:bold 12px

Arial,Sans-Serif;padding:5px

10px;margin:0 0 0 0;display:block;}
.admin-tulisan h4 a{color:#FEEA83;}
.admin-tulisan

img{width:70px;height:70px;margin:0

10px 0 0;float:left;border:1px solid

#954B02;padding:2px;background:#C36702

;
box-shadow:none;-moz-box-shadow:none;-

webkit-box-shadow:none;margin:

0px;border: 5px solid

#eee;-webkit-box-shadow: 4px 4px 4px

rgba(0,0,0,0.2);-moz-box-shadow: 4px

4px 4px rgba(0,0,0,0.2);box-shadow:

4px 4px 4px

rgba(0,0,0,0.2);-webkit-transition:

all 0.5s ease-out;-moz-transition: all

0.5s ease;-o-transition: all 0.5s

ease;-webkit-transform:

rotate(-7deg);-moz-transform:

rotate(-7deg);-o-transform:

rotate(-7deg);}
/* kotak admin yusdanyun blogspot */
</ div>
Lanjut Sobat

keterangan:

a. Warna biru untuk mengatur warna background
b. Warna merah untuk merubah warna border
c. Warna Hijau untuk merubah warna tulisan

4. Setelah itu anda cari kode

<div class='post-footer'>

5. Pastekan kode berikut di atas kode di atas dan apabila di template anda terdapat lebih dari satu kode <div class='post-footer'>, Saran saya pilih kode yang terakhir.

<b:if cond='data:blog.pageType == "item"'>
<div class='admin-tulisan'>
<h4>Creatif By : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> | Jangan Pernah Katakan Tidak Bisa Sebelum Mencoba </h4>
<div class='kontainer'>
<img src='https://pbs.twimg.com/profile_images/547657265503686656/vEHCGAe4.jpeg'/>
Terimah Kasih telah membaca artikel<a expr:href='data:post.url'><data:post.title/></a>. Yang ditulis oleh <data:post.author/> (Mr.Yus14) <data:post.dateHeader/>. Jika anda ingin sebarluaskan artikel ini, mohon sertakan <blink><strong>sumber link asli.</strong></blink> Kritik dan saran dapat anda sampaikan di komentar, Trimakasih
<p>
<textarea cols='57' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'><a href="<data:post.url/>" target="_blank"><data:blog.pageName/></a></textarea><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://diandiki.blogspot.com/2013/07/cara-membuat-author-box-kotak-admin-di.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>

Keterangan:
Warna biru ganti Deskripsi blog anda
Warna Merah ganti dengan URL foto anda
Warna Hijau ganti dengan kata-kata anda sendiri
Selebihnya anda bisa mengedit sendiri

6. Pratinjau terlebi dahulu kalau sudah selesai simpan deh.

selamat mencoba...

(Diandiki/Yusdanyun/Berbagai-Sumber-Lain/ABNS)

00:04:00

Cara Membuat Label Keren Ala Evo Magz

Sebelumnya, sedikit informasi, evo magz adalah salah satu template premium karya Mas Sugeng. Template ini sangat banyak sekali yang menyukainya, ini terbukti dengan banyaknya orang yang membeli tempalate evo magz ini. salah satu yang menarik dari template ini adalah labelnya, bahkan Maca Berita sendiri sudah memakai label evo magz tersebut untuk diterapkan di blog ini. tertarik juga untuk mencobanya, berikut tutorialnya.

Cara Pemasangan Label Cloud di Blog

1. Masuk terlebih dahulu ke dashboard blogger anda.
2. Masuk ke “Layout” atau “Tata letak” dan tambhakn widget “Label” dengan cara mengklik icon plus ( + ) yang berada di sebelah kanannya.
3. Pada bagian pengaturan, pilih tampilkan label dalam mode “Cloud” dan pengaturan yang lain pilih sesuka anda.
4. Terakhir tekan “Simpan” atau “Save”.

Kostumisasi Label Cloud Agar Mirip Ala Evo Magz

1. Sekarang anda masuk ke menu “Template”
2. Back up terlebih dahulu template anda, jika sudah masuk ke “Edit HTML”.
3. Cari kode ]]></b:skin>

atau gunakan Ctrl + F untuk mempermudah pencarian. Jika sudah ketemu, letakkan kode berikut ini tepat diatas kode tadi.

/* label */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
background:#2ea9da;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
background:#333333;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#333333;
color:#fff !important;
}
.label-size {
line-height:1.2
}

4. Terakhir, simpan template anda.

Maka Jadinya Seperti ini.

Nah, itulah tutorial cara membuat label cloud ala evo magz yang mungkin dapat anda coba. Bagaimana mudah dan kerenkan hasilnya? Sekian tutorial yang dapat Maca Berita sampaikan kali ini, semoga bermanfaat bagi anda.

(rrashid01/Berbagai-Sumber-Lain/ABNS)

23:48:00

Tips Blog Cara Edit Label Blog Dengan CSS3

Sobat blogger mau merubah penampilan label blog menjadi lebih keren ? Nah, tips blog kali ini yang ingin saya share adalah Cara Edit Label Blog Dengan CSS3. Kalo sobat blogger memakai tips blog ini, saya jamin penampilan label blog sobat akan terlihat keren. Untuk melihat preview lihat gambar dibawah ini :

Cara membuat Label Blog Dengan CSS3 :

1. Masukkan kode berikut diatas ]]></b:skin>

.label-size {

    float: left;

    margin: 0 0 7px 20px;

    position: relative;

    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-size: 0.75em;

    font-weight: bold;

    text-decoration: none;

    color: #996633;

    text-shadow: 0px 1px 0px rgba(255,255,255,.4);

    padding: 0.417em 0.417em 0.417em 0.917em;

    border-top: 1px solid #d99d38;

    border-right: 1px solid #d99d38;

    border-bottom: 1px solid #d99d38;

    -webkit-border-radius: 0 0.25em 0.25em 0;

    -moz-border-radius: 0 0.25em 0.25em 0;

    border-radius: 0 0.25em 0.25em 0;

    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');

    -webkit-box-shadow: inset 0 1px 0 #faeaba,

        0 1px 1px rgba(0,0,0,.1);

    -moz-box-shadow: inset 0 1px 0 #faeaba,

        0 1px 1px rgba(0,0,0,.1);

    box-shadow: inset 0 1px 0 #faeaba,

        0 1px 1px rgba(0,0,0,.1);

    z-index: 1;

}

.label-size:before {

    content: '';

    width: 1.30em;

    height: 1.39em;

    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');

    position: absolute;

    left: -0.69em;

    top: .2em;

    -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(45deg);

    border-left: 1px solid #d99d38;

    border-bottom: 1px solid #d99d38;

    -webkit-border-radius: 0 0 0 0.25em;

    -moz-border-radius: 0 0 0 0.25em;

    border-radius: 0 0 0 0.25em;

    z-index: 1;

}

.label-size:after {

    content: '';

    width: 0.5em;

    height: 0.5em;

    background: #fff;

    -webkit-border-radius: 4.167em;

    -moz-border-radius: 4.167em;

    border-radius: 4.167em;

    border: 1px solid #d99d38;

    -webkit-box-shadow: 0 1px 0 #faeaba;

    -moz-box-shadow: 0 1px 0 #faeaba;

    box-shadow: 0 1px 0 #faeaba;

    position: absolute;

    top: 0.667em;

    left: -0.083em;

    z-index: 9999;

}

#Label1 {

    height: 210px;

}

.label-size:hover {

    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');

    border-color: #e1b160;

}

.label-size:hover:before {

    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');

    border-color: #e1b160;

2. Save template dan lihat hasilnya.

Okey, cukup sekian tips blog kali ini cara edit label blog dengan CSS3.
Semoga bermanfaat

(Kimzaqi/Berbagai-Sumber-Lain/ABNS)

23:19:00

Cara Membuat Slide Recent Post Responsive

Slider artikel terbaru atau yang biasa kita kenal dengan slide show recent posts adalah sebuah widget yang menampilkan postingan-postingan terbaru dengan tampilan slide, jadi nanti postingan akan silih berganti bermunculan secara otomatis sesuai dengan yang kita mau, tampilan dari slider ini juga cukup minimalis, jadi cocok untuk dipakai di dengan tampilan apa saja.

Berikut ini adalah contoh dari slider artikel terbaru yang akan kita buat nantinya, jadi nanti ada 5 kolom, 4 kecil dan 1 yang besar, nah dari ke 4 kolom kecil ini akan selalu slide dengan yang besar, jadi seperti slide show. Ketika kita arahkan kursor mouse ke gambar dari salah satu kolom, maka gambar akan terlihat seperti membesar dengan fitur zoom in.

Foto: http://bulshitman.blogspot.co.id

Anda bisa lihat live demo dari widget ini di blog Travel Keren, nah untuk menambahkan widget ini ke blog kita, perlu ada beberapa javascript, html, dan kode ccs yang kita sisipkan di template dan tata letak, ingin tahu bagaimana cara memasangya di blog? langsung aja simak yang berikut ini, hehe.

Cara Membuat Slider Artikel Terbaru di Blog

1. Login ke Blogger.
2. Pilih Template.
3. Klik Edit HTML.
4. Cari kode </head> menggunakan CTRL+F, setelah itu letakkan kode dibawah ini tepat diatasnya.

<script type="text/javascript" src="http://yourjavascript.com/123612293024/slider-post.js"></script>

5. Selanjutnya pergi ke Tata Letak / Layout.

6. Klik Add gadget > Pilih HTML/Javascript, lalu letakkan kode dibawah ini kedalamnya.

<style>
/* CSS Responsive Slider Recent Post */
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:50%}
#slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
#slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
#slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
#slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id="featuredpost"></div>
<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"YOUR-BLOG-URL",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

Note: Ganti tulisan yang berwarna merah dengan URL blog anda

7. Klik "Save", dan selesai.

Demikian informasi menarik mengenai bagaimana cara membuat slider artikel terbaru atau recent posts di blog, baca juga artikel informatif lainya seputar blogging tentang cara membuat artikel terkait dengan thumbnail di blog, semoga bermanfaat, dan selamat mencoba Bloggers!

(Farespo/Berbagai-Sumber-Lain/ABNS)

22:41:00

Cara Membuat Tombol Share Sosial Media di Bawah Postingan Blog Dengan Mudah

Memasang tombol share sosial media pas di bawah postingan merupakan langkah yang tepat, karena selain mempermudah pembaca dalam berbagi informasi. Juga bermanfaat dalam mempromosikan blog Anda, sehingga trafik pengunjung blog Anda akan meningkat.

Dalam hal ini kita akan memanfaatkan pihak ketiga biar tidak ribet dan tentunya cara ini sangat mudah Anda praktekkan.

Sudah banyak situs yang menyediakan layanan seperti ini seperti AddThis, ShareThis, dll. Namun, kali ini kita akan memanfaatkan salah satunya saja yaitu lewat ShareThis.

Oke, daripada kelamaan kita langsung aja ke prakteknya. Lets go !

Cara Membuat Tombol Share Sosial Media Di Bawah Postingan Blog Dengan Mudah

#1. Langkah pertama login ke situs resminya www.sharethis.com selanjutnya Anda buat akun terlebih dahulu di bagian create acount silakan Anda pilih mau lewat e-mail atau media sosial disarankan lewat media sosial karena prosesnya lebih cepat.

#2. Setelah proses pembuatan akun Anda selesai, selanjutnya tinggal kita memilih platform mana yang Anda gunakan. Di sini saya memilih platform blogger kemudian klik Next.

#3. Selanjutnya setelah memilih platform, berikutnya Anda memilih style atau model tampilan dari tombol share media sosial. Kurang lebih seperti gambar dibawah ini lalu pilih Next.

#4. Menarik bukan, kalau sudah Anda tinggal mengambil script kodenya dengan menekan tombol Get The Code.

#6. Jika Anda tidak ingin ribet, atau ingin yang instan yang tinggal pakai. Tenang saja sudah saya sediakan scriptnya khusus untuk Anda he he. Silahkan Anda copy atau salin script share sosial media sharethis berikut:

<span id="st_finder"></span><script type="text/javascript" src="http://w.sharethis.com/widget/stblogger2.js"></script><script type="text/javascript">var switchTo5x= true;stBlogger2.init("http://w.sharethis.com/button/buttons.js",{"sharethis":["vcount","ShareThis",""],"facebook":["vcount","Facebook",""],"twitter":["vcount","Tweet",""],"linkedin":["vcount","LinkedIn",""],"pinterest":["vcount","Pinterest",""],"email":["vcount","Email",""]}, "649d038c-d799-4527-a804-b43073e09870");var f = document.getElementById("st_finder");var c = f.parentNode.parentNode.childNodes;for (i=0;i<c.length;i++) { try { c[i].style.display = "none"; } catch(err) {}}</script>

#7. Silahkan buka menu Layout pilih Add a Gadget untuk menambahkan gadget tombol share sosial media.

#8. Muncul pop up silahkan Anda gulir lalu pilih HTML/JavaScript

#9. Langkah terakhir paste atau tempelkan script yang sudah Anda dapatkan, biar mudah dalam menemukan gadgetnya silahkan Anda beri judul pada gadget tersebut. Tenang saja judul tidak akan muncul di blog Anda hehe.

#10. Jangan lupa untuk menyimpan pekerjaan Anda jika sudah selesai.

Akhir kata, semoga dapat bermanfaat. Apa pun jenis tombol share yang digunakan semua tetaplah sama yaitu untuk menyebarluaskan informasi dari satu blog ke tempat lainnya.

(Settingers/Berbagai-Sumber-Lain/ABNS)

Daftar Isi Nusantara Angkasa News Global

Advertising

Meluruskan Doa Berbuka Puasa ‘Paling Sahih’

Pesan Rahbar

Cara pasang kotak komentar Facebook di Blogspot (Sempurna)

Cara Membuat Recent Posts Slider Image Otomatis

cara Membuat Slider Show Posting Bergerak Otomatis

Cara Membuat Author Box (Kotak Admin) Di Blog

Cara Membuat Label Keren Ala Evo Magz

Tips Blog Cara Edit Label Blog Dengan CSS3

Cara Membuat Slide Recent Post Responsive

Cara Membuat Tombol Share Sosial Media di Bawah Postingan Blog Dengan Mudah

Terkait Berita:

Headline News Global

Advertising

Terkini

Live Feed Global

Recent Post Comments

Situs Pengunjung

Moderator Admin

Advertisng

Pilihan Terbaik

Tag Berita Hari Ini

ABNS Video You Tube