Showing posts with label Tips blog. Show all posts
Showing posts with label Tips blog. Show all posts

Cara membuat Breadcrumb

Cara membuat Breadcrumb
Hai sobat jumpa lagi dengan Admin saya Agussalikur, kali ini ada yang baru lagi Sobat.Tips blog ini namanya cara membuat Breadcrumb untuk blog sobat. Tutorial ini didapat dari sang Master blog Arlina maksud Admin menyampaikan tips dan trik blogger, yang mungkin berguna untuk blog agan. Penasarankan, nah yuk langsung saja ikuti tips salikur :

Cara membuat Breadcrumb :
1.Anda harus punya blog dahulu.
2.Masuk ke Blogger.
3.Cari Template lalu Edit.
4.Cari kata ]]></skin> saran agar pencarian cepat menggunakan Ctrl+F.
5.Letakkan CSS dibawah ini sebelum ]]></skin>




.breadcrumbs {padding:5px 5px 5px 0px;margin:0px 0px 15px 0px;font size:90%;line-height: 1.4em;border:1px solid #ddd  ;}

Baca : Cara membuat breadcrumb

6.Cari kata <b:includable id='main' var='top'> saran agar pencarian cepat menggunakan Ctrl+F.
7.Jika sudah ditemukan hapus dan ganti dengan teks dibawah ini.




<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- Breadcrumb Untuk Halaman Pos -->

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<div class='breadcrumbs'>

agussalikur : <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>

<b:loop values='data:post.labels' var='label'>

/ <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=5&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>

</b:loop>

/ <span><data:post.title/></span>

</div>

<b:else/>

<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>

</b:if>

</b:loop>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<!-- Breadcrumb Untuk Label Search dan Search Pages -->

<div class='breadcrumbs'>

<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived For <data:blog.pageName/></span>

</div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<div class='breadcrumbs'>

<b:if cond='data:blog.pageName == &quot;&quot;'>

<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>All Post</span>

<b:else/>

<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>

</b:if>

</div>

</b:if>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

<b:includable id='main' var='top'/>

<b:include data='post' name='Breadcrumb'/>

8.Simpan dan lihat hasilnya.

Catatan: agussalikur kata ini silahkan ganti dengan nama sobat. 


Sumber: Arlinadzgn.com

Sitemap Us

Sitemap Us
Sitemap Us pada menu Topnavigasiku. Yang mungkin saja agans tertarik ingin membuatnya.
Gini gans caranya :
1.Buka blog anda di blogger > Template > Edit
Agans cari <head> letakkan CSS diatas </head> bisa ringkasnya agan pakai <ctrl>+<f>

.table-of-content{background-color:#fff;color:#ddd;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.1)}
.table-of-content .toc-header{color:#fff;font-family:inherit;font-weight:400;font-size:14px;background-color:#333;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-top:1px solid #444;border-bottom:1px solid #222;transition:initial}
.table-of-content .toc-header:hover{background-color:#3a3a3a}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid #ddd;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{background:#3a3a3a;color:#fff}
.table-of-content .toc-header.active:before{border-color:#fff transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#222!important;transition:initial}
.table-of-content a{color:#aaa;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#666;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#fff;text-decoration:none;transition:initial}
.post ol li:before{display:none}

Baca : Cara membuat breadcrumb

2.Silahkan agans membuat Laman baru isi dengan ini.

<div class="table-of-content" id="table-of-content">Loading...
</div>
3.Silahkan tambahkan JavaScriptnya gans.

var toc_config = {
    url: 'https://agussalikur.blogspot.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#009fef;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};

Ini gans yang teramat penting harus ada. Bagusnya letakkan diatas </body>

script src="https://agussalikur.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=_toc"


Juga yang ini bagusnya diatas </body>

script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-tea.js"

Sumber : Blog Arlinadezign
Gimana gans selamat mencoba.

Font Awesome

Font Awesome
Font Awesome
icon
class name
unicode
category
fa-glass&#xf000;Web
fa-music&#xf001;Web
fa-search&#xf002;Web
fa-envelope-o&#xf003;Web
fa-heart&#xf004;Web
fa-star&#xf005;Web
fa-star-o&#xf006;Web
fa-user&#xf007;Web
fa-film&#xf008;Web
fa-th-large&#xf009;Editor
fa-th&#xf00a;Editor
fa-th-list&#xf00b;Editor
fa-check&#xf00c;Web
fa-times&#xf00d;Web
fa-search-plus&#xf00e;Web
fa-search-minus&#xf010;Web
fa-power-off&#xf011;Web
fa-signal&#xf012;Web
fa-cog&#xf013;Web
fa-trash-o&#xf014;Web
fa-home&#xf015;Web
fa-file-o&#xf016;Editor
fa-clock-o&#xf017;Web
fa-road&#xf018;Web
fa-download&#xf019;Web
fa-arrow-circle-o-down&#xf01a;Directional
fa-arrow-circle-o-up&#xf01b;Directional
fa-inbox&#xf01c;Web
fa-play-circle-o&#xf01d;Video
fa-repeat&#xf01e;Editor
fa-refresh&#xf021;Web
fa-list-alt&#xf022;Editor
fa-lock&#xf023;Web
fa-flag&#xf024;Web
fa-headphones&#xf025;Web
fa-volume-off&#xf026;Web
fa-volume-down&#xf027;Web
fa-volume-up&#xf028;Web
fa-qrcode&#xf029;Web
fa-barcode&#xf02a;Web
fa-tag&#xf02b;Web
fa-tags&#xf02c;Web
fa-book&#xf02d;Web
fa-bookmark&#xf02e;Web
fa-print&#xf02f;Web
fa-camera&#xf030;Web
fa-font&#xf031;Editor
fa-bold&#xf032;Editor
fa-italic&#xf033;Editor
fa-text-height&#xf034;Editor
fa-text-width&#xf035;Editor
fa-align-left&#xf036;Editor
fa-align-center&#xf037;Editor
fa-align-right&#xf038;Editor
fa-align-justify&#xf039;Editor
fa-list&#xf03a;Editor
fa-outdent&#xf03b;Editor
fa-indent&#xf03c;Editor
fa-video-camera&#xf03d;Web
fa-picture-o&#xf03e;Web
fa-pencil&#xf040;Web
fa-map-marker&#xf041;Web
fa-adjust&#xf042;Web
fa-tint&#xf043;Web
fa-pencil-square-o&#xf044;Web
fa-share-square-o&#xf045;Web
fa-check-square-o&#xf046;Form, Web
fa-move&#xf047;Web
fa-step-backward&#xf048;Video
fa-fast-backward&#xf049;Video
fa-backward&#xf04a;Video
fa-play&#xf04b;Video
fa-pause&#xf04c;Video
fa-stop&#xf04d;Video
fa-forward&#xf04e;Video
fa-fast-forward&#xf050;Video
fa-step-forward&#xf051;Video
fa-eject&#xf052;Video
fa-chevron-left&#xf053;Directional
fa-chevron-right&#xf054;Directional
fa-plus-circle&#xf055;Web
fa-minus-circle&#xf056;Web
fa-times-circle&#xf057;Web
fa-check-circle&#xf058;Web
fa-question-circle&#xf059;Web
fa-info-circle&#xf05a;Web
fa-crosshairs&#xf05b;Web
fa-times-circle-o&#xf05c;Web
fa-check-circle-o&#xf05d;Web
fa-ban&#xf05e;Web
fa-arrow-left&#xf060;Directional
fa-arrow-right&#xf061;Directional
fa-arrow-up&#xf062;Directional
fa-arrow-down&#xf063;Directional
fa-share&#xf064;Web
fa-resize-full&#xf065;Video
fa-resize-small&#xf066;Video
fa-plus&#xf067;Web
fa-minus&#xf068;Web
fa-asterisk&#xf069;Web
fa-exclamation-circle&#xf06a;Web
fa-gift&#xf06b;Web
fa-leaf&#xf06c;Web
fa-fire&#xf06d;Web
fa-eye&#xf06e;Web
fa-eye-slash&#xf070;Web
fa-exclamation-triangle&#xf071;Web
fa-plane&#xf072;Web
fa-calendar&#xf073;Web
fa-random&#xf074;Web
fa-comment&#xf075;Web
fa-magnet&#xf076;Web
fa-chevron-up&#xf077;Directional
fa-chevron-down&#xf078;Directional
fa-retweet&#xf079;Web
fa-shopping-cart&#xf07a;Web
fa-folder&#xf07b;Web
fa-folder-open&#xf07c;Web
fa-resize-vertical&#xf07d;Web
fa-resize-horizontal&#xf07e;Web
fa-bar-chart-o&#xf080;Web
fa-twitter-square&#xf081;Brand
fa-facebook-square&#xf082;Brand
fa-camera-retro&#xf083;Web
fa-key&#xf084;Web
fa-cogs&#xf085;Web
fa-comments&#xf086;Web
fa-thumbs-o-up&#xf087;Web
fa-thumbs-o-down&#xf088;Web
fa-star-half&#xf089;Web
fa-heart-o&#xf08a;Web
fa-sign-out&#xf08b;Web
fa-linkedin-square&#xf08c;Brand
fa-thumb-tack&#xf08d;Web
fa-external-link&#xf08e;Web
fa-sign-in&#xf090;Web
fa-trophy&#xf091;Web
fa-github-square&#xf092;Brand
fa-upload&#xf093;Web
fa-lemon-o&#xf094;Web
fa-phone&#xf095;Web
fa-square-o&#xf096;Form, Web
fa-bookmark-o&#xf097;Web
fa-phone-square&#xf098;Web
fa-twitter&#xf099;Brand
fa-facebook&#xf09a;Brand
fa-github&#xf09b;Brand
fa-unlock&#xf09c;Web
fa-credit-card&#xf09d;Web
fa-rss&#xf09e;Web
fa-hdd-o&#xf0a0;Web
fa-bullhorn&#xf0a1;Web
fa-bell&#xf0f3;Web
fa-certificate&#xf0a3;Web
fa-hand-o-right&#xf0a4;Directional
fa-hand-o-left&#xf0a5;Directional
fa-hand-o-up&#xf0a6;Directional
fa-hand-o-down&#xf0a7;Directional
fa-arrow-circle-left&#xf0a8;Directional
fa-arrow-circle-right&#xf0a9;Directional
fa-arrow-circle-up&#xf0aa;Directional
fa-arrow-circle-down&#xf0ab;Directional
fa-globe&#xf0ac;Web
fa-wrench&#xf0ad;Web
fa-tasks&#xf0ae;Web
fa-filter&#xf0b0;Web
fa-briefcase&#xf0b1;Web
fa-fullscreen&#xf0b2;Video
fa-group&#xf0c0;Web
fa-link&#xf0c1;Editor
fa-cloud&#xf0c2;Web
fa-flask&#xf0c3;Web
fa-scissors&#xf0c4;Editor
fa-files-o&#xf0c5;Editor
fa-paperclip&#xf0c6;Editor
fa-floppy-o&#xf0c7;Editor
fa-square&#xf0c8;Form, Web
fa-reorder&#xf0c9;Web
fa-list-ul&#xf0ca;Editor
fa-list-ol&#xf0cb;Editor
fa-strikethrough&#xf0cc;Editor
fa-underline&#xf0cd;Editor
fa-table&#xf0ce;Editor
fa-magic&#xf0d0;Web
fa-truck&#xf0d1;Web
fa-pinterest&#xf0d2;Brand
fa-pinterest-square&#xf0d3;Brand
fa-google-plus-square&#xf0d4;Brand
fa-google-plus&#xf0d5;Brand
fa-money&#xf0d6;Currency, Web
fa-caret-down&#xf0d7;Directional
fa-caret-up&#xf0d8;Directional
fa-caret-left&#xf0d9;Directional
fa-caret-right&#xf0da;Directional
fa-columns&#xf0db;Editor
fa-sort&#xf0dc;Web
fa-sort-asc&#xf0dd;Web
fa-sort-desc&#xf0de;Web
fa-envelope&#xf0e0;Web
fa-linkedin&#xf0e1;Brand
fa-undo&#xf0e2;Editor
fa-gavel&#xf0e3;Web
fa-tachometer&#xf0e4;Web
fa-comment-o&#xf0e5;Web
fa-comments-o&#xf0e6;Web
fa-bolt&#xf0e7;Web
fa-sitemap&#xf0e8;Web
fa-umbrella&#xf0e9;Web
fa-clipboard&#xf0ea;Editor
fa-lightbulb-o&#xf0eb;Web
fa-exchange&#xf0ec;Web
fa-cloud-download&#xf0ed;Web
fa-cloud-upload&#xf0ee;Web
fa-user-md&#xf0f0;Medical
fa-stethoscope&#xf0f1;Medical
fa-suitcase&#xf0f2;Web
fa-bell-o&#xf0a2;Web
fa-coffee&#xf0f4;Web
fa-cutlery&#xf0f5;Web
fa-file-text-o&#xf0f6;Editor
fa-building&#xf0f7;Web
fa-hospital&#xf0f8;Medical
fa-ambulance&#xf0f9;Medical
fa-medkit&#xf0fa;Medical
fa-fighter-jet&#xf0fb;Web
fa-beer&#xf0fc;Web
fa-h-square&#xf0fd;Medical
fa-plus-square&#xf0fe;Medical, Web
fa-angle-double-left&#xf100;Directional
fa-angle-double-right&#xf101;Directional
fa-angle-double-up&#xf102;Directional
fa-angle-double-down&#xf103;Directional
fa-angle-left&#xf104;Directional
fa-angle-right&#xf105;Directional
fa-angle-up&#xf106;Directional
fa-angle-down&#xf107;Directional
fa-desktop&#xf108;Web
fa-laptop&#xf109;Web
fa-tablet&#xf10a;Web
fa-mobile&#xf10b;Web
fa-circle-o&#xf10c;Form, Web
fa-quote-left&#xf10d;Web
fa-quote-right&#xf10e;Web
fa-spinner&#xf110;Web
fa-circle&#xf111;Form, Web
fa-reply&#xf112;Web
fa-github-alt&#xf113;Brand
fa-folder-o&#xf114;Web
fa-folder-open-o&#xf115;Web
fa-expand-o&#xf116;Web
fa-collapse-o&#xf117;Web
fa-smile-o&#xf118;Web
fa-frown-o&#xf119;Web
fa-meh-o&#xf11a;Web
fa-gamepad&#xf11b;Web
fa-keyboard-o&#xf11c;Web
fa-flag-o&#xf11d;Web
fa-flag-checkered&#xf11e;Web
fa-terminal&#xf120;Web
fa-code&#xf121;Web
fa-reply-all&#xf122;Web
fa-mail-reply-all&#xf122;Web
fa-star-half-o&#xf123;Web
fa-location-arrow&#xf124;Web
fa-crop&#xf125;Web
fa-code-fork&#xf126;Web
fa-chain-broken&#xf127;Editor
fa-question&#xf128;Web
fa-info&#xf129;Web
fa-exclamation&#xf12a;Web
fa-superscript&#xf12b;Web
fa-subscript&#xf12c;Web
fa-eraser&#xf12d;Editor, Web
fa-puzzle-piece&#xf12e;Web
fa-microphone&#xf130;Web
fa-microphone-slash&#xf131;Web
fa-shield&#xf132;Web
fa-calendar-o&#xf133;Web
fa-fire-extinguisher&#xf134;Web
fa-rocket&#xf135;Web
fa-maxcdn&#xf136;Brand
fa-chevron-circle-left&#xf137;Directional
fa-chevron-circle-right&#xf138;Directional
fa-chevron-circle-up&#xf139;Directional
fa-chevron-circle-down&#xf13a;Directional
fa-html5&#xf13b;Brand
fa-css3&#xf13c;Brand
fa-anchor&#xf13d;Web
fa-unlock-o&#xf13e;Web
fa-bullseye&#xf140;Web
fa-ellipsis-horizontal&#xf141;Web
fa-ellipsis-vertical&#xf142;Web
fa-rss-square&#xf143;Web
fa-play-circle&#xf144;Video
fa-ticket&#xf145;Web
fa-minus-square&#xf146;Form, Web
fa-minus-square-o&#xf147;Form, Web
fa-level-up&#xf148;Web
fa-level-down&#xf149;Web
fa-check-square&#xf14a;Form, Web
fa-pencil-square&#xf14b;Web
fa-external-link-square&#xf14c;Web
fa-share-square&#xf14d;Web
fa-compass&#xf14e;Web
fa-caret-square-o-down&#xf150;Directional, Web
fa-caret-square-o-up&#xf151;Directional, Web
fa-caret-square-o-right&#xf152;Directional, Web
fa-eur&#xf153;Currency
fa-gbp&#xf154;Currency
fa-usd&#xf155;Currency
fa-inr&#xf156;Currency
fa-jpy&#xf157;Currency
fa-rub&#xf158;Currency
fa-krw&#xf159;Currency
fa-btc&#xf15a;Brand, Currency
fa-file&#xf15b;Editor
fa-file-text&#xf15c;Editor
fa-sort-alpha-asc&#xf15d;Web
fa-sort-alpha-desc&#xf15e;Web
fa-sort-amount-asc&#xf160;Web
fa-sort-amount-desc&#xf161;Web
fa-sort-numeric-asc&#xf162;Web
fa-sort-numeric-desc&#xf163;Web
fa-thumbs-up&#xf164;Web
fa-thumbs-down&#xf165;Web
fa-youtube-square&#xf166;Brand
fa-youtube&#xf167;Brand
fa-xing&#xf168;Brand
fa-xing-square&#xf169;Brand
fa-youtube-play&#xf16a;Brand, Video
fa-dropbox&#xf16b;Brand
fa-stack-overflow&#xf16c;Brand
fa-instagram&#xf16d;Brand
fa-flickr&#xf16e;Brand
fa-adn&#xf170;Brand
fa-bitbucket&#xf171;Brand
fa-bitbucket-square&#xf172;Brand
fa-tumblr&#xf173;Brand
fa-tumblr-square&#xf174;Brand
fa-long-arrow-down&#xf175;Directional
fa-long-arrow-up&#xf176;Directional
fa-long-arrow-left&#xf177;Directional
fa-long-arrow-right&#xf178;Directional
fa-apple&#xf179;Brand
fa-windows&#xf17a;Brand
fa-android&#xf17b;Brand
fa-linux&#xf17c;Brand
fa-dribbble&#xf17d;Brand
fa-skype&#xf17e;Brand
fa-foursquare&#xf180;Brand
fa-trello&#xf181;Brand
fa-female&#xf182;Web
fa-male&#xf183;Web
fa-gittip&#xf184;Brand
fa-sun-o&#xf185;Web
fa-moon-o&#xf186;Web
fa-archive&#xf187;Web
fa-bug&#xf188;Web
fa-vk&#xf189;Brand
fa-weibo&#xf18a;Brand
fa-renren&#xf18b;Brand
fa-pagelines&#xf18c;Brand
fa-stack-exchange&#xf18d;Brand
fa-arrow-circle-o-right&#xf18e;Directional
fa-arrow-circle-o-left&#xf190;Directional
fa-caret-square-o-left&#xf191;Directional, Web
fa-dot-circle-o&#xf192;Form, Web
fa-wheelchair&#xf193;Medical, Web
fa-vimeo-square&#xf194;Brand
fa-try&#xf195;Currency

Widged Daftar Isi

Widged Daftar Isi
Widged Daftar Isi hasil karya blog tetangga Arlina.
Widged ini mungkin bisa mempercantikan blog yang kita miliki.
Widged Daftar Isi. Ok kita langsung saja cara memakai widged ini.

Buka Blogger  =>buka blog kita  => laman  =>laman baru => publikasikan.

<div dir="ltr" style="text-align:left;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)}
.table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial}
.table-of-content .toc-header:hover{background-color:#fdfdfd}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{color:#fc4f3f}
.table-of-content .toc-header.active:before{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#444359!important;transition:initial}
.table-of-content a{color:#d9d9d9;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#a2a2a9;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#ffc937;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
    url: 'http://agussalikur.blogspot.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-tea.js"></script>
</div>


Simpan. gampangkan. Selamat mencoba gays.

Menu Navigasi Atas

Menu Navigasi Atas
Menu Navigasi Atas
Hai jumpa lagi dengan Agussalikur, ada yang baru lagi Sobat. Tips blog ini namanya Menu Navigasi Atas untuk blog sobat. Tutorial ini didapat dari blog tetangga, yang mungkin berguna untuk blog anda. Yuk ikuti tips aku :

Cara membuat Menu Navigasi Atas:
1.Anda harus punya blog dahulu.
2.Masuk ke Blogger.
3.Cari Template lalu Edit.
4.Cari kata ]]></skin> saran agar pencarian cepat menggunakan Ctrl+F.
5.Letakkan CSS dibawah ini sebelum ]]></skin>

CSS
/* CSS Top Navigation */
.top-menunavisal {display:block;margin:0 auto;float:left;padding:0;width:100%;max-width:1000px;background:transparent;

border:none;}

.top-menunavisal ul {width:100%;padding:0;margin:0 auto;text-align:left;}

.top-menunavisal li {list-style-type:none;float:left;padding:0;margin:0;}

.top-menunavisal li a{position:relative;font-family:&#39;Open Sans&#39;;font-size:14px;font-weight:400;background-color:transparent;color:#768187;display:block;margin:0;padding:20px 15px;line-height:100%;transition:color .3s}

.top-menunavisal ul li a:active, .top-menunavisal ul li.highlight a {line-height:100%;text-decoration:none;}

.top-menunavisal ul li a:hover {background:#111211;border-bottom: 1px solid #C6EB04;color: #C6EB04;

    text-shadow: 0px 0px 10px #C6EB04, 0px 0px 20px #C6EB04, 0px 0px 30px #C6EB04;text-decoration:none;}

.top-menunavisal a#pull {display:none;}

.top-menunavisal li.armember,.top-menunavisal li.armember2,.top-menunavisal li.codepen,.top-menunavisal li.soundcloud,

.top-menunavisal li.arjoin,.top-menunavisal li.armember3{text-align:center;color:#768187;float:right;}

.top-menunavisal li a.armember:hover,.top-menunavisal li a.armember2:hover,.top-menunavisal li a.codepen:hover,

.top-menunavisal li a.soundcloud:hover,.top-menunavisal li a.arjoin:hover{color:#888;}

.top-menunavisal li i{font-weight:normal;color:#333;transition:color .3s;}

.top-menunavisal ul li:hover i{color:#888;}

.top-menunavisal li.armember3{position:relative;transition:all .3s;}

li.armember3:after{position:absolute;content:&#39;1&#39;;right:2px;top:7px;background:#51b1eb;color:#fff;padding:0;width:18px;height:18px;line-height:18px;border:2px solid #fff;border-radius:4px;font-size:80%;transform:scale(1.0);transition:all .3s ease;}

.top-menunavisal ul li.armember3:hover:after{transform:scale(0.9)}

.top-menunavisal li.infoazzahra{border:0;}

.top-menunavisal li.infoazzahra a{background:#ff675c;color:#C6EB04;display:block;margin:16px 0;padding:4px 8px;border-radius:3px;font-size:90%;font-weight:700;transition:background-color .3s}

.top-menunavisal li.infoazzahra a:hover{background:#e4554b;color:#fff;}


Untuk HTML nya ini

HTML

<nav class='top-menunavisal'>

<ul style=''>

<li><a href='/p/tentang-agussalikur.html' title='About Us'><i class='fa fa-user'/> About</a></li>

<li><a href='/p/sitemap.html' title='Our Sitemap'><i class='fa fa-globe'/> Sitemap</a></li>

<li><a href='/p/contact.html' title='Contact us'><i class='fa fa-phone'/> Contact</a></li>

<li><a href='/p/privacy-policy.html' title='Privacy'><i class='fa fa-check-lock'/> Privacy</a></li>

<li><a href='/p/pasang-iklan.html' title='Pasang Iklan'><i class='fa fa-credit-card'/> Pasang Iklan</a></li>

<li class='armember2'><a class='agussalikur-tooltip agussalikur-tooltip-left' data-agussalikur-tooltip='Off Topic' href='http://agussalikur.blogspot.com/2014/08/off-topic.html' target='_blank'><i class='fa fa-coffee'/><span class='inv'/></a></li>

</ul>

<a href='https://agussalikur.blogspot.co.id' id='pull'>MENU</a>

</nav>

Untuk Menunya bekerja sempurna ini Scriptnya

SCRIPT
// Menu Top
$(document).ready(function(){var str=location.href.toLowerCase();$('.top-menunavisal ul li a').each(function(){if(str.indexOf(this.href.toLowerCase())>-1){$("li.highlight").removeClass("highlight");$(this).parent().addClass("highlight")}})})
$(function(){var pull=$('#pull');menu=$('.top-menunavisal ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&&menu.is(':hidden')){menu.removeAttr('style')}})});

Countdown

Hai sobat Agussalikur berjumpa kembali ! Kali ini admin berbagi tips seputar blogger dalam topik Time Countdown, kebetulan admin contohkan m...