DNFA Blog: Blogging

Home Posts filed under Blogging

Showing posts with label Blogging. Show all posts

Thursday, December 14, 2017

Cara Mudah Modifikasi Keren Widget Arsip Blog

danang akbar December 14, 2017 1 Comment

Cara Mudah Modifikasi Keren Widget Arsip Blog - Bosan dengan tampilan arsip blog yang monoton sebatas tampilan hierarki, flat dan menu dropdown. Pilihan yang ditawarkan blogger memang terbatas itu saja, namun tampilan-tampilan dari blog yang terlihat statis, monoton kini dapat dimodifikasi menjadi dinamis dan lebih responsive. Tentunya dari ilmu yang didapat dari para ahli hal tersebut dapat dilakukan.

Kesempatan kali ini saya akan memberikan cara modifikasi keren widget arsip blog supaya terlihat lebih keren dan elegan. Bisa dibilang cara ini tak sesulit memodifikasi template blog yang harus mengutak-atik tema pada HTML blog, anda hanya perlu menerapkannya pada CSS blog. Untuk tampilan widget tersebut bisa anda lihat seperti pada blog ini. Langsung saja berikut caranya

Sebelum anda menerapkan perlu anda copy dahulu script font awesome dibawah ini

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

Lalu paste dibawah kode <head> pada template blog, untuk menemukan kode head tekan Ctrl+F pada keyboard kemudian ketik dan cari <head>

Klik simpan template

Langkah selanjutnya masih di menu tema

Pilih Sesuaikan lalu lanjutan dan tambahkan CSS

Masukkan kode dibawah ini

//* Archive Year Header */
#ArchiveList ul > li > a.post-count-link {
    font-size: 18px;
    width: 100%;
    margin: 0;
    padding: 0 15px;
    line-height: 38px;
    background-color: #F5F5F5;
    box-sizing: border-box;
    letter-spacing: 1px;
}

/* Archive Month Header */
#ArchiveList ul ul li a.post-count-link{
    font-size: inherit;
    width: auto;
    margin: 0 5px 0;
    padding: 8px 25px;
    line-height: 1;
    background: transparent;
    text-transform: uppercase;
}

#ArchiveList .zippy{
    visibility: hidden;
}

#ArchiveList ul li a.toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    height: 38px;
    z-index: 5;
}

#ArchiveList ul ul li a.toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 24px;
    display: block;
    z-index: 0;
}

#ArchiveList .toggle {
    position: relative;
}

#ArchiveList ul ul .zippy{
    color: white;
    visibility: visible;
    text-shadow: none;
}

#ArchiveList ul ul .zippy:before {
    content: '\f105';
    font-family: FontAwesome;
    position: absolute;
    top: 3px;
    left: 10px;
    padding: 4px;
    line-height: 1;
    font-size: 11px;
    color: #8C8C8C;
}

#ArchiveList ul ul .toggle-open:before {
    content: '\f107';
    position: absolute;
    top: 3px;
    left: 10px;
}

#ArchiveList ul li{
    padding: 0 !important;
    text-indent: 0 !important;
    margin: 0 !important;
    position: relative;
}

#ArchiveList ul .post-count-link {
    padding: 10px 0;
    display: inline-block;
    margin: 0 5px 0;
}

#ArchiveList ul ul .posts li {
    margin: 0px 10px 10px 30px !important;
    text-transform: none;
}

#ArchiveList ul {
    margin: 0 0 2px !important;
}

