//Lusiana Nazilah\\

Jumat, 06 Desember 2013 • 00.36 • 0 Comments

Assalamu'alaikum Wr. Wb

Nah, setelah postingan kemarin bahas tutorial dalam dunia download, sekarang balik lagi ke tutorial seputar dunia blog terutama sesepuh blogger, hahaha

Dan spesialnya buat cewek-cewek blogger seperti saya, pasti pengen dong punya template cute, tapi bingung harus cari dimana. Habisnya rata-rata tempat penyedia template blog gratis yang langsung otomatis ekstensi file .xml langsung main upload ala foto.

Eits, tenang kok ada tempat penyedia template cute. Namanya adalah blogskins. Kalian bisa buka di

http://blogskins.com

Template di sana memang cute, tetapi dalam pengaturan dan seputar code-codenya terbilang sangat rumit untuk blogger pemula seperti saya

Tetapi buat para nekad traveler mau mencoba mengutak-atik sendiri boleh kok. Nah, ku bagi tutorialnya sekarang juga !

1. Buka website blogskin di blogskins.com dan pilih template yang kamu inginkan, kemudian tekan tab "Blogger Main" untuk mendownload basecodenya. Ekstensi file .txt bukan .xml

Buka blogger dashboard kalian, scroll down dan pilih "revert to classic template"

2. Nah, kalau udah ke-download, kalian buka file downloadnya ya, otomatis kebuka pakai aplikasi notepad. Buat yang masih pemula banget, mungkin akan kaget liat codenya, buat edit beberapa code nanti aja setelah liat live previewnya. Sekarang copy dan paste kodenya ke Template --- > Edit HTML.

Copy code

Dan pastekan di Edit HTML

3. Preview, dan bisa kalian save. Biasanya, di blogskins bagian HTML yang harus kalian edit adalah isi dari bio kalian, link laman, meletakkan code cbox/shoutmix, dan blogid.

***

YEAY ! Detailed Tutorial it's started

*EDIT CURSOR*

Kalian bisa merubah cursor yang otomatis ada di template blogskins dengan cursor yang kalian inginkan. Langkah awal, kalian cari kode, biar cepet cari kode tekan f3

body {

Dan kemudian paste-kan kode yang ku kasih di bawah kode body {

cursor:url("URL CURSORMU"),text;

*EDIT FAVICON*
Cari kode </style>, dengan menekan f3 agar cepat. Lalu copas kode yang kuberikan dibawah kode </style>

<link href='URL IMAGE' type='image/x-icon'/>

<link href='URL IMAGE' rel='icon' type='image/x-icon'/>

*ENABLE LINK*

Tekan CTRL+F dan cari kode

<$BlogItemTitle$>

Setelah itu, ganti dengan kode ini

<span class="PostTitle">
<a href="<$BlogItemPermalinkURL$>">
<$BlogItemTitle$></a></span>

*ADD COMMENT*
Sebagian dari template di blogskins tidak ada kotak komentar, nah, kalian bisa menambahkannya dengan mencari kode ini

</Blogger>

Setelah menemukannya, copas kode ini

<BlogItemCommentsEnabled><a class="comments" href="https://www.blogger.com/comment.g?blogID=YOUR BLOG ID&postID=<$BlogItemNumber$>&isPopup=true" onclick="window.open('https://www.blogger.com/comment.g?blogID=YOUR BLOG ID&postID=<$BlogItemNumber$>&isPopup=true', 'bloggerPopup', 'toolbar=0,scrollbars=1,location=0,statusbar=1,menubar=0,resizable=1,width=400,height=450');return false;"><$BlogItemCommentCount$> comment(s)</a></BlogItemCommentsEnabled

*EDIT SCROOLBAR*
Carilah kode dibawah ini dengan menekan CTRL+F

a:hover {

Copas kode di bawah ini tepat diatas kode a:hover {

::-webkit-scrollbar {height:13px;width: 8px;background: #f9f9f9;}::-webkit-scrollbar-thumb {background-color: #98AFC7;-moz-border-radius: 2px;border-radius: 2px;}::-webkit-scrollbar-thumb:hover {-moz-border-radius: 2px;border-radius: 2px;background:#659EC7;}

*ADD TOP BUTTON*
Carilah kode dibawah ini dengan menekan CTRL+F

<head>

Setelah menemukan, copas kode dibawah ini tepat dibawah kode <head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type='text/javascript' language='Javascript'>var scrolltotop={//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (1=top).setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},controlHTML: '<img src="URL IMG"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ center of window corneranchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" linksstate: {isvisible:false, shouldvisible:false},scrollup:function(){if (!this.cssfixedsupport) //if control is positioned using JavaScriptthis.$control.css({opacity:0}) //hide control immediately after clicking itvar dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string existsdest=jQuery('#'+dest).offset().topelsedest=0this.$body.animate({scrollTop: dest}, this.setting.scrollduration);},keepfixed:function(){var $window=jQuery(window)var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetxvar controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsetythis.$control.css({left:controlx+'px', top:controly+'px'})},togglecontrol:function(){var scrolltop=jQuery(window).scrollTop()if (!this.cssfixedsupport)this.keepfixed()this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : falseif (this.state.shouldvisible && !this.state.isvisible){this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])this.state.isvisible=true}else if (this.state.shouldvisible==false && this.state.isvisible){this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])this.state.isvisible=false}},init:function(){jQuery(document).ready(function($){var mainobj=scrolltotopvar iebrws=document.allmainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards modemainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>').css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0,
cursor:'pointer'}).attr({title:'Scroll Back to Top'}).click(function(){mainobj.scrollup(); return false}).appendTo('body')if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any textmainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing textmainobj.togglecontrol()$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){mainobj.scrollup()return false})$(window).bind('scroll resize', function(e){mainobj.togglecontrol()})})}}scrolltotop.init()</script>

*LETAK OLDER POST*
Tekan CTRL+F dan cari kode

<blogger>

Setelah itu, copas kode dibawah ini tepat dibawah kode <blogger>

<OlderPosts><a href="<$OlderPosts<OlderPosts><a href="<$OlderPosts<OlderPosts><a href="<$OlderPosts<OlderPosts><a href="<$OlderPosts$>">gt;">amp;gt;">Older Post</a></OlderPosts> | <NewerPosts><a href="<$NewerPosts$>">Newer Posts</a></NewerPosts>

Label: Tutorial

0 Komentar:

Posting Komentar