Blog hiện nay là một phương tiện truyền tải thông tin rất được ưa chuông, tuy không được sử dụng rộng rãi như facebook, nhưng nó có nhiều cái mà những người có sở thích viết lách hay dùng. Thậm chí trong Marketting Online, blog được sử dụng để là, môi trường tiếp thị online rất hiệu quả cho những ai chưa có khả năng trang bị một domain. Sau đây, tôi xin chia sẻ một vài thủ thuật cơ bản cho các bạn chưa biết cách trang trí blog của mình (chỉ với blogspot), với hi vọng sẽ giúp các bạn ít nhiều gì đó trong quá trình sử dụng. Đây chỉ là một vài kinh nghiệm cá nhân, có thể các bạn sẽ có nhiều thủ thuật hay hơn. Trên tinh thần chia sẻ, hi vọng nhận được nhiều ý kiến chia sẻ.
1. Tạo blog:
Điều này quá đơn giản, nếu bạn nghĩ đến việc viết blog, thì bạn phải biết tới vấn đề này
2. Tiêu đề bài viết | Tiêu đề Blog
Thông thường khi bạn viết một bài mới thì <title> bài viết của bạn sẽ có dạng : Tiêu đề Blog: Tiêu đề bài viết.
Bạn vào trang quản trị blog ---> Mẫu ---> Chỉnh sửa HTML
Bấm Ctrl F trong phần mã HTML để tìm <title><data:blog.pageTitle/></title>
Copy đoạn code bên dưới và paste (dán) đè lên đoạn tô màu vàng vừa tìm được:
<b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/> | <data:blog.title/></title><b:else/><title><data:blog.pageTitle/></title></b:if>
Xong bấm Lưu mẫu để hoàn thành!
3. Tạo Menu ngang cho blogspot
Bạn muốn có một thanh menu ngang như thế nào, với mỗi item là một chuyên mục bạn muốn trên trang blogspot.
- Bấm vào "Thiết kế" trên thanh điều khiển sẽ hiện ra giao diện "Trang tổng quan". Tìm trong giao diện vừa hiện ra nút "Bố cục" và bấm vào đó. Một giao diện khác hiện ra, bấm "Thêm tiện ích
- Trong bảng "Thêm tiện ích" hiện ra - bấm "HTML/Javascript"
- Tại giao diện "Định cấu hình HTML/JavaScript" - để trống tiêu đề và dán toàn bộ code trong khung dưới vào vị trí tương ứng.
<ul>
<li><a href="/">TRANG CHỦ</a></li>
<li><a href="LINK NHÃN
1">TÊN NHÃN 1</a></li>
<li><a href="LINK NHÃN 2">TÊN NHÃN 2</a></li>
<li><a href="LINK NHÃN
3">TÊN NHÃN 3</a></li>
</ul>
4. Tạo nhãn (Chuyên mục) và sử dụng:
Chúng ta cần chia trang blogspot của chúng ta thành nhiều mục/chuyên mục... để tiện trong việc sắp xếp các bài đăng. Như trên mục 3 chúng ta tạo menu, mỗi menu sẽ là một chuyên mục, và được gắn với 1 link nhất định. Các bài đăng trong chuyên mục đó sẽ hiện thị khi ta click vào trên menu.
- Để tạo nhãn/chuyên mục, khi viết bài mới, chúng ta để ý sang vùng phía bên trái, có khung Nhãn, click vào đó sẽ hiện thị một khung cho chúng ta nhập, hoặc có thể chọn từ những nhãn có sẵn. Nhấn Hoàn thành để kết thúc việc tạo nhãn
Để lấy Link của nhãn và đưa vào menu, chúng ta xem bài viết, sau đó click chuột phải ở nhãn/chuyên mục cuối bài đăng, chọn copy link address, sau đó thêm vào link trên menu.
5. Thu gọn một phần bài viết để hiện thị trên trang chủ
Ở trang chủ blogspot, nếu các bài viết hiện thị một các đầy đủ, trang chủ nhìn sẽ rất rối mắt, các bài cũ hơn sẽ phải trôi xuống tận phía dưới khiến người xem khó chịu. Vậy chúng ta cần thu gọn một phần của bài viết, và chỉ phần đó mới hiện thị trên trang chủ, người xem muốn xem chi tiết nội dung bài viết sẽ mở bài viết ra và đọc chi tiết hết bài. Kiểu như thế này:
Điều này thực sự rất đơn giản, trong khi viết bài viết, chúng ta thấy có một công cụ hình tờ giấy cắt đôi theo dấu răng cưa, chỉ cần đặt công cụ đó ở đoạn mà chúng ta muốn lấy để hiện thị trên trang chủ (lấy từ đầu bài viết tới dấu đó). Và chúng ta sẽ được như sau:
Sau khi bạn lưu bài, nó sẽ hiện thị phần từ đầu cho đến dấu ngắt nhảy trên trang chủ, như vậy nhìn trang chủ có vẻ chuyên nghiệp và thân thiện hơn.
6. Tạo lưu trữ dạng lịch
- Thêm tiện ích lưu trữ blog vào bố cục blog:
- Chọn các option như hình:
- Sau đó vào Mẫu --> Chỉnh sửa Html, nhấp chuột vào phần mã code, Ctr+F để tìm đếm dòng code
<b:widget id='BlogArchive1' locked='false' title='Lưu trữ' type='BlogArchive' version='1' visible='true'>
và thay thế bằng
<b:widget id='BlogArchive1' locked='false' title='Lưu trữ' type='BlogArchive' version='1' visible='true'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <div id='ArchiveList'> <div expr:id='data:widget.instanceId + "_ArchiveList"'> <b:if cond='data:style == "HIERARCHY"'> <b:include data='data' name='interval'/> </b:if> <b:if cond='data:style == "FLAT"'> <b:include data='data' name='flat'/> </b:if> <b:if cond='data:style == "MENU"'> <b:include data='data' name='menu'/> </b:if> </div> </div> <b:include name='quickedit'/> </div></b:includable> <b:includable id='flat' var='data'><div id='bloggerCalendarList'> <ul> <b:loop values='data:data' var='i'> <li class='archivedate'> <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>) </li> </b:loop> </ul></div><div id='blogger_calendar' style='display:none'><table border='1' id='bcalendar' style='border: 1px solid green' width='250px'><caption id='bcaption'></caption><!-- Table Header --><thead id='bcHead'/><!-- Table Footer --><!-- Table Body --><tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr><tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr><tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr><tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr><tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr><tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr></tbody></table><table id='bcNavigation' style='border: 1px solid green' width='250px'><tr><td id='bcFootPrev'/><td id='bcFootAll'/><td id='bcFootNext'/></tr></table> <div id='calLoadingStatus' style='display:none; text-align:center;'><script type='text/javascript'>bcLoadStatus();</script></div><div id='calendarDisplay'/></div><script type='text/javascript'> initCal();</script></b:includable> <b:includable id='interval' var='intervalData'> Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format</b:includable> <b:includable id='menu' var='data'> Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format</b:includable> <b:includable id='posts' var='posts'>.
Sau đó tìm đền dòng code </head>. chép đoạn code sau chèn ngay phía trên của thẻ </head>
<!-- Blogger Archive Calendar by www.MyBloggerTricks.com --><script type='text/javascript'>//<![CDATA[var bcLoadingImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN8HcjVXy_pE72A9uGr03-L5YJ2UtUk4x-7ffQQXWMABCdg2i21CtY5POQVVudatxIvKtLsVHUPvos07btMfY_dU0vzFF4Z1s_TAQVKa7ods9NaRtzIviq5fFKGg5lESI6iHqzuqneJRI/s400/loading-trans.gif.png";var bcLoadingMessage = " Đang tải....";var bcArchiveNavText = "Xem lưu trữ";var bcArchiveNavPrev = '◄ Trước ';var bcArchiveNavNext = ' Sau ►';var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];var headInitial = ["CN","T2","T3","T4","T5","T6","T7"];// Nothing to configure past this point ----------------------------------var timeOffset;var bcBlogID;var calMonth;var calDay = 1;var calYear;var startIndex;var callmth;var bcNav = new Array ();var bcList = new Array ();//Initialize Fill Arrayvar fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"];function openStatus(){ document.getElementById('calLoadingStatus').style.display = 'block'; document.getElementById('calendarDisplay').innerHTML = ''; }function closeStatus(){ document.getElementById('calLoadingStatus').style.display = 'none'; }function bcLoadStatus(){ cls = document.getElementById('calLoadingStatus'); img = document.createElement('img'); img.src = bcLoadingImage; img.style.verticalAlign = 'middle'; cls.appendChild(img); txt = document.createTextNode(bcLoadingMessage); cls.appendChild(txt); }function callArchive(mth,yr,nav){// Check for Leap Years if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) { fill[2] = '29'; } else { fill[2] = '28'; } calMonth = mth; calYear = yr; if(mth.charAt(0) == 0){ calMonth = mth.substring(1); } callmth = mth; bcNavAll = document.getElementById('bcFootAll'); bcNavPrev = document.getElementById('bcFootPrev'); bcNavNext = document.getElementById('bcFootNext'); bcSelect = document.getElementById('bcSelection'); a = document.createElement('a'); at = document.createTextNode(bcArchiveNavText); a.href = bcNav[nav]; a.appendChild(at); bcNavAll.innerHTML = ''; bcNavAll.appendChild(a); bcNavPrev.innerHTML = ''; bcNavNext.innerHTML = ''; if(nav < bcNav.length -1){ a = document.createElement('a'); a.innerHTML = bcArchiveNavPrev; bcp = parseInt(nav,10) + 1; a.href = bcNav[bcp]; a.title = 'Previous Archive'; prevSplit = bcList[bcp].split(','); a.onclick = function(){bcSelect.options[bcp].selected = true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;}; bcNavPrev.appendChild(a);
} if(nav > 0){ a = document.createElement('a'); a.innerHTML = bcArchiveNavNext; bcn = parseInt(nav,10) - 1; a.href = bcNav[bcn]; a.title = 'Next Archive'; nextSplit = bcList[bcn].split(','); a.onclick = function(){bcSelect.options[bcn].selected = true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;}; bcNavNext.appendChild(a); } script = document.createElement('script'); script.src = 'https://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive'; document.getElementsByTagName('head')[0].appendChild(script);}function cReadArchive(root){// Check for Leap Years if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) { fill[2] = '29'; } else { fill[2] = '28'; } closeStatus(); document.getElementById('lastRow').style.display = 'none'; calDis = document.getElementById('calendarDisplay'); var feed = root.feed; var total = feed.openSearch$totalResults.$t; var entries = feed.entry || []; var fillDate = new Array(); var fillTitles = new Array(); fillTitles.length = 32; var ul = document.createElement('ul'); ul.id = 'calendarUl'; for (var i = 0; i < feed.entry.length; ++i) { var entry = feed.entry[i]; for (var j = 0; j < entry.link.length; ++j) { if (entry.link[j].rel == "alternate") { var link = entry.link[j].href; } } var title = entry.title.$t; var author = entry.author[0].name.$t; var date = entry.published.$t; var summary = entry.summary.$t; isPublished = date.split('T')[0].split('-')[2]; if(isPublished.charAt(0) == '0'){ isPublished = isPublished.substring(1); } fillDate.push(isPublished); if (fillTitles[isPublished]){ fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title; } else { fillTitles[isPublished] = title; } li = document.createElement('li'); li.style.listType = 'none'; li.style.textAlign = "left"; li.innerHTML = '<a href="'+link+'">'+title+'</a>'; ul.appendChild(li); } calDis.appendChild(ul); var val1 = parseInt(calDay, 10) var valxx = parseInt(calMonth, 10); var val2 = valxx - 1; var val3 = parseInt(calYear, 10); var firstCalDay = new Date(val3,val2,1); var val0 = firstCalDay.getDay(); startIndex = val0 + 1; var dayCount = 1; for (x =1; x < 38; x++){ var cell = document.getElementById('cell'+x); if( x < startIndex){ cell.innerHTML = ' '; cell.className = 'firstCell'; cell.style.backgroundColor = "transparent"; } if( x >= startIndex){ cell.innerHTML = dayCount; cell.className = 'filledCell'; cell.style.backgroundColor = "transparent"; for(p = 0; p < fillDate.length; p++){ if(dayCount == fillDate[p]){ if(fillDate[p].length == 1){ fillURL = '0'+fillDate[p]; } else { fillURL = fillDate[p]; } cell.className = 'highlightCell'; cell.style.backgroundColor = "#9ddfe1"; cell.innerHTML = '<a href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'" title="'+fillTitles[fillDate[p]].replace(/"/g,'\'')+'">'+dayCount+'</a>'; } } if( dayCount > fill[valxx]){ cell.innerHTML = ' '; cell.className = 'emptyCell'; } dayCount++; } } visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1; if(visTotal >35){ document.getElementById('lastRow').style.display = ''; } }function initCal(){ document.getElementById('blogger_calendar').style.display = 'block'; var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a'); var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li'); document.getElementById('bloggerCalendarList').style.display = 'none'; calHead = document.getElementById('bcHead'); tr = document.createElement('tr'); for(t = 0; t < 7; t++){ th = document.createElement('th'); th.abbr = headDays[t]; scope = 'col'; th.title = headDays[t]; th.innerHTML = headInitial[t]; tr.appendChild(th); } calHead.appendChild(tr); for (x = 0; x <bcInit.length;x++){ var stripYear= bcInit[x].href.split('_')[0].split('/')[3]; var stripMonth = bcInit[x].href.split('_')[1]; bcList.push(stripMonth + ','+ stripYear + ',' + x); bcNav.push(bcInit[x].href); } var sel = document.createElement('select'); sel.id = 'bcSelection'; sel.onchange = function(){var cSend = this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);}; q = 0; for (r = 0; r <bcList.length; r++){ var selText = bcInit[r].innerHTML; var selCount = bcCount[r].innerHTML.split('> (')[1]; var selValue = bcList[r]; sel.options[q] = new Option(selText + ' ('+selCount,selValue); q++ } document.getElementById('bcaption').appendChild(sel); var m = bcList[0].split(',')[0]; var y = bcList[0].split(',')[1]; callArchive(m,y,'0');}function timezoneSet(root){ var feed = root..
Sau đó lưu mẫu, và xem blog.
Xem thêm Phần 2:
Phaolo Hữu Nghĩa
Không có nhận xét nào:
Đăng nhận xét