span.post-count {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #8C8C8C;

Klik Terapkan ke Blog

Untuk mengeceknya silahkan anda tambahkan widget arsip artikel, apabila telah ada widget arsip artikel di blog anda hapus terlebih dahulu.

Berikut cara menambahkan widget arsip artikel blog

1. Pada menu dashboard blog anda pilih tata letak

2. Pilih tambahkan gadget kemudian pilih arsip blog

3. Biarkan setelan seperti defaultnya kemudian klik simpan

Lihat hasilnya dan selamat widget arsip blog anda kini lebih bagus dari sebelumnya.

Semoga bermanfaat!

Blogging

Cara Membuat Kotak Tempat Kode Script Dilengkapi Scroll Pointer Pada Posting Blog

danang akbar December 14, 2017 Comment

Cara Membuat Kotak Tempat Kode Script Dilengkapi Scroll Pointer Pada Posting Blog

Sobat blogger yang gemar menulis artikel di blog anda masing-masing tentunya pernah mengalami masalah kesulitan dalam menaruh kode sejenis script html atau script bahasa pemrograman lain. Yah memang merepotkan dan banyak memakan space tempat posting apabila kode script tersebut terlalu panjang. Oleh karenanya pada postingan kali ini saya akan memberikan cara membuat kotak untuk kode script pada posting blog agar mempermudah dan menghemat tempat dalam posting artikel blog anda.

Sehingga dengan menggunakan kotak tersebut tampilan artikel menjadi lebih rapi dan enak untuk dilihat mata seperti pada artikel saya sebelumnya. Ada banyak tipe kotak untuk tempat kode script tersebut tapi disini saya akan membahas yang paling fleksibel dan sering digunakan oleh para blogger. Langsung saja berikut caranya

Copy kode dibawah ini

<div style="border: 1px #808080 solid; padding: 10px; background-color: Gainsboro; overflow: auto; height: 200px; width: 600px; text-align: left;">Masukkan kode disini!</div>

Masuk ke menu entri baru post blog dan paste pada HTML bukan Compose

Atur tampilan kotak sesuai keinginan

Masuk pada menu Compose lalu masukkan script kode yang ingin anda letakkan dalam kotak pada tulisan yang bertanda merah.

Berikut cara untuk mengatur tampilan kotak dari kode diatas:

1. Mengganti tebal garis tepi kotak, ubah angka sesuai keinginan pada "border: 1px"

2. Mengganti warna garis tepi, ubah kode warna berikut "#808080"

3. Mengganti jenis garis tepi, bisa berupa garis putus=dashed atau titik=dotted pada "solid"

4. Mengganti warna background dalam kotak, ubah nama warna yang anda inginkan tentunya memakai english ya, ubah pada kode berikut "background-color: Gainsboro"

5. Mengganti lebar/panjang kotak, ubah angka pada "width: 600px"

6. Mengganti tinggi kotak, ubah angka pada "height: 200px"

7. Mengganti perataan tulisan pada kotak, ubah jenis perataan tulisan seperti rata tengah=center atau rata kanan=right pada "text-align: left"

Setelah menerapkan cara diatas dengan demikian tampilan kode script pada blog anda lebih tertata dan tidak memakan tempat.

Semoga bermanfaat!

Wednesday, December 13, 2017

Blogging

2 Cara Mudah Memindahkan Tulisan Artikel Tidak Berantakan Dari Word Ke Blog

danang akbar December 13, 2017 Comment

2 Cara Mudah Memindahkan Tulisan Artikel Tidak Berantakan Dari Word Ke Blog

Pernah mengalami tulisan artikel yang telah anda buat pada Ms Word menjadi tidak beraturan saat anda mencopy atau memindahkannya ke halaman entri postingan blog anda. Mungkin anda merasa bingung dan mangkel alias frustasi mengalami hal tersebut, karena tulisan artikel yang sedemikian rapi dan telah siap di posting pada blog anda menjadi tidak karuan dan berantakan pada blog anda.

Hal tersebut dikarenakan terjadi perbedaan format file dari document pada word dengan tulisan untuk blog yang berbentuk halaman web. Mungkin bagi yang belum tau tersa rumit memecahkan masalah tersebut. Oleh sebab itu pada postingan kali ini saya akan membagikan 2 cara mudah memindahkan tulisan artikel tidak berantakan dari word ke Blog anda agar terlihat rapi seperti pada tulisan anda di word. Langsung saja simak dibawah ini

Cara 1

Cara yang pertama yaitu cara instan dan mudah tapi membutuhkan koneksi internet. Anda hanya perlu menyalin tulisan yang anda buat di word ke website word2cleanhtml untuk cara penerapannya akan saya jelaskan berikut:

1. Buka website word2cleanhtml
2. Copas tulisan dari word anda ke halaman web tersebut

3. Kemudian klik Convert to clean html
4. Copy tulisan tersebut ke halaman entri post baru blog

5. Paste pada HTML bukan Compose
6. Edit sedikit pada Compose, selesai.

Cara 2
Cara yang kedua ini tidak memerlukan koneksi internet atau bisa di bilang cara manual. Cara ini simple dan sederhana yaitu dengan menyimpan file tulisan word ke format *txt mirip saat kita menyimpan file pada notepad bertipe *txt. Untuk langkah-langkahnya tentunya anda sudah mengerti dan tidak perlu saya jelaskan lagi. Dan untuk cara postingya pada blog bisa mengikuti langkah diatas dari langkah nomor 4.

Sekian postingan kali ini mengenai 2 cara mudah memindahkan tulisan artikel tidak berantakan dari word ke blog semoga membantu para sobat blogger semua.

Tuesday, December 12, 2017

Blogging

Kumpulan Widget Artikel Terbaru Keren

danang akbar December 12, 2017 Comment

Kumpulan Widget Artikel Terbaru Keren

Selamat datang di blog saya, kali ini saya akan memposting artikel tentang beberapa widget recent post atau widget untuk artikel terbaru pada blog agar terlihat lebih menarik. Widget menjadi komponen blog yang tidak kalah penting dari halaman posting atau halaman statis. Widget juga dapat menjadi sebuah aksesoris pada blog untuk memperindah tampilan blog anda. Seperti kita tahu manusia juga membutuhkan sebuah aksesoris untuk memperindah penampilannya agar terlihat menarik apabila dilihat orang lain..hehe

Langsung saja tanpa basa-basi silahkan anda lihat dan terapkan beberapa widget recent post untuk blog sesuai keinginan anda. Setelah anda memilih widget yang sesuai keinginan berikut saya berikan cara menerapkannya.

1. Masuk halaman blog anda

2. Pilih tata letak dan terapkan pada sidebar atau sisi samping blog anda

3. Pilih Tambahkan Gadget kemudian pilih HTML/Javascript

4. Masukkan salah satu kode widget dibawah

6. Setelah selesai pilih Simpan Setelan dan lihat hasilnya

Widget 1

Widget 2

<div class="recentpoststyle">
<script type="text/javascript">
function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}
</script>
<script type="text/javascript">
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="https://danangnfakbar.blogspot.com/2017/12/kumpulan-widget-artikel-terbaru-keren.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none;color: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}
.recent-post-title a {color: #444;text-decoration: none;font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}
.recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}
</style></div>

Widget 3

Widget 4

Widget 5

Itulah beberapa widget yang dapat mempercantik tampilan blog anda. Sekian postingan kali ini apabila ada widget terbaru saya akan share diartikel berikutnya.
Terimakasih telah membaca artikel ini. Baca juga artikel lainnya ya!

Monday, January 2, 2017

Blogging Tips

Cara Cepat Dan Mudah Membuat Daftar Isi Otomatis Blog

danang akbar January 02, 2017 Comment

Anda seorang blogger? Nah, pada kesempatan kali ini saya akan berbagi mengenai Cara Cepat Dan Mudah Membuat Daftar Isi Otomatis Blog dengan melakukan koding sedikit tanpa perlu mengandalkan keahlian seperti seorang master programmer. Karena saya sendiri juga pemula untuk dunia blogger ini, tidak ada salahnya berbagi informasi yang saya dapat sehingga dapat bermanfaat bagi anda yang mampir ke blog ini.

Disadur dari jalantikus.com, jangan hanya sekedar membuat tulisan di blog, anda juga harus membuat daftar isi untuk setiap tulisan yang anda buat. Seperti halnya buku, daftar isi pada blog akan memudahkan pengunjung blog untuk menjelajahi konten yang ada. Daftar isi juga bermanfaat untuk mengoptimalkan mesin pencarian (SEO). Tak lupa, daftar isi pada blog akan membantu membuat link internal antar-postingan untuk menaikkan page rank postingan anda.

Langsung saja anda simak berikut Cara Cepat Dan Mudah Membuat Daftar Isi Otomatis Blog !

Cara Membuat Daftar Isi Otomatis Blog di Blogger

Pertama login ke akun blog anda di blogger
Di halaman awal pada blog anda, pilih Laman / Pages.
Selanjutnya buat halaman baru, dengan pilih menu Laman Baru / New Pages.
Pada halaman baru tadi, silakan buat nama/judul halaman misal "Daftar Isi". Lalu silakan copas kode berikut:

Ganti alamat http://nama-blog-anda.com dengan alamat blog anda. Lalu paste kode diatas pada bagian HTML bukan Compose ke halaman baru yang anda buat tadi. Anda juga bisa memakai kode lainnya seperti dibawah ini bila kode diatas tidak bisa atau error!

<style>p.labels a{color: #000000; text-transform: uppercase;font-size: 15px;}a.post-titles {color: #000080;}ol li{list-style-type:decimal;line-height:25px;}</style><script>//<![CDATA[var postTitle=new Array();var postUrl=new Array();var postPublished=new Array();var postDate=new Array();var postLabels=new Array();var postRecent=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function bloggersitemap(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postPublished[ii]=o;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><div class="sitemap-link"><a href="http://danangnfakbar.blogspot.co.id/2017/01/cara-cepat-dan-mudah-membuat-daftar-isi.html" style="font-size: 10px; text-decoration:none; color: #5146CD;">Get This Widget</a></div>')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postPublished[e];postPublished[e]=postPublished[g];postPublished[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postPublished[f];postPublished[f]=postPublished[h];postPublished[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Post Title";var m="Click to sort by title";var d="Date";var k="Click to sort by date";var c="Category";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Click to view all"}h+="<table>";h+="<tr>";h+='<td class="header1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="header2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="header3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="header4">';h+="Read all";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Show All '+postTitle.length+" Posts<br/></span>"}else{var f='<span class="toc-note">Show '+l+" posts by category '";f+=postFilter+"' the "+postTitle.length+" Total Posts<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p class="labels"><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">New!</span></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle('toc-result','blind');">?? Display Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgraevWOxultiSVvo87vecSXyL0ytNQrV7fzkOonRgjEPEUV_lUThz6e-s-b2NLKVVPDGOSmHRSdrNzmIJO0EI7ew_7yWdpe-pTe7IJk3iwKl76JVTLqr3Ap-aTeXrSaD2ImPgtFsNXnxRQ/s1600/new_icon.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Read all : <a href="'+postPublished[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};//]]></script><script src="https://danangnfakbar.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=bloggersitemap"></script>

Selanjutnya anda perlu menghubungkan Laman baru yang anda buat tadi ke menu navigasi atau submenu di blog anda. Caranya pada halaman blogger anda, pilih menu Layout buat menu baru dengan nama Daftar Isi. Isi link-nya dengan alamat Page baru yang anda buat tadi. Kemudian Save Template.

Demikian postingan saya kali ini, semoga dengan adanya postingan ini dapat bermanfaat dan menaikkan page rank postingan anda pada blog. Selamat mencoba !

Semoga Bermanfaat ! :)